]> Git in Space - website/commitdiff
Make CSS pretty
authorMira Ayre <mi@boxin.space>
Wed, 26 Jan 2022 20:41:16 +0000 (20:41 +0000)
committerMira Ayre <mi@boxin.space>
Wed, 26 Jan 2022 20:41:16 +0000 (20:41 +0000)
blog.css
blogwide.css
global.css
index.css

index b2a2c7a1c6f62ade50c72adf7331d5401ede84ee..24ee14d49e298b971da1782148974f2b7be14369 100644 (file)
--- a/blog.css
+++ b/blog.css
@@ -1,30 +1,27 @@
 #blog {
        list-style-type : none ;
-       margin : 0 ;
-       padding : 0 ;
-       width : 100% ;
+       margin          : 0    ;
+       padding         : 0    ;
+       width           : 100% ;
 }
 #blog li {
-       width : 100% ;
+       width  : 100%  ;
        margin : 1em 0 ;
 }
 #blog a {
-       display : block ;
-       font-family : Saviour ;
-       line-height : 0.7 ;
-       font-size : calc(clamp(1em, 7vw, 1.5em)) ;
-       margin-bottom : 0.3em ;
-}
-#blog time {
-       display : block ;
+       display       : block                              ;
+       font-family   : Saviour                            ;
+       line-height   : 0.7                                ;
+       font-size     : calc( clamp( 1em , 7vw , 1.5em ) ) ;
+       margin-bottom : 0.3em                              ;
 }
+#blog time { display : block ; }
 #blog span {
-       display : block ;
-       font-size : calc(clamp(0.01em, 5vw, 0.8em)) ;
+       display   : block                                 ;
+       font-size : calc( clamp( 0.01em , 5vw , 0.8em ) ) ;
 }
 
 time {
-       text-align : left ;
-       font-size : calc(clamp(0.01em, 4vw, 0.6em)) ;
+       text-align : left                                  ;
+       font-size  : calc( clamp( 0.01em , 4vw , 0.6em ) ) ;
 }
-
index a4895f7e1bdd41610965f37f0ad74b0cbfafd56b..26af35bfcd22b096e4209e334918f11bb31c4283 100644 (file)
@@ -1,32 +1,30 @@
-@media all and (min-width: 115em) {
+@media all and ( min-width : 115em ) {
        #banner { margin-left : 15em ; }
-       #wrap {
-               transform : translate(-15em, 0) ;
-       }
+       #wrap { transform : translate( -15em , 0 ) ; }
 
        p.i {
-               position : relative ;
-               height : 0.2em ;
-               background-color : var(--pink) ;
-               transform : translate(2em, 0) ;
+               position         : relative             ;
+               height           : 0.2em                ;
+               background-color : var(--pink)          ;
+               transform        : translate( 2em , 0 ) ;
        }
 
        p.i img {
-               position : absolute ;
-               left : 100% ;
-               bottom : 0 ;
+               position  : absolute        ;
+               left      : 100%            ;
+               bottom    : 0               ;
                max-width : 15em !important ;
        }
 
-       .i0  img { transform : translate(0, 0) ; }
-       .i1  img { transform : translate(0, 10%) ; }
-       .i2  img { transform : translate(0, 20%) ; }
-       .i3  img { transform : translate(0, 30%) ; }
-       .i4  img { transform : translate(0, 40%) ; }
-       .i5  img { transform : translate(0, 50%) ; }
-       .i6  img { transform : translate(0, 60%) ; }
-       .i7  img { transform : translate(0, 70%) ; }
-       .i8  img { transform : translate(0, 80%) ; }
-       .i9  img { transform : translate(0, 90%) ; }
-       .i10 img { transform : translate(0, 100%) ; }
+       .i0  img { transform : translate( 0 ,   0  ) ; }
+       .i1  img { transform : translate( 0 ,  10% ) ; }
+       .i2  img { transform : translate( 0 ,  20% ) ; }
+       .i3  img { transform : translate( 0 ,  30% ) ; }
+       .i4  img { transform : translate( 0 ,  40% ) ; }
+       .i5  img { transform : translate( 0 ,  50% ) ; }
+       .i6  img { transform : translate( 0 ,  60% ) ; }
+       .i7  img { transform : translate( 0 ,  70% ) ; }
+       .i8  img { transform : translate( 0 ,  80% ) ; }
+       .i9  img { transform : translate( 0 ,  90% ) ; }
+       .i10 img { transform : translate( 0 , 100% ) ; }
 }
