Update about page
[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 { 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 }