Git in Space - website/blob - 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         --red  : #f44336 ;
  14         --grn  : #66bb6a ;
  15         --ylw  : #fb8c00 ;
  16         --blu  : #3281ea ;
  17         --mag  : #ba68c8 ;
  18         --cyn  : #f06292 ;
  19 }
  20
  21 /* FONTS */
  22
  23 @font-face {
  24         font-family : Saviour                    ;
  25         src         : url( '/font/Savior4.ttf' ) ;
  26 }
  27
  28 @font-face {
  29         font-family : Hurmit ;
  30         src : url( '/font/Hurmit-Nerd-Font-Mono.otf' ) ;
  31 }
  32
  33 @font-face {
  34         font-family : Atkinson                                         ;
  35         src         : url( '/font/Atkinson-Hyperlegible-Regular.ttf' ) ;
  36 }
  37 @font-face {
  38         font-family : Atkinson                                      ;
  39         src         : url( '/font/Atkinson-Hyperlegible-Bold.ttf' ) ;
  40         font-weight : bold                                          ;
  41 }
  42 @font-face {
  43         font-family : Atkinson                                        ;
  44         src         : url( '/font/Atkinson-Hyperlegible-Italic.ttf' ) ;
  45         font-style  : italic                                          ;
  46 }
  47 @font-face {
  48         font-family : Atkinson                                            ;
  49         src         : url( '/font/Atkinson-Hyperlegible-BoldItalic.ttf' ) ;
  50         font-style  : italic                                              ;
  51         font-weight : bold                                                ;
  52 }
  53
  54 /* ANIMATIONS */
  55
  56 @keyframes glitch {
  57         0%   { opacity : 0% ; }
  58         33%  {
  59                 opacity   : 100%                                                    ;
  60                 transform : rotateX( 10deg ) skewX( 90deg ) translate( -2em , 2em ) ;
  61         }
  62         66%  { transform : translate( 2em , -2em ) ; }
  63         100% { transform : rotateX( 0deg ) skewX( 0deg ) translate( 0 , 0 ) ; }
  64 }
  65
  66 /* STYLES */
  67
  68 html {
  69         scrollbar-color     : var(--pink) var(--w)     ;
  70         overflow-x          : hidden                   ;
  71         background-image    : url( '/img/bgdark.png' ) ;
  72         background-repeat   : repeat-y                 ;
  73         background-position : center top               ;
  74         background-color    : var(--b)                 ;
  75 }
  76
  77 @media all and ( max-width : 42em ) {
  78         body { background-size : 47px , 47px ; }
  79         #wrap { width : calc( 100% - 94px ) !important ; }
  80 }
  81
  82 @media all and ( max-width : 70em ) {
  83         body {
  84                 background-image    : url( '/img/bgthinright2.png' ) ,
  85                                       url( '/img/bgthinleft2.png'  ) !important ;
  86         }
  87         #wrap { width : calc( 100% - 188px ) ; }
  88 }
  89
  90 @media all and ( min-width : 70em ) {
  91         body {
  92                 background-image    : url( '/img/bgright.png' ) ,
  93                                       url( '/img/bgleft.png'  ) ;
  94         }
  95         #wrap { width : calc( 100% - 280px ) ; }
  96 }
  97
  98 body {
  99         margin              : 0 auto               ;
 100         width               : 100%                 ;
 101         min-height          : 100vh                ;
 102         overflow-x          : hidden               ;
 103         font-family         : Atkinson             ;
 104         background-repeat   : repeat-y , repeat-y  ;
 105         background-position : left top , right top ;
 106 }
 107
 108 #wrap {
 109         margin             : 0 auto             ;
 110         max-width          : 52em               ;
 111         min-height         : 100vh              ;
 112         display            : grid               ;
 113         grid-template-rows : auto auto 1fr auto ;
 114         color              : var(--w)           ;
 115 }
 116
 117 #banner {
 118         display                    : block                                    ;
 119         margin                     : 0 auto                                   ;
 120         animation                  : glitch 0.2s linear 1s 1 normal backwards ;
 121         max-width                  : 100%                                     ;
 122         transition                 : transform 0.05s                          ;
 123         transition-timing-function : ease-out                                 ;
 124 }
 125
 126 a:hover > #banner , a:focus > #banner {
 127         transform : rotate( -1.5deg ) scale( 1.05 ) ;
 128 }
 129
 130 #head {
 131         text-align  : center                   ;
 132         font-family : Saviour                  ;
 133         color       : var(--lpur)              ;
 134         line-height : 0.7                      ;
 135         font-size   : clamp( 1em , 8vw , 4em ) ;
 136 }
 137
 138 p , ul , pre { font-size : clamp( 1em , 5vw , 2em ) ; }
 139 ul { list-style-type : '- ' ; }
 140 p {
 141         text-align : justify ;
 142         hyphens : auto ;
 143 }
 144
 145 h1 {
 146         font-family : Saviour ;
 147         color : var(--lpur) ;
 148         font-size : clamp( 1em , 8vw , 3em ) ;
 149         margin : 0 0 0 1em ;
 150 }
 151
 152 pre {
 153         overflow-x : scroll ;
 154         scrollbar-color : var(--pink) var(--g) ;
 155         margin : 0 ;
 156 }
 157 pre code {
 158         min-width : calc( 100% - 0.8em ) ;
 159         padding : 0.8em 0.4em ;
 160         font-size : clamp( 0.5em , 3.5vw , 0.6em ) ;
 161 }
 162
 163 code {
 164         font-family : Hurmit, monospace ;
 165         text-align : left ;
 166         font-size : clamp( 0.5em , 3.5vw , 0.8em ) ;
 167         margin : 0 ;
 168         padding : 0.25em 0.4em ;
 169         border-radius : 0.2em ;
 170         background-color : var(--g) ;
 171         display : inline-block ;
 172 }
 173
 174 code span.r { color : var(--red) ; }
 175 code span.g { color : var(--grn) ; }
 176 code span.y { color : var(--ylw) ; }
 177 code span.b { color : var(--blu) ; }
 178 code span.m { color : var(--mag) ; }
 179 code span.c { color : var(--cyn) ; }
 180
 181 time {
 182         color      : var(--grey)                   ;
 183         font-size  : clamp( 0.01em , 4vw , 1.2em ) ;
 184         text-align : right                         ;
 185 }
 186
 187 img:not(#banner) , audio {
 188         display   : block                                        ;
 189         margin    : 0 auto                                       ;
 190         max-width : calc( 100% - 4em )                           ;
 191         filter    : drop-shadow( -0.5em -0.2em 0px var(--pink) )
 192                     drop-shadow(  0.5em  0.2em 0px var(--cyan) ) ;
 193 }
 194
 195 img:not(#banner) { max-height : 50em ; }
 196
 197 audio {
 198         width            : 100%     ;
 199         background-color : var(--b) ;
 200 }
 201
 202 footer {
 203         max-width  : 100%               ;
 204         margin     : 1em auto           ;
 205         text-align : center             ;
 206         color      : var(--grey)        ;
 207         font-size  : min( 1em , 2.1vw ) ;
 208 }
 209
 210 footer span {
 211         display : inline-block ;
 212         font-size : min( 1.5em , 3.1vw ) ;
 213         padding-bottom : 1em ;
 214 }
 215
 216 #webring-previous { float : left  ; }
 217 #webring-next     { float : right ; }
 218
 219 a {
 220         color                      : var(--lpur)       ;
 221         transition                 : text-shadow 0.03s ;
 222         transition-timing-function : ease-out          ;
 223 }
 224 a:hover , a:focus {
 225         text-shadow : 0.2em 0 1px var(--cyan) , -0.2em 0 1px var(--pink) ;
 226 }