From 9649b3ed2b252cab6ab4076d58814790582f07f0 Mon Sep 17 00:00:00 2001 From: Anirudh Oppiliappan Date: Sat, 17 Dec 2022 12:46:09 +0530 Subject: templates: index rework --- static/style.css | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++ templates/404.html | 6 ++- templates/500.html | 6 ++- templates/head.html | 1 + templates/index.html | 27 ++++++------- templates/nav.html | 10 ++--- 6 files changed, 140 insertions(+), 22 deletions(-) create mode 100644 static/style.css diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..b3bf406 --- /dev/null +++ b/static/style.css @@ -0,0 +1,112 @@ +:root { + --light: #f4f4f4; + --cyan: #509c93; + --light-gray: #eee; + --medium-gray: #ddd; + --gray: #6a6a6a; + --dark: #444; + --darker: #222; +} + +html { + background: var(--light); + -webkit-text-size-adjust: none; + font-family: "InterVar", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; +} + +::selection { + background: var(--medium-gray); + opacity: 0.3; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + max-width: 750px; + padding: 0 13px; + margin: 40px auto; +} + +main, footer { + font-size: 1rem; + padding: 0; + line-height: 160%; +} + +main h1, h2, h3, .small-heading { + font-family: "InterDisplay", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; + font-weight: 500; +} + +strong { + font-weight: 500; +} + +main h1 { + font-size: 20px; + padding: 10px 0 10px 0; +} + +main h2 { + font-size: 18px; +} + +main h2, h3 { + padding: 20px 0 15px 0; +} + +nav { + padding-top: 1rem; +} + +nav ul { + padding: 0; + margin: 0; + list-style: none; + padding-bottom: 20px; +} + +nav ul li { + padding-right: 10px; + display: inline-block; +} + +a { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + word-wrap: break-word; +} + +a { + color: var(--darker); + border-bottom: 1.5px solid var(--medium-gray); +} + +a:hover { + border-bottom: 1.5px solid var(--gray); +} + +.repo-index { + display: grid; + grid-template-columns: 6em 1fr 7em; + grid-row-gap: 0.5em; +} + +.repo-index-headings { + display: grid; + grid-template-columns: 6em 1fr 7em; + padding-bottom: 1.2em; + padding-top: 1.2em; +} + +@media (max-width: 385px) { + .repo-index { + grid-row-gap: 0.8em; + } +} diff --git a/templates/404.html b/templates/404.html index 931ea9b..8c40cd1 100644 --- a/templates/404.html +++ b/templates/404.html @@ -3,7 +3,11 @@ 404 {{ template "head" . }} - 404 — nothing like that here + {{ template "nav" . }} +
+

404 — nothing like that here.

+
+ {{ end }} diff --git a/templates/500.html b/templates/500.html index 72e784c..53c605f 100644 --- a/templates/500.html +++ b/templates/500.html @@ -3,7 +3,11 @@ 500 {{ template "head" . }} - 500 — something broke! + {{ template "nav" . }} +
+

500 — something broke!

+
+ {{ end }} diff --git a/templates/head.html b/templates/head.html index a128b6b..81ee777 100644 --- a/templates/head.html +++ b/templates/head.html @@ -3,6 +3,7 @@ + {{ end }} diff --git a/templates/index.html b/templates/index.html index 3ab82c7..690e2e1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,22 +7,19 @@

{{ .meta.Description }}

- {{ template "nav" . }}
- - - - - - - {{ range .info }} - - - - - - {{ end }} -
repositorydescriptionlast active
{{ .Name }}{{ .Desc }}{{ .Idle }}
+
+
repository
+
description
+
idle
+
+
+ {{ range .info }} +
{{ .Name }}
+
{{ .Desc }}
+
{{ .Idle }}
+ {{ end }} +
diff --git a/templates/nav.html b/templates/nav.html index 973eae2..d0d384d 100644 --- a/templates/nav.html +++ b/templates/nav.html @@ -4,12 +4,12 @@
  • all repos {{ if .name }}
  • {{ .name }} - {{ end }} - {{ if .ref }} -
  • tree -
  • log - {{ end }}
  • refs + {{ if .ref }} +
  • tree +
  • log + {{ end }} + {{ end }} {{ end }} -- cgit