index 968aef192b5070133eaf76da34d6076fc8e52555..a254ce33c137df05e44ab4d838423491431e8154 100644 (file)
 /* FONTS */
 
 @font-face {
-       font-family : Saviour                  ;
-       src         : url('/font/Savior4.ttf') ;
+       font-family : Saviour                    ;
+       src         : url( '/font/Savior4.ttf' ) ;
 }
 
 @font-face {
-       font-family : Atkinson                                       ;
-       src         : url('/font/Atkinson-Hyperlegible-Regular.ttf') ;
+       font-family : Atkinson                                         ;
+       src         : url( '/font/Atkinson-Hyperlegible-Regular.ttf' ) ;
 }
 @font-face {
-       font-family : Atkinson                                    ;
-       src         : url('/font/Atkinson-Hyperlegible-Bold.ttf') ;
-       font-weight : bold                                        ;
+       font-family : Atkinson                                      ;
+       src         : url( '/font/Atkinson-Hyperlegible-Bold.ttf' ) ;
+       font-weight : bold                                          ;
 }
 @font-face {
-       font-family : Atkinson                                      ;
-       src         : url('/font/Atkinson-Hyperlegible-Italic.ttf') ;
-       font-style  : italic                                        ;
+       font-family : Atkinson                                        ;
+       src         : url( '/font/Atkinson-Hyperlegible-Italic.ttf' ) ;
+       font-style  : italic                                          ;
 }
 @font-face {
-       font-family : Atkinson                                          ;
-       src         : url('/font/Atkinson-Hyperlegible-BoldItalic.ttf') ;
-       font-style  : italic                                            ;
-       font-weight : bold                                              ;
+       font-family : Atkinson                                            ;
+       src         : url( '/font/Atkinson-Hyperlegible-BoldItalic.ttf' ) ;
+       font-style  : italic                                              ;
+       font-weight : bold                                                ;
 }
 
 /* ANIMATIONS */
 @keyframes glitch {
        0%   { opacity : 0% ; }
        33%  {
-               opacity   : 100%                                            ;
-               transform : rotateX(10deg) skewX(90deg) translate(-2em,2em) ;
+               opacity   : 100%                                                    ;
+               transform : rotateX( 10deg ) skewX( 90deg ) translate( -2em , 2em ) ;
        }
-       66%  { transform : translate(2em,-2em) ; }
-       100% { transform : rotateX(0deg) skewX(0deg) translate(0,0) ; }
+       66%  { transform : translate( 2em , -2em ) ; }
+       100% { transform : rotateX( 0deg ) skewX( 0deg ) translate( 0 , 0 ) ; }
 }
 
 /* STYLES */
 
 html {
-       scrollbar-color : var(--pink) var(--w) ;
-       overflow-x : hidden ;
-       background-image    : url('/img/bgdark.png') ;
-       background-repeat   : repeat-y           ;
-       background-position : center top         ;
-       background-color    : var(--b) ;
+       scrollbar-color     : var(--pink) var(--w)     ;
+       overflow-x          : hidden                   ;
+       background-image    : url( '/img/bgdark.png' ) ;
+       background-repeat   : repeat-y                 ;
+       background-position : center top               ;
+       background-color    : var(--b)                 ;
 }
 
