feat: add some basic styling to all pages

milg15 · Sep 20, 2024 · 0720b19 · 0720b19
1 parent 950ed57
commit 0720b19
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 29 deletions.
diff --git a/public/dump.html b/public/dump.html
@@ -1,4 +1,12 @@
 <!DOCTYPE html>
+
+<head>
+	<title>Brain dump</title>
+	<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+
+	<link href="/style.css" rel="stylesheet" type="text/css" media="all">
+</head>
+<html>
 <html>
 
 <body>
@@ -24,7 +32,7 @@ <h1>This is a new site</h1>
 		<h2> Change log </h2>
 		<ol>
 			<li> Sep 20, 2024: Moved the mess from index to this page. I think I found a style I might like to explore for the
-				first page now</li>
+				first page now. I saw this canvas template that might be a nice start... let's see.</li>
 			<li>Sep, 2024: Updated this site.</li>
 			<li>Sometime 11 years ago: made this site.</li>
 		</ol>

diff --git a/public/index.html b/public/index.html
@@ -2,36 +2,40 @@
 
 <head>
   <title>kinda lost</title>
+  <link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
 
   <link href="/style.css" rel="stylesheet" type="text/css" media="all">
 </head>
 <html>
 
 <body>
-  <div>
-    <header>
-      <h1>
-        Welcome to whatever this is.
-      </h1>
-      <img src="" alt="" srcset="">
-      <h2>
-        I'm Maria.
-      </h2>
-    </header>
-    <nav>
-      <ul>
-        <li class="nav-item">
-          <a href="/journal.html">Journal</a>
-        </li>
-        <li class="nav-item">
-          <a href="/dump.html">Brain Dump</a>
-        </li>
-        <li class="nav-item">
-          <a href="/music">Music</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
+  <main class="container">
+    <div>
+      <header>
+        <h1>
+          Welcome to whatever this is.
+        </h1>
+        <img src="" alt="" srcset="">
+        <h2>
+          I'm Maria.
+        </h2>
+      </header>
+      <nav>
+        <ul>
+          <li class="nav-item">
+            <a href="/journal.html">Journal</a>
+          </li>
+          <li class="nav-item">
+            <a href="/dump.html">Brain Dump</a>
+          </li>
+          <li class="nav-item">
+            <a href="/music">Music</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </main>
 </body>
 
 </html>
diff --git a/public/journal.html b/public/journal.html
@@ -5,6 +5,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Journal page</title>
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+
+  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
 </head>
 
 <body>

diff --git a/public/music/index.html b/public/music/index.html
@@ -5,9 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Music Page</title>
-  <!-- The style.css file allows you to change the look of your web pages.
-         If you include the next line in all your web pages, they will all share the same look.
-         This makes it easier to make new pages for your site. -->
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+
   <link href="/style.css" rel="stylesheet" type="text/css" media="all">
 </head>
 

diff --git a/public/music/playlists.html b/public/music/playlists.html
@@ -8,6 +8,7 @@
   <!-- The style.css file allows you to change the look of your web pages.
          If you include the next line in all your web pages, they will all share the same look.
          This makes it easier to make new pages for your site. -->
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
   <link href="/style.css" rel="stylesheet" type="text/css" media="all">
 </head>
 

diff --git a/public/not_found.html b/public/not_found.html
@@ -4,11 +4,14 @@
   <title>
     Vuela's Site - Not Found
   </title>
+
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
 </head>
 
 <body>
   <p>
-    The requested page was not found.
+    The requested page was not found. <a href="/">Go back home</a>
   </p>
 </body>
 

diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,46 @@
+@import url('https://fonts.googleapis.com/css2?family=Jacquarda+Bastarda+9&display=swap');
+
+:root {
+  --accent: red;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+h1, h2 {
+  font-family: "Jacquarda Bastarda 9", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+main.container {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main.container > div {
+  height: 50vh;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  grid-template-columns: 50% 1fr;
+  width: max(1200px, 50%);
+}
+
+nav ul {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  gap: 4px;
+}
+
+nav ul .nav-item {
+  padding: 12px;
+  border-radius: 12px;
+  text-align: center;
+}