From 1233e87de674da5e87f4cfc6c44e1338e7620b9f Mon Sep 17 00:00:00 2001 From: yuki Date: Mon, 8 Dec 2025 03:05:19 -0300 Subject: [PATCH] refactor main.scss into smaller include files +todo list --- _includes/scss/general.scss | 8 ++ css/main.scss | 274 ++---------------------------------- en/blog/index.md | 4 +- 3 files changed, 19 insertions(+), 267 deletions(-) diff --git a/_includes/scss/general.scss b/_includes/scss/general.scss index 5d1abf1..15be794 100644 --- a/_includes/scss/general.scss +++ b/_includes/scss/general.scss @@ -2,6 +2,14 @@ $breakpoint: 768px; +$psize: 0.8em; +$h1size: 2em; +$h2size: 1.8em; +$h3size: 1.6em; +$h4size: 1.4em; +$h5size: 1.2em; +$h6size: 1em; + * { margin: 0; box-sizing: border-box; diff --git a/css/main.scss b/css/main.scss index 5812c5d..7a9d9f0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,129 +1,19 @@ -/* TODO: refactor into smaller includes */ +/* + TODO: split base wrapper into several files and mixins + TODO: implement multiple palettes/themes via mixins +*/ @use "sass:color" as c; -@use "scss/general"; +@use "scss/general" as *; @use "scss/fonts" as *; @use "scss/main-palette" as mp; -$psize: 0.8em; -$h1size: 2em; -$h2size: 1.8em; -$h3size: 1.6em; -$h4size: 1.4em; -$h5size: 1.2em; -$h6size: 1em; +@use "scss/404.scss" as fof; +@use "scss/body.scss"; +@use "scss/footer.scss"; +@use "scss/header.scss"; -body { - color: mp.$text; - background-color: mp.$bg; - /*background-image: url("/img/bgpat.png"); - background-repeat: repeat;*/ - - a { - color: mp.$link; - } - a:hover { - color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); - } - - p { - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: $psize; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: $ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-weight: bold; - text-decoration: underline; - text-decoration-color: mp.$border; - font-smooth: never; - -webkit-font-smoothing: none; - -moz-osx-font-smoothing: none; - } - - h1 { - font-size: $h1size; - } - h2 { - font-size: $h2size; - } - h3 { - font-size: $h3size; - } - h4 { - font-size: $h4size; - } - h5 { - font-size: $h5size; - } - h6 { - font-size: $h6size; - } - - .warning { - padding: 2px; - margin: 2px auto; - text-align: center; - border-top: 1px solid - c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%); - border-bottom: 1px solid - c.adjust($color: mp.$border, $saturation: 15%, $lightness: 10%); - background: c.adjust( - $color: mp.$border, - $saturation: 15%, - $lightness: -20% - ); - } - - @media (min-width: general.$breakpoint) { - #mobile-warning { - display: none; - } - } -} - -// 404 -#fof { - border: none; - .fof { - display: flex; - justify-content: flex-start; - flex-direction: column; - width: 100%; - h1 { - margin: 10px 10px 0px 10px; - font-family: $ll; - text-align: center; - text-decoration: none; - } - img { - max-width: fit-content; - display: block; - margin: auto; - } - .fof-foot { - display: flex; - justify-content: flex-start; - flex-direction: row; - justify-content: space-between; - width: 780px; - margin: 0px auto; - p { - font-family: - $ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: 1.2em; - } - } - } -} - -// under construction #under-construction { width: 100%; h2 { @@ -139,117 +29,6 @@ body { } } -.header-wrapper { - display: flex; - align-items: flex-start; - gap: 0px; - height: fit-content; - flex-direction: row; - .header { - display: flex; - flex-direction: column; - h1 { - display: none; - height: 0; - } - .header-banner { - background-image: url("/img/home_banner.jpg"); - width: 298px; - height: 140px; - border-right: 1px solid mp.$border; - border-bottom: 1px solid mp.$border; - border-radius: 0% 0% 20px 0%; - } - .header-banner:hover { - background-image: url("/img/home_banner_hover.jpg"); - } - } - .navbar-wrapper { - display: flex; - align-items: flex-start; - margin: 8px 0px 2px 0px; - width: 100%; - - .navbar-content { - display: flex; - flex-direction: column; - width: 100%; - - ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; - list-style: none; - padding: 0 4px; - li { - display: flex; - margin: 2px; - a, - p { - padding: 0.2em 0.5em; - border: 1px solid mp.$border; - - background: mp.$bg; - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 1) 10%, - c.adjust( - $color: mp.$link, - $saturation: 4%, - $lightness: -20% - ) - 100% - ); - - color: mp.$text; - font-family: $ll; - font-weight: normal; - font-size: 1em; - text-decoration: none; - /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/ - - &:hover { - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 1) 0%, - c.adjust( - $color: mp.$link, - $saturation: 4%, - $lightness: -10% - ) - 100% - ); - } - } - p { - cursor: default; - } - --hover-image: url("/img/nav/default_hover.jpg"); - /* TODO: finish each navbar image - &#home:hover ~ #nav-hover { --hover-image: url('/img/nav/home_hover.jpg'); } - &#about:hover ~ #nav-hover { --hover-image: url('/img/nav/about_hover.jpg'); } - &#blog:hover ~ #nav-hover { --hover-image: url('/img/nav/blog_hover.jpg'); } - &#reviews:hover ~ #nav-hover { --hover-image: url('/img/nav/reviews_hover.jpg'); } - &#links:hover ~ #nav-hover { --hover-image: url('/img/nav/links_hover.jpg'); } - &#contact:hover ~ #nav-hover { --hover-image: url('/img/nav/contact_hover.jpg'); } - */ - } - #nav-hover { - width: 100%; - height: 104px; - max-height: 103px; - background: mp.$bg; - background-image: var(--hover-image, none); - /* temporary until i finish navbar images */ - &:hover { - --hover-image: url("/img/nav/temp_hover.jpg"); - } - } - } - } - } -} - .base-content-wrapper { display: flex; align-items: flex-start; @@ -569,38 +348,3 @@ body { } } } - -footer { - marquee { - margin: 8px 0px; - } - p { - margin: 2px; - font-size: 0.7em; - text-align: right; - } - .footer-flex { - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; - width: 100%; - .footer-left { - margin: auto 0px 0px 0px; - } - .footer-middle .nekojiru-angel { - background-image: url("/img/nekojiru.png"); - width: 64px; - height: 64px; - margin: auto 0px 0px 0px; - vertical-align: bottom; - &:hover { - background-image: url("/img/nekojiruhalo.png"); - } - } - - .footer-right { - margin: auto 0px 0px 0px; - } - } -} diff --git a/en/blog/index.md b/en/blog/index.md index 9a7b338..a897f6f 100644 --- a/en/blog/index.md +++ b/en/blog/index.md @@ -7,8 +7,8 @@ pagination: size: 6 alias: paginated flight: - img: /img/gifcities/mimi.gif - url: / + img: /img/gifcities/mimi.gif + url: / --- # blog