Skip to content

Commit f153653

Browse files
chrisnewtnchrisnewtn
committedJan 24, 2024
chore: turn the header into a simpson's joke
And animate the "Under construction" sign. We like to have fun here.
1 parent 7ddac6d commit f153653

File tree

5 files changed

+256
-92
lines changed

5 files changed

+256
-92
lines changed
 

‎docs-raw/index.html

+8-3
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Chris Newton</h1>
11+
<section class="business-card">
12+
<h1>Chris Newton</h1>
13+
<p>Works on<br> contingency<span class="punctuation">?</span></p>
14+
<p>No<span class="punctuation">,</span> money down<span class="punctuation">!</span></p>
15+
</section>
1216
</header>
1317
<main>
14-
<p>Programming for the web since 1873.</p>
15-
<div class="under-construction">Under Construction</div>
18+
<div class="under-construction">
19+
<div class="inner">Under Construction</div>
20+
</div>
1621
</main>
1722
<footer>
1823
<p><small>© Copyright 2024 Chris Newton. Hosted using <a href="https://pages.github.com/">GitHub Pages</a> (<a href="https://github.com/chrisnewtn/chrisnewtn.github.io/">repo</a>).</small></p>

‎docs-raw/style.css

+79-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ body {
2222
--blue-600: #2563eb;
2323
--purple-500: #a855f7;
2424
--purple-600: #9333ea;
25+
--red-600: #dc2626;
26+
--red-700: #b91c1c;
2527
--amber-400: #fbbf24;
2628

2729
font-family: Helvetica, Arial, sans-serif;
@@ -48,18 +50,93 @@ body > header {
4850
body > main {
4951
text-align: center;
5052
grid-area: main;
53+
display: flex;
54+
flex-direction: column;
55+
justify-content: center;
5156
}
5257

5358
body > footer {
5459
text-align: center;
5560
grid-area: footer;
5661
}
5762

63+
.business-card {
64+
font-family: Georgia, Times, 'Times New Roman', serif;
65+
line-height: 1rem;
66+
text-transform: uppercase;
67+
margin: 1rem;
68+
padding: 0 .25rem;
69+
position: relative;
70+
display: inline-block;
71+
border: solid thin var(--primary-text);
72+
outline: solid thin var(--primary-text);
73+
outline-offset: 1px;
74+
}
75+
76+
.business-card > h1 {
77+
margin: 1rem 0 1.5rem 0;
78+
font-weight: normal;
79+
padding: 0 2rem .25rem 2rem;
80+
border-bottom: solid thin var(--primary-text);
81+
position: relative;
82+
}
83+
84+
.business-card > h1::after {
85+
content: 'ESQ.';
86+
font-size: small;
87+
position: absolute;
88+
display: block;
89+
float: left;
90+
bottom: -1rem;
91+
right: 2rem;
92+
}
93+
94+
.business-card > p {
95+
margin: 1.5rem 0;
96+
}
97+
98+
.business-card .punctuation {
99+
font-family: cursive;
100+
font-weight: bold;
101+
font-size: 1.5rem;
102+
color: var(--red-600);
103+
}
104+
58105
.under-construction {
59-
background-color: var(--amber-400);
60-
border: dashed var(--neutral-950);
106+
background-image: repeating-linear-gradient(
107+
-45deg,
108+
var(--neutral-950) 0,
109+
var(--neutral-950) 10px,
110+
var(--amber-400) 10px,
111+
var(--amber-400) 20px
112+
);
113+
background-size: 28px 28px;
61114
padding: 1rem;
62115
color: var(--neutral-950);
116+
117+
animation-duration: 1s;
118+
animation-name: scrollhatching;
119+
animation-iteration-count: infinite;
120+
animation-timing-function: linear;
121+
}
122+
123+
@keyframes scrollhatching {
124+
from {
125+
background-position-x: 0px;
126+
}
127+
to {
128+
background-position-x: 28px;
129+
}
130+
}
131+
132+
.under-construction > .inner {
133+
height: 8rem;
134+
font-size: 2rem;
135+
text-transform: uppercase;
136+
background-color: var(--amber-400);
137+
display: flex;
138+
justify-content: center;
139+
flex-direction: column;
63140
}
64141

65142
/** Colours **/

‎docs/index.html

+9-4
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,20 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Chris Newton</title>
7-
<link rel="stylesheet" href="style-c2f6e97.css">
7+
<link rel="stylesheet" href="style-8123f0b.css">
88
</head>
99
<body>
1010
<header>
11-
<h1>Chris Newton</h1>
11+
<section class="business-card">
12+
<h1>Chris Newton</h1>
13+
<p>Works on<br>contingency<span class="punctuation">?</span></p>
14+
<p>No<span class="punctuation">,</span> money down<span class="punctuation">!</span></p>
15+
</section>
1216
</header>
1317
<main>
14-
<p>Programming for the web since 1873.</p>
15-
<div class="under-construction">Under Construction</div>
18+
<div class="under-construction">
19+
<div class="inner">Under Construction</div>
20+
</div>
1621
</main>
1722
<footer>
1823
<p><small>© Copyright 2024 Chris Newton. Hosted using <a href="https://pages.github.com/">GitHub Pages</a> (<a href="https://github.com/chrisnewtn/chrisnewtn.github.io/">repo</a>).</small></p>

‎docs/style-8123f0b.css

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html,
6+
body {
7+
height: 100%;
8+
}
9+
10+
a {
11+
color: var(--link);
12+
}
13+
a:visited {
14+
color: var(--link-visited);
15+
}
16+
17+
body {
18+
/* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
19+
--neutral-50: #fafafa;
20+
--neutral-950: #0a0a0a;
21+
--blue-500: #3b82f6;
22+
--blue-600: #2563eb;
23+
--purple-500: #a855f7;
24+
--purple-600: #9333ea;
25+
--red-600: #dc2626;
26+
--red-700: #b91c1c;
27+
--amber-400: #fbbf24;
28+
29+
font-family: Helvetica, Arial, sans-serif;
30+
31+
color: var(--primary-text);
32+
background-color: var(--bg-color);
33+
34+
margin: 0;
35+
36+
display: grid;
37+
grid-template-columns: auto auto auto;
38+
grid-template-rows: max-content auto max-content;
39+
grid-template-areas:
40+
". header ."
41+
". main ."
42+
". footer .";
43+
}
44+
45+
body > header {
46+
text-align: center;
47+
grid-area: header;
48+
}
49+
50+
body > main {
51+
text-align: center;
52+
grid-area: main;
53+
display: flex;
54+
flex-direction: column;
55+
justify-content: center;
56+
}
57+
58+
body > footer {
59+
text-align: center;
60+
grid-area: footer;
61+
}
62+
63+
.business-card {
64+
font-family: Georgia, Times, 'Times New Roman', serif;
65+
line-height: 1rem;
66+
text-transform: uppercase;
67+
margin: 1rem;
68+
padding: 0 .25rem;
69+
position: relative;
70+
display: inline-block;
71+
border: solid thin var(--primary-text);
72+
outline: solid thin var(--primary-text);
73+
outline-offset: 1px;
74+
}
75+
76+
.business-card > h1 {
77+
margin: 1rem 0 1.5rem 0;
78+
font-weight: normal;
79+
padding: 0 2rem .25rem 2rem;
80+
border-bottom: solid thin var(--primary-text);
81+
position: relative;
82+
}
83+
84+
.business-card > h1::after {
85+
content: 'ESQ.';
86+
font-size: small;
87+
position: absolute;
88+
display: block;
89+
float: left;
90+
bottom: -1rem;
91+
right: 2rem;
92+
}
93+
94+
.business-card > p {
95+
margin: 1.5rem 0;
96+
}
97+
98+
.business-card .punctuation {
99+
font-family: cursive;
100+
font-weight: bold;
101+
font-size: 1.5rem;
102+
color: var(--red-600);
103+
}
104+
105+
.under-construction {
106+
background-image: repeating-linear-gradient(
107+
-45deg,
108+
var(--neutral-950) 0,
109+
var(--neutral-950) 10px,
110+
var(--amber-400) 10px,
111+
var(--amber-400) 20px
112+
);
113+
background-size: 28px 28px;
114+
padding: 1rem;
115+
color: var(--neutral-950);
116+
117+
animation-duration: 1s;
118+
animation-name: scrollhatching;
119+
animation-iteration-count: infinite;
120+
animation-timing-function: linear;
121+
}
122+
123+
@keyframes scrollhatching {
124+
from {
125+
background-position-x: 0px;
126+
}
127+
to {
128+
background-position-x: 28px;
129+
}
130+
}
131+
132+
.under-construction > .inner {
133+
height: 8rem;
134+
font-size: 2rem;
135+
text-transform: uppercase;
136+
background-color: var(--amber-400);
137+
display: flex;
138+
justify-content: center;
139+
flex-direction: column;
140+
}
141+
142+
/** Colours **/
143+
144+
/** Light **/
145+
body {
146+
--primary-text: var(--neutral-950);
147+
--bg-color: var(--neutral-50);
148+
--link: var(--blue-600);
149+
--link-visited: var(--purple-600);
150+
}
151+
152+
/** Dark **/
153+
@media (prefers-color-scheme: dark) {
154+
body {
155+
--primary-text: var(--neutral-50);
156+
--bg-color: var(--neutral-950);
157+
--link: var(--blue-500);
158+
--link-visited: var(--purple-500);
159+
}
160+
}

‎docs/style-c2f6e97.css

-83
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.