Add webring thingy to each page
[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 background-repeat : repeat-y , repeat-y ;
93 background-position : left top , right top ;
94 }
95
96 #wrap {
97 margin : 0 auto ;
98 max-width : 52em ;
99 min-height : 100vh ;
100 display : grid ;
101 grid-template-rows : auto auto 1fr auto ;
102 color : var(--w) ;
103 }
104
105 #banner {
106 display : block ;
107 margin : 0 auto ;
108 animation : glitch 0.2s linear 1s 1 normal backwards ;
109 max-width : 100% ;
110 transition : transform 0.05s ;
111 transition-timing-function : ease-out ;
112 }
113
114 a:hover > #banner , a:focus > #banner {
115 transform : rotate( -1.5deg ) scale( 1.05 ) ;
116 }
117
118 #head {
119 text-align : center ;
120 font-family : Saviour ;
121 color : var(--lpur) ;
122 line-height : 0.7 ;
123 font-size : clamp( 1em , 8vw , 4em ) ;
124 }
125
126 p , ul { font-size : clamp( 1em , 5vw , 2em ) ; }
127 ul { list-style-type : '- ' ; }
128
129 time {
130 color : var(--grey) ;
131 font-size : clamp( 0.01em , 4vw , 1.2em ) ;
132 text-align : right ;
133 }
134
135 img:not(#banner) , audio {
136 display : block ;
137 margin : 0 auto ;
138 max-width : calc( 100% - 4em ) ;
139 filter : drop-shadow( -0.5em -0.2em 0px var(--pink) )
140 drop-shadow( 0.5em 0.2em 0px var(--cyan) ) ;
141 }
142
143 img:not(#banner) { max-height : 50em ; }
144
145 audio {
146 width : 100% ;
147 background-color : var(--b) ;
148 }
149
150 footer {
151 max-width : 100% ;
152 margin : 1em auto ;
153 text-align : center ;
154 color : var(--grey) ;
155 font-size : min( 1em , 2.1vw ) ;
156 }
157
158 footer span {
159 display : inline-block ;
160 font-size : min( 1.5em , 3.1vw ) ;
161 padding-bottom : 1em ;
162 }
163
164 #webring-previous { float : left ; }
165 #webring-next { float : right ; }
166
167 a {
168 color : var(--lpur) ;
169 transition : text-shadow 0.03s ;
170 transition-timing-function : ease-out ;
171 }
172 a:hover , a:focus {
173 text-shadow : 0.2em 0 1px var(--cyan) , -0.2em 0 1px var(--pink) ;
174 }