-@media all and (max-width: 42em) {
-       body { background-size : 47px, 47px ; }
-       #wrap { width : calc(100% - 94px) !important ; }
+@media all and ( max-width : 42em ) {
+       body { background-size : 47px , 47px ; }
+       #wrap { width : calc( 100% - 94px ) !important ; }
 }
 
-@media all and (max-width: 70em) {
+@media all and ( max-width : 70em ) {
        body {
-               background-image    : url('/img/bgthinright2.png' ) ,
-                                     url('/img/bgthinleft2.png') !important ;
+               background-image    : url( '/img/bgthinright2.png' ) ,
+                                     url( '/img/bgthinleft2.png'  ) !important ;
        }
-       #wrap { width : calc(100% - 188px) ; }
+       #wrap { width : calc( 100% - 188px ) ; }
 }
 
-@media all and (min-width: 70em) {
+@media all and ( min-width : 70em ) {
        body {
-               background-image    : url('/img/bgright.png' ) ,
-                                     url('/img/bgleft.png') ;
+               background-image    : url( '/img/bgright.png' ) ,
+                                     url( '/img/bgleft.png'  ) ;
        }
-       #wrap { width : calc(100% - 280px) ; }
+       #wrap { width : calc( 100% - 280px ) ; }
 }
 
 body {
-       margin             : 0 auto        ;
-       width              : 100%          ;
-       min-height         : 100vh         ;
-       overflow-x         : hidden ;
-       font-family        : Atkinson ;
-
-       background-repeat   : repeat-y, repeat-y          ;
-       background-position : left top, right top         ;
+       margin              : 0 auto               ;
+       width               : 100%                 ;
+       min-height          : 100vh                ;
+       overflow-x          : hidden               ;
+       font-family         : Atkinson             ;
+       background-repeat   : repeat-y , repeat-y  ;
+       background-position : left top , right top ;
 }
 
 #wrap {
-       margin : 0 auto ;
-       max-width : 52em ;
-       min-height : 100vh ;
-       display            : grid          ;
+       margin             : 0 auto             ;
+       max-width          : 52em               ;
+       min-height         : 100vh              ;
+       display            : grid               ;
        grid-template-rows : auto auto 1fr auto ;
-       color : var(--w) ;
+       color              : var(--w)           ;
 }
 
 #banner {
-       display : block ;
-       margin : 0 auto ;
-       animation : glitch 0.2s linear 1s 1 normal backwards ;
-       max-width : 100% ;
+       display                    : block                                    ;
+       margin                     : 0 auto                                   ;
+       animation                  : glitch 0.2s linear 1s 1 normal backwards ;
+       max-width                  : 100%                                     ;
        transition                 : transform 0.05s                          ;
        transition-timing-function : ease-out                                 ;
 }
 
 a:hover > #banner , a:focus > #banner {
-       transform : rotate(-1.5deg) scale(1.05) ;
+       transform : rotate( -1.5deg ) scale( 1.05 ) ;
 }
 
 #head {
-       text-align : center ;
-       font-family : Saviour ;
-       color : var(--lpur) ;
-       line-height : 0.7 ;
-       font-size : calc(clamp(1em, 8vw, 4em)) ;
+       text-align  : center                   ;
+       font-family : Saviour                  ;
+       color       : var(--lpur)              ;
+       line-height : 0.7                      ;
+       font-size   : clamp( 1em , 8vw , 4em ) ;
 }
 
-p , ul { font-size : calc(clamp(1em, 5vw, 2em)) ; }
+p , ul { font-size : clamp( 1em , 5vw , 2em ) ; }
 ul { list-style-type : '- ' ; }
 
 time {
-       color : var(--grey) ;
-       font-size : calc(clamp(0.01em, 4vw, 1.2em)) ;
-       text-align : right ;
+       color      : var(--grey)                   ;
+       font-size  : clamp( 0.01em , 4vw , 1.2em ) ;
+       text-align : right                         ;
 }
 
 img:not(#banner) , audio {
-       display : block ;
-       margin : 0 auto ;
-       max-width : calc(100% - 4em) ;
-       filter : drop-shadow(-0.5em -0.2em 0px var(--pink))
-                drop-shadow(0.5em 0.2em 0px var(--cyan)) ;
+       display   : block                                        ;
+       margin    : 0 auto                                       ;
+       max-width : calc( 100% - 4em )                           ;
+       filter    : drop-shadow( -0.5em -0.2em 0px var(--pink) )
+                   drop-shadow(  0.5em  0.2em 0px var(--cyan) ) ;
 }
 
