not.whiny.lol
very simple webpage built with hugo with links to all of my profiles.
wobblybrian.xyz
:3
+10
-20
+2
-2
layouts/home.html
+2
-2
layouts/home.html
···
6
6
7
7
<div class="grid social">
8
8
{{ range site.Menus.talk }}
9
-
<a class="card" {{ if .Params.title }}title="{{ .Params.title }}"{{ else }}title="{{ .Name }}"{{ end }} href="{{ .URL | relURL }}">
9
+
<a class="card" href="{{ .URL | relURL }}">
10
10
11
11
{{ with .Name }}
12
12
{{ $icon := index site.Data.icons.icons . }}
···
25
25
26
26
<div class="grid social">
27
27
{{ range site.Menus.social }}
28
-
<a class="card" {{ if .Params.title }}title="{{ .Params.title }}"{{ else }}title="{{ .Name }}"{{ end }} href="{{ .URL | relURL }}">
28
+
<a class="card" href="{{ .URL | relURL }}">
29
29
30
30
{{ with .Name }}
31
31
{{ $icon := index site.Data.icons.icons . }}
+8
-18
static/css/style.css
+8
-18
static/css/style.css
···
97
97
max-width: 50rem;
98
98
padding-block: 3rem;
99
99
margin-inline: auto;
100
-
padding-inline: 3rem;
100
+
padding-inline: 1rem;
101
101
}
102
102
103
103
/* Content */
104
104
105
105
.container {
106
-
padding-inline: 3rem;
107
-
padding-block-end: 1.5rem;
106
+
padding-inline: 1rem;
107
+
padding-block-end: 1rem;
108
108
}
109
109
110
110
.container > :first-child {
···
116
116
}
117
117
118
118
.container > p {
119
-
margin-block: 1lh;
119
+
margin-block: 1rem;
120
120
max-width: 68ch;
121
121
}
122
122
···
137
137
display: flex;
138
138
background-color: var(--purple-element);
139
139
padding: 1.5rem;
140
+
gap: 1.5rem;
140
141
fill: var(--text);
141
142
border: 2px solid var(--purple-accent);
142
143
text-transform: lowercase;
143
-
transition: all 100ms;
144
+
transition: all 150ms;
144
145
}
145
146
146
147
.card:hover,
···
148
149
text-decoration: none;
149
150
background-color: var(--purple-accent);
150
151
border: 2px solid var(--text);
152
+
box-shadow: 0px 8px 16px 0px var(--purple-accent);
151
153
}
152
154
153
155
.card svg {
154
156
width: 35px;
155
-
margin-inline-end: 1.5rem;
156
157
}
157
158
158
159
.card .caption {
159
160
color: var(--text-2);
160
-
font-size: 0.85rem;
161
-
}
162
-
163
-
@media screen and (max-width: 50rem) {
164
-
.container {
165
-
padding-inline: 1rem;
166
-
}
161
+
font-size: 0.8rem;
167
162
}
168
163
169
164
@media screen and (max-width: 35rem) {
···
173
168
174
169
.card {
175
170
flex-direction: column;
176
-
}
177
-
178
-
.card svg {
179
-
margin-right: 0;
180
-
margin-bottom: 1.5rem;
181
171
}
182
172
}