From 59de2679ad1377652b08e7f2912a39630bb1c3a8 Mon Sep 17 00:00:00 2001 From: log101 Date: Fri, 8 Dec 2023 11:39:54 +0000 Subject: [PATCH] style: extract posts' styles --- assets/scss/_home.scss | 7 - assets/scss/_posts.scss | 55 ++++++++ assets/scss/_variables.scss | 9 ++ assets/scss/style.scss | 129 ++++-------------- layouts/_default/list.html | 2 +- layouts/index.html | 4 +- layouts/partials/header.html | 17 +-- layouts/posts/baseof.html | 40 ++++++ layouts/posts/list.html | 27 ++++ ...s_871e1d33253f63f556fbcaa4227752be.content | 2 +- ...scss_871e1d33253f63f556fbcaa4227752be.json | 2 +- 11 files changed, 168 insertions(+), 126 deletions(-) create mode 100644 assets/scss/_posts.scss create mode 100644 layouts/posts/baseof.html create mode 100644 layouts/posts/list.html diff --git a/assets/scss/_home.scss b/assets/scss/_home.scss index d05c37b..3270635 100644 --- a/assets/scss/_home.scss +++ b/assets/scss/_home.scss @@ -23,13 +23,6 @@ margin-top: 16vh; } -#home-title { - color: $color-dark; - font-family: $default-font; - font-style: normal; - font-weight: 500; - line-height: normal; -} #home-nav { display: flex; diff --git a/assets/scss/_posts.scss b/assets/scss/_posts.scss new file mode 100644 index 0000000..54f7e96 --- /dev/null +++ b/assets/scss/_posts.scss @@ -0,0 +1,55 @@ +@import "variables"; + +#posts-body { + @include default-width; + + display: flex; + flex-direction: column; + justify-content: start; + + height: 100vh; + margin-bottom: 0; +} + +#posts-main { + display: flex; + flex-direction: column; + + font-size: 1.5rem; +} + +#posts-header { + padding-top: 10vh; + + font-size: 20px; + font-style: normal; + font-weight: 400; + + a { + text-decoration: none; + color: #656565; + + &:hover { + text-decoration: underline; + color: #151515; + } + } +} + +#posts-footer { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: end; +} + +.post-item { + a { + color: $color-light-dark; + font-weight: 400; + line-height: 150%; + text-decoration-line: underline; + font-size: 30px; + } +} + diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 9dc1e4c..cbb93be 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -3,3 +3,12 @@ $color-dark: #202020; $color-medium-dark: #303030; $color-grey: #5C5C5C; $color-light-dark: #252525; + +@mixin default-width { + max-width: 720px; + margin: auto; + + @media (max-width: 768px) { + margin: 0px 24px; + } +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index e0d7fe7..82d7703 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,78 +1,21 @@ +@import "variables"; @import "_syntax.scss"; @import "home"; - -$default-font: 'Inter', sans-serif; -$color-dark: #202020; -$color-medium-dark: #303030; -$color-grey: #5C5C5C; -$color-light-dark: #252525; - -@mixin font-style-normal { - font-style: normal; - font-weight: 500; - line-height: normal; -} - -%link-shared { - color: #252525; - font-family: Inter; - font-style: normal; - font-size: 40px; - font-weight: 400; - line-height: 150%; - /* 60px */ - text-decoration-line: underline; -} - -%footer-shared { - width: 100%; - - p { - color: #5C5C5C; - font-family: Inter; - font-size: 20px; - font-style: normal; - font-weight: 300; - line-height: normal; - - display: flex; - gap: 8px; - justify-content: center; - } - - a { - color: #5C5C5C; - font-family: Inter; - font-size: 20px; - font-style: normal; - font-weight: 300; - line-height: normal; - - display: flex; - gap: 8px; - justify-content: center; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} +@import "posts"; body { - font-family: Inter; + font-family: $default-font; line-height: 1.4; background-color: #ebf4f3; margin: 0; } -#post-title { - color: #202020; - font-family: Inter; +#header-title { + color: $color-dark; + font-family: $default-font; font-style: normal; font-weight: 500; line-height: normal; - margin-bottom: 0; } .post-header { @@ -106,53 +49,41 @@ body { } } -#home-footer { - @extend %footer-shared; -} - #site-footer { - @extend %footer-shared; -} + width: 100%; -.posts-group { - width: 400px; -} + p { + color: #5C5C5C; + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: normal; -.back-title { - font-family: Inter; - font-size: 20px; - font-style: normal; - font-weight: 400; + display: flex; + gap: 8px; + justify-content: center; + } a { + color: #5C5C5C; + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: normal; + + display: flex; + gap: 8px; + justify-content: center; text-decoration: none; - color: #656565; &:hover { text-decoration: underline; - color: #151515; } } } -.post-item { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - a { - @extend %link-shared; - font-size: 30px; - } - - .post-day { - @extend %link-shared; - font-size: 30px; - text-decoration: none; - color: #787878; - } -} - .pagination { display: flex; /* Enable flexbox layout */ list-style: none; /* Remove default list styling */ @@ -188,10 +119,6 @@ body { } } -#home-footer { - width: 400px; -} - [aria-disabled="true"] { text-decoration: none !important; } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index d550828..d4216bf 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -3,7 +3,7 @@ {{ end }} {{ define "main" }} -
+
{{- if .Content }}
{{ .Content }} diff --git a/layouts/index.html b/layouts/index.html index 0290c04..b03d965 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Site.Title }}

+
{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7b99f8f..39a56d9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,13 +1,4 @@ - +
+ {{ i18n "backTitle" | safeHTML }} +

{{ i18n ( lower .Title ) }}

+
diff --git a/layouts/posts/baseof.html b/layouts/posts/baseof.html new file mode 100644 index 0000000..c2a914c --- /dev/null +++ b/layouts/posts/baseof.html @@ -0,0 +1,40 @@ + + + + + + + + {{- with .Site.Params.themeColor }} + + + {{- end }} + {{- partial "structured-data.html" . }} + {{- partial "favicons.html" }} + {{.Title}} + {{ range .AlternativeOutputFormats -}} + {{ printf `` .Rel .MediaType.Type .Permalink $.Title | safeHTML }} + {{ end -}} + {{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "css/style.css" . | toCSS | minify | fingerprint -}} + + {{- block "head" . -}}{{- end }} + {{- range .Site.Params.customCSS }} + + {{- end }} + {{ if .IsTranslated }} + {{ range .Translations }} + + {{ end }} + {{ end }} + {{- if templates.Exists "partials/extra-head.html" -}} + {{ partial "extra-head.html" . }} + {{- end }} + + + + {{ block "header" . -}}{{ end -}} + {{ block "main" . -}}{{ end -}} + {{ block "footer" . -}}{{ end }} + + + diff --git a/layouts/posts/list.html b/layouts/posts/list.html new file mode 100644 index 0000000..61a4b3d --- /dev/null +++ b/layouts/posts/list.html @@ -0,0 +1,27 @@ +{{ define "header" }} +{{ partial "header.html" . }} +{{ end }} + +{{ define "main" }} +
+ {{- if .Content }} +
+ {{ .Content }} +
+ {{- end }} + {{ range (.Paginate .Pages.ByPublishDate ).Pages }} +

+ + {{.Title}} + +

+ {{ end }} +
+{{ end }} + +{{ define "footer" }} + +{{ end }} diff --git a/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.content b/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.content index 8d4a746..f4c48e0 100644 --- a/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.content +++ b/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.content @@ -1 +1 @@ -.bg{background-color:#f8f8f8}.chroma{background-color:#f8f8f8;padding:16px;border-radius:4px;border:1px dashed grey}.chroma .lnlinks{outline:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:#dfdfdf}.chroma .lnt{white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .ln{white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .line{display:flex}.chroma .k{color:#a2f;font-weight:700}.chroma .kc{color:#a2f;font-weight:700}.chroma .kd{color:#a2f;font-weight:700}.chroma .kn{color:#a2f;font-weight:700}.chroma .kp{color:#a2f}.chroma .kr{color:#a2f;font-weight:700}.chroma .kt{color:#0b0;font-weight:700}.chroma .na{color:#b44}.chroma .nb{color:#a2f}.chroma .nc{color:#00f}.chroma .no{color:#800}.chroma .nd{color:#a2f}.chroma .ni{color:#999;font-weight:700}.chroma .ne{color:#d2413a;font-weight:700}.chroma .nf{color:#00a000}.chroma .nl{color:#a0a000}.chroma .nn{color:#00f;font-weight:700}.chroma .nt{color:green;font-weight:700}.chroma .nv{color:#b8860b}.chroma .s{color:#b44}.chroma .sa{color:#b44}.chroma .sb{color:#b44}.chroma .sc{color:#b44}.chroma .dl{color:#b44}.chroma .sd{color:#b44;font-style:italic}.chroma .s2{color:#b44}.chroma .se{color:#b62;font-weight:700}.chroma .sh{color:#b44}.chroma .si{color:#b68;font-weight:700}.chroma .sx{color:green}.chroma .sr{color:#b68}.chroma .s1{color:#b44}.chroma .ss{color:#b8860b}.chroma .m{color:#666}.chroma .mb{color:#666}.chroma .mf{color:#666}.chroma .mh{color:#666}.chroma .mi{color:#666}.chroma .il{color:#666}.chroma .mo{color:#666}.chroma .o{color:#666}.chroma .ow{color:#a2f;font-weight:700}.chroma .c{color:#080;font-style:italic}.chroma .ch{color:#080;font-style:italic}.chroma .cm{color:#080;font-style:italic}.chroma .c1{color:#080;font-style:italic}.chroma .cs{color:#080;font-weight:700}.chroma .cp{color:#080}.chroma .cpf{color:#080}.chroma .gd{color:#a00000}.chroma .ge{font-style:italic}.chroma .gr{color:red}.chroma .gh{color:navy;font-weight:700}.chroma .gi{color:#00a000}.chroma .go{color:#888}.chroma .gp{color:navy;font-weight:700}.chroma .gs{font-weight:700}.chroma .gu{color:purple;font-weight:700}.chroma .gt{color:#04d}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbb}#home-main{display:flex;flex-direction:column;align-items:start;justify-content:space-between;height:100vh;max-width:720px;margin:auto;font-size:1.5rem}@media(max-width:768px){#home-main{margin-left:24px}}#home-center{display:flex;flex-direction:column;align-items:flex-start;margin-top:16vh}#home-title{color:#202020;font-family:inter,sans-serif;font-style:normal;font-weight:500;line-height:normal}#home-nav{display:flex;flex-direction:column}#home-nav a{color:#252525;font-family:inter,sans-serif;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}.post-item .post-day,.post-item a{color:#252525;font-family:Inter;font-style:normal;font-size:40px;font-weight:400;line-height:150%;text-decoration-line:underline}#site-footer,#home-footer{width:100%}#site-footer p,#home-footer p{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center}#site-footer a,#home-footer a{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center;text-decoration:none}#site-footer a:hover,#home-footer a:hover{text-decoration:underline}body{font-family:Inter;line-height:1.4;background-color:#ebf4f3;margin:0}#post-title{color:#202020;font-family:Inter;font-style:normal;font-weight:500;line-height:normal;margin-bottom:0}.post-header{margin-bottom:40px}.post-meta{margin-top:.5em}.post-meta span{color:#303030}.post-tags{margin:10px 0;display:flex;gap:6px}.post-tags .tag{font-size:.7em;padding:3px 14px;text-transform:lowercase;border:1px solid;margin-bottom:6px}.post-tags .tag a{outline:none;text-decoration:none;color:#5c5c5c}.posts-group{width:400px}.back-title{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.back-title a{text-decoration:none;color:#656565}.back-title a:hover{text-decoration:underline;color:#151515}.post-item{display:flex;justify-content:space-between;align-items:center;width:100%}.post-item a{font-size:30px}.post-item .post-day{font-size:30px;text-decoration:none;color:#787878}.pagination{display:flex;list-style:none;padding:0;margin:0;justify-content:center;align-items:center;font-family:Inter}.pagination a{text-decoration:none;color:#252525}.pagination .page-item{margin:0}.pagination .page-link{display:block;padding:5px 10px;margin:0 2px}#site-footer{width:100%;user-select:none}#site-footer #copyright{display:flex;align-items:center;justify-content:center}#home-footer{width:400px}[aria-disabled=true]{text-decoration:none!important}.page-item.active a{text-decoration:none!important}.content{max-width:720px;font-size:1em;color:#303030} \ No newline at end of file +.bg{background-color:#f8f8f8}.chroma{background-color:#f8f8f8;padding:16px;border-radius:4px;border:1px dashed grey}.chroma .lnlinks{outline:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:#dfdfdf}.chroma .lnt{white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .ln{white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .line{display:flex}.chroma .k{color:#a2f;font-weight:700}.chroma .kc{color:#a2f;font-weight:700}.chroma .kd{color:#a2f;font-weight:700}.chroma .kn{color:#a2f;font-weight:700}.chroma .kp{color:#a2f}.chroma .kr{color:#a2f;font-weight:700}.chroma .kt{color:#0b0;font-weight:700}.chroma .na{color:#b44}.chroma .nb{color:#a2f}.chroma .nc{color:#00f}.chroma .no{color:#800}.chroma .nd{color:#a2f}.chroma .ni{color:#999;font-weight:700}.chroma .ne{color:#d2413a;font-weight:700}.chroma .nf{color:#00a000}.chroma .nl{color:#a0a000}.chroma .nn{color:#00f;font-weight:700}.chroma .nt{color:green;font-weight:700}.chroma .nv{color:#b8860b}.chroma .s{color:#b44}.chroma .sa{color:#b44}.chroma .sb{color:#b44}.chroma .sc{color:#b44}.chroma .dl{color:#b44}.chroma .sd{color:#b44;font-style:italic}.chroma .s2{color:#b44}.chroma .se{color:#b62;font-weight:700}.chroma .sh{color:#b44}.chroma .si{color:#b68;font-weight:700}.chroma .sx{color:green}.chroma .sr{color:#b68}.chroma .s1{color:#b44}.chroma .ss{color:#b8860b}.chroma .m{color:#666}.chroma .mb{color:#666}.chroma .mf{color:#666}.chroma .mh{color:#666}.chroma .mi{color:#666}.chroma .il{color:#666}.chroma .mo{color:#666}.chroma .o{color:#666}.chroma .ow{color:#a2f;font-weight:700}.chroma .c{color:#080;font-style:italic}.chroma .ch{color:#080;font-style:italic}.chroma .cm{color:#080;font-style:italic}.chroma .c1{color:#080;font-style:italic}.chroma .cs{color:#080;font-weight:700}.chroma .cp{color:#080}.chroma .cpf{color:#080}.chroma .gd{color:#a00000}.chroma .ge{font-style:italic}.chroma .gr{color:red}.chroma .gh{color:navy;font-weight:700}.chroma .gi{color:#00a000}.chroma .go{color:#888}.chroma .gp{color:navy;font-weight:700}.chroma .gs{font-weight:700}.chroma .gu{color:purple;font-weight:700}.chroma .gt{color:#04d}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbb}#home-main{display:flex;flex-direction:column;align-items:start;justify-content:space-between;height:100vh;max-width:720px;margin:auto;font-size:1.5rem}@media(max-width:768px){#home-main{margin-left:24px}}#home-center{display:flex;flex-direction:column;align-items:flex-start;margin-top:16vh}#home-nav{display:flex;flex-direction:column}#home-nav a{color:#252525;font-family:inter,sans-serif;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}#posts-body{max-width:720px;margin:auto;display:flex;flex-direction:column;justify-content:start;height:100vh;margin-bottom:0}@media(max-width:768px){#posts-body{margin:0 24px}}#posts-main{display:flex;flex-direction:column;font-size:1.5rem}#posts-header{padding-top:10vh;font-size:20px;font-style:normal;font-weight:400}#posts-header a{text-decoration:none;color:#656565}#posts-header a:hover{text-decoration:underline;color:#151515}#posts-footer{display:flex;flex-direction:column;flex-grow:1;justify-content:end}.post-item a{color:#252525;font-weight:400;line-height:150%;text-decoration-line:underline;font-size:30px}body{font-family:inter,sans-serif;line-height:1.4;background-color:#ebf4f3;margin:0}#header-title{color:#202020;font-family:inter,sans-serif;font-style:normal;font-weight:500;line-height:normal}.post-header{margin-bottom:40px}.post-meta{margin-top:.5em}.post-meta span{color:#303030}.post-tags{margin:10px 0;display:flex;gap:6px}.post-tags .tag{font-size:.7em;padding:3px 14px;text-transform:lowercase;border:1px solid;margin-bottom:6px}.post-tags .tag a{outline:none;text-decoration:none;color:#5c5c5c}#site-footer{width:100%}#site-footer p{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center}#site-footer a{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center;text-decoration:none}#site-footer a:hover{text-decoration:underline}.pagination{display:flex;list-style:none;padding:0;margin:0;justify-content:center;align-items:center;font-family:Inter}.pagination a{text-decoration:none;color:#252525}.pagination .page-item{margin:0}.pagination .page-link{display:block;padding:5px 10px;margin:0 2px}#site-footer{width:100%;user-select:none}#site-footer #copyright{display:flex;align-items:center;justify-content:center}[aria-disabled=true]{text-decoration:none!important}.page-item.active a{text-decoration:none!important}.content{max-width:720px;font-size:1em;color:#303030} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json b/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json index bb9c046..af8d949 100644 --- a/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json +++ b/resources/_gen/assets/scss/scss/style.scss_871e1d33253f63f556fbcaa4227752be.json @@ -1 +1 @@ -{"Target":"css/style.min.a77d767cbae6cbbfcdb47cbbf0fd53933b11c9cda0327457cbeaba4e78ba951d.css","MediaType":"text/css","Data":{"Integrity":"sha256-p312fLrmy7/NtHy78P1TkzsRyc2gMnRXy+q6Tni6lR0="}} \ No newline at end of file +{"Target":"css/style.min.26ea135eb889d60692c0f2a860f7860686cfbae77281049bc0254f047a21d7b2.css","MediaType":"text/css","Data":{"Integrity":"sha256-JuoTXriJ1gaSwPKoYPeGBobPuudygQSbwCVPBHoh17I="}} \ No newline at end of file