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
  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 }