Button

index.html

@@ -18,9 +18,9 @@
 
 		<h1>Théo Thénault's Website</h1>
 
-		<h2><a href="./portfolio/index.html">Portfolio</a></h2>
+		<h2><a href="./portfolio/index.html" class="button">Portfolio</a></h2>
 
-		<h2><a href="cv.pdf">CV / Resume</a></h2>
+		<h2><a href="cv.pdf" class="button">CV / Resume</a></h2>
 
 		<img src="wip.gif"/>
 

portfolio/index.html

@@ -28,7 +28,7 @@
 					<img src="./placeholder.png">
 					<header>
 						Cosmic blaster
-						<a href="https://github.com/TheoThenault/CosmicBlaster"><b></b>  Github</a>
+						<a href="https://github.com/TheoThenault/CosmicBlaster" class="button"><b></b>  Github</a>
 					</header>
 					<p>
 						Cosmic Blaster is a game I created during my Master's degree for a Unity class.
@@ -51,7 +51,7 @@
 					<img src="./placeholder.png">
 					<header>
 						University's schedule
-						<a href="https://github.com/TheoThenault/projet-ent-universitaire"><b></b>  Github</a>
+						<a href="https://github.com/TheoThenault/projet-ent-universitaire" class="button"><b></b>  Github</a>
 					</header>
 					<p>
 						For my bachelor's degree, 2 peers and I developed a university's schedule as a webapp. We created the databas and built the back and front with symfony.
@@ -63,7 +63,7 @@
 					<img src="./placeholder.png">
 					<header>
 						My website!
-						<a href="https://git.theothenault.fr/Theo/Site"><b></b>  Gitea</a>
+						<a href="https://git.theothenault.fr/Theo/Site" class="button"><b></b>  Gitea</a>
 					</header>
 					<p>
 						I also develop this website by hand. I use it as a way to promote my work and experience, and to freshen up my skills in html/css.

portfolio/portfolio.css

@@ -20,6 +20,11 @@ div.side-by-side article {
 a.hidden {
 	font-style: normal;
 	text-decoration: none;
+	color: var(--main-ft-color);
+}
+
+article header {
+	margin-top: 5px;
 }
 
 main p {

style.css

@@ -1,9 +1,22 @@
 @import "fonts/mononoki/mononoki.css";
 
+:root {
+	--main-bg-color: #1c1b22;
+
+	--main-ft-color: #fbfbfe;
+
+	--main-a-color: #ffadff;
+	--main-a-hover: #ffdfff;
+
+}
+
 html {
-	color-scheme: light dark;
+	color-scheme: dark;
 	width: 100%;
 	min-width: 320px;
+
+	background-color: var(--main-bg-color);
+	color: var(--main-ft-color);
 }
 
 body {
@@ -14,3 +27,22 @@ body {
 * {
 	font-family: 'mononoki';
 }
+
+h1 {
+	text-decoration: double underline;
+}
+
+a.button {
+	text-decoration: none;
+
+	color: var(--main-a-color);
+
+	padding: 5px;
+	border: 1px solid var(--main-a-color);
+	border-radius: 5px;
+}
+
+a.button:hover {
+	color: var(--main-a-hover);
+	border: 1px solid var(--main-a-hover);
+}