mirror of https://github.com/quatalog/site.git
199 lines
3.7 KiB
CSS
199 lines
3.7 KiB
CSS
/* common variables */
|
|
:root{
|
|
--quacs-yellow: #f5b53f;
|
|
--quacs-midtone: #f5cc81;
|
|
--quacs-white: #f5e3c2;
|
|
--quacs-whitest: #fdf8f0;
|
|
|
|
--deepest-purple: #12121a;
|
|
--deeper-purple: #191823;
|
|
--deep-purple: #201f2c;
|
|
--mid-dark-purple: #2c2b3d;
|
|
--mid-purple: #37364d;
|
|
--mid-light-purple: #494766;
|
|
--light-purple: #5c5980;
|
|
|
|
--pink: #f53faa;
|
|
--red: #f53f6a;
|
|
--green: #3ff57f;
|
|
--blue: #3f6ef5;
|
|
|
|
font-size: calc(1vmin + 12px);
|
|
}
|
|
|
|
body{
|
|
background-color: var(--deep-purple);
|
|
overflow-x:hidden;
|
|
margin: 0;
|
|
font-size: 0.9rem; /* default font-size. works well for small-ish thing */
|
|
}
|
|
|
|
::selection{
|
|
background: var(--mid-light-purple);
|
|
}
|
|
|
|
.hidden{
|
|
visibility: hidden;
|
|
margin: 0;
|
|
height: 0vw;
|
|
}
|
|
|
|
svg {
|
|
overflow: visible;
|
|
}
|
|
|
|
span {
|
|
display: contents;
|
|
}
|
|
|
|
/* TEXT */
|
|
h1, h1 a {
|
|
color: var(--quacs-yellow);
|
|
font-family: "proxima-nova";
|
|
font-weight: 900;
|
|
margin-top: 0vmin;
|
|
margin-bottom: 0vmin;
|
|
padding-bottom: 0;
|
|
display: block;
|
|
position: relative;
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
h2{
|
|
font-size: 1.4rem;
|
|
margin-top: 1vmin;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
color: var(--quacs-white);
|
|
font-family: "proxima-nova";
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
p a, p svg{
|
|
color: var(--quacs-midtone);
|
|
fill: var(--quacs-midtone);
|
|
height: 4vmin;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
p svg {
|
|
display: inline-block;
|
|
}
|
|
|
|
p a:hover, p a:hover svg {
|
|
color: var(--quacs-yellow);
|
|
fill: var(--quacs-yellow);
|
|
}
|
|
|
|
/* HEADER */
|
|
#qlog-header{
|
|
border-bottom: 0.2vmin solid var(--quacs-yellow);
|
|
width: 100%;
|
|
min-height: 5.25vmin;
|
|
left: 0;
|
|
top: 0;
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#qlog-wordmark svg {
|
|
height: 4.5vmin;
|
|
aspect-ratio: 454/100;
|
|
left: 0;
|
|
top: 0;
|
|
position: relative;
|
|
margin: 1vmin;
|
|
margin-bottom: 0.75vmin;
|
|
margin-left: 2vmin;
|
|
}
|
|
|
|
#header-search {
|
|
position: relative;
|
|
right: 1vmin;
|
|
width: 12rem;
|
|
height: 1.8rem;
|
|
font-size: 1.1rem;
|
|
padding-left: 0.9rem;
|
|
padding-right: 0.9rem;
|
|
}
|
|
|
|
input[type="text"] {
|
|
background: var(--quacs-white);
|
|
border-radius: 100vw;
|
|
border: none;
|
|
outline:none;
|
|
font-family: "proxima-nova";
|
|
color: var(--mid-dark-purple);
|
|
caret-color: var(--mid-dark-purple);
|
|
}
|
|
|
|
input[type="text"]::selection{
|
|
background: var(--quacs-yellow);
|
|
}
|
|
|
|
|
|
/*
|
|
d88888b .d88b. d8b db d888888b .d8888.
|
|
88' .8P Y8. 888o 88 `~~88~~' 88' YP
|
|
88ooo 88 88 88V8o 88 88 `8bo.
|
|
88~~~ 88 88 88 V8o88 88 `Y8b.
|
|
88 `8b d8' 88 V888 88 db 8D
|
|
YP `Y88P' VP V8P YP `8888Y'
|
|
*/
|
|
|
|
@font-face{
|
|
font-family: "rivalsans";
|
|
src: url("./fonts/rivalsans-regular.otf");
|
|
}
|
|
@font-face{
|
|
font-family: "rivalsans";
|
|
src: url("./fonts/rivalsans-bold.otf");
|
|
font-weight: 700;
|
|
}
|
|
@font-face{
|
|
font-family: "rivalsans";
|
|
src: url("./fonts/rivalsans-extrabold.otf");
|
|
font-weight: 800;
|
|
}
|
|
@font-face{
|
|
font-family: "rivalsans";
|
|
src: url("./fonts/rivalsans-black.otf");
|
|
font-weight: 900;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "proxima-nova";
|
|
src: url("./fonts/Proxima-Nova-Black.otf");
|
|
font-weight: 900;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "proxima-nova";
|
|
src: url("./fonts/Proxima-Nova-Bold.otf");
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "proxima-nova";
|
|
src: url("./fonts/Proxima-Nova-Extrabold.otf");
|
|
font-weight: 800;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "proxima-nova";
|
|
src: url("./fonts/Proxima-Nova-Thin.otf");
|
|
font-weight: 200;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "proxima-nova";
|
|
src: url("./fonts/Proxima-Nova-Regular.otf");
|
|
}
|