yuki/yuki.k4w411.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor main.scss into smaller include files +todo list

Browse source
This commit is contained in:
yuki 2025-12-08 03:05:19 -03:00
parent ebd57d3392
commit 1233e87de6
Signed by: yuki
GPG key ID: 0C98E6FF04EC3915
3 changed files with 19 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/scss/general.scss
View file

@ -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;

274
css/main.scss
View file

@ -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;
}
}
}

4
en/blog/index.md
View file

@ -7,8 +7,8 @@ pagination:
size: 6
alias: paginated
flight:
img: /img/gifcities/mimi.gif
url: /
img: /img/gifcities/mimi.gif
url: /
---
# blog