If I spent all this effort in the gym instead, I'd be looking like Arnold Schwarzenegger, but instead I'm spending it on renaming CSS classes LMAO

Signed-off-by: Odyssium <hi@odyssey346.dev>

public/css/global.css

@@ -11,8 +11,8 @@
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-  color: #fff;
-  background-color: #151515;
+  color: var(--text);
+  background-color: var(--background-darker);
   transition: ease-in-out 0.25s;
   margin: 0;
 }
@@ -24,7 +24,7 @@ body {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 8px;
-  background: #252525;
+  background: var(--background);
 }
 
 main {
@@ -43,9 +43,9 @@ main {
   background-color: var(--background);
 }
 
-.indexGitHub {
-  background: #252525;
-  color: #fff;
+.index-gh {
+  background: var(--background);
+  color: var(--text);
   padding: 4px;
   border-radius: 8px;
 }
@@ -58,7 +58,7 @@ main {
   color: var(--text);
 }
 
-.navbarSlogan:hover {
+.navbar-slogan:hover {
   text-decoration: underline;
   text-underline-offset: 5px;
 }
@@ -69,11 +69,11 @@ main {
 }
 
 .error {
-  background-color: #252525;
+  background-color: var(--background);
   padding: 8px;
   border-radius: 4px;
-  font-family: "Lato", sans-serif;
-  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  color: var(--text);
 }
 
 .center {
@@ -81,19 +81,19 @@ main {
 }
 
 a {
-  color: white;
+  color: var(--text);
   text-decoration: underline;
   text-underline-offset: 5px;
 }
 
 a:hover {
-  color: #00b7c3;
+  color: var(--accent);
 }
 
 /* URI: /explore */
 
-.exploreIDontKnowWhatToNameThisDiv {
-  background-color: #252525;
+.explore-card, .user-repo-card {
+  background-color: var(--background);
   padding: 8px;
   border-radius: 4px;
   margin: 8px 0 8px 0;
@@ -106,14 +106,14 @@ a:hover {
   transition: ease-in-out 0.25s;
 }
 
-.exploreIDontKnowWhatToNameThisDiv:hover {
+.explore-card:hover, .user-repo-card:hover {
   background-color: var(--secondary-background);
   color: var(--text);
 }
 
 /* URI: /:user */
 
-.userProfile {
+.user-profile {
   background-color: var(--background);
   padding: 8px;
   border-radius: 4px;
@@ -123,57 +123,75 @@ a:hover {
   align-items: center;
 }
 
-.userProfile h1 {
+.user-profile h1 {
   color: var(--accent);
   margin: 4px;
   word-wrap: nowrap;
   text-overflow: ellipsis;
 }
 
-.userProfile h2 {
+.user-profile h2 {
   margin: 4px;
 }
 
-.userProfile p {
+.user-profile p {
   margin: 4px;
 }
 
-.userProfile img {
+.user-profile img {
   border: 4px solid var(--accent);
   border-radius: 50%;
 }
 
-.userBio,
-.userReadme,
-.mainRepos {
+.user-bio,
+.user-readme {
   background-color: var(--background);
   padding: 8px;
   border-radius: 4px;
   margin: 8px;
 }
 
-.userBioText,
-.userReadmeText,
-.mainReposText {
+.user-bio-text,
+.user-readme-text {
   background-color: var(--background-darker);
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 0;
 }
 
-.mainReposTextDim {
-  color: #8c8c8c;
-}
-
-.userReadmeText {
+.user-readme-text {
   margin-top: 0;
 }
 
-.sociallinks {
+.social-links {
   display: flex;
   flex-direction: column;
 }
 
+.user-repo-card {
+  background-color: var(--background-darker);
+  padding: 4px;
+  border-radius: 4px;
+  margin: 8px 0 8px 0;
+
+  text-overflow: ellipsis;
+  white-space: wrap;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+
+  transition: ease-in-out 0.25s;
+}
+
+.user-repo-card > p {
+  margin: 8px;
+}
+
+.user-repo-card:hover {
+  background-color: var(--secondary-background);
+  color: var(--text);
+}
+
 /* URI: /:user/:repo */
 .button {
   background-color: var(--background);
@@ -191,34 +209,34 @@ a:hover {
   color: var(--text);
 }
 
-.buttonParent {
+.button-parent {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
 }
 
-.filesList {
+.file-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
 
-.filesUList {
+.file-u-list {
   padding: 0;
   margin: 0;
   list-style-type: none;
 }
 
 /* URI: /file/:user/:repo/:file */
-.userReadme pre {
+.user-readme pre {
   padding: 8px;
   border-radius: 4px;
   /*white-space: pre-wrap;*/
   overflow-x: auto;
 }
 
-.userContainer {
+.user-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -238,17 +256,13 @@ a:hover {
     --accent: #005ec3;
     color-scheme: light;
   }
-  body {
-    background-color: var(--background-darker);
-    color: #000;
-  }
   a {
     color: black;
   }
   a:hover {
     color: #005ec3;
   }
-  .exploreIDontKnowWhatToNameThisDiv {
+  .explore-card {
     background-color: var(--background);
     color: #000;
   }
@@ -259,7 +273,7 @@ a:hover {
     margin: 8px;
   }
 
-  .navbarSlogan {
+  .navbar-slogan {
     display: none;
   }
 
@@ -267,13 +281,13 @@ a:hover {
     height: 40px;
   }
 
-  .exploreIDontKnowWhatToNameThisDiv {
+  .explore-card {
     margin-left: 0;
     margin-bottom: 8px;
     margin-right: 0;
   }
 
-  .sociallinks {
+  .social-links {
     flex-direction: column;
   }
 }

views/dir.html

@@ -2,7 +2,7 @@
 
 <main>
   {{ if .dir }} {{ range $key, $value := .dir}}
-  <div class="buttonParent">
+  <div class="button-parent">
 	  <a rel="noreferrer" href="https://github.com/{{.Fullname}}/tree/{{.Branch}}/{{.DirName}}" class="button"
       >View on GitHub</a
     >
@@ -11,25 +11,25 @@
     >
   </div>
 
-  <div class="userProfile">
+  <div class="user-profile">
     <h1>{{.Fullname}} | {{.DirName}}</h1>
   </div>
   {{end}} {{ if .files}}
-  <div class="userReadme">
+  <div class="user-readme">
     <h3>Files</h3>
-    <div class="userReadmeText">
-      <ul class="filesUList">
+    <div class="user-readme-text">
+      <ul class="file-u-list">
         {{ range $key, $value := .files}} {{ if eq .Type "dir" }}
-        <li class="filesList">
+        <li class="file-list">
           📁
           <a
             href="/{{.Fullname}}/tree/{{.Branch}}/{{.DirName}}/{{.Path}}"
-            class="filesA"
+            class="file-a"
             >{{.Path}}</a
           >
         </li>
         {{ else }}
-        <li class="filesList">
+        <li class="file-list">
           🗒️
           <a href="/{{.Fullname}}/blob/{{.Branch}}/{{.DirName}}/{{.Path}}"
             >{{.Path}}</a
@@ -40,11 +40,11 @@
     </div>
   </div>
   {{ end }} {{ if .readme}}
-  <div class="userReadme">
+  <div class="user-readme">
     {{ if .dir }} {{ range $key, $value := .dir }}
     <h3>{{.Readme}}</h3>
     {{end}} {{end}}
-    <div class="userReadmeText">{{ unescape .readme}}</div>
+    <div class="user-readme-text">{{ unescape .readme}}</div>
   </div>
   {{ end }} {{ else }}
   <h2>Directory not found</h2>

views/error.html

@@ -12,7 +12,6 @@
       <a href="https://codeberg.org/gothub/gothub/issues" target="_blank"
         >Create an issue on Codeberg.</a
       >
-      Or view this page on <a rel="noreferrer" href="https://github.com{{.link}}">GitHub</a>
     </h3>
   </div>
 </main>

views/explore.html

@@ -4,7 +4,7 @@
   <h2>Trending repositories</h2>
   <p><b>25</b> repositories shown, sorted by most stars.</p>
   {{ if .repos}} {{ range $key, $value := .repos}}
-  <a href="{{.Fullname}}" class="exploreIDontKnowWhatToNameThisDiv">
+  <a href="{{.Fullname}}" class="explore-card">
     <div>
       <p>{{.Fullname}}</p>
       <p>{{.Description}}</p>

views/file.html

@@ -10,14 +10,14 @@
       word-wrap: break-word;
     }
   </style>
-  <div class="downloadParent">
+  <div class="download-parent">
     <a href="/{{.fullname}}/tree/{{.branch}}" class="button"
       >Back to {{.fullname}}</a
     >
   </div>
 
-  <div class="userReadme">
-    <div class="userContainer">
+  <div class="user-readme">
+    <div class="user-container">
       <h3>{{.name}}</h3>
       <a
         href="/raw/{{.fullname}}/{{.branch}}/{{.name}}"

views/index.html

@@ -5,12 +5,12 @@
   <h3>Features</h3>
   <ul>
     <li>Lightweight - for both you and the instance host</li>
-    <li>No JavaScript - pure HTML and CSS goodness</li>
+    <li>No JavaScript - pure HTML and CSS awesomeness</li>
     <li>
-      No requests made to Micro$oft - they won't even know you made a request!
+      No requests made to GitHub from the client side - they won't even know you made a request!
     </li>
     <li>Open source - for peer review & trustworthiness</li>
-    <li>Save bandwidth - no JavaScript/tracking bloat loaded!</li>
+    <li>Save bandwidth - no JavaScript, tracking bloat or extra fonts loaded.</li>
   </ul>
   <h3>Privacy</h3>
   <p>
@@ -49,7 +49,9 @@
     yourself private from them instead.</i
   >
   <h3>Credits</h3>
-  <a href="https://midou36o.github.io">Midou36O</a> - desigining the GotHub logo
+  <a href="https://midou36o.github.io">Midou36O</a> - desigining the GotHub logo<br>
+  <a href="https://odyssey346.dev">Odyssey346</a> - majority of the code, <b>main</b>tainer<br>
+  <a href="https://arya.projectsegfault.dev">Arya</a> - code contributions and second maintainer<br>
   <h3>Info</h3>
   {{ if eq .version "unknown, please build with Go 1.13+ or use Git"}} GotHub
   version: <code>unknown</code> {{ else }} GotHub version:

views/repo.html

@@ -2,14 +2,14 @@
 
 <main>
   {{ if .repo }} {{ range $key, $value := .repo}}
-  <div class="buttonParent">
+  <div class="button-parent">
     <a href="/download/{{.Fullname}}/{{.DefaultBranch}}" class="button"
       >Download (zip)</a
     >
     <a rel="noreferrer" href="https://github.com/{{.Fullname}}" class="button">View on GitHub</a>
   </div>
 
-  <div class="userProfile">
+  <div class="user-profile">
     <h1>{{.Fullname}}</h1>
     {{ if .Parent }}
     <p>This repository is a fork of <a href="/{{.Parent}}">{{.Parent}}</a>.</p>
@@ -33,12 +33,12 @@
     {{end}}
   </div>
   {{end}} {{ if .files}}
-  <div class="userReadme">
+  <div class="user-readme">
     <h3>Files</h3>
-    <div class="userReadmeText">
-      <ul class="filesUList">
+    <div class="user-readme-text">
+      <ul class="file-u-list">
         {{ range $key, $value := .files}} {{ if eq .Type "dir" }}
-        <li class="filesList">
+        <li class="file-list">
           📁
           <a
             href="/{{.Fullname}}/tree/{{.DefaultBranch}}/{{.Path}}"
@@ -47,7 +47,7 @@
           >
         </li>
         {{ else }}
-        <li class="filesList">
+        <li class="file-list">
           🗒️
           <a href="/{{.Fullname}}/blob/{{.DefaultBranch}}/{{.Path}}"
             >{{.Path}}</a
@@ -58,11 +58,11 @@
     </div>
   </div>
   {{ end }} {{ if .readme}}
-  <div class="userReadme">
+  <div class="user-readme">
     {{ if .repo }} {{ range $key, $value := .repo}}
     <h3>{{.Readme}}</h3>
     {{end}} {{end}}
-    <div class="userReadmeText">{{ unescape .readme}}</div>
+    <div class="user-readme-text">{{ unescape .readme}}</div>
   </div>
   {{ end }} {{ else }}
   <h2>Repository not found</h2>

views/user.html

@@ -2,10 +2,10 @@
 
 <main>
   {{ if .user }} {{ range $key, $value := .user}}
-  <div class="buttonParent">
+  <div class="button-parent">
     <a rel="noreferrer" href="https://github.com/{{.Login}}" class="button">View on GitHub</a>
   </div>
-  <div class="userProfile">
+  <div class="user-profile">
     <img
       src="{{ .AvatarUrl }}"
       alt="{{.Login}}'s avatar"
@@ -32,7 +32,7 @@
     {{ end }} {{ if .Email }}
     <p>✉️ {{.Email}}</p>
     {{ end }} {{ if .Social }}
-    <div class="sociallinks">
+    <div class="social-links">
       {{range .Social}}
       <p>🔗 <a href="{{.}}" target="_blank">{{.}}</a></p>
       {{ end }}
@@ -60,25 +60,23 @@
   </div>
 
   {{ if .Bio }}
-  <div class="userBio">
+  <div class="user-bio">
     <h3>Bio</h3>
-    <p class="userBioText">{{.Bio}}</p>
+    <p class="user-bio-text">{{.Bio}}</p>
   </div>
   {{ end }} {{ if .Readme }}
-  <div class="userReadme">
+  <div class="user-readme">
     <h3>README</h3>
-    <div class="userReadmeText">{{ unescape .Readme}}</div>
+    <div class="user-readme-text">{{ unescape .Readme}}</div>
   </div>
   {{ end }} {{ if .MainRepos }}
-  <div>
-    <h2>{{.PinOrPopular}}:</h2>
+  <div class="user-readme">
+    <h3>{{.PinOrPopular}} repositories</h2>
     {{range .MainRepos}}
-    <div class="mainRepos">
-      <h3 class=""><a href="/{{.Name}}">{{.Name}}</a></h3>
+    <a class="user-repo-card" href="/{{.Name}}">
+      <p class="user-repo-header">{{.Name}}</p>
       {{if .ForkOf}}
-      <p class="mainReposTextDim">
-        Forked from: <a href="/{{.ForkOf}}">{{.ForkOf}}</a>
-      </p>
+      Forked from: <a href="/{{.ForkOf}}">{{.ForkOf}}</a>
       {{else}} {{end}} {{if .Desc}}
       <p class="">{{.Desc}}</p>
       {{else}} {{end}}
@@ -86,7 +84,7 @@
         {{if .Stars}}⭐ {{.Stars}}{{else}}{{end}} {{if .Forks}} 🍴 {{.Forks}}
         {{else}}{{end}} {{if .Lang}} 🗒️ {{.Lang}} {{else}}{{end}}
       </p>
-    </div>
+    </a>
     {{ end }}
   </div>
   {{ end }} {{ end }} {{ else }}