close to prerelase
This commit is contained in:
Quentin Wolkensperg
parent
e55fbb5b67
commit
31022358ed
181 changed files with 2118 additions and 141 deletions
|
|
@ -10,39 +10,90 @@ nav ul { display: flex; flex-direction: column; list-style-type: none; list-styl
|
|||
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: 'gt';
|
||||
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: 'c';
|
||||
src: url('fonts/Creduci.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'rumeur';
|
||||
src: url('fonts/rumeur.otf') format('opentype');
|
||||
}
|
||||
:root {
|
||||
--alt-accent2: #C0CEE8ff;
|
||||
--primary-accent: #AEA3F0ff;
|
||||
--rebecca-purple: #5B3D8Aff;
|
||||
--primary-dark: #0C072Cff;
|
||||
--alt-accent: #989898ff;
|
||||
--back-secondary: #1C202Fff;
|
||||
--back-primary: #000300ff;
|
||||
--primary: #E4F0FEff;
|
||||
--white: white;
|
||||
--secondary-accent: #A4D1ADff;
|
||||
--link: #2667deff;
|
||||
--code: #18A02Cff;
|
||||
/* 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: verdana, helvetica, arial, 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(--back-primary);
|
||||
background-color: var(--back-primary);
|
||||
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: 84%;
|
||||
font-family: verdana, helvetica, arial, sans-serif;
|
||||
font-size: 90%;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
@ -51,19 +102,19 @@ a:hover {
|
|||
|
||||
/* header and top bar */
|
||||
header nav {
|
||||
background-color: var(--primary-accent);
|
||||
color: var(--primary-dark);
|
||||
border-bottom: 3px solid var(--primary-dark);
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-text);
|
||||
border-bottom: 3px solid var(--border-secondary);
|
||||
padding: 0.3em;
|
||||
font-size: 91%;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
display: flex;
|
||||
background-color: var(--back-secondary);
|
||||
color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
border-bottom: 3px solid var(--primary-dark);
|
||||
border-bottom: 3px solid var(--border-secondary);
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
padding: 0.5ex 0 0.5ex 0.6ex;
|
||||
|
|
@ -73,13 +124,15 @@ header h1 #headerSubTitle {
|
|||
display: block;
|
||||
margin-left: 2em;
|
||||
font-size: 40%;
|
||||
color: var(--secondary-accent)
|
||||
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 {
|
||||
|
|
@ -107,12 +160,13 @@ header nav .right {
|
|||
/* sidebar */
|
||||
body>nav {
|
||||
padding: 0;
|
||||
border-right: 3px solid var(--alt-accent2);
|
||||
border-right: 3px solid var(--border-primary);
|
||||
}
|
||||
|
||||
body>nav>div a,
|
||||
input[type="submit"] {
|
||||
color: var(--secondary-accent);
|
||||
input[type="submit"],
|
||||
.bu {
|
||||
color: var(--color-accent);
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
padding: 0.25em 1ex 0.25em 2mm;
|
||||
|
|
@ -120,30 +174,35 @@ input[type="submit"] {
|
|||
}
|
||||
|
||||
body>nav>div a:hover,
|
||||
input[type="submit"]:hover {
|
||||
color: var(--primary-accent) !important;
|
||||
background-color: var(--back-primary);
|
||||
border-left: var(--secondary-accent) solid 0.3em;
|
||||
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"] {
|
||||
input[type="submit"], .bu {
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
fieldset input[type="submit"]:hover {
|
||||
border: 2px ridge var(--secondary-accent);
|
||||
border-left: var(--secondary-accent) solid 0.3em;
|
||||
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"] {
|
||||
border: 2px solid var(--secondary-accent);
|
||||
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;
|
||||
|
|
@ -164,11 +223,11 @@ input[type="text"], textarea {
|
|||
}
|
||||
|
||||
body>nav>div .dt {
|
||||
color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
body>nav>div a:hover .dt {
|
||||
color: var(--primary-accent);
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
body>nav>div p {
|
||||
|
|
@ -180,40 +239,52 @@ body>nav>div p {
|
|||
/* main copy */
|
||||
article {
|
||||
padding: 0.5ex 1vw 5vh 1vw;
|
||||
color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
backdrop-filter: blur(3px);
|
||||
flex: 1 1 60%;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
article h1,
|
||||
article h2 {
|
||||
color: var(--primary-accent);
|
||||
article h1 {
|
||||
color: var(--header-primary);
|
||||
font-weight: bold;
|
||||
margin: 1em 0 1em 0;
|
||||
margin: 1em 0 0.5em 0;
|
||||
font-size: xx-large;
|
||||
font-family: rumeur, sans-serif;
|
||||
}
|
||||
article h2 {
|
||||
color: var(--header-secondary);
|
||||
font-weight: bold;
|
||||
margin: 1em 0 0.5em 0;
|
||||
font-family: var(--font-headers);
|
||||
}
|
||||
|
||||
article h3 {
|
||||
color: var(--secondary-accent);
|
||||
color: var(--header-tertiary);
|
||||
font-weight: bold;
|
||||
margin: 2em 0 0 0;
|
||||
margin: 2em 0 0.2em 0;
|
||||
}
|
||||
|
||||
article h4 article h5 {
|
||||
color: var(--primary);
|
||||
color: var(--header-other);
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
|
||||
article h6,
|
||||
article h7,
|
||||
article h8 {
|
||||
color: var(--primary);
|
||||
color: var(--header-other);
|
||||
font-weight: bold;
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
|
||||
article p, article li {
|
||||
color: var(--white);
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
article a {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
article a:hover {
|
||||
|
|
@ -221,11 +292,12 @@ article a:hover {
|
|||
}
|
||||
|
||||
article img {
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
border: 0.4em solid var(--back-primary);
|
||||
background-color: black !important;
|
||||
padding: 0.2em;
|
||||
border: 0.4em solid var(--bg-primary);
|
||||
}
|
||||
|
||||
textarea#comment_text {
|
||||
max-width: 50em;
|
||||
max-height: 5em;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
|
@ -233,6 +305,11 @@ article img {
|
|||
}
|
||||
|
||||
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;
|
||||
|
|
@ -240,17 +317,22 @@ img[title="main"] {
|
|||
}
|
||||
|
||||
hr {
|
||||
color: var(--alt-accent2)
|
||||
color: var(--border-primary);
|
||||
}
|
||||
|
||||
.notify_errors {
|
||||
padding: 0.2em;
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
footer {
|
||||
color: white;
|
||||
background-color: color-mix(in srgb, var(--primary-back), transparent 86%);
|
||||
color: var(--text-primary);
|
||||
background-color: color-mix(in srgb, var(--bg-primary), transparent 86%);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: inherit;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
footer div {
|
||||
|
|
@ -259,26 +341,26 @@ footer div {
|
|||
|
||||
/* tables */
|
||||
table {
|
||||
border: 1px solid rgba(128, 128, 128, 0.5);
|
||||
border: 1px solid rgba(var(--bg-secondary), 0.5);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
color: white;
|
||||
background-color: rgb(100, 135, 220);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: rgba(128, 128, 128, 0.1)
|
||||
background-color: rgba(var(--bg-secondary), 0.1);
|
||||
}
|
||||
|
||||
/* accents */
|
||||
.accent {
|
||||
color: var(--primary-accent)
|
||||
color: var(--text-accent)
|
||||
}
|
||||
|
||||
.accent2 {
|
||||
color: var(--secondary-accent)
|
||||
color: var(--color-accent)
|
||||
}
|
||||
|
||||
/* dates */
|
||||
|
|
@ -289,14 +371,14 @@ tr:nth-child(odd) {
|
|||
font-weight: normal;
|
||||
max-width: fit-content;
|
||||
font-size: x-small;
|
||||
color: var(--primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.date::before,
|
||||
.date::after {
|
||||
content: '⋆★⋆';
|
||||
flex: 1;
|
||||
color: var(--alt-accent)
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.date:not(:empty)::before {
|
||||
|
|
@ -317,7 +399,7 @@ tr:nth-child(odd) {
|
|||
|
||||
.bfeed h2 a {
|
||||
font-size: 90%;
|
||||
color: var(--primary-accent);
|
||||
color: var(--text-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -327,11 +409,27 @@ tr:nth-child(odd) {
|
|||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
color: var(--secondary-accent);
|
||||
border-left: 3px solid var(--alt-accent);
|
||||
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;
|
||||
}
|
||||
|
||||
/* animations */
|
||||
|
||||
.fire {
|
||||
|
|
@ -361,6 +459,69 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -370,8 +531,8 @@ blockquote {
|
|||
body > nav {
|
||||
flex-basis: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 3px solid var(--alt-accent2);
|
||||
border-top: 3px solid var(--alt-accent2);
|
||||
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