From 0720b1961f95de2a911c48c4c148fd45bef8666f Mon Sep 17 00:00:00 2001
From: Maria Isabel Lopez <mrlpz1515@gmail.com>
Date: Sat, 21 Sep 2024 01:27:49 +0200
Subject: [PATCH] feat: add some basic styling to all pages
---
public/dump.html | 10 ++++++-
public/index.html | 52 ++++++++++++++++++++-----------------
public/journal.html | 3 +++
public/music/index.html | 5 ++--
public/music/playlists.html | 1 +
public/not_found.html | 5 +++-
public/style.css | 46 ++++++++++++++++++++++++++++++++
7 files changed, 93 insertions(+), 29 deletions(-)
diff --git a/public/dump.html b/public/dump.html
index 86a9c8f..8044986 100644
--- 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
index 57ca0a0..a500f7e 100644
--- 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>
\ No newline at end of file
diff --git a/public/journal.html b/public/journal.html
index f75c5d0..18f961c 100644
--- 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
index c0d70ac..9833424 100644
--- 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
index 54de382..f4f1b77 100644
--- 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
index c16133d..65e3621 100644
--- 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
index e69de29..cd9426d 100644
--- 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;
+}
\ No newline at end of file