Rebuilding the entire htlm and css stiles

3 files changed, 75 insertions, 214 deletions

diff --git a/static/fakeavi.png b/static/fakeavi.png
new file mode 100644
index 0000000..1538bb9
--- /dev/null
+++ b/static/fakeavi.png
diff --git a/static/main.css b/static/main.css
index 36940a4..33240b8 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,205 +1,75 @@
+/* * { */
+/*     outline: black 1px solid; */
+/* } */
+
 body {
-    margin: 0;
-    font-family: sans-serif;
+    background: #fafafa; /* There's fa and there's antifa! */
 }
 
 a {
     text-decoration: none;
-    color: #800000;
+    color: #444;
 }
 
-a:hover {
-    color: black;
-    text-decoration: none;
+a:hover, a:active {
+    text-decoration: underline;
 }
 
-.logo {
-    display: block;
-    max-width:230px;
-    max-height:75px;
+.container hr {
+    border: 1px solid #343434;
+    width: 100%;
 }
 
-.title {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    display: flex;
+.container {
+    display: grid;
     max-width: 120ch;
+    margin: 2em;
 }
 
-.description {
-    margin-top: -1rem;
-    max-width: 100ch;
-}
-
-.title .logo {
-    padding-top: 15px;
-}
-
-.title>div>:first-child {
-    margin-top: 0;
-}
-.title>div>:last-child {
-    margin-bottom: 0;
+.tagline-container {
+    display: grid;
+    grid-template-columns: 1fr 8fr 1fr;
+    grid-auto-flow: column;
+    align-items: center;
 }
 
-.header .links {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-.header .links>* {
-    height: 1em;
-    padding: .5em;
-    margin: .5em 1em;
-    box-shadow: 0 0 5px #aaa;
-    border-radius: 5px;
-    background: #4060a0;
-    color: white;
-}
-.header .links>*:hover {
-    box-shadow: 0 0 10px #555;
+.tagline-container > h1, .tagline-container > p {
+    margin: 0;
 }
 
-body {
-    display: flex;
-    flex-direction: column;
-    /*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */
-    /*background: linear-gradient(to bottom, #f3f0ff, #c0c0f0);*/ /* blue */
-    background: #f4f4f4;
-    box-sizing: border-box;
-    min-height: 100vh;
-}
-.header {
-    background: white;
+.starbox {
+    grid-row-start: 1;
+    grid-row-end: 3;
+    grid-gap: 0.5em;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    padding: 1em;
-    border-bottom: 1px solid grey;
-    box-shadow: 0 0 20px #ccc;
 }
-.content {
-    border-bottom: 1px solid #ccc;
-    box-shadow: 0 0 10px #ccc;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding-top: 1.5em;
-    background: white;
-    width: 100%;
-    max-width: 1000px;
-    padding: 0;
-    padding-left: max(10%, calc(50vw - 400px));
-}
-.content>p::before {
-    content: '\1f6c8';
-    display: block;
-    position: absolute;
-    margin-left: -1.3em;
-}
-.content>p {
-    border: 1px solid #ccc;
-    background: white;
-    padding: .5em;
-    margin: 1em;
-    padding-left: 2.1em;
-}
-body>* {
-    padding: 0 .8em;
-    box-sizing: border-box;
+.repo-logo {
+    justify-self: center;
+    align-self: center;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    max-width:230px;
+    max-height:100px;
 }
 
-.nav {
-    padding: 0;
-    width: 100%;
-    max-width: 1000px;
-    text-align: center;
-}
-.nav-tabs {
-    margin-top: 1em;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-.nav .nav-item:hover {
-}
-.nav .nav-item {
-    width: 100%;
-    display: block;
-    padding: .7em 0;
-}
-.nav .nav-item.active::after {
-    content: ' ';
-    display: block;
-    height: 20px;
-    width: 100%;
-    box-sizing: border-box;
-    background: white;
-    margin-bottom: -20px;
-}
-.nav .nav-item.active {
-    background: white;
-    box-shadow: 0 0 10px #ccc;
-    z-index: 5;
-    border: 1px solid #ccc;
-    border-bottom: none;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-}
-.nav .nav-item:not(.active) {
-    border-bottom: 1px solid #ccc;
+.subheader {
+    padding-top: 1em;
+    align-items: center;
+    justify-items: center;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    
 }
 
-@media (min-width: 1000px) {
-    .header {
-        border: 1px solid #ccc;
-    }
+.repo-navigation {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    background: #DDD;
 }
-@media (min-width: 600px) {
-    body {
-        align-items: center;
-    }
-    body>*:first-child {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-
-    .header {
-        width: 100%;
-        max-width: 1000px;
-    }
-    .content {
-        border: 1px solid #ccc;
-
-        border-top: none;
-    }
 
-    body>:nth-child(2) {
-        /*margin-top: 7vh;*/
-    }
-    body>*:last-child {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    .title {
-        flex-direction: row;
-    }
-    .header {
-        flex-direction: row;
-    }
-    .header .links>*{
-    }
-    .header .links {
-        justify-content: center;
-        align-items: center;
-    }
-    .header .links>* {
-        margin: .1em .25em;
-    }
-    .title .logo {
-        padding-top: 0;
-        padding-right: 15px;
-    }
+.repo-navigation > .nav-item {
+    padding: 0.25em 2em;
 }
diff --git a/templates/repo.html b/templates/repo.html
index da297f6..0eb17c1 100644
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -2,49 +2,40 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>{{ project_name }} | /{{ project_name }}</title>
+    <title>octopus | /spacekookie/octopus</title>
     <link href="../static/main.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="Description" content="{{ project_owner }} by {{ project_owner }}; {{ project_summary }}">
   </head>
   <body>
-    <div class="header">
-      <div class="title">
-        <img class="logo" alt="{{ project_logo_alt_text }}" src="../static/{{ project_logo }}" />
-        <div>
-          <h1>/ <a href="">{{ project_owner }}</a> / <a href="">{{ project_name }}</a></h1>
-
-          <p>
-            {{ project_summary }}
-          </p>
-
+    <div class="container">
+      <div class="tagline-container">
+        <img class="repo-logo" src="../static/fakeavi.png" />
+        <h1><a href="">spacekookie</a> / <a href="">octopus</a></h1>
+        <p>A git web frontend that wants to hug your code</p>
+        <div class="starbox">
+          <a href="">Clone</a>
+          <a href="">Star</a>
+          <a href="">RSS</a>
         </div>
-
-      </div>
-      <div class="links">
-        <a href="">RSS</a><a href="">Clone</a> <a href="">Star</a>
-      </div>
-    </div>
-    <div class="nav">
-    <div class="nav-tabs">
-      <a class="nav-item" href="">readme</a>
-      <a class="nav-item active" href="">summary</a>
-      <a class="nav-item" href="">tree</a>
-      <a class="nav-item" href="">log</a>
-      <a class="nav-item" href="">tags</a>
-      <a class="nav-item" href="">branches</a>
-      <a class="nav-item" href="">stats</a>
-      <a class="nav-item" href="">contribute</a>
-    </div>
-    </div>
-    <div class="content">
-      <p>
-        <strong>{{ project_name }}</strong> was created on 2019-11-29 at 21:20
-        with commit <a href="">{{ first_commit }}</a>. Since then, <a href="">{{ num_commits }}
-          commits</a> have been authered by
-        <a href="">{{ num_contributors }} contributers</a>.
-      </p>
-      <div>
+      </div> <!-- tagline container -->
+      <div class="subheader">
+        
+        <a href="">141 commits</a>
+        <a href="">1 branch</a>
+        <a href="">0 tags</a>
+        <a href="">1 contributor</a>
+        <a href="">size: 13.12M</a>
+        <input id="repo-search" type="search" placeholder="Search repository" />
+        <!-- <label for="repo-search">Search for files in the repository</label> -->
+      </div> <!-- subheader -->
+      <hr />
+      <div class="repo-navigation">
+        <a href="" class="nav-item">about</a>
+        <a href="" class="nav-item">details</a>
+        <a href="" class="nav-item">files</a>
+        <a href="" class="nav-item">log</a>
+        <a href="" class="nav-item"> patches</a>
+        <a href="" class="nav-item">contribute</a>
       </div>
     </div>
   </body>