buckwheat/sekaineo
1
0
Fork 3
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

site refactor

Browse Source
This commit is contained in:
Luckiest Venus
2026-03-13 00:55:21 -05:00
parent 118c8daf2d
commit 53e80e4a94
8 changed files with 577 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
assets/style.css
View File

@ -3,75 +3,423 @@
font-family: 'dos';
src: url('fonts/dosvga.ttf');
}
@font-face
{
font-family: 'unifont';
src: url('fonts/unifont.otf');
}
:root
@media (prefers-color-scheme: light)
{
--font-header: 'unifont';
--font-body: 'dos';
:root
{
--page-bg-color: #ece3cc;
--page-text-color: #53676d;
--title-color: #53676d;
--title-bg-color: transparent;
--content-bg-color: #fbf3db;
--content-border-color: #0072d4;
--link-color: #0072d4;
--link-color-visited: #8762c6;
--link-color-hover: #d2212d;
--nav-button-bg-color: #fbf3db;
--nav-button-text-color: #3a4d53;
--nav-dropdown-bg-color: rgba(251, 243, 219, 0.85);
--content-width: 65em;
--main-flex-basis: 70%;
--col-flex-basis: 10%;
--hr-width: 2px;
--hr-color: #53676d;
--hr-style: solid;
--body-font: 'Nimbus Mono PS', 'Courier New', monospace;
--header-font: 'dos', 'Nimbus Mono PS', 'Courier New', monospace;
--body-line-height: 1.4;
--body-font-size: 1.2rem;
--header-font-size: 1.7rem;
--title-font-size: 2rem;
--noscroll-topbottom: 10vh;
--noscroll-height: 80%;
--bg-image: none;
--bg-image-repeat: repeat;
--bg-image-size: auto;
--bg-image-position: 0 0;
--bg-image-scroll: scroll;
--content-border-style: solid;
--content-border-radius: 0px;
--content-border-width: 3px;
--block-border-style: none;
--block-border-radius: 0px;
--block-border-width: 1px;
--block-margin-bottom: 0px;
--col-header-margin: 0.65em;
}
}
@media (prefers-color-scheme: dark)
{
:root
{
--page-bg-color: #252525;
--page-text-color: #b9b9b9;
--title-color: #b9b9b9;
--title-bg-color: transparent;
--content-bg-color: #181818;
--content-border-color: #368aeb;
--link-color: #368aeb;
--link-color-visited: #a580e2;
--link-color-hover: #ed4a46;
--nav-button-bg-color: #181818;
--nav-button-text-color: #dedede;
--nav-dropdown-bg-color: rgba(24, 24, 24, 0.85);
--content-width: 65em;
--main-flex-basis: 70%;
--col-flex-basis: 10%;
--hr-width: 2px;
--hr-color: #b9b9b9;
--hr-style: solid;
--body-font: 'Nimbus Mono PS', 'Courier New', monospace;
--header-font: 'dos', 'Nimbus Mono PS', 'Courier New', monospace;
--body-line-height: 1.4;
--body-font-size: 1.2rem;
--header-font-size: 1.7rem;
--title-font-size: 2rem;
--noscroll-topbottom: 10vh;
--noscroll-height: 80%;
--bg-image: none;
--bg-image-repeat: repeat;
--bg-image-size: auto;
--bg-image-position: 0 0;
--bg-image-scroll: scroll;
--content-border-style: solid;
--content-border-radius: 0px;
--content-border-width: 3px;
--block-border-style: none;
--block-border-radius: 0px;
--block-border-width: 1px;
--block-margin-bottom: 0px;
--col-header-margin: 0.65em;
}
}
body
{
margin: 0;
padding: 0;
background-color: var(--page-bg-color);
color: var(--page-text-color);
font-family: var(--body-font);
line-height: var(--body-line-height);
font-size: var(--body-font-size);
background-image: var(--bg-image);
background-repeat: var(--bg-image-repeat);
background-size: var(--bg-image-size);
background-position: var(--bg-image-position);
background-attachment: var(--bg-image-scroll);
}
html
h1,
h2,
h3,
h4,
h5,
h6
{
background-color: black;
font-family: var(--header-font);
background-color: var(--title-bg-color);
color: var(--title-color);
position: relative;
z-index: 1;
}
.navbar ul
h2,
h3,
h4,
h5,
h6
{
font-size: var(--header-font-size);
}
h1
{
text-align: center;
font-size: var(--title-font-size);
}
a
{
color: var(--link-color);
}
a:visited
{
color: var(--link-color-visited);
}
a:hover
{
color: var(--link-color-hover);
}
header
{
text-align: center;
padding-bottom: 0.5em;
}
main
{
background-color: var(--content-bg-color);
border-color: var(--content-border-color);
border-width: var(--content-border-width);
border-radius: var(--content-border-radius);
border-style: var(--content-border-style);
}
.horizontal /* use in a ul li list, to lay out
elements horizontally */
{
background-color: darkred;
display: flex;
list-style-type: none;
justify-content: center;
left: 0;
justify-content: space-evenly;
max-width: max-content;
flex-wrap: wrap;
gap: var(--margin);
}
/* CONTENT IMAGES */
.img-resize /* Use this for individual images */
{
object-fit: contain;
max-width: 100%;
}
.img-mirror /* Mirrors an image */
{
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.img-border /* Adds border to image */
{
border-width: 2px;
border-style: solid;
border-color: var(--content-border-color);
}
.images /* use in a div, to make the images appear
horizontally */
{
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img
{
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
.navbar ul li
nav#topmenu
{
float: left;
}
.navbar ul li a
{
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
font-size: 1.5em;
font-family: var(--font-header);
position: static;
background-color: var(--page-bg-color);
z-index: 10;
left: 0px;
margin-left: auto;
margin-right: auto;
top: 0px;
right: 0px;
padding: 0.75em;
}
.navbar ul li a:hover
nav#topmenu ul
{
background-color: blue;
}
.text-block
{
border: 2px solid blue;
color: white;
font-family: var(--font-body);
padding: 0px;
margin: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 5%;
margin-left: 25%;
margin-right: 25%;
margin-top: 5%;
padding: 10px 15px;
text-align: center;
gap: 0.75em;
}
nav#topmenu ul li
{
list-style-type: none;
padding: 0.1em;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: var(--nav-button-bg-color);
color: var(--nav-button-text-color);
border-radius: 0px;
border-style: solid;
border-width: var(--content-border-width);
border-color: var(--content-border-color);
text-decoration: underline;
position: relative;
}
nav#topmenu li a
{
text-decoration: none;
color: var(--nav-button-text-color);
padding: 0.1em;
display: block;
}
nav#topmenu a:link
{
color: var(--nav-button-text-color);
}
nav#topmenu a:visited
{
color: var(--nav-button-text-color);
}
nav#topmenu a:hover
{
color: var(--link-color-hover);
}
nav#topmenu ul li::before {}
nav#topmenu ul li:first-child::before
{
content: "";
}
nav#topmenu ul ul
{
display: none;
position: absolute;
top: calc(100% + 0.8rem);
left: 0;
background-color: var(--nav-dropdown-bg-color);
border-style: var(--content-border-style);
border-width: var(--content-border-width);
border-color: var(--content-border-color);
border-radius: var(--content-border-radius);
padding: 0.25em 0;
margin: 0;
list-style-type: none;
min-width: 12em;
z-index: 20;
}
nav#topmenu ul li:hover > ul
{
display: block;
}
nav#topmenu ul li::after
{
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0.4rem;
background: transparent;
z-index: 19;
}
nav#topmenu ul ul li
{
padding: 0;
margin: 0;
background-color: transparent;
border: none;
}
nav#topmenu ul ul li a
{
display: block;
padding: 0.5em 1em;
color: var(--nav-button-text-color);
text-decoration: none;
white-space: nowrap;
}
div.flex_container
{
display: flex;
flex-flow: wrap;
max-width: var(--content-width);
margin-left: auto;
margin-right: auto;
}
.flex_container main
{
order: 2;
flex-grow: 5;
flex-basis: var(--main-flex-basis);
padding: 10px;
min-width: 15em;
}
@media screen and (max-width: 35em)
{
main
{
order: 1;
}
}
#noscroll-body
{
margin-left: auto;
margin-right: auto;
margin-top: var(--noscroll-topbottom);
margin-bottom: var(--noscroll-topbottom);
height: var(--noscroll-height);
padding: 1em;
display: grid;
grid-template-rows: min-content min-content 1fr min-content;
border-color: var(--content-border-color);
border-width: var(--content-border-width);
border-radius: var(--content-border-radius);
}
#noscroll-body .flex_container
{
height: 100%;
overflow: hidden;
}
#noscroll-body main,
{
padding: 3px;
height: 100%;
overflow: auto;
}
hr
{
border-top-width: var(--hr-width);
border-color: var(--hr-color);
border-style: var(--hr-style);
}