Update essays.html and add writings.html for content expansion

- Changed the title in essays.html from "flower power" to "zesameri: essays" for better branding.
- Added a new writings.html file containing sections for essays and poems, including links to external content and original writings.
- Enhanced CSS styles in font.css and main.css for improved typography and layout consistency across the new writing sections.

Author: zesameri

css/font.css

@@ -3,20 +3,20 @@
   font-family: "Trebuchet MS", Helvetica, sans-serif;
 */
 
+/* Base Typography */
 body {
   font-family: 'Roboto Slab', serif;
   line-height: 1.5;
   color: #f8f8f6;
 }
+
+/* Headers */
 h1, dt, .footer > a {
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   letter-spacing: 2px;
   font-weight: bold;
 }
-dt {
-  font-size: 1.25em;
-  padding-top: 2em;
-}
+
 .header {
   font-size: 3em;
   letter-spacing: 5px;
@@ -25,10 +25,39 @@ dt {
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   line-height: 1em;
 }
+
 .header-img {
-  vertical-align: text-bottom;
   height: 1em;
+  padding: 0 0.2em;
+}
+
+/* Writing Page Typography */
+.section-title {
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  font-size: 2em;
+  letter-spacing: 3px;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  color: #f8f8f6;
 }
+
+dt {
+  font-size: 1.25em;
+  padding-top: 2em;
+}
+
+.list__link {
+  font-family: monospace;
+}
+
+.reference {
+  font-style: italic;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  letter-spacing: 2px;
+  font-weight: bold;
+}
+
+/* Hero Section Typography */
 .bio {
   font-size: 1.5em;
 }
@@ -37,39 +66,31 @@ dt {
   font-size: .75em;
 }
 
+/* Links */
 .simple-link {
   color: inherit;
   text-decoration: none;
   border: none;
 }
+
 .simple-link focus, .simple-link :hover {
   color: inherit;
   border: none;
 }
 
-.list__link {
-  font-family: monospace
-}
-
-.footer > a {
-  line-height: 1;
-  font-size: 1.4em;
-}
 a, .footer > a {
   border-bottom: 1px solid #f8f8f6;
   color: inherit;
   font-weight: normal;
   text-decoration: none;
 }
+
 a:focus, a:hover {
   color: floralwhite;
   border-bottom: 1px solid floralwhite;
 }
 
-.reference {
-  font-style: italic;
-  font-family: "Trebuchet MS", Helvetica, sans-serif;
-  letter-spacing: 2px;
-  font-weight: bold;
-
+.footer > a {
+  line-height: 1;
+  font-size: 1.4em;
 }

css/main.css

@@ -5,34 +5,68 @@
   grey: #a6a9ac, #dcdcde
   light: #f8f8f6, #efeff2
 */
+
+/* Base Layout */
 body {
   margin: 0;
   background-color: #222;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: block;
 }
+
 section {
   z-index: 1;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
+  padding-top: 6vh;
+  padding-left: 6vw;
 }
+
+/* Hero Section */
 .hero {
   width: calc(100vw - 20em);
-  padding-top: 5vh;
-  padding-left: 6vw;
   display: flex;
   flex-direction: column;
   gap: 2em;
 }
+
 .bio {
   padding-bottom: 10vh;
   max-width: 70vw;
 }
 
+/* Writing Pages */
+.writing {
+  max-width: 70vw;
+  width: calc(100vw - 20em);
+}
+
+.list {
+  margin: 0;
+}
+
+.list__item {
+  margin: 0;
+  padding-bottom: 3em;
+}
+
+.list__item > p {
+  margin: 1em 0;
+  font-size: 1.25em;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+/* Footer */
 .footer {
   position: fixed;
   right: 5em;
@@ -41,17 +75,9 @@ section {
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-end;
-
-}
-.footer > a {
-  padding-top: 0.7em;
-}
-a {
-  position: relative;
 }
 
-.hero-footer > a {
-  position: relative;
+.footer > a {
   padding-top: 0.7em;
 }
 
@@ -65,33 +91,13 @@ a {
   align-items: flex-end;
 }
 
-.footer__link--home:hover~.crumple:after {
-    -webkit-animation: a 1s .25s linear forwards;
-    animation: a 1s .25s linear forwards
-}
-
-.list {
-  margin: 0;
-}
-.list__item {
-  margin: 0;
-  padding-bottom: 3em;
-}
-.list__item > p {
-    margin: 1em 0;
-    font-size: 1.25em;
+.hero-footer > a {
+  position: relative;
+  padding-top: 0.7em;
 }
 
-.writing {
-  max-width: 70vw;
-  width: calc(100vw - 20em);
-  padding-top: 5vh;
-  padding-left: 6vw;
-  padding-bottom: 5em;
+/* Links */
+a {
+  position: relative;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  margin: 0;
-}

essays.html

@@ -16,10 +16,10 @@
   <meta name="description" content="It's whatever you want to make of it.">
   <meta name="author" content="kvitka">
   <!-- Facebook Metadata -->
-  <meta name="og:title" content="flower power">
+  <meta name="og:title" content="zesameri: essays">
   <meta name="og:description" content="It's whatever you want to make of it.">
   <meta name="og:url" content="http://zesameri.github.io">
-  <meta name="og:type" content="website">look at me
+  <meta name="og:type" content="website">
     <!-- Styles -->
   <link href="./css/main.css" rel="stylesheet">
   <link href="./css/crumple.css" rel="stylesheet">
@@ -40,7 +40,7 @@
   <section class="writing">
 
     <h1 class="header">
-      kvitka 
+       
       <img class="header-img" src="assets/images/flower.svg">
       essays
     </h1>