-img:not(#banner) {
-       max-height : 50em ;
-}
+img:not(#banner) { max-height : 50em ; }
 
 audio {
-       width : 100% ;
+       width            : 100%     ;
        background-color : var(--b) ;
 }
 
 footer {
-       max-width : 100% ;
-       margin : 1em auto ;
-       text-align : center ;
-       color : var(--grey) ;
-       font-size : min(1em, 2.1vw) ;
+       max-width  : 100%               ;
+       margin     : 1em auto           ;
+       text-align : center             ;
+       color      : var(--grey)        ;
+       font-size  : min( 1em , 2.1vw ) ;
 }
 
 a {
index d56032762d3a33845da8ebec40be3a788883565f..f3577ac79ac7833b9b0aa4e43b4e36f9d553bb9e 100644 (file)
--- a/index.css
+++ b/index.css
 html {
-       scrollbar-color : var(--cyan) var(--g) ;
-       background-image : url('/img/bg.png') ;
-       background-color : var(--g) ;
+       scrollbar-color  : var(--cyan) var(--g) ;
+       background-image : url( '/img/bg.png' ) ;
+       background-color : var(--g)             ;
 }
 
-@media all and (max-width: 42em) {
-       body { background-size : 47px, 47px ; }
-       #wrap { width : calc(100% - 94px) !important ; }
+@media all and ( max-width : 42em ) {
+       body { background-size : 47px , 47px ; }
+       #wrap { width : calc( 100% - 94px ) !important ; }
 }
 
-@media all and (max-width: 70em) {
+@media all and ( max-width : 70em ) {
        body {
-               background-image    : url('/img/bgthinleft.png' ) ,
-                                     url('/img/bgthinright.png') !important ;
+               background-image : url( '/img/bgthinleft.png'  ) ,
+                                  url( '/img/bgthinright.png' ) !important ;
        }
-       #wrap { width : calc(100% - 188px) ; }
+       #wrap { width : calc( 100% - 188px ) ; }
 }
 
-@media all and (min-width: 70em) {
+@media all and ( min-width : 70em ) {
        body {
-               background-image    : url('/img/bgleft.png' ) ,
-                                     url('/img/bgright.png') ;
+               background-image : url( '/img/bgleft.png'  ) ,
+                                  url( '/img/bgright.png' ) ;
        }
-       #wrap { width : calc(100% - 280px) ; }
+       #wrap { width : calc( 100% - 280px ) ; }
 }
 
-body { max-width          : calc(70em + 280px) ; }
+body { max-width : calc( 70em + 280px ) ; }
 
 #head { color : var(--dpur) ; }
 
 #wrap {
        background-color : var(--w) ;
-       max-width : 70em ;
+       max-width        : 70em     ;
 }
 
-a {
-       color : var(--dpur) ;
-}
+a { color : var(--dpur) ; }
 
 div.gif {
-       width : 180px ;
-       height : 180px ;
-       max-width : 28vw ;
-       max-height : 28vw ;
+       width           : 180px ;
+       height          : 180px ;
+       max-width       : 28vw  ;
+       max-height      : 28vw  ;
        background-size : cover ;
-       display : block ;
+       display         : block ;
 }
 
 #links > div , #links { width : 100% ; }
 
 #links a {
-       display : inline-flex ;
-       flex-wrap : nowrap ;
-       justify-content : flex-start ;
-       align-items : center ;
-       text-decoration : none ;
-       transition : transform 0.05s ;
-       transition-timing-function : ease-out ;
+       display                    : inline-flex     ;
+       flex-wrap                  : nowrap          ;
+       justify-content            : flex-start      ;
+       align-items                : center          ;
+       text-decoration            : none            ;
+       transition                 : transform 0.05s ;
+       transition-timing-function : ease-out        ;
 }
 
 #links > div:nth-child(even) {
        text-align : right ;
-       margin : calc(clamp(max(-90px, -17.5vw), calc(8em - 20vw) , 0px)) auto ;
+       margin     : clamp( max( -90px , -17.5vw ) , calc( 8em - 20vw ) , 0px ) )
+                    auto  ;
 }
 
 #links div:nth-child(even) a { flex-direction : row-reverse ; }
 
 #links div:nth-child(odd) a:hover , #links div:nth-child(odd) a:focus {
-       transform : rotate(1.5deg) scale(1.05) ;
+       transform : rotate( 1.5deg ) scale( 1.05 ) ;
 }
 #links div:nth-child(even) a:hover , #links div:nth-child(even) a:focus {
