Git in Space - website/blob - index.css

   1 html {
   2         scrollbar-color  : var(--cyan) var(--g) ;
   3         background-image : url( '/img/bg.png' ) ;
   4         background-color : var(--g)             ;
   5 }
   6
   7 @media all and ( max-width : 42em ) {
   8         body { background-size : 47px , 47px ; }
   9         #wrap { width : calc( 100% - 94px ) !important ; }
  10 }
  11
  12 @media all and ( max-width : 70em ) {
  13         body {
  14                 background-image : url( '/img/bgthinleft.png'  ) ,
  15                                    url( '/img/bgthinright.png' ) !important ;
  16         }
  17         #wrap { width : calc( 100% - 188px ) ; }
  18 }
  19
  20 @media all and ( min-width : 70em ) {
  21         body {
  22                 background-image : url( '/img/bgleft.png'  ) ,
  23                                    url( '/img/bgright.png' ) ;
  24         }
  25         #wrap { width : calc( 100% - 280px ) ; }
  26 }
  27
  28 body { max-width : calc( 70em + 280px ) ; }
  29
  30 #head { color : var(--dpur) ; }
  31
  32 #wrap {
  33         background-color : var(--w) ;
  34         max-width        : 70em     ;
  35 }
  36
  37 a { color : var(--dpur) ; }
  38
  39 div.gif {
  40         width           : 180px ;
  41         height          : 180px ;
  42         max-width       : 28vw  ;
  43         max-height      : 28vw  ;
  44         background-size : cover ;
  45         display         : block ;
  46 }
  47
  48 #links > div , #links { width : 100% ; }
  49
  50 #links a {
  51         display                    : inline-flex     ;
  52         flex-wrap                  : nowrap          ;
  53         justify-content            : flex-start      ;
  54         align-items                : center          ;
  55         text-decoration            : none            ;
  56         transition                 : transform 0.05s ;
  57         transition-timing-function : ease-out        ;
  58 }
  59
  60 #links > div:nth-child(even) {
  61         text-align : right ;
  62         margin     : clamp( max( -90px , -17.5vw ) , calc( 8em - 20vw ) , 0px )
  63                      auto  ;
  64 }
  65
  66 #links div:nth-child(even) a { flex-direction : row-reverse ; }
  67
  68 #links div:nth-child(odd) a:hover , #links div:nth-child(odd) a:focus {
  69         transform : rotate( 1.5deg ) scale( 1.05 ) ;
  70 }
  71 #links div:nth-child(even) a:hover , #links div:nth-child(even) a:focus {
  72         transform : rotate( -1.5deg ) scale( 1.05 ) ;
  73 }
  74
  75 .gifheader {
  76         font-family : Saviour , monospace                ;
  77         line-height : 0.7                                ;
  78         max-width   : calc( 100% - min( 180px , 28vw ) ) ;
  79 }
  80
  81 .gifheader h2 {
  82         margin    : 0                           ;
  83         font-size : clamp( 1em , 10vw , 4.5em ) ;
  84         color     : var(--b)                    ;
  85 }
  86
  87 .gifheader p {
  88         margin    : 0                                         ;
  89         font-size : calc( clamp( 1em , 10vw , 4.5em ) * 0.7 ) ;
  90         color     : var(--dpur)                               ;
  91 }
  92
  93 #g-latest { background-image : url( '/img/latest.png' ) ; }
  94 #links a:hover #g-latest , #links a:focus #g-latest {
  95         background-image : url( '/img/latest.gif' ) ;
  96 }
  97 #g-bandcamp { background-image : url( '/img/bandcamp.png' ) ; }
  98 #links a:hover #g-bandcamp , #links a:focus #g-bandcamp {
  99         background-image : url( '/img/bandcamp.gif' ) ;
 100 }
 101 #g-about { background-image : url( '/img/about.png' ) ; }
 102 #links a:hover #g-about , #links a:focus #g-about {
 103         background-image : url( '/img/about.gif' ) ;
 104 }
 105 #g-mastodon { background-image : url( '/img/mastodon.png' ) ; }
 106 #links a:hover #g-mastodon , #links a:focus #g-mastodon {
 107         background-image : url( '/img/mastodon.gif' ) ;
 108 }
 109 #g-blog { background-image : url( '/img/blog.png' ) ; }
 110 #links a:hover #g-blog , #links a:focus #g-blog {
 111         background-image : url( '/img/blog.gif' ) ;
 112 }
 113 #g-funkwhale { background-image : url( '/img/funkwhale.png' ) ; }
 114 #links a:hover #g-funkwhale , #links a:focus #g-funkwhale {
 115         background-image : url( '/img/funkwhale.gif' ) ;
 116 }
 117 #g-code { background-image : url( '/img/code.png' ) ; }
 118 #links a:hover #g-code , #links a:focus #g-code {
 119         background-image : url( '/img/code.gif' ) ;
 120 }