d56032762d3a33845da8ebec40be3a788883565f
[website] / 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 {
38 color : var(--dpur) ;
39 }
40
41 div.gif {
42 width : 180px ;
43 height : 180px ;
44 max-width : 28vw ;
45 max-height : 28vw ;
46 background-size : cover ;
47 display : block ;
48 }
49
50 #links > div , #links { width : 100% ; }
51
52 #links a {
53 display : inline-flex ;
54 flex-wrap : nowrap ;
55 justify-content : flex-start ;
56 align-items : center ;
57 text-decoration : none ;
58 transition : transform 0.05s ;
59 transition-timing-function : ease-out ;
60 }
61
62 #links > div:nth-child(even) {
63 text-align : right ;
64 margin : calc(clamp(max(-90px, -17.5vw), calc(8em - 20vw) , 0px)) auto ;
65 }
66
67 #links div:nth-child(even) a { flex-direction : row-reverse ; }
68
69 #links div:nth-child(odd) a:hover , #links div:nth-child(odd) a:focus {
70 transform : rotate(1.5deg) scale(1.05) ;
71 }
72 #links div:nth-child(even) a:hover , #links div:nth-child(even) a:focus {
73 transform : rotate(-1.5deg) scale(1.05) ;
74 }
75
76 .gifheader {
77 font-family : Saviour, monospace ;
78 line-height : 0.7 ;
79 max-width : calc(100% - min(180px, 28vw)) ;
80 }
81
82 .gifheader h2 {
83 margin : 0 ;
84 font-size : calc(clamp(1em, 10vw, 4.5em)) ;
85 color : var(--b) ;
86 }
87
88 .gifheader p {
89 margin : 0 ;
90 font-size : calc(clamp(1em, 10vw, 4.5em) * 0.7) ;
91 color : var(--dpur) ;
92 }
93
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') ;
97 }
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') ;
101 }
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') ;
105 }
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') ;
109 }
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') ;
113 }
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') ;
117 }
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') ;
121 }