first commit
This commit is contained in:
q
commit
dc1afb2cb2
228 changed files with 12529 additions and 0 deletions
605
pub/style/style.css
Normal file
605
pub/style/style.css
Normal file
|
|
@ -0,0 +1,605 @@
|
|||
body { display: flex; flex-wrap: wrap; font-family: sans; }
|
||||
header { flex-basis: 100%; flex-shrink: 0; }
|
||||
article { flex-basis: 60%; padding-left: 1em; }
|
||||
footer { flex-basis: 100%; flex-shrink: 0; }
|
||||
header nav { display: flex; justify-content: space-between; }
|
||||
nav a, header a { text-decoration: none ; color: inherit; }
|
||||
header h1 span { margin-left: 1em; font-size: 50%; font-style: italic; }
|
||||
body > nav { flex-basis: content; padding-right: 1vw; min-width: 16em; }
|
||||
nav ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0; }
|
||||
nav li ul { padding-left: 0.6em }
|
||||
footer { display: flex; justify-content: space-between; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'ft88';
|
||||
src: url('fonts/FT88-Gothique.woff2') format('woff2'),
|
||||
url('fonts/FT88-Gothique.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'vg5000';
|
||||
src: url('fonts/VG5000-Regular_web.woff2') format('woff2'),
|
||||
url('fonts/VG5000-Regular_web.woff') format('woff');
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'abordage';
|
||||
src: url('fonts/degheest/Abordage-Regular.woff2') format('woff2'),
|
||||
url('fonts/degheest/Abordage-Regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: '8bitJVE';
|
||||
src: url('fonts/8bitoperator-jve-regular.font') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'gterm';
|
||||
src: url('fonts/terminal-grotesque-webfont.woff2') format('woff2'),
|
||||
url('fonts/terminal-grotesque-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'wonder';
|
||||
src: url('fonts/WonderType-Regular.otf') format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'creduci';
|
||||
src: url('fonts/Creduci.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'rumeur';
|
||||
src: url('fonts/rumeur.otf') format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'ft88-serif';
|
||||
src: url('fonts/degheest/FT88-Serif.woff2') format('woff2'),
|
||||
url('fonts/degheest/FT88-Serif.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'ft88-school';
|
||||
src: url('fonts/degheest/FT88-School.woff2') format('woff2'),
|
||||
url('fonts/degheest/FT88-School.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'coral-pixels';
|
||||
src: url('fonts/CoralPixels-Regular.woff2') format('woff2'),
|
||||
url('fonts/CoralPixels-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'medodica';
|
||||
src: url('fonts/MedodicaRegular.otf') format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pottaone';
|
||||
src: url('fonts/PottaOne-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'jersey10';
|
||||
src: url('fonts/Jersey10-Regular.woff2') format('woff2'),
|
||||
url('fonts/Jersey10-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'cyberpunkwaifus';
|
||||
src: url('fonts/CyberpunkWaifus.woff') format('woff'),
|
||||
url('fonts/CyberpunkWaifus.ttf') format('truetype');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
/* Main color scheme */
|
||||
--color-primary: #E4F0FEff;
|
||||
--color-secondary: #AEA3F0ff;
|
||||
--color-accent: #A4D1ADff;
|
||||
|
||||
/* Background colors */
|
||||
--bg-primary: #000300ff;
|
||||
--bg-secondary: #1C202Fff;
|
||||
|
||||
/* Text colors */
|
||||
--text-primary: #E4F0FEff;
|
||||
--text-secondary: #989898ff;
|
||||
--text-accent: #AEA3F0ff;
|
||||
|
||||
/* Header colours */
|
||||
--header-primary:#AEA3F0ff;
|
||||
--header-secondary: #AEA3F0ff;
|
||||
--header-tertiary: #A4D1ADff;
|
||||
--header-other: #E4F0FEff;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: #2667deff;
|
||||
--link-hover: #5B3D8Aff;
|
||||
|
||||
/* Border colors */
|
||||
--border-primary: #C0CEE8ff;
|
||||
--border-secondary: #0C072Cff;
|
||||
--border-image: #000300ff;
|
||||
|
||||
/* Special purpose colors */
|
||||
--code-color: #18A02Cff;
|
||||
--header-bg: #AEA3F0ff;
|
||||
--header-text: #0C072Cff;
|
||||
|
||||
/* Font families */
|
||||
--font-headers: rumeur, sans-serif;
|
||||
--font-body: abordage, verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
linear-gradient(to right, rgba(0, 5, 10, 0.9), rgba(0, 5, 5, 0.9)),
|
||||
url('imgs/back.jpeg'),
|
||||
var(--bg-primary);
|
||||
background-color: var(--bg-primary);
|
||||
background-position: center center;
|
||||
background-size: 110vh 75vh;
|
||||
background-repeat: repeat-y;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 90%;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* header and top bar */
|
||||
header nav {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
border-bottom: 3px solid var(--border-secondary);
|
||||
padding: 0.3em;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
display: flex;
|
||||
background-color: var(--back-secondary);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
border-bottom: 3px solid var(--border-secondary);
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
padding: 0.5ex 0 0.5ex 0.6ex;
|
||||
}
|
||||
|
||||
header h1 #headerSubTitle {
|
||||
display: block;
|
||||
margin-left: 2em;
|
||||
font-size: 40%;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
header h1 .headerLink {
|
||||
display: inline-block;
|
||||
margin-top: 0.2ex;
|
||||
margin-left: 0.6ex;
|
||||
font-family: var(--font-headers);
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
header h1 a img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
padding: 0.2ex 0.5ex 0.2ex;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
header nav a:hover {
|
||||
text-decoration: underline;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
header nav .right {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
body>nav {
|
||||
padding: 0;
|
||||
border-right: 3px solid var(--border-primary);
|
||||
}
|
||||
|
||||
body>nav>div a,
|
||||
input[type="submit"],
|
||||
.bu {
|
||||
color: var(--color-accent);
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
padding: 0.25em 1ex 0.25em 2mm;
|
||||
font-size: 102%
|
||||
}
|
||||
|
||||
body>nav>div a:hover,
|
||||
input[type="submit"]:hover,
|
||||
.bu:hover {
|
||||
color: var(--text-accent) !important;
|
||||
background-color: var(--bg-primary);
|
||||
border-left: var(--color-accent) solid 0.3em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="submit"], .bu {
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
fieldset input[type="submit"]:hover, .bu:hover {
|
||||
border: 2px ridge var(--color-accent);
|
||||
border-left: var(--color-accent) solid 0.3em;
|
||||
}
|
||||
|
||||
fieldset input[type="submit"], .bu {
|
||||
border: 2px solid var(--color-accent);
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
.bu {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 1em;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
input[type="text"], textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.log input[type="text"] {
|
||||
padding: 2px;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
body>nav>div .dt {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
body>nav>div a:hover .dt {
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
body>nav>div p {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0.5em 2mm;
|
||||
padding: 1em 0 0 0;
|
||||
}
|
||||
|
||||
/* main copy */
|
||||
article {
|
||||
padding: 0.5ex 1vw 5vh 1vw;
|
||||
color: var(--text-primary);
|
||||
backdrop-filter: blur(3px);
|
||||
flex: 1 1 60%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
color: var(--header-primary);
|
||||
font-weight: bold;
|
||||
margin: 1em 0 0.5em 0;
|
||||
font-size: xx-large;
|
||||
font-family: var(--font-headers);
|
||||
}
|
||||
article h2 {
|
||||
color: var(--header-secondary);
|
||||
font-weight: bold;
|
||||
margin: 1em 0 0.5em 0;
|
||||
font-family: var(--font-headers);
|
||||
}
|
||||
|
||||
article h3 {
|
||||
color: var(--header-tertiary);
|
||||
font-weight: bold;
|
||||
margin: 2em 0 0.2em 0;
|
||||
}
|
||||
|
||||
article h4 article h5 {
|
||||
color: var(--header-other);
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
|
||||
article h6,
|
||||
article h7,
|
||||
article h8 {
|
||||
color: var(--header-other);
|
||||
font-weight: bold;
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
|
||||
article p, article li {
|
||||
color: var(--text-primary);
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
article a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
article a:hover {
|
||||
filter: brightness(85%)
|
||||
}
|
||||
|
||||
article img {
|
||||
border: 0.4em solid var(--bg-primary);
|
||||
}
|
||||
|
||||
textarea#comment_text {
|
||||
max-width: 50em;
|
||||
max-height: 5em;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img[title="main"] {
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
border: 0.4em solid var(--bg-primary);
|
||||
background-color: var(--border-image) !important;
|
||||
padding: 0.2em;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--border-primary);
|
||||
}
|
||||
|
||||
.notify_errors {
|
||||
padding: 0.2em;
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
footer {
|
||||
color: var(--text-primary);
|
||||
background-color: color-mix(in srgb, var(--bg-primary), transparent 86%);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
footer div {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table {
|
||||
border: 1px solid rgba(var(--bg-secondary), 0.5);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: rgba(var(--bg-secondary), 0.1);
|
||||
}
|
||||
|
||||
/* accents */
|
||||
.accent {
|
||||
color: var(--text-accent)
|
||||
}
|
||||
|
||||
.accent2 {
|
||||
color: var(--color-accent)
|
||||
}
|
||||
|
||||
/* dates */
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
max-width: fit-content;
|
||||
font-size: x-small;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.date::before,
|
||||
.date::after {
|
||||
content: '⋆★⋆';
|
||||
flex: 1;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.date:not(:empty)::before {
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.date:not(:empty)::after {
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
.bfeed p {
|
||||
margin: 0.6ex 0 0.6ex;
|
||||
}
|
||||
|
||||
.bfeed h2 {
|
||||
margin-bottom: 0.2ex;
|
||||
}
|
||||
|
||||
.bfeed h2 a {
|
||||
font-size: 90%;
|
||||
color: var(--text-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bfeed h2 a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
color: var(--color-accent);
|
||||
border-left: 3px solid var(--text-secondary);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.copybox {
|
||||
background-color: var(--bg-primary);
|
||||
border: 1px solid var(--text-primary);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
color: var(--code-color);
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#test-search {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* animations */
|
||||
|
||||
.fire {
|
||||
color: #f48c06;
|
||||
text-shadow:
|
||||
0px -1px 3px #f48c06,
|
||||
0px -2px 6px #dc2f02,
|
||||
0px -6px 12px #9d0208;
|
||||
animation: flicker 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
text-shadow:
|
||||
0px -1px 3px #f48c06,
|
||||
0px -2px 6px #dc2f02,
|
||||
0px -6px 12px #9d0208;
|
||||
}
|
||||
|
||||
50% {
|
||||
text-shadow:
|
||||
0 -2px 6px #f48c06,
|
||||
0 -4px 12px #dc2f02,
|
||||
0 -8px 16px #9d0208;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle + label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle + label div {
|
||||
display: none;
|
||||
height: 20px;
|
||||
width: 60px;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
padding: 5px 5px 5px 5px;
|
||||
text-align: center;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.menu-toggle + label p {
|
||||
display: inline-block;
|
||||
font-size: x-large;
|
||||
color: var(--text-primary);
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.menu-toggle + label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-toggle + label div {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-content {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle:checked ~ .nav-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-toggle + label div::after {
|
||||
content: '▶';
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.menu-toggle:checked + label div::after {
|
||||
content: '▽';
|
||||
}
|
||||
|
||||
.nav-list li:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
/* media */
|
||||
@media screen and (max-width: 600px) {
|
||||
article {
|
||||
flex-basis: 100%;
|
||||
padding: 0.5em;
|
||||
}
|
||||
body > nav {
|
||||
flex-basis: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 3px solid var(--border-primary);
|
||||
border-top: 3px solid var(--border-primary);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue