From 8ccc47294e213c44139d90e4971a6ae40ff4a74a Mon Sep 17 00:00:00 2001 From: Ariel Costas <94913521+arielcostas@users.noreply.github.com> Date: Mon, 5 Feb 2024 19:27:58 +0100 Subject: Refactor CSS imports and remove unused styles --- assets/css/_root.scss | 18 ++++ assets/css/base.scss | 11 +-- assets/css/fonts.scss | 15 ---- assets/css/markup/_index.scss | 1 + assets/css/markup/_render-heading.scss | 13 +++ assets/css/markup/render-heading.scss | 13 --- assets/css/partials/_article.scss | 47 +++++++++++ assets/css/partials/_footer.scss | 11 +++ assets/css/partials/_header.scss | 147 +++++++++++++++++++++++++++++++++ assets/css/partials/_index.scss | 3 + assets/css/partials/article.scss | 45 ---------- assets/css/partials/footer.scss | 11 --- assets/css/partials/header.scss | 147 --------------------------------- assets/css/root.scss | 18 ---- layouts/_default/single.html | 2 +- static/fonts/aleo.woff2 | Bin 62932 -> 0 bytes static/fonts/rubik.woff2 | Bin 110796 -> 0 bytes 17 files changed, 244 insertions(+), 258 deletions(-) create mode 100644 assets/css/_root.scss delete mode 100644 assets/css/fonts.scss create mode 100644 assets/css/markup/_index.scss create mode 100644 assets/css/markup/_render-heading.scss delete mode 100644 assets/css/markup/render-heading.scss create mode 100644 assets/css/partials/_article.scss create mode 100644 assets/css/partials/_footer.scss create mode 100644 assets/css/partials/_header.scss create mode 100644 assets/css/partials/_index.scss delete mode 100644 assets/css/partials/article.scss delete mode 100644 assets/css/partials/footer.scss delete mode 100644 assets/css/partials/header.scss delete mode 100644 assets/css/root.scss delete mode 100644 static/fonts/aleo.woff2 delete mode 100644 static/fonts/rubik.woff2 diff --git a/assets/css/_root.scss b/assets/css/_root.scss new file mode 100644 index 0000000..5932125 --- /dev/null +++ b/assets/css/_root.scss @@ -0,0 +1,18 @@ +:root { + --font-heading: "Roboto Slab", "Times New Roman", serif; + --font-body: Arial, Helvetica, sans-serif; + --font-mono: "Fira Code", "Consolas" , monospace; + + font-size: 16px; + font-weight: 400; + line-height: 1.65; + font-family: var(--font-body); + + --accent-1: hsl(152, 90%, 20%); + --accent-2: hsl(152, 90%, 30%); + --accent-3: hsl(152, 90%, 40%); + --accent-4: hsl(152, 90%, 50%); + --accent-5: hsl(152, 90%, 60%); + --accent-6: hsl(152, 90%, 70%); + --accent-7: hsl(152, 90%, 80%); +} \ No newline at end of file diff --git a/assets/css/base.scss b/assets/css/base.scss index bc12617..1181648 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -1,11 +1,6 @@ -@import "fonts.scss"; -@import "root.scss"; - -@import "markup/render-heading.scss"; - -@import "partials/header.scss"; -@import "partials/article.scss"; -@import "partials/footer.scss"; +@import "_root"; +@import "markup/_index"; +@import "partials/_index"; html, body { diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss deleted file mode 100644 index 19511ef..0000000 --- a/assets/css/fonts.scss +++ /dev/null @@ -1,15 +0,0 @@ -@font-face { - font-family: 'Aleo'; - font-style: normal; - font-weight: 100 900; - font-display: swap; - src: url('/fonts/aleo.woff2') format('woff2-variations'); -} - -@font-face { - font-family: 'Rubik'; - font-style: normal; - font-weight: 100 900; - font-display: swap; - src: url('/fonts/rubik.woff2') format('woff2-variations'); -} \ No newline at end of file diff --git a/assets/css/markup/_index.scss b/assets/css/markup/_index.scss new file mode 100644 index 0000000..ead742e --- /dev/null +++ b/assets/css/markup/_index.scss @@ -0,0 +1 @@ +@import "_render-heading"; \ No newline at end of file diff --git a/assets/css/markup/_render-heading.scss b/assets/css/markup/_render-heading.scss new file mode 100644 index 0000000..4fa23a8 --- /dev/null +++ b/assets/css/markup/_render-heading.scss @@ -0,0 +1,13 @@ +main { + h1, h2, h3, h4, h5, h6 { + a { + color: var(--accent-1); + font-weight: 900; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} \ No newline at end of file diff --git a/assets/css/markup/render-heading.scss b/assets/css/markup/render-heading.scss deleted file mode 100644 index 4fa23a8..0000000 --- a/assets/css/markup/render-heading.scss +++ /dev/null @@ -1,13 +0,0 @@ -main { - h1, h2, h3, h4, h5, h6 { - a { - color: var(--accent-1); - font-weight: 900; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } -} \ No newline at end of file diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss new file mode 100644 index 0000000..11da92b --- /dev/null +++ b/assets/css/partials/_article.scss @@ -0,0 +1,47 @@ +main { + margin: 0 auto 3rem; + padding: 1rem; + box-sizing: border-box; + + max-width: 72ch; + width: 100%; + font-size: 1.25rem; + + a { + color: var(--accent-1); + transition: color 0.2s ease-in-out; + + &:hover { + color: var(--accent-2); + } + } + + >* { + margin-top: 0; + margin-bottom: 1.75rem; + } + + >p>code { + word-break: break-word; + font-family: var(--font-mono); + + color: var(--accent-1); + background-color: #f6f6f6; + } + + h1 { + font-size: 2.25rem; + line-height: 1; + margin-bottom: 1rem; + } + + p.meta { + display: block; + font-size: 0.85rem; + margin-bottom: 1rem; + } + + pre { + overflow: scroll; + } +} \ No newline at end of file diff --git a/assets/css/partials/_footer.scss b/assets/css/partials/_footer.scss new file mode 100644 index 0000000..9c6ccc1 --- /dev/null +++ b/assets/css/partials/_footer.scss @@ -0,0 +1,11 @@ +footer { + background-color: #333; + color: white; + text-align: center; + + padding: 0.5rem 1rem; + + a { + color: var(--accent-7); + } +} \ No newline at end of file diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss new file mode 100644 index 0000000..21e746b --- /dev/null +++ b/assets/css/partials/_header.scss @@ -0,0 +1,147 @@ +header { + border-top: 4px solid var(--accent-5); + background-color: #EFEFEF; + color: black; + + display: flex; + flex-direction: column; + justify-content: space-between; + + padding: 0 1rem; + margin-bottom: 1rem; + + a { + display: inline-block; + padding-top: 0.5rem; + padding-bottom: calc(0.5rem - 4px); + } + + #brand { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + + h1 { + font-size: 2rem; + margin: 0; + font-weight: 900; + letter-spacing: 0.15rem; + + a { + text-decoration: none; + } + } + } + + #nav-pages { + display: flex; + flex-direction: column; + align-items: flex-start; + + padding-inline-start: 2.5rem; + + transition: max-height 0.2s linear; + max-height: 100vh; + } + + #nav-socials { + align-self: center; + + display: flex; + gap: 1.5rem; + + transition: max-height 0.2s linear; + max-height: 100vh; + + a { + font-size: 1.5rem; + transition: color 0.2s ease-in-out; + line-height: 1; + } + } + + nav>a { + text-decoration: none; + font-weight: 700; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 0.1rem; + transition: color 0.2s ease-in-out; + + &:hover { + color: var(--accent-3); + } + + &.active { + border-bottom: 2px solid var(--accent-3); + } + } + + button#mobile-menu { + display: block; + background-color: transparent; + border: none; + font-size: 2rem; + cursor: pointer; + } + + &.collapsed { + + #nav-pages, + #nav-socials { + max-height: 0; + overflow: hidden; + } + } +} + +@media (min-width: 480px) { + header { + flex-direction: row; + align-items: center; + justify-content: space-between; + + a { + padding-top: 1rem; + padding-bottom: calc(1rem - 4px); + } + + #nav-pages { + justify-self: start; + flex-direction: row; + gap: 1.5rem; + padding-inline-start: 0; + } + + button#mobile-menu { + display: none; + } + + &.collapsed { + + #nav-pages, + #nav-socials { + display: flex; + max-height: unset; + } + } + } +} + +@media (min-width: 1024px) { + header { + padding: 0 1rem; + gap: 1.5rem; + justify-content: start; + + h1 { + margin-bottom: 0.5rem; + } + + #nav-socials { + align-self: flex-end; + margin-left: auto; + } + } +} \ No newline at end of file diff --git a/assets/css/partials/_index.scss b/assets/css/partials/_index.scss new file mode 100644 index 0000000..914dd5b --- /dev/null +++ b/assets/css/partials/_index.scss @@ -0,0 +1,3 @@ +@import "_article"; +@import "_footer"; +@import "_header"; \ No newline at end of file diff --git a/assets/css/partials/article.scss b/assets/css/partials/article.scss deleted file mode 100644 index f93d460..0000000 --- a/assets/css/partials/article.scss +++ /dev/null @@ -1,45 +0,0 @@ -main { - margin: 0 auto 3rem; - padding: 1rem; - box-sizing: border-box; - - max-width: 65ch; - width: 100%; - font-size: 1.25rem; - - a { - color: var(--accent-1); - transition: color 0.2s ease-in-out; - - &:hover { - color: var(--accent-2); - } - } - - >* { - margin-top: 0; - margin-bottom: 1.75rem; - } - - >p>code { - word-break: break-word; - font-size: 0.9em; - color: var(--accent-1); - } - - h1 { - font-size: 2.25rem; - line-height: 1; - margin-bottom: 1rem; - } - - p.meta { - display: block; - font-size: 0.85rem; - margin-bottom: 1rem; - } - - pre { - overflow: scroll; - } -} \ No newline at end of file diff --git a/assets/css/partials/footer.scss b/assets/css/partials/footer.scss deleted file mode 100644 index 9c6ccc1..0000000 --- a/assets/css/partials/footer.scss +++ /dev/null @@ -1,11 +0,0 @@ -footer { - background-color: #333; - color: white; - text-align: center; - - padding: 0.5rem 1rem; - - a { - color: var(--accent-7); - } -} \ No newline at end of file diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss deleted file mode 100644 index 21e746b..0000000 --- a/assets/css/partials/header.scss +++ /dev/null @@ -1,147 +0,0 @@ -header { - border-top: 4px solid var(--accent-5); - background-color: #EFEFEF; - color: black; - - display: flex; - flex-direction: column; - justify-content: space-between; - - padding: 0 1rem; - margin-bottom: 1rem; - - a { - display: inline-block; - padding-top: 0.5rem; - padding-bottom: calc(0.5rem - 4px); - } - - #brand { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - - h1 { - font-size: 2rem; - margin: 0; - font-weight: 900; - letter-spacing: 0.15rem; - - a { - text-decoration: none; - } - } - } - - #nav-pages { - display: flex; - flex-direction: column; - align-items: flex-start; - - padding-inline-start: 2.5rem; - - transition: max-height 0.2s linear; - max-height: 100vh; - } - - #nav-socials { - align-self: center; - - display: flex; - gap: 1.5rem; - - transition: max-height 0.2s linear; - max-height: 100vh; - - a { - font-size: 1.5rem; - transition: color 0.2s ease-in-out; - line-height: 1; - } - } - - nav>a { - text-decoration: none; - font-weight: 700; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 0.1rem; - transition: color 0.2s ease-in-out; - - &:hover { - color: var(--accent-3); - } - - &.active { - border-bottom: 2px solid var(--accent-3); - } - } - - button#mobile-menu { - display: block; - background-color: transparent; - border: none; - font-size: 2rem; - cursor: pointer; - } - - &.collapsed { - - #nav-pages, - #nav-socials { - max-height: 0; - overflow: hidden; - } - } -} - -@media (min-width: 480px) { - header { - flex-direction: row; - align-items: center; - justify-content: space-between; - - a { - padding-top: 1rem; - padding-bottom: calc(1rem - 4px); - } - - #nav-pages { - justify-self: start; - flex-direction: row; - gap: 1.5rem; - padding-inline-start: 0; - } - - button#mobile-menu { - display: none; - } - - &.collapsed { - - #nav-pages, - #nav-socials { - display: flex; - max-height: unset; - } - } - } -} - -@media (min-width: 1024px) { - header { - padding: 0 1rem; - gap: 1.5rem; - justify-content: start; - - h1 { - margin-bottom: 0.5rem; - } - - #nav-socials { - align-self: flex-end; - margin-left: auto; - } - } -} \ No newline at end of file diff --git a/assets/css/root.scss b/assets/css/root.scss deleted file mode 100644 index 225b3f9..0000000 --- a/assets/css/root.scss +++ /dev/null @@ -1,18 +0,0 @@ -:root { - --font-heading: 'Aleo', "Roboto Slab", "Times New Roman", serif; - --font-body: 'Rubik', Helvetica, sans-serif; - --font-mono: 'Roboto Mono', "Ubuntu Mono", "Fira Code", "Consolas" , monospace; - - font-size: 16px; - font-weight: 400; - line-height: 1.5; - font-family: var(--font-body); - - --accent-1: hsl(152, 90%, 20%); - --accent-2: hsl(152, 90%, 30%); - --accent-3: hsl(152, 90%, 40%); - --accent-4: hsl(152, 90%, 50%); - --accent-5: hsl(152, 90%, 60%); - --accent-6: hsl(152, 90%, 70%); - --accent-7: hsl(152, 90%, 80%); -} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 78c5ccb..f87f4b3 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,7 +2,7 @@

{{ .Title }}

{{ if gt .Date.Unix 0 }} - + {{ end }}

{{ .Content }} diff --git a/static/fonts/aleo.woff2 b/static/fonts/aleo.woff2 deleted file mode 100644 index fe02907..0000000 Binary files a/static/fonts/aleo.woff2 and /dev/null differ diff --git a/static/fonts/rubik.woff2 b/static/fonts/rubik.woff2 deleted file mode 100644 index 759c55f..0000000 Binary files a/static/fonts/rubik.woff2 and /dev/null differ -- cgit v1.3