style figcaptions

index.html

@@ -15,7 +15,7 @@
 		<h1>Andrzej Stepien : Coder for Hire</h1>
 	</header>
 	<main>
-		<h1>Hello.</h1>
+		<h2>Hello.</h2>
 		<p>
 			My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you
 			most
@@ -23,30 +23,39 @@
 			what
 			I'm capable of.
 		</p>
-		<h2>The website you are currently reading...</h2>
+		<section>
+			<h1>The website you are currently reading...</h1>
 			<ul>
 				<li><b>… is hosted on bespoke hardware.</b> A mini-pc in my living room, to
 					be precise!</li>
 				<li><b>… has correctly managed security certificates, scoring an 'A' grade on <a
 							href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz">sslabs.com</a>.</b>
 				</li>
-			<li><b>… is fully compliant with <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
+				<li><b>… is fully compliant with <a
+							href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
 							Content
-						Accessibility Guidelines</a></b> because accessibility isn't an optional
+							Accessibility Guidelines</a></b> because accessibility isn't an
+					optional
 					extra!</li>
-			<li><b>… is styled with careful consideration for Responsive Web Design principles</b> (because
+				<li><b>… is styled with careful consideration for Responsive Web Design principles</b>
+					(because
 					I have no
 					idea what device you're reading this on!)</li>
-			<li><b>… hosts a collection of projects demonstrating my proficiency in both frontend and
+				<li><b>… hosts a collection of projects demonstrating my proficiency in both frontend
-					backend development</b> including projects written in  CSS,  Html, 
+						and
+						backend development</b> including projects written in CSS, Html,
 					Javascript,
-				 React,  Nodejs,  Sql,  Jq,  Lua and 󱆃 Bash.</li>
+					React, Nodejs, Sql, Jq, Lua and Bash.</li>
 				<li><b>… was lovingly hand-coded by myself.</b> Naturally.</li>
 			</ul>
+		</section>
+		<section>
 			<h2>Certifications</h2>
-		<ul>
+			<figure>
-			<h3>Freecodecamp certificates</h3>
+				<figcaption>
-			<ul>
+					Freecodecamp certificates
+				</figcaption>
+				<ul class="link-list">
 					<li>
 						<a
 							href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front
@@ -63,18 +72,64 @@
 							Algorithms and Data Structures</a>
 					</li>
 				</ul>
-			<h3>IBM certificates</h3>
+			</figure>
-			<ul>
+			<figure>
+				<figcaption>
+					IBM certificates
+				</figcaption>
+				<ul class="link-list">
 					<li>
-					<a href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction
+						<a
+							href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction
 							to Cloud Computing</a>
 					</li>
 					<li>
-					<a href="https://courses.edx.org/certificates/f7a2d211241a432785f298df38336098">Introduction
+						<a
+							href="https://courses.edx.org/certificates/f7a2d211241a432785f298df38336098">Introduction
 							to Cloud Development with HTML, CSS, and JavaScript</a>
 					</li>
 				</ul>
+			</figure>
+		</section>
+		<section>
+
+			<figure>
+				<figcaption>
+					<h2>Projects</h2>
+				</figcaption>
+				<ul class="link-list">
+					<li>
+						<h3>Subman</h3>
+						<p>A self-hosted literary submission management system comprising a
+							Nodejs
+							backend server and React front end.
+						</p>
+						<a>demo</a>
+						<a>source</a>
+					</li>
+					<li>
+
+						<h3>Micro365</h3>
+						<p>
+							A bot written in nodejs that delivers single-word writing
+							prompts from a database.
+						</p>
+						<a>demo</a>
+						<a>source</a>
+					</li>
+					<li>
+
+						<h3>PromptBot</h3>
+						<p>
+							A bot written in nodejs that delivers single-word writing
+							prompts from a database.
+						</p>
+						<a>demo</a>
+						<a>source</a>
+					</li>
 				</ul>
+			</figure>
+		</section>
 	</main>
 </body>
 

styles.css

@@ -1,10 +1,15 @@
 @font-face {
-	font-family: GoMono;
+	font-family: Jura;
-	src: url(fonts/GoMonoNerdFont-Regular.ttf);
+	src: url(fonts/Jura-VariableFont_wght.ttf) format(tr);
-	font-weight: 400;
 	font-style: normal;
 }
 
+@font-face {
+	font-family: League;
+	src: url(fonts/LeagueGothic-Regular-VariableFont_wdth.ttf);
+	font-style: bold;
+}
+
 :root {
 	--text: #e0def4;
 	--love: #eb6f92;
@@ -18,56 +23,106 @@
 	--surface: #1f1d2e;
 	--overlay: #26233a;
 
+	--hl-low: #21202e;
 	--hl-med: #403d52;
 	--hl-high: #524f67;
 }
 
 body {
-	background-color: var(--base);
+	background-image: linear-gradient(to bottom right, var(--overlay), var(--base));
 }
 
 h1,
 h2,
 h3,
 h4 {
-	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-family: League, Verdana, Geneva, Tahoma, sans-serif;
+	color: var(--gold);
+	text-shadow: 0.8rem 0.8rem var(--base);
+}
+
+h1 {
+	font-size: 8rem;
+}
+
+h2 {
+	font-size: 6rem;
+}
+
+h3 {
+	font-size: 4rem;
 	color: var(--love);
 }
 
 main {
-	font-family: GoMono, serif;
+	font-family: Jura, serif;
 	font-size: 2rem;
 	width: 60%;
 	margin: auto;
 	color: var(--text);
 }
 
-p {
+p,
+ul {
+
 	background-color: var(--surface);
 	border-radius: 10rem;
-	padding: 2rem;
+	padding: 5rem;
+	box-shadow: 1rem 1rem var(--base);
+}
+
+figcaption {
+	margin-bottom: 0;
+	font-size: 2em;
+	font-weight: 1000;
+	color: var(--iris);
+	text-shadow: 0.08em 0.08em var(--base);
 }
 
 b {
-	color: var(--gold);
+	/* color: var(--foam); */
+	font-weight: 1000;
+	font-size: 1.1em
 }
 
 
 a {
-	text-decoration: none;
+	text-decoration-line: underline;
+	text-decoration-style: dotted;
+	text-decoration-color: var(--pine);
 	color: var(--foam);
+	font-weight: bold;
 }
 
 a:visited {
+	text-decoration: none;
 	color: var(--pine);
 }
 
 a:hover {
-	background-color: pink;
+	background-color: var(--hl-med);
 }
 
+ul {
+	list-style-position: inside;
+
+}
+
+
 li {
-	list-style-type: ' ';
+	list-style-type: '✓ ';
 	margin-bottom: 2rem;
-
+	padding: 1rem;
+}
+
+li::marker {
+	color: var(--pine);
+}
+
+.link-list>li {
+	list-style-type: '> ';
+}
+
+.link-list>li:hover::marker {
+	color: var(--foam);
 }