From 8e372be6b1dfd3ac7f1ad342575aef647dde1849 Mon Sep 17 00:00:00 2001 From: Solomon Laing Date: Mon, 14 Apr 2025 20:48:55 +0930 Subject: [PATCH] now with only css! --- assets/_fonts.scss | 4 - assets/_me.scss | 29 ---- assets/_posts.scss | 13 -- assets/_services.scss | 32 ---- assets/_sidebar.scss | 23 --- assets/_variables.scss | 36 ----- assets/style.scss | 165 --------------------- layouts/_default/baseof.html | 2 +- static/assets/style.css | 279 +++++++++++++++++++++++++++++++++++ 9 files changed, 280 insertions(+), 303 deletions(-) delete mode 100644 assets/_fonts.scss delete mode 100644 assets/_me.scss delete mode 100644 assets/_posts.scss delete mode 100644 assets/_services.scss delete mode 100644 assets/_sidebar.scss delete mode 100644 assets/_variables.scss delete mode 100644 assets/style.scss create mode 100644 static/assets/style.css diff --git a/assets/_fonts.scss b/assets/_fonts.scss deleted file mode 100644 index f3f7ec6..0000000 --- a/assets/_fonts.scss +++ /dev/null @@ -1,4 +0,0 @@ -@font-face{ - font-family: FiraCode; - src: url(fonts/FiraCode-Regular.ttf); -} diff --git a/assets/_me.scss b/assets/_me.scss deleted file mode 100644 index fd67ca9..0000000 --- a/assets/_me.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use "variables" as vars; - -.home { - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - - &__content { - text-align: justify; - max-width: 850px; - - img { - border-radius: 16px; - float: left; - margin: 0 24px 16px 0; - } - } -} - -@media only screen and (max-width: 500px) { - .home { - &__content { - img { - width: 100%; - } - } - } -} diff --git a/assets/_posts.scss b/assets/_posts.scss deleted file mode 100644 index 462119b..0000000 --- a/assets/_posts.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use "variables" as vars; - -.single { - &__title { - margin-bottom: 0; - padding-bottom: 0; - color: vars.$color-orange-dark; - } - - &__date { - color: vars.$color-yellow-dark; - } -} diff --git a/assets/_services.scss b/assets/_services.scss deleted file mode 100644 index f1e9f5f..0000000 --- a/assets/_services.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use "variables" as vars; - -.services { - display: flex; - flex-direction: column; - - // &__title { - // } - - &__list { - width: 100%; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - - .service { - width: 45%; - align-self: center; - margin: 8px 0; - - h2 { - margin: 0; - } - - &__text { - padding: 2px; - line-height: 24px; - background: vars.$color-bg0_h; - } - } - } -} diff --git a/assets/_sidebar.scss b/assets/_sidebar.scss deleted file mode 100644 index c198021..0000000 --- a/assets/_sidebar.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use "variables" as vars; - -.sidebar { - width: 25%; - max-width: 400px; - // background-color: green; - - ul { - list-style: none; - - li { - margin-left: -48px; - padding: 8px;; - } - } -} - -@media screen and (max-width: 800px) { - .sidebar { - width: 100%; - max-width: 100%; - } -} diff --git a/assets/_variables.scss b/assets/_variables.scss deleted file mode 100644 index 56f9b62..0000000 --- a/assets/_variables.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Colour -$color-bg: #282828; -$color-fg: #ebdbb2; -$color-red-dark: #cc241d; -$color-green-dark: #98971a; -$color-yellow-dark: #d79921; -$color-blue-dark: #458588; -$color-purple-dark: #b16286; -$color-aqua-dark: #689d6a; -$color-grey-dark: #928374; -$color-orange-dark: #d65d0e; -$color-red: #fb4934; -$color-green: #b8bb26; -$color-yellow: #fabd2f; -$color-blue: #83a598; -$color-purple: #d3869b; -$color-aqua: #8ec07c; -$color-grey: #a89984; -$color-orange: #fe8019; -$color-bg0_h: #1d2021; -$color_bg0_s: #32302f; -$color-bg0: $color-bg; -$color-bg1: #3c3836; -$color-bg2: #504845; -$color-bg3: #665c54; -$color-bg4: #7c6f64; -$color-fg0: #fbf1c7; -$color-fg1: $color-fg; -$color-fg2: #d5c4a1; -$color-fg3: #bdae93; -$color-fg4: #a89984; - -// Layout -$content-width-norm: 50%; -$content-width-mid: 60%; -$content-width-narrow: 80%; diff --git a/assets/style.scss b/assets/style.scss deleted file mode 100644 index 8577806..0000000 --- a/assets/style.scss +++ /dev/null @@ -1,165 +0,0 @@ -@use "variables" as vars; - -@import "services"; -@import "me"; -@import "posts"; -@import "sidebar"; -@import "fonts"; - -body { - color: vars.$color-fg; - background: vars.$color-bg; - font-family: FiraCode, monospace; -} - -code { - font-family: FiraCode, monospace; -} - -pre code { white-space: pre-wrap; } - -.content-wrapper { - width: vars.$content-width-norm; - padding: 0 calc((100% - #{vars.$content-width-norm}) / 2); -} - -img { - max-width: 100%; -} - -@media only screen and (max-width: 1000px) { - .content-wrapper { - width: vars.$content-width-mid; - padding: 0 calc((100% - #{vars.$content-width-mid}) / 2); - } -} - -@media only screen and (max-width: 800px) { - .content-wrapper { - width: vars.$content-width-narrow; - padding: 0 calc((100% - #{vars.$content-width-narrow}) / 2); - } - - .main { - flex-direction: column; - - &__content { - width: 100% !important; - } - } -} - -.header { - display: block; - // background-color: red; - - &__title { - a, - a:link, - a:hover, - a:visited { - color: vars.$color-orange-dark !important; - } - } - - &__nav { - &__list { - display: flex; - flex-wrap:wrap; - - &__item { - margin-right: 32px; - list-style: none; - } - } - } -} - -.main { - justify-content: space-between; - display: flex; - - &__content { - width: 70%; - // background-color: blue; - } -} - -.summary { - &__title { - a, - a:link, - a:visited { - color: vars.$color-orange-dark; - } - - a:hover { - color: vars.$color-orange; - } - } - - &__date { - margin-bottom: 8px; - - &__time { - &--created { - color: vars.$color-aqua; - } - - &--edited { - color: vars.$color-aqua-dark; - } - } - } - - h2 { - padding-bottom: 0; - margin-bottom: 0; - } -} - -.list { - display: flex; - flex-direction: column; - - &__title { - display: flex; - - h1 { - display: inline; - } - - a { - margin: auto 0 28px 4px; - } - } -} - -.footer { - // background: purple; - text-align: center; -} - -.pagination { - width: 100%; - text-align: center; - padding-top: 16px; -} - -a, -a:visited, -a:hover { - text-decoration: none; - color: vars.$color-blue-dark; -} - -a:hover { - color: vars.$color-blue; -} - -h1, -h2, -h3, -h4 { - color: vars.$color-green-dark; -} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 44774d7..7b40164 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -10,7 +10,7 @@ {{ end }} {{ with .Site.Params.author }} {{ end }} - + {{ with .OutputFormats.Get "RSS" -}} {{ printf ` ` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }} diff --git a/static/assets/style.css b/static/assets/style.css new file mode 100644 index 0000000..81721f7 --- /dev/null +++ b/static/assets/style.css @@ -0,0 +1,279 @@ +:root { + --color-bg: #282828; + --color-fg: #ebdbb2; + --color-red-dark: #cc241d; + --color-green-dark: #98971a; + --color-yellow-dark: #d79921; + --color-blue-dark: #458588; + --color-purple-dark: #b16286; + --color-aqua-dark: #689d6a; + --color-grey-dark: #928374; + --color-orange-dark: #d65d0e; + --color-red: #fb4934; + --color-green: #b8bb26; + --color-yellow: #fabd2f; + --color-blue: #83a598; + --color-purple: #d3869b; + --color-aqua: #8ec07c; + --color-grey: #a89984; + --color-orange: #fe8019; + --color-bg0_h: #1d2021; + --color_bg0_s: #32302f; + --color-bg0: #282828; + --color-bg1: #3c3836; + --color-bg2: #504845; + --color-bg3: #665c54; + --color-bg4: #7c6f64; + --color-fg0: #fbf1c7; + --color-fg1: #ebdbb2; + --color-fg2: #d5c4a1; + --color-fg3: #bdae93; + --color-fg4: #a89984; +} + +@font-face { + font-family: FiraCode; + src: url(/fonts/FiraCode-Regular.ttf); +} + +body { + color: var(--color-fg); + background: var(--color-bg); + font-family: FiraCode, monospace; +} + +code { + font-family: FiraCode, monospace; +} + +pre code { + white-space: pre-wrap; +} + +.content-wrapper {} + +img { + max-width: 100%; +} + +.header { + display: block; + + .header__title { + + a, + a:link, + a:hover, + a:visited { + color: var(--color-orange-dark) !important; + } + } + + .header__nav { + .header__nav__list { + padding-left: 0; + display: flex; + gap: 1rem; + + .header__nav__list__item { + list-style: none; + } + } + } +} + +.main { + justify-content: space-between; +} + +.summary { + .summary__title { + + a, + a:link, + a:visited { + color: var(--color-orange-dark); + } + + a:hover { + color: var(--color-orange); + } + } + + .summary__date { + margin-bottom: 8px; + + .summary__date__time { + .summary__date__time--created { + color: var(--color-aqua); + } + + .summary__date__time--edited { + color: var(--color-aqua-dark); + } + } + } + + h2 { + padding-bottom: 0; + margin-bottom: 0; + } +} + +.list { + display: flex; + flex-direction: column; + + .list__title { + display: flex; + + h1 { + display: inline; + } + + a { + margin: auto 0 28px 4px; + } + } +} + +.footer { + text-align: center; +} + +.pagination { + width: 100%; + text-align: center; + padding-top: 16px; +} + +a, +a:visited, +a:hover { + text-decoration: none; + color: var(--color-blue-dark); +} + +a:hover { + color: var(--color-blue); +} + +h1, +h2, +h3, +h4 { + color: var(--color-green-dark); +} + +/* ME */ + +.home { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + + .home__content { + text-align: justify; + max-width: 850px; + + img { + border-radius: 16px; + float: left; + margin: 0 24px 16px 0; + } + } +} + +/* POSTS */ + +.single { + .single__title { + margin-bottom: 0; + padding-bottom: 0; + color: var(--color-orange-dark); + } + + .single__date { + color: var(--color-yellow-dark); + } +} + +/* SIDEBAR */ + +.sidebar { + ul { + list-style: none; + + li { + margin-left: -48px; + padding: 8px; + ; + } + } +} + +/* SERVICES */ + +.services { + display: flex; + flex-direction: column; + + /* .services__title {} */ + + .services__list { + width: 100%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + .service { + width: 45%; + align-self: center; + margin: 8px 0; + + h2 { + margin: 0; + } + + .service__text { + padding: 2px; + line-height: 24px; + background: var(--color-bg0_h); + } + } + } +} + +@media (min-width: 600px) { + .main { + display: flex; + justify-content: space-between; + + .main__content { + width: 70%; + } + } + + .sidebar { + width: 25%; + max-width: 300px; + } +} + +@media (min-width: 800px) { + .main { + .main__content { + width: 74%; + } + } +} + +@media (min-width: 1000px) { + .content-wrapper { + max-width: 1000px; + margin: 0 auto; + } +} + +;