#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 ) ) ;
}
-
-@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% ) ; }
}
/* 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 {
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' ) ;
}
git://boxin.space / website / commitdiff