From 065174271d5b521b3bab54d48bb1c91569f8e56f Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Sun, 19 Jan 2025 18:25:14 +0200
Subject: feat: Implement the home page

---
 views/styles.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 3 deletions(-)

(limited to 'views/styles.css')

diff --git a/views/styles.css b/views/styles.css
index cbfc3b8..9ace7bf 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -5,6 +5,8 @@
   --highlight-border-color: #cecec9;
   --orange: #cc7000;
   --cherry: #703d46;
+
+  --card-expand-with: 6em;
 }
 
 /* Global */
@@ -16,6 +18,7 @@ body {
   color: var(--foreground-color);
 
   width: 100vw;
+  max-width: 100%;
   height: 100vh;
 
   margin: 0;
@@ -32,7 +35,7 @@ strong {
   color: #ff7233;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1 {
   text-align: center;
 }
 
@@ -46,6 +49,8 @@ input {
 
   border: none;
   border-radius: 0.25em;
+
+  min-width: 1em;
 }
 
 input[type=text]:focus {
@@ -56,6 +61,48 @@ input[type=submit]:hover {
   cursor: pointer;
 }
 
+/* Generic */
+
+.float-right {
+  float: right;
+}
+
+.width-80 {
+  width: 80%;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.font-125 {
+  font-size: 1.25em;
+}
+
+.font-150 {
+  font-size: 1.5em;
+}
+
+.center-margin {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.separate-margin {
+  margin-top: 5em;
+  margin-bottom: 8em;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+}
+
+.flex-expand {
+  flex: 1;
+}
+
 /* Main containers */
 header, article {
   max-width: 60rem;
@@ -78,7 +125,7 @@ nav > * {
 
   width: fit-content;
 
-  color: color(--foreground-color);
+  color: white;
   background-color: var(--orange);
   text-decoration: none;
 
@@ -100,6 +147,14 @@ article > * {
 }
 
 /* Page elements */
+hr.new-section {
+  height: 3px;
+  border-width: 0;
+  color: var(--orange);
+  background-color: var(--orange);
+  margin-bottom: 5em;
+}
+
 .card {
   display: flex;
   flex-direction: column;
@@ -128,7 +183,7 @@ article > * {
 
 .card:hover {
   cursor: pointer;
-  height: 12.5em;
+  height: calc(6.5em + var(--card-expand-with));
 }
 
 .card > .quickinfo {
@@ -136,3 +191,7 @@ article > * {
   padding-bottom: 0.5em;
   border-bottom: 3px dotted #909090;
 }
+
+.card-blank-afterspace {
+  height: var(--card-expand-with);
+}
-- 
cgit v1.2.3