not.whiny.lol
very simple webpage built with hugo with links to all of my profiles.
wobblybrian.xyz
new logo and stuff
+172
-219
+160
assets/css/style.css
+160
assets/css/style.css
···
1
+
@font-face {
2
+
font-family: 'Space Grotesk';
3
+
src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
4
+
font-weight: 300 700;
5
+
font-display: swap;
6
+
font-style: normal;
7
+
}
8
+
9
+
@font-face {
10
+
font-family: 'Inter';
11
+
src: url('../fonts/Inter-Variable.woff2') format('woff2');
12
+
font-weight: 100 900;
13
+
font-display: swap;
14
+
font-style: normal;
15
+
}
16
+
17
+
:root {
18
+
--heading: 'Space Grotesk';
19
+
--body: 'Inter';
20
+
--text: rgb(215, 215, 215);
21
+
--text-2: rgb(170, 170, 170);
22
+
--purple-element: rgb(80, 42, 65);
23
+
--purple-hover: rgb(90, 50, 75);
24
+
--purple-bg: rgb(128, 74, 105);
25
+
}
26
+
27
+
/* Reset */
28
+
29
+
*, *::before, *::after {
30
+
box-sizing: border-box;
31
+
}
32
+
33
+
* {
34
+
margin: 0;
35
+
}
36
+
37
+
img, picture, video, canvas, svg {
38
+
display: block;
39
+
max-inline-size: 100%;
40
+
block-size: auto;
41
+
}
42
+
43
+
/* Text */
44
+
45
+
a {
46
+
color: var(--text);
47
+
text-decoration: none;
48
+
}
49
+
50
+
h1, h2 {
51
+
font-weight: 400;
52
+
font-family: var(--heading);
53
+
text-wrap: balance;
54
+
overflow-wrap: break-word;
55
+
}
56
+
57
+
h1 {
58
+
font-size: 1.875rem;
59
+
line-height: 1.2;
60
+
}
61
+
62
+
h2 {
63
+
font-size: 1.75rem;
64
+
line-height: 1.3;
65
+
}
66
+
67
+
/* Site */
68
+
69
+
body {
70
+
font-size: 16px;
71
+
font-family: var(--body);
72
+
color: var(--text);
73
+
background: var(--purple-bg);
74
+
line-height: 1.5;
75
+
min-height: 100vh;
76
+
}
77
+
78
+
main {
79
+
max-inline-size: 50rem;
80
+
margin-inline: auto;
81
+
}
82
+
83
+
header {
84
+
block-size: 50svh;
85
+
display: flex;
86
+
background: linear-gradient(var(--purple-hover), transparent);
87
+
flex-direction: column;
88
+
justify-content: center;
89
+
align-items: center;
90
+
padding-inline: 1rem;
91
+
}
92
+
93
+
header a {
94
+
transition: 150ms all;
95
+
96
+
img {
97
+
inline-size: 28rem;
98
+
}
99
+
}
100
+
101
+
header a:is(:hover, :focus-visible) {
102
+
rotate: 3deg;
103
+
scale: 1.05;
104
+
}
105
+
106
+
/* Content */
107
+
108
+
.container {
109
+
padding-inline: 1rem;
110
+
padding-block-end: 1rem;
111
+
}
112
+
113
+
.container > * + * {
114
+
margin-block: 1.5rem;
115
+
}
116
+
/* Grid */
117
+
118
+
.social {
119
+
display: grid;
120
+
gap: 1rem;
121
+
grid-template-columns: repeat(2, 1fr);
122
+
}
123
+
124
+
.card {
125
+
display: flex;
126
+
background-color: var(--purple-element);
127
+
padding: 1.5rem;
128
+
gap: 1.5rem;
129
+
fill: var(--text);
130
+
border: 2px solid transparent;
131
+
text-transform: lowercase;
132
+
transition: all 150ms;
133
+
}
134
+
135
+
.card:hover,
136
+
.card:focus {
137
+
text-decoration: none;
138
+
background-color: var(--purple-hover);
139
+
border: 2px solid var(--text);
140
+
box-shadow: 0px 8px 16px 0px var(--purple-element);
141
+
}
142
+
143
+
.card svg {
144
+
width: 32px;
145
+
}
146
+
147
+
.card .caption {
148
+
color: var(--text-2);
149
+
font-size: 0.8rem;
150
+
}
151
+
152
+
@media screen and (max-width: 35rem) {
153
+
.card {
154
+
flex-direction: column;
155
+
}
156
+
157
+
header a img {
158
+
inline-size: 20rem;
159
+
}
160
+
}
+1
hugo.toml
+1
hugo.toml
+6
-3
layouts/_partials/head.html
+6
-3
layouts/_partials/head.html
···
6
6
<title>{{ .Title }} - {{ .Site.Title }}</title>
7
7
<link rel="preload" href="/fonts/SpaceGrotesk-Variable.woff2" as="font" type="font/woff2" crossorigin>
8
8
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
9
-
<link rel="stylesheet" href="/css/style.css"/>
10
-
<link rel="icon" sizes="32x32" type="image/png" href="/favicon.png">
9
+
{{ $css := resources.Get "css/style.css" }}<link rel="stylesheet" href="{{ $css.RelPermalink }}" crossorigin="anonymous"></style>
10
+
<link rel="icon" href="/favicon.ico" sizes="32x32">
11
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
11
12
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
13
+
<meta name="description" content="{{ .Description | default .Site.Params.description }}">
14
+
<meta name="author" content="{{ .Site.Params.author }}">
12
15
{{ partial "opengraph.html" . }}
13
16
{{ partial "twitter_cards.html" . }}
14
-
</head>
17
+
</head>
+3
-11
layouts/_partials/header.html
+3
-11
layouts/_partials/header.html
···
1
1
<header>
2
-
<div class="notice">
3
-
<div class="notice-inner">
4
-
<img src="/Flag_of_Palestine.svg" alt="">
5
-
<h1>ISRAEL IS COMMITING A GENOCIDE IN GAZA</h1>
6
-
<a href="https://pcrf.net">DONATE TO THE PCRF</a>
7
-
</div>
8
-
</div>
9
-
10
-
<div class="header-inner">
11
-
<h1><a href="/" title="{{ .Site.Params.logohover }}">{{ .Site.Title }}</a></h1>
12
-
</div>
2
+
<a href="/" title="{{ .Site.Params.logohover }}">
3
+
<img src="/logo.svg" alt="wobbly brian">
4
+
</a>
13
5
</header>
-4
layouts/baseof.html
-4
layouts/baseof.html
-2
layouts/home.html
-2
layouts/home.html
-9
static/Flag_of_Palestine.svg
-9
static/Flag_of_Palestine.svg
···
1
-
<?xml version="1.0" encoding="UTF-8" ?>
2
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3"><rect
3
-
fill="#009639"
4
-
width="6"
5
-
height="3"
6
-
/><rect fill="#FFF" width="6" height="2" /><rect width="6" height="1" /><path
7
-
fill="#ED2E38"
8
-
d="M0,0l2,1.5L0,3Z"
9
-
/></svg>
static/apple-touch-icon.png
static/apple-touch-icon.png
This is a binary file and will not be displayed.
-190
static/css/style.css
-190
static/css/style.css
···
1
-
@font-face {
2
-
font-family: 'Space Grotesk';
3
-
src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
4
-
font-weight: 300 700;
5
-
font-display: swap;
6
-
font-style: normal;
7
-
}
8
-
9
-
@font-face {
10
-
font-family: 'Inter';
11
-
src: url('../fonts/Inter-Variable.woff2') format('woff2');
12
-
font-weight: 100 900;
13
-
font-display: swap;
14
-
font-style: normal;
15
-
}
16
-
17
-
:root {
18
-
--heading: 'Space Grotesk';
19
-
--body: 'Inter';
20
-
--text: rgb(215, 215, 215);
21
-
--text-2: rgb(170, 170, 170);
22
-
--purple-element: rgb(54, 31, 44);
23
-
--purple-accent: rgb(76, 38, 60);
24
-
--purple-bg: rgb(90, 52, 74);
25
-
}
26
-
27
-
/* Reset */
28
-
29
-
*, *::before, *::after {
30
-
box-sizing: border-box;
31
-
}
32
-
33
-
* {
34
-
margin: 0;
35
-
}
36
-
37
-
img, picture, video, canvas, svg {
38
-
display: block;
39
-
max-inline-size: 100%;
40
-
block-size: auto;
41
-
}
42
-
43
-
/* Text */
44
-
45
-
a {
46
-
color: var(--text);
47
-
text-decoration: none;
48
-
}
49
-
50
-
h1, h2 {
51
-
font-weight: 400;
52
-
font-family: var(--heading);
53
-
text-wrap: balance;
54
-
overflow-wrap: break-word;
55
-
}
56
-
57
-
h1 {
58
-
font-size: 1.875rem;
59
-
line-height: 1.2;
60
-
}
61
-
62
-
h2 {
63
-
font-size: 1.75rem;
64
-
line-height: 1.3;
65
-
}
66
-
67
-
/* Site */
68
-
69
-
body {
70
-
font-size: 16px;
71
-
font-family: var(--body);
72
-
color: var(--text);
73
-
background: var(--purple-bg);
74
-
line-height: 1.5;
75
-
min-height: 100vh;
76
-
}
77
-
78
-
main {
79
-
max-inline-size: 50rem;
80
-
margin-inline: auto;
81
-
}
82
-
83
-
.notice {
84
-
background: linear-gradient(var(--purple-bg), var(--purple-accent));
85
-
}
86
-
87
-
.notice-inner {
88
-
display: flex;
89
-
gap: 1.5rem;
90
-
text-align: center;
91
-
align-items: center;
92
-
flex-direction: column;
93
-
max-width: 50rem;
94
-
margin-inline: auto;
95
-
padding: 3rem 1rem;
96
-
}
97
-
98
-
.notice img {
99
-
max-height: 128px;
100
-
}
101
-
102
-
.notice h1 {
103
-
max-width: 20ch;
104
-
font-weight: 500;
105
-
}
106
-
107
-
.notice .row {
108
-
display: flex;
109
-
gap: 1rem;
110
-
}
111
-
112
-
.notice a {
113
-
display: block;
114
-
font-family: var(--heading);
115
-
background-color: var(--purple-element);
116
-
border: 2px solid var(--purple-accent);
117
-
transition: all 150ms;
118
-
text-decoration: blin;
119
-
padding: 0.75rem 1rem;
120
-
}
121
-
122
-
.notice a:hover,
123
-
.notice a:focus {
124
-
border: 2px solid var(--text);
125
-
background-color: var(--purple-accent);
126
-
box-shadow: 0px 8px 16px 0px var(--purple-accent);
127
-
}
128
-
129
-
.header-inner {
130
-
max-inline-size: 50rem;
131
-
padding-block: 3rem;
132
-
margin-inline: auto;
133
-
padding-inline: 1rem;
134
-
}
135
-
136
-
/* Content */
137
-
138
-
.container {
139
-
padding-inline: 1rem;
140
-
padding-block-end: 1rem;
141
-
}
142
-
143
-
.container > * + * {
144
-
margin-block: 1.5rem;
145
-
}
146
-
/* Grid */
147
-
148
-
.social {
149
-
display: grid;
150
-
gap: 1rem;
151
-
grid-template-columns: repeat(2, 1fr);
152
-
}
153
-
154
-
.card {
155
-
display: flex;
156
-
background-color: var(--purple-element);
157
-
padding: 1.5rem;
158
-
gap: 1.5rem;
159
-
fill: var(--text);
160
-
border: 2px solid var(--purple-accent);
161
-
text-transform: lowercase;
162
-
transition: all 150ms;
163
-
}
164
-
165
-
.card:hover,
166
-
.card:focus {
167
-
text-decoration: none;
168
-
background-color: var(--purple-accent);
169
-
border: 2px solid var(--text);
170
-
box-shadow: 0px 8px 16px 0px var(--purple-accent);
171
-
}
172
-
173
-
.card svg {
174
-
width: 32px;
175
-
}
176
-
177
-
.card .caption {
178
-
color: var(--text-2);
179
-
font-size: 0.8rem;
180
-
}
181
-
182
-
@media screen and (max-width: 35rem) {
183
-
.header-inner {
184
-
text-align: center;
185
-
}
186
-
187
-
.card {
188
-
flex-direction: column;
189
-
}
190
-
}
static/favicon.ico
static/favicon.ico
This is a binary file and will not be displayed.
static/favicon.png
static/favicon.png
This is a binary file and will not be displayed.
+1
static/favicon.svg
+1
static/favicon.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5" viewBox="0 0 256 256"><path d="M0 0h256v256H0z" style="fill:#804a69"/><path d="M44.563 97.462c-13.413 36.73-10.068 71.844 6.043 81.841 18.696 11.602 29.403-53.011 43.89-40.104 8.345 7.436 60.23 65.735 37.339-47.76M172.364 75.227c-6.459 23.013-8.528 75.729 6.872 80.685 7.699 2.478 39.52 4.783 39.963-26.007.489-33.963-33.366-25.569-50.294-21.372" style="fill:none;stroke:#fff;stroke-width:16.88px"/></svg>
+1
static/logo.svg
+1
static/logo.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5" viewBox="0 0 2657 1184"><path d="M92.721 164.005C18.547 367.121 37.042 561.304 126.139 616.59c103.389 64.154 162.596-293.155 242.71-221.777 46.15 41.119 333.074 363.516 206.484-264.111M896.644 508.269c-181.983-7.262-156.982-279.609 2-283.631 180.186-4.558 215.453 292.309-2 283.631ZM1226.095 46.667c-15.868 127.803-47.603 383.409 20 442 51.578 44.701 254.646 6.478 240-140.631-12.379-124.339-188.672-127.481-276.819-129.052M1683.312 1074.957c-176.552-92.125-37.833-245.503-137.972-290.01-71.052-31.58-205.524-17.369-214 130.224-11.622 202.339 118.088 184.426 274.568 118.905M1660.682 67.296c-26.77 126.116-25.31 369.349 42.293 427.939 51.578 44.702 228.646.292 221-143.817-6.62-124.778-187.626-120.383-278.13-118.186M397.46 683.049c-35.719 127.26-47.159 418.782 38 446.186 42.578 13.702 218.55 26.451 221-143.817 2.703-187.815-184.519-141.396-278.129-118.186M2143.302 492.575c-47.202-112.667-73.251-261.142-45.356-405.965M2319.494 224.613c-59.989 292.832 80.888 395.512 287.039 0 2.459-4.716 41.82 616.217-267 559.683M845.198 1113.935c-24.889-132.111-82.667-294.333 128-308M1165.893 1100.935c-20-71.613-33-206.284-30-308M1843.911 1069.8c-27.526-108.075-73.579-307.226 108.025-309 171.465-1.674 137.767 199.702 117.919 318M1132.102 653.593c5.708 5.655 10.318-3.108 2.798-5.253" style="fill:none;stroke:#fff;stroke-width:93.33px"/></svg>
static/og.jpg
static/og.jpg
This is a binary file and will not be displayed.