968aef192b5070133eaf76da34d6076fc8e52555
[website] / global.css
1 /* VARIABLES */
2
3 :root {
4 --b : #000 ;
5 --g : #212121 ;
6 --w : #fff ;
7 --grey : #6b6b6b ;
8 --dpur : #aa2bd4 ;
9 --lpur : #d56ef7 ;
10 --pink : #ff297f ;
11 --cyan : #00ffff ;
12 }
13
14 /* FONTS */
15
16 @font-face {
17 font-family : Saviour ;
18 src : url('/font/Savior4.ttf') ;
19 }
20
21 @font-face {
22 font-family : Atkinson ;
23 src : url('/font/Atkinson-Hyperlegible-Regular.ttf') ;
24 }
25 @font-face {
26 font-family : Atkinson ;
27 src : url('/font/Atkinson-Hyperlegible-Bold.ttf') ;
28 font-weight : bold ;
29 }
30 @font-face {
31 font-family : Atkinson ;
32 src : url('/font/Atkinson-Hyperlegible-Italic.ttf') ;
33 font-style : italic ;
34 }
35 @font-face {
36 font-family : Atkinson ;
37 src : url('/font/Atkinson-Hyperlegible-BoldItalic.ttf') ;
38 font-style : italic ;
39 font-weight : bold ;
40 }
41
42 /* ANIMATIONS */
43
44 @keyframes glitch {
45 0% { opacity : 0% ; }
46 33% {
47 opacity : 100% ;
48 transform : rotateX(10deg) skewX(90deg) translate(-2em,2em) ;
49 }
50 66% { transform : translate(2em,-2em) ; }
51 100% { transform : rotateX(0deg) skewX(0deg) translate(0,0) ; }
52 }
53
54 /* STYLES */
55
56 html {
57 scrollbar-color : var(--pink) var(--w) ;
58 overflow-x : hidden ;
59 background-image : url('/img/bgdark.png') ;
60 background-repeat : repeat-y ;
61 background-position : center top ;
62 background-color : var(--b) ;
63 }
64
65 @media all and (max-width: 42em) {
66 body { background-size : 47px, 47px ; }
67 #wrap { width : calc(100% - 94px) !important ; }
68 }
69
70 @media all and (max-width: 70em) {
71 body {
72 background-image : url('/img/bgthinright2.png' ) ,
73 url('/img/bgthinleft2.png') !important ;
74 }
75 #wrap { width : calc(100% - 188px) ; }
76 }
77
78 @media all and (min-width: 70em) {
79 body {
80 background-image : url('/img/bgright.png' ) ,
81 url('/img/bgleft.png') ;
82 }
83 #wrap { width : calc(100% - 280px) ; }
84 }
85
86 body {
87 margin : 0 auto ;
88 width : 100% ;
89 min-height : 100vh ;
90 overflow-x : hidden ;
91 font-family : Atkinson ;
92
93 background-repeat : repeat-y, repeat-y ;
94 background-position : left top, right top ;
95 }
96
97 #wrap {
98 margin : 0 auto ;
99 max-width : 52em ;
100 min-height : 100vh ;
101 display : grid ;
102 grid-template-rows : auto auto 1fr auto ;
103 color : var(--w) ;
104 }
105
106 #banner {
107 display : block ;
108 margin : 0 auto ;
109 animation : glitch 0.2s linear 1s 1 normal backwards ;
110 max-width : 100% ;
111 transition : transform 0.05s ;
112 transition-timing-function : ease-out ;
113 }
114
115 a:hover > #banner , a:focus > #banner {
116 transform : rotate(-1.5deg) scale(1.05) ;
117 }
118
119 #head {
120 text-align : center ;
121 font-family : Saviour ;
122 color : var(--lpur) ;
123 line-height : 0.7 ;
124 font-size : calc(clamp(1em, 8vw, 4em)) ;
125 }
126
127 p , ul { font-size : calc(clamp(1em, 5vw, 2em)) ; }
128 ul { list-style-type : '- ' ; }
129
130 time {
131 color : var(--grey) ;
132 font-size : calc(clamp(0.01em, 4vw, 1.2em)) ;
133 text-align : right ;
134 }
135
136 img:not(#banner) , audio {
137 display : block ;
138 margin : 0 auto ;
139 max-width : calc(100% - 4em) ;
140 filter : drop-shadow(-0.5em -0.2em 0px var(--pink))
141 drop-shadow(0.5em 0.2em 0px var(--cyan)) ;
142 }
143
144 img:not(#banner) {
145 max-height : 50em ;
146 }
147
148 audio {
149 width : 100% ;
150 background-color : var(--b) ;
151 }
152
153 footer {
154 max-width : 100% ;
155 margin : 1em auto ;
156 text-align : center ;
157 color : var(--grey) ;
158 font-size : min(1em, 2.1vw) ;
159 }
160
161 a {
162 color : var(--lpur) ;
163 transition : text-shadow 0.03s ;
164 transition-timing-function : ease-out ;
165 }
166 a:hover , a:focus {
167 text-shadow : 0.2em 0 1px var(--cyan) , -0.2em 0 1px var(--pink) ;
168 }