old website
This commit is contained in:
commit
218487dc22
557 changed files with 7054 additions and 0 deletions
837
_src/assets/css/98.css
Normal file
837
_src/assets/css/98.css
Normal file
|
|
@ -0,0 +1,837 @@
|
|||
/**
|
||||
* WARNING: THIS IS NOT THE ORIGINAL .css , MEANING I EDITED IT!!!
|
||||
*
|
||||
* she edit on my css till i—*gun shot*
|
||||
*
|
||||
* 98.css
|
||||
* Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
|
||||
* https://github.com/jdan/98.css/blob/main/LICENSE
|
||||
*/
|
||||
[class="98"] {
|
||||
margin: 0;
|
||||
background: silver;
|
||||
article p {
|
||||
margin-left: 16px;
|
||||
}
|
||||
ul {
|
||||
background: white;
|
||||
padding-left: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
summary {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
background: silver;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
summary, section button {
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 4px 0 0 0;
|
||||
}
|
||||
section button[style] {
|
||||
min-height: initial;
|
||||
min-width: initial;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
margin: 4px;
|
||||
}
|
||||
figcaption {
|
||||
background: silver;
|
||||
padding: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
figure img {
|
||||
width: 100%;
|
||||
}
|
||||
.status-bar-field, figure figcaption, details > ul {
|
||||
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
|
||||
}
|
||||
#changelog iframe {
|
||||
box-shadow: var(--border-field);
|
||||
}
|
||||
.status-bar-field, #changelog iframe {
|
||||
flex-grow: 1;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
:disabled + label,
|
||||
:read-only + label {
|
||||
color: var(--button-shadow);
|
||||
}
|
||||
|
||||
/*
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.5px solid #222222;
|
||||
}
|
||||
|
||||
a *{
|
||||
color: var(--link-blue);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 1px dotted var(--link-blue);
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 12px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code, code * {
|
||||
font-family: monospace;
|
||||
}
|
||||
*/
|
||||
:root {
|
||||
/* Color */
|
||||
--surface: #c0c0c0;
|
||||
--button-highlight: #ffffff;
|
||||
--button-face: #dfdfdf;
|
||||
--button-shadow: #808080;
|
||||
--window-frame: #0a0a0a;
|
||||
--dialog-blue: #000080;
|
||||
--dialog-blue-light: #1084d0;
|
||||
--dialog-gray: #808080;
|
||||
--dialog-gray-light: #b5b5b5;
|
||||
--link-blue: #0000ff;
|
||||
|
||||
/* Spacing */
|
||||
--element-spacing: 4px;
|
||||
--grouped-button-spacing: 4px;
|
||||
--grouped-element-spacing: 6px;
|
||||
--radio-width: 12px;
|
||||
--checkbox-width: 13px;
|
||||
--radio-label-spacing: 6px;
|
||||
--range-track-height: 4px;
|
||||
--range-spacing: 10px;
|
||||
|
||||
/* Some detailed computations for radio buttons and checkboxes */
|
||||
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
|
||||
--radio-total-width: calc(var(--radio-total-width-precalc));
|
||||
--radio-left: calc(-1 * var(--radio-total-width-precalc));
|
||||
--radio-dot-width: 4px;
|
||||
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
|
||||
--radio-dot-left: calc(
|
||||
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
|
||||
--radio-dot-width
|
||||
) / 2
|
||||
);
|
||||
|
||||
--checkbox-total-width-precalc: var(--checkbox-width) +
|
||||
var(--radio-label-spacing);
|
||||
--checkbox-total-width: calc(var(--checkbox-total-width-precalc));
|
||||
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
--border-raised-outer: inset -1px -1px var(--window-frame),
|
||||
inset 1px 1px var(--button-highlight);
|
||||
--border-raised-inner: inset -2px -2px var(--button-shadow),
|
||||
inset 2px 2px var(--button-face);
|
||||
--border-sunken-outer: inset -1px -1px var(--button-highlight),
|
||||
inset 1px 1px var(--window-frame);
|
||||
--border-sunken-inner: inset -2px -2px var(--button-face),
|
||||
inset 2px 2px var(--button-shadow);
|
||||
|
||||
/* Window borders flip button-face and button-highlight */
|
||||
--border-window-outer: inset -1px -1px var(--window-frame),
|
||||
inset 1px 1px var(--button-face);
|
||||
--border-window-inner: inset -2px -2px var(--button-shadow),
|
||||
inset 2px 2px var(--button-highlight);
|
||||
|
||||
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
|
||||
--border-field: inset -1px -1px var(--button-highlight),
|
||||
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
|
||||
inset 2px 2px var(--window-frame);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Pixelated MS Sans Serif";
|
||||
src: url("/assets/fonts/ms_sans_serif.woff") format("woff");
|
||||
src: url("/assets/fonts/ms_sans_serif.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Pixelated MS Sans Serif";
|
||||
src: url("/assets/fonts/ms_sans_serif_bold.woff") format("woff");
|
||||
src: url("/assets/fonts/ms_sans_serif_bold.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
label,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
option,
|
||||
ul.tree-view,
|
||||
.window,
|
||||
.title-bar {
|
||||
font-family: "Pixelated MS Sans Serif", Arial;
|
||||
-webkit-font-smoothing: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
border-radius: 0;
|
||||
|
||||
min-width: 75px;
|
||||
min-height: 23px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.vertical-bar {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background: #c0c0c0;
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
}
|
||||
|
||||
button:not(:disabled):active,
|
||||
input[type="submit"]:not(:disabled):active,
|
||||
input[type="reset"]:not(:disabled):active {
|
||||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||||
/*padding: 2px 11px 0 13px;*/
|
||||
}
|
||||
|
||||
@media (not(hover)) {
|
||||
button:not(:disabled):hover,
|
||||
input[type="submit"]:not(:disabled):hover,
|
||||
input[type="reset"]:not(:disabled):hover {
|
||||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||||
}
|
||||
}
|
||||
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus {
|
||||
outline: 1px dotted #000000;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input[type="submit"]::-moz-focus-inner,
|
||||
input[type="reset"]::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
input[type="submit"]:disabled,
|
||||
input[type="reset"]:disabled,
|
||||
:disabled + label {
|
||||
text-shadow: 1px 1px 0 var(--button-highlight);
|
||||
}
|
||||
|
||||
.window {
|
||||
box-shadow: var(--border-window-outer), var(--border-window-inner);
|
||||
background: var(--surface);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--dialog-blue),
|
||||
var(--dialog-blue-light)
|
||||
);
|
||||
padding: 3px 2px 3px 3px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-bar.inactive {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--dialog-gray),
|
||||
var(--dialog-gray-light)
|
||||
);
|
||||
}
|
||||
|
||||
.title-bar-text {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
& img {
|
||||
margin-right: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.title-bar-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title-bar-controls button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
min-width: 16px;
|
||||
min-height: 14px;
|
||||
}
|
||||
|
||||
.title-bar-controls button:active {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.title-bar-controls button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.title-bar-controls button[id="Minimize"] {
|
||||
background-image: url("/assets/img/icon/98/minimize.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 3px left 4px;
|
||||
}
|
||||
|
||||
.title-bar-controls button[id="Maximize"] {
|
||||
background-image: url("/assets/img/icon/98/maximize.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px left 3px;
|
||||
}
|
||||
|
||||
.title-bar-controls button[id="Restore"] {
|
||||
background-image: url("/assets/img/icon/98/restore.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px left 3px;
|
||||
}
|
||||
|
||||
.title-bar-controls button[id="Help"] {
|
||||
background-image: url("/assets/img/icon/98/help.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px left 5px;
|
||||
}
|
||||
|
||||
.title-bar-controls button[id="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: url("/assets/img/icon/98/close.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 3px left 4px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
margin: 0px 1px;
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.window-body {
|
||||
margin: var(--element-spacing);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-image: url("/assets/img/icon/98/groupbox-border.svg") 2;
|
||||
padding: calc(2 * var(--border-width) + var(--element-spacing));
|
||||
padding-block-start: var(--element-spacing);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[class^="field-row"] + [class^="field-row"] {
|
||||
margin-top: var(--grouped-element-spacing);
|
||||
}
|
||||
|
||||
.field-row > * + * {
|
||||
margin-left: var(--grouped-element-spacing);
|
||||
}
|
||||
|
||||
.field-row-stacked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-row-stacked * + * {
|
||||
margin-top: var(--grouped-element-spacing);
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
margin: 0;
|
||||
background: 0;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type="radio"] + label,
|
||||
input[type="checkbox"] + label {
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
input[type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: var(--radio-total-width);
|
||||
}
|
||||
|
||||
input[type="radio"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(-1 * (var(--radio-total-width-precalc)));
|
||||
display: inline-block;
|
||||
width: var(--radio-width);
|
||||
height: var(--radio-width);
|
||||
margin-right: var(--radio-label-spacing);
|
||||
background: url("/assets/img/icon/98/radio-border.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:active + label::before {
|
||||
background: url("/assets/img/icon/98/radio-border-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: var(--radio-dot-width);
|
||||
height: var(--radio-dot-width);
|
||||
top: var(--radio-dot-top);
|
||||
left: var(--radio-dot-left);
|
||||
position: absolute;
|
||||
background: url("/assets/img/icon/98/radio-dot.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:focus + label,
|
||||
input[type="checkbox"]:focus + label {
|
||||
outline: 1px dotted #000000;
|
||||
}
|
||||
|
||||
input[type="radio"][disabled] + label::before {
|
||||
background: url("/assets/img/icon/98/radio-border-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="radio"][disabled]:checked + label::after {
|
||||
background: url("/assets/img/icon/98/radio-dot-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
margin-left: var(--checkbox-total-width);
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * (var(--checkbox-total-width-precalc)));
|
||||
display: inline-block;
|
||||
width: var(--checkbox-width);
|
||||
height: var(--checkbox-width);
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
margin-right: var(--radio-label-spacing);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active + label::before {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: var(--checkmark-width);
|
||||
height: var(--checkmark-width);
|
||||
position: absolute;
|
||||
top: var(--checkmark-top);
|
||||
left: calc(
|
||||
-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
|
||||
);
|
||||
background: url("/assets/img/icon/98/checkmark.svg");
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled] + label::before {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:checked + label::after {
|
||||
background: url("/assets/img/icon/98/checkmark-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
select,
|
||||
textarea {
|
||||
padding: 3px 4px;
|
||||
border: none;
|
||||
box-shadow: var(--border-field);
|
||||
background-color: var(--button-highlight);
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
select {
|
||||
height: 21px;
|
||||
}
|
||||
input[type="number"] {
|
||||
/* need this 1 pixel to fit the spinner controls in box */
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"] {
|
||||
/* For some reason descenders are getting cut off without this */
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
input[type="email"]:disabled,
|
||||
input[type="password"]:disabled,
|
||||
input[type="text"]:disabled,
|
||||
input[type="number"]:disabled,
|
||||
input[type="email"]:read-only,
|
||||
input[type="password"]:read-only,
|
||||
input[type="text"]:read-only,
|
||||
input[type="number"]:read-only,
|
||||
textarea:disabled {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
padding-right: 32px;
|
||||
background-image: url("/assets/img/icon/98/button-down.svg");
|
||||
background-position: top 2px right 2px;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 21px;
|
||||
width: 11px;
|
||||
background: url("/assets/img/icon/98/indicator-horizontal.svg");
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
input[type="range"].has-box-indicator::-webkit-slider-thumb {
|
||||
background: url("/assets/img/icon/98/indicator-rectangle-horizontal.svg");
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
height: 21px;
|
||||
width: 11px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: url("/assets/img/icon/98/indicator-horizontal.svg");
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
input[type="range"].has-box-indicator::-moz-range-thumb {
|
||||
background: url("/assets/img/icon/98/indicator-rectangle-horizontal.svg");
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
box-sizing: border-box;
|
||||
background: black;
|
||||
border-right: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
|
||||
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
box-sizing: border-box;
|
||||
background: black;
|
||||
border-right: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
|
||||
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
|
||||
}
|
||||
|
||||
.is-vertical {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 150px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"] {
|
||||
width: 150px;
|
||||
height: 4px;
|
||||
margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0
|
||||
var(--range-spacing);
|
||||
transform-origin: left;
|
||||
transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"]::-webkit-slider-runnable-track {
|
||||
border-left: 1px solid grey;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid grey;
|
||||
box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
|
||||
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"]::-moz-range-track {
|
||||
border-left: 1px solid grey;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid grey;
|
||||
box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
|
||||
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"]::-webkit-slider-thumb {
|
||||
transform: translateY(-8px) scaleX(-1);
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb {
|
||||
transform: translateY(-10px) scaleX(-1);
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"]::-moz-range-thumb {
|
||||
transform: translateY(2px) scaleX(-1);
|
||||
}
|
||||
|
||||
.is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
|
||||
transform: translateY(0px) scaleX(-1);
|
||||
}
|
||||
|
||||
select:focus {
|
||||
color: var(--button-highlight);
|
||||
background-color: var(--dialog-blue);
|
||||
}
|
||||
select:focus option {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
select:active {
|
||||
background-image: url("/assets/img/icon/98/button-down-active.svg");
|
||||
}
|
||||
|
||||
ul.tree-view {
|
||||
display: block;
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.tree-view li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.tree-view a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul.tree-view a:focus {
|
||||
background-color: var(--dialog-blue);
|
||||
color: var(--button-highlight);
|
||||
}
|
||||
|
||||
ul.tree-view ul,
|
||||
ul.tree-view li {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
ul.tree-view ul {
|
||||
margin-left: 16px;
|
||||
padding-left: 16px;
|
||||
/* Goes down too far */
|
||||
border-left: 1px dotted #808080;
|
||||
}
|
||||
|
||||
ul.tree-view ul > li {
|
||||
position: relative;
|
||||
}
|
||||
ul.tree-view ul > li::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 6px;
|
||||
width: 12px;
|
||||
border-bottom: 1px dotted #808080;
|
||||
}
|
||||
|
||||
/* Cover the bottom of the left dotted border */
|
||||
ul.tree-view ul > li:last-child::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 7px;
|
||||
bottom: 0px;
|
||||
width: 8px;
|
||||
background: var(--button-highlight);
|
||||
}
|
||||
|
||||
ul.tree-view details {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul.tree-view details[open] summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.tree-view ul details > summary:before {
|
||||
margin-left: -22px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul.tree-view details > summary:before {
|
||||
text-align: center;
|
||||
display: block;
|
||||
float: left;
|
||||
content: "+";
|
||||
border: 1px solid #808080;
|
||||
width: 8px;
|
||||
height: 9px;
|
||||
line-height: 8px;
|
||||
margin-right: 5px;
|
||||
padding-left: 1px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
ul.tree-view details[open] > summary:before {
|
||||
content: "-";
|
||||
}
|
||||
|
||||
ul.tree-view details > summary::marker,
|
||||
ul.tree-view details > summary::-webkit-details-marker {
|
||||
content: "";
|
||||
}
|
||||
summary:focus {
|
||||
outline: 1px dotted #000000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
::-webkit-scrollbar:horizontal {
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--button-face);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url("/assets/img/icon/98/scrollbar-background.svg");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--button-face);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:horizontal:start:decrement,
|
||||
::-webkit-scrollbar-button:horizontal:end:increment,
|
||||
::-webkit-scrollbar-button:vertical:start:decrement,
|
||||
::-webkit-scrollbar-button:vertical:end:increment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:vertical:start {
|
||||
height: 17px;
|
||||
background-image: url("/assets/img/icon/98/button-up.svg");
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:end {
|
||||
height: 17px;
|
||||
background-image: url("/assets/img/icon/98/button-down.svg");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:start {
|
||||
width: 16px;
|
||||
background-image: url("/assets/img/icon/98/button-left.svg");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:end {
|
||||
width: 16px;
|
||||
background-image: url("/assets/img/icon/98/button-right.svg");
|
||||
}
|
||||
766
_src/assets/css/citrus.css
Normal file
766
_src/assets/css/citrus.css
Normal file
|
|
@ -0,0 +1,766 @@
|
|||
:root {
|
||||
--primary: rgb(255, 190, 0);
|
||||
--secondary: rgb(255, 110, 0);
|
||||
--tertiary: rgb(255, 236, 180);
|
||||
--quaternary: rgb(105, 50, 0);
|
||||
--shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003;
|
||||
--checker: url('/assets/img/theme/citrus/checker.png');
|
||||
--checker-dark: url('/assets/img/theme/citrus/checker-dark.png');
|
||||
--dot: url('/assets/img/theme/citrus/dot.png');
|
||||
--dot-dark: url('/assets/img/theme/citrus/dot-dark.png');
|
||||
--line: url('/assets/img/theme/citrus/line.png');
|
||||
--paper: url('/assets/img/theme/citrus/paper.png');
|
||||
--noise: url('/assets/img/theme/citrus/imagedoc-lightnoise.png');
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgb(172, 255, 0)
|
||||
}
|
||||
|
||||
/* Page specific - Index */
|
||||
#index {
|
||||
width: 100%;
|
||||
background-color: rgb(255, 190, 0);
|
||||
background-image: url('/assets/img/theme/citrus/sundae.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a img {
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
a img:hover {
|
||||
transform: scale(0.95) translateY(-1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main style */
|
||||
hr {
|
||||
border-bottom: unset;
|
||||
border-left: unset;
|
||||
border-right: unset;
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
||||
body {
|
||||
background-attachment: local, fixed;
|
||||
background-color: var(--primary);
|
||||
background-image: var(--checker), linear-gradient(var(--primary), var(--secondary));
|
||||
background-size: 32px, contain;
|
||||
font-family: Rubik, sans-serif;
|
||||
}
|
||||
|
||||
body>nav,
|
||||
header h1 {
|
||||
box-shadow: inset -2px -2px 0 2px var(--quaternary);
|
||||
}
|
||||
|
||||
body>nav,
|
||||
header h1 {
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: screen;
|
||||
background-image: var(--dot), linear-gradient(var(--primary), var(--secondary) 20%);
|
||||
background-size: 6px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
& h1 {
|
||||
border-radius: 0 0 5rem 0;
|
||||
color: var(--quaternary);
|
||||
margin: 0 0 0 -4px;
|
||||
padding: 0 64px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
body>nav {
|
||||
border-radius: 0 0 2rem 0;
|
||||
|
||||
& a {
|
||||
background-image: linear-gradient(var(--tertiary), var(--primary) 20%, var(--primary) 80%, var(--tertiary) 100%);
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
box-shadow: 0 0 0 2px var(--quaternary), inset 0 0 8px 2px var(--primary);
|
||||
color: var(--quaternary);
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
&:hover:not([aria-current="page"]) {
|
||||
box-shadow: 0 0 0 2px var(--quaternary);
|
||||
}
|
||||
}
|
||||
|
||||
& [aria-current="page"] {
|
||||
background-image: linear-gradient(darkorange, var(--quaternary) 10%, chocolate);
|
||||
box-shadow: 0 0 0 2px var(--quaternary), inset 0 0 4px 2px var(--quaternary);
|
||||
color: var(--tertiary);
|
||||
|
||||
& svg {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
&>ul div svg {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& svg text {
|
||||
fill: var(--tertiary);
|
||||
paint-order: stroke markers fill;
|
||||
stroke-width: 4;
|
||||
stroke: var(--quaternary);
|
||||
}
|
||||
|
||||
& li:last-child a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#flags {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
img[src*="/assets/img/flag/"] {
|
||||
border-radius: 0.2rem;
|
||||
box-shadow: 0 0 0 2px #fff, 1px 1px 0px 3px #0006;
|
||||
}
|
||||
|
||||
/* Page-specific - Blog */
|
||||
#blog {
|
||||
background-attachment: local;
|
||||
background-color: #eef;
|
||||
background-image: var(--noise), var(--dot-dark);
|
||||
background-size: auto, 4px;
|
||||
}
|
||||
|
||||
.blog {
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
background-image: var(--noise), url('/assets/img/theme/citrus/pawprint.svg');
|
||||
background-size: auto, 64px;
|
||||
background-repeat: repeat, no-repeat;
|
||||
background-position-y: bottom;
|
||||
background-position-x: center;
|
||||
background-origin: content-box;
|
||||
box-shadow: inset 0 0 2rem -0.5rem #ccc;
|
||||
|
||||
& ul {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
& p[class="warning"] {
|
||||
color: #ffcc4d;
|
||||
background-color: #000;
|
||||
font-weight: bold;
|
||||
padding: 2px 8px;
|
||||
text-align: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "⚠️"
|
||||
}
|
||||
}
|
||||
|
||||
& li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& u {
|
||||
text-decoration: underline red;
|
||||
}
|
||||
|
||||
& em {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
& code {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
& pre {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
& pre,
|
||||
code:not(pre code) {
|
||||
background-color: lightgray;
|
||||
border: 1px solid darkgray;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 0 0 1rem 0
|
||||
}
|
||||
|
||||
& time {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
& aside {
|
||||
background: #eee;
|
||||
border-radius: 0.4rem;
|
||||
border: 2px solid #ccc;
|
||||
float: right;
|
||||
margin-bottom: 0.8rem;
|
||||
padding: 1rem;
|
||||
width: 40ch;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
border-bottom: 1px solid #aaa;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blog>[aria-label="Postscript"] {
|
||||
display: grid;
|
||||
margin: 0 0 auto auto;
|
||||
padding: 0 0 4rem 0;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: min-content;
|
||||
|
||||
& p,
|
||||
img {
|
||||
box-shadow: inset 0 0 1px #666;
|
||||
}
|
||||
|
||||
& p {
|
||||
background: #fff;
|
||||
border-radius: 5rem 5rem 0 5rem;
|
||||
font-size: 12px;
|
||||
margin: 0 0.2rem 1rem 0;
|
||||
padding: 4px 8px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
& img {
|
||||
background-color: #eee;
|
||||
border-radius: 100%;
|
||||
box-sizing: content-box;
|
||||
height: 16px;
|
||||
margin: auto 0 0 auto;
|
||||
image-rendering: pixelated;
|
||||
padding: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#posts {
|
||||
width: max-content;
|
||||
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
& li:not(:first-of-type) {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
transition: 0.3s;
|
||||
padding: .8rem;
|
||||
width: auto;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
border: 4px solid;
|
||||
border-color: #fff;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 0.4rem;
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
border-color: currentColor
|
||||
}
|
||||
|
||||
& time,
|
||||
p {
|
||||
font-weight: initial;
|
||||
font-size: initial;
|
||||
display: flex;
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Page specific - Home */
|
||||
main>section:has(nav) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#changelog {
|
||||
width: fit-content;
|
||||
|
||||
& iframe {
|
||||
min-width: 640px;
|
||||
min-height: 480px
|
||||
}
|
||||
}
|
||||
|
||||
#buttons {
|
||||
width: 640px;
|
||||
& fieldset {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
& nav {
|
||||
& ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
& img:hover {
|
||||
filter: drop-shadow(4px 6px 0 #0006);
|
||||
transform: translateY(-4px);
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#pkmn {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-image: url("/assets/img/theme/citrus/box.png");
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
justify-content: space-around;
|
||||
border-bottom-color: #78a068;
|
||||
border-left-color: #c8f8c0;
|
||||
border-right-color: #78a068;
|
||||
border-top-color: #c8f8c0;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
margin-top: 18px;
|
||||
|
||||
& img:hover {
|
||||
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 3px #0006);
|
||||
animation: jump 200ms infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
background-color: var(--tertiary);
|
||||
background-image: var(--noise), var(--paper);
|
||||
background-size: auto, 4px;
|
||||
font-family: Pangolin, sans-serif;
|
||||
|
||||
& p {
|
||||
text-transform: lowercase;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
& p,
|
||||
li,
|
||||
h2 {
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#portrait {
|
||||
background-color: var(--primary);
|
||||
border-radius: 100%;
|
||||
height: 120px;
|
||||
margin: 4px 16px;
|
||||
width: 120px;
|
||||
float: right;
|
||||
box-shadow: 0 0 0 4px #fff, .2em .2em .1em .2em #0006;
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
|
||||
& img {
|
||||
height: 120px;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: inherit;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
background-image: linear-gradient(to bottom, #fffb, transparent 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: rotateZ(4deg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1.2) rotateZ(4deg) translateY(4px);
|
||||
box-shadow: 0 0 0 4px #fff, .4em .4em .4em .4em #0006;
|
||||
|
||||
& img {
|
||||
transform: translateX(-120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#collection {
|
||||
& ul {
|
||||
background-image: var(--line), linear-gradient(to top, chocolate 80%, var(--quaternary));
|
||||
background-size: 32px;
|
||||
box-shadow: inset 0 0 24px 8px var(--quaternary);
|
||||
margin-bottom: 2rem;
|
||||
border: 4px solid chocolate;
|
||||
border-top: 0;
|
||||
display: flex;
|
||||
padding: 25px 0 0 25px;
|
||||
overflow-x: scroll;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
& hr {
|
||||
height: 2rem;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-image: linear-gradient(darkorange 10%, chocolate 30%);
|
||||
box-shadow: inset 0 4px 4px chocolate;
|
||||
}
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: baseline;
|
||||
transition: 0.3s;
|
||||
|
||||
& a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-6px) rotateZ(2deg);
|
||||
z-index: 2;
|
||||
margin: 0 -1rem 0 0;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
color: transparent;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: inherit;
|
||||
z-index: 1;
|
||||
font-size: 1rem;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(#000, transparent);
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main>section:not([id]) {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
main>*:not(*:last-child) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.games img,
|
||||
.music img {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.games li {
|
||||
margin: 0 -8rem 0 0;
|
||||
}
|
||||
|
||||
.games img {
|
||||
display: flex;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.music {
|
||||
& li {
|
||||
margin: 0 -5rem 0 0;
|
||||
box-shadow: inset 0 0 0.2rem #666;
|
||||
background-image: linear-gradient(-45deg, #333 50%, #666);
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
|
||||
&::before {
|
||||
width: 1rem;
|
||||
box-shadow: inset 1rem 0 0 0 #222;
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: .2rem solid #ccc;
|
||||
border-left: 0;
|
||||
z-index: 1;
|
||||
background-image: linear-gradient(-45deg, #fff3, transparent, #fffb);
|
||||
width: 11rem;
|
||||
margin: 0 0 0 -1rem;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
animation: caseOpen .4s ease-in-out both;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 0 0.2rem #eee, 0 0 0 0.3rem #222;
|
||||
height: 9rem;
|
||||
width: 9rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
& li::before,
|
||||
& li::after,
|
||||
& a::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
height: inherit;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
& a::after {
|
||||
background-image: radial-gradient(circle, #444 40%, #666);
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 0 0.25rem #eee, 0 0 0 .3rem #222;
|
||||
height: 32px;
|
||||
content: url("/assets/img/theme/citrus/popper.svg");
|
||||
margin: 4rem -6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page specific - Gallery */
|
||||
#artworks {
|
||||
background-image: var(--noise), var(--line);
|
||||
background-color: #fff;
|
||||
padding: 1rem;
|
||||
background-size: auto, 32px;
|
||||
|
||||
& h2 {
|
||||
padding: 0 2rem 0 1rem;
|
||||
margin: 2rem 0;
|
||||
border-bottom: 2px dotted;
|
||||
font-size: 2rem;
|
||||
font-family: Pangolin, sans-serif;
|
||||
|
||||
&:first-of-type {
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
display: flex;
|
||||
height: 12rem;
|
||||
width: 100%;
|
||||
transition: 0.3s;
|
||||
border-bottom: unset;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
& ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(208px, 100%), 1fr));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
text-decoration: unset;
|
||||
transition: 0.3s;
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
figure {
|
||||
transition: 0.3s;
|
||||
background-color: currentColor;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
time {
|
||||
color: #fffa
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& figure {
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border: 4px solid #fff;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
font-family: Urbanist, sans-serif;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
& time {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rubik;
|
||||
src: url('/assets/fonts/Rubik.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url('/assets/fonts/Urbanist-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pangolin;
|
||||
src: url('/assets/fonts/Pangolin-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* Mobile view */
|
||||
@media screen and (max-width: 1400px) {
|
||||
header h1 {
|
||||
display: none
|
||||
}
|
||||
|
||||
body>nav {
|
||||
height: 3rem;
|
||||
border-radius: 0;
|
||||
box-shadow: inset 0 -4px 0 0 var(--quaternary);
|
||||
}
|
||||
|
||||
body>nav,
|
||||
header h1 {
|
||||
background-color: var(--secondary);
|
||||
background-attachment: unset;
|
||||
background-blend-mode: unset;
|
||||
background-image: unset;
|
||||
}
|
||||
|
||||
body>nav a {
|
||||
border-radius: 1rem;
|
||||
margin: 6px 4px 8px 4px;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: bottom;
|
||||
background-position-y: initial;
|
||||
}
|
||||
|
||||
.blog aside {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
#posts,
|
||||
#posts li {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#blog header {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
#changelog, #buttons {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
}
|
||||
#buttons ul {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#buttons fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
#changelog iframe {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes caseOpen {
|
||||
50% {
|
||||
width: 0rem;
|
||||
margin: 0 0 0 -1rem;
|
||||
}
|
||||
|
||||
51% {
|
||||
border: 0.3rem solid #999;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 11rem;
|
||||
border: 0.3rem solid #999;
|
||||
border-right: 0;
|
||||
margin: 0 -12rem;
|
||||
background-image: linear-gradient(-45deg, #ccc8, #fffa);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
186
_src/assets/css/default.css
Normal file
186
_src/assets/css/default.css
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
main {
|
||||
padding: 2rem 2rem 4rem calc(240px + 2rem);
|
||||
}
|
||||
h1,h2,h3,h4 {
|
||||
margin: 0;
|
||||
}
|
||||
article {
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
}
|
||||
article li,article p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
/* Header */
|
||||
header {
|
||||
margin: 0 0 0 240px;
|
||||
}
|
||||
header svg {
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
header h1 {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
line-height: 64px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
z-index: 1;
|
||||
}
|
||||
h2 time {
|
||||
font-size: initial;
|
||||
font-weight: initial;
|
||||
}
|
||||
/* Navigation */
|
||||
body>nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 240px;
|
||||
overflow: hidden;
|
||||
padding: 0 2rem 2rem 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 240px;
|
||||
}
|
||||
body>nav ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body>nav ul div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
body>nav a {
|
||||
display: flex;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
/* Navigation > Icons */
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
body>nav li img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
body>nav a svg,body>nav li img {
|
||||
margin: 0 8px 0 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
body>nav li img,body>nav a svg,header svg {
|
||||
align-self: center;
|
||||
}
|
||||
body>nav>ul>svg {
|
||||
overflow: visible;
|
||||
text-anchor: start;
|
||||
}
|
||||
/* Images */
|
||||
article img {
|
||||
height: 200px;
|
||||
}
|
||||
img[src*="/assets/img/pkmn/"],footer img {
|
||||
height: fit-content;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
img[src*="/assets/img/favicon/"] {
|
||||
margin: 0 4px -4px 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
img[src*="/assets/img/flag/"] {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
}
|
||||
ul:has(img, svg):not(article ul) {
|
||||
list-style-type: none;
|
||||
}
|
||||
article a:has(img) {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Footer */
|
||||
footer>nav {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
text-wrap: nowrap;
|
||||
height: 3rem;
|
||||
left: 0;
|
||||
overflow-x: scroll;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
transition: .2s;
|
||||
z-index: 10;
|
||||
}
|
||||
footer>nav ul {
|
||||
column-gap: 6px;
|
||||
display: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
footer>nav li,
|
||||
footer>nav a {
|
||||
display: inherit;
|
||||
}
|
||||
article {
|
||||
max-width: 75ch;
|
||||
}
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
img[id="meow"]:hover {
|
||||
background-image: url("/assets/img/button/second.gif")
|
||||
}
|
||||
/* Mobile view */
|
||||
@media screen and (max-width: 1400px) {
|
||||
header {
|
||||
margin:0;
|
||||
align-items: center;
|
||||
}
|
||||
main {
|
||||
padding: 2vw 2vw 6vw 2vw;
|
||||
}
|
||||
main>section:not([id]) {
|
||||
flex-direction: column;
|
||||
}
|
||||
main>section {
|
||||
width: initial;
|
||||
}
|
||||
article {
|
||||
max-width: initial;
|
||||
width: auto;
|
||||
}
|
||||
body>nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 42px;
|
||||
max-width: initial;
|
||||
overflow-x: scroll;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
body>nav ul {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
79
_src/assets/css/reset.css
Normal file
79
_src/assets/css/reset.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* https://piccalil.li/blog/a-more-modern-css-reset/ A (more) Modern CSS Reset by Andy Bell */
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Make images easier to work with
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
48
_src/assets/css/test.css
Normal file
48
_src/assets/css/test.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
:root {
|
||||
--bg: black
|
||||
}
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
background-image: linear-gradient(transparent, var(--bg) 70%), url("https://i.redd.it/a8wis0519ol61.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
html::before,html::after {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-attachment: fixed;
|
||||
background-size: contain;
|
||||
image-rendering: pixelated;
|
||||
mask-image: url("/assets/img/halftone.svg");
|
||||
mask-repeat: repeat-y;
|
||||
mask-size: 2rem;
|
||||
background-repeat: no-repeat;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
html::after {
|
||||
background-image: linear-gradient(-90deg, var(--bg) 90%, transparent), url("/assets/img/sheet1.png");
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
html::before {
|
||||
background-image: linear-gradient(-90deg, var(--bg) 90%, transparent), url("/assets/img/sheet2.png");
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Silkscreen";
|
||||
src: url("/assets/img/slkscr.ttf");
|
||||
}
|
||||
header h1 {
|
||||
color: white;
|
||||
font-family: "Silkscreen"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue