merch-drop03/global.css at main · bigratmonster/merch-drop03 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
@import url('https://fonts.googleapis.com/css2?family=Averia+Sans+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lisu+Bosa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    --bright: #fefefe;
    --overcast: #f0f0f0;


    --papyrus: #f7ede0;

	--dark: #212121;
    --midnight: #121212;
    --darksky: #010101;

    --dreary: #7e7e73;

    --darken: #0a0a0a90;
    --greyen: #8784a311;
    --lighten: #ffffff16;

    --overcasty: #f0f0f0d8;
    --accentify: #e83b3bbc;

    --selection: lightblue;
    --accent: var(--dark);
	/* --accent: #e83b3b;
	--accent-alt: #ae2334; */

    --dark-accent: #a5d8ff;
    --dark-accent-alt: #339af0;
}

html {
    scroll-behavior: smooth;
}

body {
    /* font-family: 'Averia Sans Libre', sans-serif; */
    font-family: 'Roboto', sans-serif;
}

/* overrides */
a { color: var(--accent); text-decoration: underline 1px dotted;}
a:hover { text-decoration: underline 2px; }
::selection { background-color: var(--selection); }
img { user-select: none; }

/* themes */
.day { background-color: var(--bright); color: var(--dark); }
.overcast { background-color: var(--overcast); color: var(--dark); }
.papyrus { background-color: var(--papyrus); color: var(--dark); }

.night { background-color: var(--dark); color: var(--bright); }
.midnight { background-color: var(--midnight); color: var(--bright); }
.darksky { background-color: var(--darksky); color: var(--overcast); }

/* styles */
.serif { font-family: 'Lisu Bosa', serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.no-select { user-select: none; }
.no-pointer { pointer-events: none; }
.center { text-align: center; }

/* mobile */
@media (max-width: 600px) {
    .hide-mobile { display: none; }
}