mirror of https://github.com/quatalog/site.git
Refactor common.css
This commit is contained in:
parent
be8c83769d
commit
7251c9a462
|
@ -19,6 +19,18 @@
|
||||||
--blue: #3f6ef5;
|
--blue: #3f6ef5;
|
||||||
|
|
||||||
font-size: calc(1vmin + 12px);
|
font-size: calc(1vmin + 12px);
|
||||||
|
|
||||||
|
/* default theme */
|
||||||
|
--background-color: var(--deep-purple);
|
||||||
|
--selection-color: var(--mid-light-purple);
|
||||||
|
--h-text-color: var(--quacs-yellow);
|
||||||
|
--p-text-color: var(--quacs-white);
|
||||||
|
--link-text-color: var(--quacs-midtone);
|
||||||
|
--link-hover-color: var(--quacs-yellow);
|
||||||
|
--header-color: var(--quacs-yellow);
|
||||||
|
--input-background-color: var(--quacs-white);
|
||||||
|
--input-text-color: var(--mid-dark-purple);
|
||||||
|
--input-selection-color: var(--quacs-yellow);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
@ -27,14 +39,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--deep-purple);
|
background-color: var(--background-color);
|
||||||
overflow-x:hidden;
|
overflow-x:hidden;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.9rem; /* default font-size. works well for small-ish thing */
|
font-size: 0.9rem; /* default font-size. works well for small-ish thing */
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection{
|
::selection{
|
||||||
background: var(--mid-light-purple);
|
background: var(--selection-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden{
|
.hidden{
|
||||||
|
@ -49,7 +61,7 @@ svg {
|
||||||
|
|
||||||
/* TEXT */
|
/* TEXT */
|
||||||
h1, h1 a {
|
h1, h1 a {
|
||||||
color: var(--quacs-yellow);
|
color: var(--h-text-color);
|
||||||
font-family: "proxima-nova";
|
font-family: "proxima-nova";
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
margin-top: 0vmin;
|
margin-top: 0vmin;
|
||||||
|
@ -67,7 +79,7 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: var(--quacs-white);
|
color: var(--p-text-color);
|
||||||
font-family: "proxima-nova";
|
font-family: "proxima-nova";
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
@ -75,8 +87,8 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
p a, p svg {
|
p a, p svg {
|
||||||
color: var(--quacs-midtone);
|
color: var(--link-text-color);
|
||||||
fill: var(--quacs-midtone);
|
fill: var(--link-text-color);
|
||||||
max-height: 4vmin;
|
max-height: 4vmin;
|
||||||
width: 4vmin;
|
width: 4vmin;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
@ -87,13 +99,13 @@ p svg {
|
||||||
}
|
}
|
||||||
|
|
||||||
p a:hover, p a:hover svg {
|
p a:hover, p a:hover svg {
|
||||||
color: var(--quacs-yellow);
|
color: var(--link-hover-color);
|
||||||
fill: var(--quacs-yellow);
|
fill: var(--link-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER */
|
/* HEADER */
|
||||||
#qlog-header {
|
#qlog-header {
|
||||||
border-bottom: 0.2vmin solid var(--quacs-yellow);
|
border-bottom: 0.2vmin solid var(--header-color);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 5.25vmin;
|
min-height: 5.25vmin;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -127,28 +139,20 @@ p a:hover, p a:hover svg {
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
background: var(--quacs-white);
|
background: var(--input-background-color);
|
||||||
border-radius: 100vw;
|
border-radius: 100vw;
|
||||||
border: none;
|
border: none;
|
||||||
outline:none;
|
outline:none;
|
||||||
font-family: "proxima-nova";
|
font-family: "proxima-nova";
|
||||||
color: var(--mid-dark-purple);
|
color: var(--input-text-color);
|
||||||
caret-color: var(--mid-dark-purple);
|
caret-color: var(--input-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]::selection{
|
input[type="text"]::selection{
|
||||||
background: var(--quacs-yellow);
|
background: var(--input-selection-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* fonts */
|
||||||
/*
|
|
||||||
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-face{
|
||||||
font-family: "rivalsans";
|
font-family: "rivalsans";
|
||||||
|
|
Loading…
Reference in New Issue