From 3183a3616b8afdb8eda2a5be11bb70786c74b98f Mon Sep 17 00:00:00 2001
From: Midou <midou@midou.dev>
Date: Thu, 15 Jun 2023 17:28:21 +0100
Subject: [PATCH] Initial CSS work. This is somewhat different but it should be
 close to GitHub's layout.

---
 public/css/global.css | 51 +++++++++++++++++++++++++++++++++++++------
 views/wiki.html       | 38 ++++++++++++++++++++++----------
 2 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/public/css/global.css b/public/css/global.css
index e4fd442..9fea7cf 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -6,12 +6,14 @@
   --secondary-background: #353535;
   --background-darker: #151515;
   --accent: #00b7c3;
-  --yellow: #8B8000;
+  --yellow: #8b8000;
   color-scheme: dark;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+    sans-serif;
   color: var(--text);
   background-color: var(--background-darker);
   transition: ease-in-out 0.25s;
@@ -32,6 +34,9 @@ main {
   margin: 0 24vw;
 }
 
+#wrap {
+  display: flex;
+}
 .navbar {
   display: flex;
   align-items: center;
@@ -73,7 +78,9 @@ main {
   background-color: var(--background);
   padding: 8px;
   border-radius: 4px;
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+    sans-serif;
   color: var(--text);
 }
 
@@ -95,7 +102,9 @@ a:hover {
   background-color: var(--yellow);
   padding: 8px;
   border-radius: 4px;
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+    sans-serif;
   color: var(--text);
 }
 
@@ -111,7 +120,8 @@ a:hover {
 
 /* URI: /explore */
 
-.explore-card, .user-repo-card {
+.explore-card,
+.user-repo-card {
   background-color: var(--background);
   padding: 8px;
   border-radius: 4px;
@@ -125,7 +135,8 @@ a:hover {
   transition: ease-in-out 0.25s;
 }
 
-.explore-card:hover, .user-repo-card:hover {
+.explore-card:hover,
+.user-repo-card:hover {
   background-color: var(--secondary-background);
   color: var(--text);
 }
@@ -267,6 +278,23 @@ a:hover {
   background-color: var(--secondary-background);
 }
 
+/* Overwrite */
+
+.no-margin {
+  margin: 0;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.float-right {
+  float: right;
+  display: grid;
+  flex: none;
+  align-self: flex-start;
+}
+
 @media screen and (prefers-color-scheme: light) {
   :root {
     --text: #000;
@@ -294,6 +322,15 @@ a:hover {
     margin: 8px;
   }
 
+  #wrap {
+    display: inline-grid;
+  }
+
+  .float-right {
+    float: none;
+    display: inline-grid;
+  }
+
   .navbar-slogan {
     display: none;
   }
@@ -313,5 +350,5 @@ a:hover {
   }
 }
 .cl {
-	padding-left: 8px
+  padding-left: 8px;
 }
diff --git a/views/wiki.html b/views/wiki.html
index 9485def..5a26d91 100644
--- a/views/wiki.html
+++ b/views/wiki.html
@@ -1,18 +1,32 @@
 {{ template "header" .}}
 
-<main>
+<!-- prettier-ignore -->
+<main class="no-margin" style="margin: 0 12vw;">
   {{ if .wiki }} {{ range $key, $value := .wiki}}
-	  <p>RepoUser: {{.RepoUser}}</p>
-	  <p>RepoName: {{.RepoName}}</p>
-	  <p>Title: {{.Title}}</p>
-	  <p>LastEdit: {{.LastEdit}}</p>
-	  <p>LastEditor: {{.LastEditor}}</p>
-	  <p>RevisionNum: {{.RevisionNum}}</p>
-	  <p>PageNum: {{.PageNum}}</p>
-	  <p>Sidebar: {{.Sidebar}}</p>
-	  <p>Content:</p>
-	  {{ unescape .PageContent }}
-  {{ end }} {{ else }}
+  <div id="wrap">
+  <div>
+    <h1>{{.Title}}</h1>
+    <h2>{{.RepoUser}}/{{.RepoName}}</h2>
+    <p>
+      {{.LastEditor}} edited this page on {{.LastEdit}} · {{.RevisionNum}} revisions
+    </p>
+    <hr style="border-color: #252525;">
+    <div style="margin-right: auto;">
+      {{ unescape .PageContent }} 
+    <div/>
+  </div>
+  <div class="user-readme float-right">
+    <h3><b>{{.PageNum}}</b> pages</h3>
+     <div class="no-padding user-readme-text">
+      {{ range $key, $value := .Sidebar }}
+      <hr style="border-color: #252525;">
+      <a href="{{.Link}}"><p style="padding:0px 8px 0px 8px;">{{.Name}}</p></a>
+      {{end}}
+     </div>
+  </div>
+  </div>
+    {{ end }}
+  {{ else }}
   <h2>Wiki not found</h2>
   <p>That wiki doesn't exist.</p>
   {{ end }}