quatalog-site/css/common.css
3eef8a28f26fb2bcc514e6f1938929a1f931762 6b82932df9 Fix CSS
2023-02-10 22:03:41 -05:00

200 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);
max-height: 4vmin;
width: 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");
}