redid website layout. i now need to rebuild jenny :/

derpyzza · Jan 8, 2024 · d5a2deb · d5a2deb
1 parent 7005e07
commit d5a2deb
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 140 deletions.
diff --git a/about.html b/about.html
diff --git a/archive.html b/archive.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Derpyzza's site</title>
+    <link rel="stylesheet" href="/assets/main.css" />
+  </head>
+
+  <body>
+    <header id="header">
+      <span>derpyzza's notes </span>
+      <nav>
+        <div>
+          <a href="/index.html">home</a>
+          <span> : </span>
+          <a href="/archive.html">archive</a>
+          <span> : </span>
+          <a href="/projects.html">projects</a>
+        </div>
+      </nav>
+    </header>
+
+    <main>
+      <section id="main">
+        <hgroup>
+          <h1>posts</h1>
+        </hgroup>
+
+        <ul>
+          <h3>2023</h3>
+          <li>
+            <!-- <span>13.05.23</span> -->
+            <a
+              href="public/130523-writing-systems-evolved-from-material-limitations.html#main"
+              >Writing systems evolved from material limitations.</a
+            >
+          </li>
+          <li>
+            <!-- <span>12-05-23</span> -->
+            <a href="public/120523hacky-script-perfect-script.html#main"
+              >Hacky script, perfect script</a
+            >
+          </li>
+        </ul>
+      </section>
+    </main>
+    <footer id="footer">
+      <hr />
+      <nav>
+        <span
+          >generated with
+          <a href="https://github.com/derpyzza/jenny"> jenny </a>
+        </span>
+      </nav>
+    </footer>
+  </body>
+</html>
diff --git a/assets/index_template.html b/assets/index_template.html
@@ -11,53 +11,37 @@
 
   <body>
     <header id="header">
-      <span>// Derpyzza's notes </span>
+      <span>// derpyzza's notes </span>
       <nav>
         <div>
-          <a href="/about.html">@derpyzza</a>
-          <span> : </span>
           <a href="/index.html">home</a>
           <span> : </span>
-          <a href="/rss.html">rss</a>
+          <a href="/archive.html">archive</a>
+          <span> : </span>
+          <a href="/projects.html">projects</a>
         </div>
       </nav>
     </header>
 
     <main>
       <section id="main">
-				<hgroup>
-					<span>{{date}}</span>
-					<h1>
-						<a href="#main">
-							{{title}}
-						</a>
-					</h1>
-					<h4>
-						<span>
-							{{subtitle}}
-						</span>
-					</h4>
-				</hgroup>
-				{{latest}}
-      </section>
+        <hgroup>
+          <h1>posts</h1>
+        </hgroup>
 
-      <hr />
-
-      <section id="posts">
-        <h2><span>Archive</span></h2>
-
-        <section id="list">
-					{{posts}}
-				</section>
+        <ul>
+          {{posts}}
+        </ul>
       </section>
     </main>
 
     <footer id="footer">
-      <hr>
+      <hr />
       <nav>
-        <span>generated with <a href="https://github.com/derpyzza/jenny">
-            jenny
-        </a> </span>
+        <span
+          >generated with
+          <a href="https://github.com/derpyzza/jenny"> jenny </a>
+        </span>
       </nav>
     </footer>
   </body>

diff --git a/assets/main.css b/assets/main.css
@@ -4,13 +4,22 @@
  *
  */
 :root {
-    --bg: #fffefa;/*background*/
-    --nm: #363636;/*normal*/
-    --li: #bdbdbd;/*light*/
-    --ac: #2e86d8;/*accent*/
+    --bg: #efefef;/*background*/
+    --nm: #1e1e1e;/*normal*/
+    --li: #808080;/*light*/
+    --ac: #ff5415;/*accent*/
     --wi: 60ch;     /*max width*/
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #161616; /*normal*/
+        --nm: #fffefa; /*background*/
+        --li: #545454; /*light*/
+        --ac: #f27e3a;/*accent*/
+    }
+}
+
 body {
   padding: 4rem 1rem 1rem;
   color: var(--nm);
@@ -26,6 +35,10 @@ footer {
   word-wrap: break-word;
 }
 
+main {
+  padding-bottom: 8rem;
+}
+
 hgroup {
   padding-top: 6rem;
   margin-bottom: 5rem;
@@ -84,7 +97,13 @@ p span::before, p span::after {
 }
 li {
   margin: 10px;
+  color: var(--li);
+  list-style-type: " * ";
 }
+
+/* li::before {
+  content: "*";
+} */
 hr {
   color: var(--li);
   border-style: dashed;
@@ -112,46 +131,45 @@ pre {
 }
 
 #posts {
-  padding-bottom: 8rem;
 }
 
-#list:hover .post:hover {
+#list:hover .list-item:hover {
   opacity: 1;
   border-left: 24px solid var(--ac);
 }
 
-#list:hover .post {
+#list:hover .list-item {
   opacity: .3;
   border-left: 4px solid var(--bg);
 }
-/* 
-#list > div > span::before {
+
+/* #list > div > a::before {
   content: ":: ";
 } */
 
+#list > div > span::before {
+  content: "// ";
+}
+
 
-.post {
+.list-item {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border-left: 4px solid var(--li);
   padding: 20px;
-  margin-top: 15px;
+  /* margin-top: 15px; */
   transition: opacity .3s ease;
   transition: border-left .4s ease;
 }
 
+.list-item a {
+  text-decoration: none;
+}
+
 h1::before,
-h2::before,
-h3::before {
+h2::before
+{
   color: var(--li);
   content: "# ";
 }
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #161616; /*normal*/
-        --nm: #fffefa; /*background*/
-        --li: #5c5c5c; /*light*/
-    }
-}
diff --git a/assets/sweetgoldenchild.png b/assets/sweetgoldenchild.png
diff --git a/assets/template.html b/assets/template.html
@@ -11,7 +11,7 @@
 
   <body>
     <header id="header">
-      <a href="/index.html">..</a>
+      <a href="/archive.html">..</a>
     </header>
 
     <main>
@@ -36,11 +36,11 @@ <h4>
       <hr />
        <nav>
         <div>
-          <a href="/about.html">@derpyzza</a>
+          <a href="/index.html">home</a>
           <span> : </span>
-          <a href="/index.html#posts">posts</a>
+          <a href="/archive.html">archive</a>
           <span> : </span>
-          <a href="/rss.html">rss</a>
+          <a href="/projects.html">projects</a>
         </div>
       </nav>
     </footer>