d56032762d3a33845da8ebec40be3a788883565f
2 scrollbar-color : var
(--cyan
) var
(--g
) ;
3 background-image : url
('/img/bg.png') ;
4 background-color : var
(--g
) ;
7 @media all and
(max-width: 42em) {
8 body
{ background-size : 47px, 47px ; }
9 #wrap { width : calc
(100% - 94px) !important
; }
12 @media all and
(max-width: 70em) {
14 background-image : url
('/img/bgthinleft.png' ) ,
15 url
('/img/bgthinright.png') !important
;
17 #wrap { width : calc
(100% - 188px) ; }
20 @media all and
(min-width: 70em) {
22 background-image : url
('/img/bgleft.png' ) ,
23 url
('/img/bgright.png') ;
25 #wrap { width : calc
(100% - 280px) ; }
28 body
{ max-width : calc
(70em + 280px) ; }
30 #head { color : var
(--dpur
) ; }
33 background-color : var
(--w
) ;
46 background-size : cover
;
50 #links > div
, #links
{ width : 100% ; }
53 display : inline-flex
;
55 justify-content : flex-start
;
56 align-items : center
;
57 text-decoration : none
;
58 transition : transform
0.05s ;
59 transition-timing-function : ease-out
;
62 #links > div:nth-child
(even
) {
64 margin : calc
(clamp
(max
(-90px, -17.5vw), calc
(8em - 20vw) , 0px)) auto
;
67 #links div:nth-child
(even
) a
{ flex-direction : row-reverse
; }
69 #links div:nth-child
(odd
) a:hover
, #links
div:nth-child
(odd
) a:focus
{
70 transform : rotate
(1.5deg) scale
(1.05) ;
72 #links div:nth-child
(even
) a:hover
, #links
div:nth-child
(even
) a:focus
{
73 transform : rotate
(-1.5deg) scale
(1.05) ;
77 font-family : Saviour
, monospace
;
79 max-width : calc
(100% - min
(180px, 28vw)) ;
84 font-size : calc
(clamp
(1em, 10vw, 4.5em)) ;
90 font-size : calc
(clamp
(1em, 10vw, 4.5em) * 0.7) ;
94 #g-latest { background-image : url
('/img/latest.png') ; }
95 #links a:hover #g-latest
, #links
a:focus #g-latest
{
96 background-image : url
('/img/latest.gif') ;
98 #g-bandcamp { background-image : url
('/img/bandcamp.png') ; }
99 #links a:hover #g-bandcamp
, #links
a:focus #g-bandcamp
{
100 background-image : url
('/img/bandcamp.gif') ;
102 #g-about { background-image : url
('/img/about.png') ; }
103 #links a:hover #g-about
, #links
a:focus #g-about
{
104 background-image : url
('/img/about.gif') ;
106 #g-mastodon { background-image : url
('/img/mastodon.png') ; }
107 #links a:hover #g-mastodon
, #links
a:focus #g-mastodon
{
108 background-image : url
('/img/mastodon.gif') ;
110 #g-blog { background-image : url
('/img/blog.png') ; }
111 #links a:hover #g-blog
, #links
a:focus #g-blog
{
112 background-image : url
('/img/blog.gif') ;
114 #g-funkwhale { background-image : url
('/img/funkwhale.png') ; }
115 #links a:hover #g-funkwhale
, #links
a:focus #g-funkwhale
{
116 background-image : url
('/img/funkwhale.gif') ;
118 #g-code { background-image : url
('/img/code.png') ; }
119 #links a:hover #g-code
, #links
a:focus #g-code
{
120 background-image : url
('/img/code.gif') ;