-       transform : rotate(-1.5deg) scale(1.05) ;
+       transform : rotate( -1.5deg ) scale( 1.05 ) ;
 }
 
 .gifheader {
-       font-family : Saviour, monospace ;
-       line-height : 0.7 ;
-       max-width : calc(100% - min(180px, 28vw)) ;
+       font-family : Saviour , monospace                ;
+       line-height : 0.7                                ;
+       max-width   : calc( 100% - min( 180px , 28vw ) ) ;
 }
 
 .gifheader h2 {
-       margin : 0 ;
-       font-size : calc(clamp(1em, 10vw, 4.5em)) ;
-       color : var(--b) ;
+       margin    : 0                           ;
+       font-size : clamp( 1em , 10vw , 4.5em ) ;
+       color     : var(--b)                    ;
 }
 
 .gifheader p {
-       margin : 0 ;
-       font-size : calc(clamp(1em, 10vw, 4.5em) * 0.7) ;
-       color : var(--dpur) ;
+       margin    : 0                                         ;
+       font-size : calc( clamp( 1em , 10vw , 4.5em ) * 0.7 ) ;
+       color     : var(--dpur)                               ;
 }
 
-#g-latest { background-image : url('/img/latest.png') ; }
+#g-latest { background-image : url( '/img/latest.png' ) ; }
 #links a:hover #g-latest , #links a:focus #g-latest {
-       background-image : url('/img/latest.gif') ;
+       background-image : url( '/img/latest.gif' ) ;
 }
-#g-bandcamp { background-image : url('/img/bandcamp.png') ; }
+#g-bandcamp { background-image : url( '/img/bandcamp.png' ) ; }
 #links a:hover #g-bandcamp , #links a:focus #g-bandcamp {
-       background-image : url('/img/bandcamp.gif') ;
+       background-image : url( '/img/bandcamp.gif' ) ;
 }
-#g-about { background-image : url('/img/about.png') ; }
+#g-about { background-image : url( '/img/about.png' ) ; }
 #links a:hover #g-about , #links a:focus #g-about {
-       background-image : url('/img/about.gif') ;
+       background-image : url( '/img/about.gif' ) ;
 }
-#g-mastodon { background-image : url('/img/mastodon.png') ; }
+#g-mastodon { background-image : url( '/img/mastodon.png' ) ; }
 #links a:hover #g-mastodon , #links a:focus #g-mastodon {
-       background-image : url('/img/mastodon.gif') ;
+       background-image : url( '/img/mastodon.gif' ) ;
 }
-#g-blog { background-image : url('/img/blog.png') ; }
+#g-blog { background-image : url( '/img/blog.png' ) ; }
 #links a:hover #g-blog , #links a:focus #g-blog {
-       background-image : url('/img/blog.gif') ;
+       background-image : url( '/img/blog.gif' ) ;
 }
-#g-funkwhale { background-image : url('/img/funkwhale.png') ; }
+#g-funkwhale { background-image : url( '/img/funkwhale.png' ) ; }
 #links a:hover #g-funkwhale , #links a:focus #g-funkwhale {
-       background-image : url('/img/funkwhale.gif') ;
+       background-image : url( '/img/funkwhale.gif' ) ;
 }
-#g-code { background-image : url('/img/code.png') ; }
+#g-code { background-image : url( '/img/code.png' ) ; }
 #links a:hover #g-code , #links a:focus #g-code {
-       background-image : url('/img/code.gif') ;
+       background-image : url( '/img/code.gif' ) ;
 }