Style changes

author: Urja Acharya <urja.acharya@huskers.unl.edu> 2021-03-03 05:10:12 +0300
committer: Urja Acharya <urja.acharya@huskers.unl.edu> 2021-03-03 05:10:12 +0300
commit: 2c4715619c40c9d07dfd3f03ec4f1f2903adfaa6 (patch)
tree: f15a5bbfa33016b022e4e3bff3fa47ae41b415b8
parent: 50e93d6278ff8b9cbce7e5e38710efcc3997b729 (diff)
6 files changed, 144 insertions, 129 deletions
diff --git a/exampleSite/config.json b/exampleSite/config.json
index 19883f2..f3e1ea9 100644
--- a/exampleSite/config.json
+++ b/exampleSite/config.json
@@ -1,5 +1,5 @@
 {
-  "baseURL": "https://redgood.netlify.app/",
+  "baseURL": "https://www.example.org/",
   "languageCode": "en-us",
   "title": "demo of redgood",
   "theme": "redgood",
@@ -17,11 +17,11 @@
       "narrative": "this website is a demo for the redgood theme made by Urja Acharya. this section is customizable and can be used for a short inroduction by modifying `params.about.narrative` in `config`. markdown can be used in **this** section."
     },
     "social": {
-      "email": "#",
-      "linkedin": "#",
-      "fb": "#",
-      "twitter": "#",
-      "github": "#"
+      "email": { "url": "#", "icon": "bi bi-envelope" },
+      "linkedin": { "url": "#", "icon": "bi bi-linkedin" },
+      "fb": { "url": "#", "icon": "bi bi-facebook" },
+      "twitter": { "url": "#", "icon": "bi bi-twitter" },
+      "github": { "url": "#", "icon": "bi bi-github" }
     }
   }
 }
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6670b4f..5645f6b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,6 +1,6 @@
 <head>
   <title>
-    {{- if and (not .IsHome) (.Title) }} {{ .Title }} - {{ end }} {{ .Site.Title -}}
+    {{ if and (not .IsHome) (.Title) }} {{ .Title }} - {{ end }} {{ .Site.Title }}
   </title>
   <meta name="theme-color" content="#a3001b" />
   <meta charset="utf-8" />
@@ -20,4 +20,8 @@
     href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"
     rel="stylesheet"
   />
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"
+  />
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index bd774d7..8d0719b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,5 +1,5 @@
-<header {{ if .IsHome }}class="home-page-header" {{ end }}>
-  {{ if .IsHome }}
+{{ if .IsHome }}
+<header class="home-page-header">
   <div class="header-image-container">
     <div class="header-image">
       <img
@@ -8,22 +8,82 @@
       />
     </div>
   </div>
-  {{ end }}
   <div class="header-info">
-    {{ if not .IsHome }}
-    <a class="home-icon" href="{{ `/` | relURL }}" aria-label="home page">
-      {{ partial "homeIcon" . }}
-    </a>
-    {{ else }}
-    <h1 class="site-title">{{- .Site.Title -}}</h1>
-    {{ end }} {{ partial "title" . }} {{ if .IsHome }}
-    <div class="social-info">
+    <h1 class="main-title">{{- .Site.Title -}}</h1>
+    <p class="about-narrative">
+      {{ .Site.Params.about.narrative | markdownify }}
+    </p>
+    {{ $width := mul (len .Site.Params.social) 2 }}
+    <div class="social-info" style="width: {{ $width }}em;">
       {{- range $key, $val := .Site.Params.social -}}
-      <a class="social-link" href="{{ $val }}" aria-label="{{ $key }}">
-        {{- $key -}}
+      <a class="header-icon" href="{{ $val.url }}" aria-label="{{ $key }}"
+        ><i class="{{ $val.icon }}"></i>
       </a>
       {{- end -}}
     </div>
-    {{ end }}
   </div>
 </header>
+{{ else }}
+<header class="regular-page-header">
+  <div
+    style="
+      display: flex;
+      justify-content: space-between;
+      width: 98%;
+      margin-bottom: 0.5em;
+    "
+  >
+    <a class="header-icon" href="{{ `/` | relURL }}" aria-label="home page">
+      <i class="bi bi-house-door"></i>
+    </a>
+    <div
+      class="share-links"
+      style="
+        display: flex;
+        margin-left: 1em;
+        align-items: center;
+        width: 120px;
+        justify-content: space-between;
+      "
+    >
+      {{ $url := printf "%s" .URL | absLangURL }}
+      <a
+        class="header-icon"
+        href="mailto:?subject={{ print .Title ` by ` .Site.Params.author }}&amp;body={{ $url }}"
+        target="_self"
+        rel="noopener"
+        aria-label="share by email"
+        ><i class="bi bi-envelope"></i
+      ></a>
+      <a
+        class="header-icon"
+        href="https://facebook.com/sharer/sharer.php?u={{ $url }}"
+        target="_blank"
+        rel="noopener"
+        aria-label="share on facebook"
+        ><i class="bi bi-facebook"></i
+      ></a>
+      <a
+        class="header-icon"
+        href="https://twitter.com/intent/tweet/?text={{ print .Title ` by ` .Site.Params.author }}&amp;url={{ $url }}"
+        target="_blank"
+        rel="noopener"
+        aria-label="share on twitter"
+        ><i class="bi bi-twitter"></i
+      ></a>
+    </div>
+  </div>
+  <div class="page-title-and-info" style="text-align: center">
+    <h1 class="page-title">
+      {{ if or (eq .Kind "taxonomy") (eq .Kind "term") }}#{{ end }}{{ .Title }}
+    </h1>
+    {{ if eq .Kind "page" }}
+    <p class="document-date">
+      {{ dateFormat .Site.Params.theme.dateFormat .Date }} &middot; {{ .Site.Params.author }}
+    </p>
+    {{ if .Description }}
+    <p class="document-description">"{{ .Description }}"</p>
+    {{ end }} {{ end }}
+  </div>
+</header>
+{{ end }}
diff --git a/layouts/partials/title.html b/layouts/partials/title.html
deleted file mode 100644
index 6f12a98..0000000
--- a/layouts/partials/title.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div>
-  <p class="site-title home-{{ .IsHome }}">
-    {{ if not .IsHome }}
-    {{ if eq .Kind "taxonomy" }}#{{ end }}{{ .Title }}
-    {{ if eq .Kind "page" }}
-    <p>
-      {{ dateFormat .Site.Params.theme.dateFormat .Date }} &middot; {{ .Site.Params.author }}
-    </p>
-    {{ end }}
-    {{ end }}
-  </p>
-  {{ if .IsHome }}
-  <p class="about-narrative">
-    {{ .Site.Params.about.narrative | markdownify }}
-  </p>
-  {{ end }}
-</div>
diff --git a/layouts/section/recent.html b/layouts/section/recent.html
deleted file mode 100644
index 3cd624e..0000000
--- a/layouts/section/recent.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-<!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}">
-    <head>
-        <title>
-          Recent Posts
-        </title>
-        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-        <meta name="description" content="Recent Posts" />
-        <meta name="author" content="{{ .Site.Params.author }}" />
-      
-        <link rel="stylesheet" href="{{ `/css/main.css` | relURL }}" />
-        <link rel="stylesheet" href="{{ `/css/pagination.css` | relURL }}" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"
-          rel="stylesheet"
-        />
-      </head>
-  <body>
-    {{$paginator := .Paginate (where .Site.Pages "Kind" "page").ByDate.Reverse 3 }}
-    <main>
-        {{ range $paginator.Pages }}
-        {{ partial "listPage" . }}
-        {{ end }}
-        <div>
-            {{ template "_internal/pagination.html" . }}
-        </div>
-       
-    </main>
-    
-  </body>
-</html>
diff --git a/static/css/main.css b/static/css/main.css
index c042cbf..1fa8434 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -13,12 +13,13 @@ html {
   overflow-y: scroll;
   background-color: var(--bg);
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 body {
   font-family: "Quicksand", sans-serif;
   font-weight: 400;
-  max-width: 960px;
-  min-width: 300px;
+  max-width: 900px;
+  min-width: 250px;
   margin: auto;
   font-size: 1.2em;
   color: var(--mainText);
@@ -46,31 +47,41 @@ header {
   background-color: var(--primary);
   margin-top: 5px;
   display: flex;
-  flex-direction: row;
   justify-content: start;
   flex-wrap: wrap;
 }
-header .home-page-header {
+.home-page-header {
   min-height: 275px;
+  flex-direction: row;
+  padding-bottom: 0.25em;
+}
+.regular-page-header {
+  justify-content: space-between;
+  padding: 0.5em 0 0.5em 0;
+  flex-direction: column;
+  align-items: center;
 }
-header .home-page-header img {
+.home-page-header img {
   height: 100%;
 }
-.header-info {
-  padding: 10px;
-  width: calc(100% - 300px);
+.header-info,
+.page-title-and-info {
+  padding: 0.25em;
   display: flex;
   flex-direction: column;
+}
+.header-info {
+  width: calc(100% - 300px);
   justify-content: space-between;
 }
-.header-info p {
+.about-narrative,
+.page-title-and-info p {
   color: var(--bg);
   text-shadow: 0px 0px 2px var(--bgLight);
   margin: 0.25em 0 1em 0;
   line-height: 1.5em;
   font-size: 0.9em;
   font-weight: 300;
-  padding: 0em 0.35em;
 }
 .header-image-container {
   height: 275px;
@@ -80,6 +91,9 @@ header .home-page-header img {
   align-items: center;
   box-sizing: border-box;
 }
+.border {
+  border: solid 1px black;
+}
 .header-image {
   height: 230px;
   width: 230px;
@@ -89,14 +103,6 @@ header .home-page-header img {
   justify-content: center;
   box-shadow: 3px 3px 5px 3px black;
 }
-@media only screen and (max-width: 600px) {
-  header {
-    justify-content: center;
-  }
-  .header-info {
-    width: 100%;
-  }
-}
 footer {
   margin-top: 3em;
   margin-bottom: 5px;
@@ -162,19 +168,17 @@ h5 {
 h6 {
   font-size: 1.1em;
 }
-.site-title {
-  font-size: 2.5em;
+.main-title,
+.page-title {
   color: var(--bg);
   margin: 0;
   text-shadow: 3px 3px var(--shadow);
 }
-.site-title.home-false {
-  display: block;
-  font-size: 2em;
-  font-weight: 600;
-  margin-bottom: 0.5em;
-  text-decoration: underline;
-  text-shadow: 2px 2px var(--shadow);
+.main-title {
+  font-size: 2.5em;
+}
+.page-title {
+  font-size: 1.75em;
 }
 .front-matter {
   border-bottom: solid 3px var(--primary);
@@ -214,41 +218,18 @@ svg {
   height: 1em;
   width: 1em;
 }
-.home-icon {
+.header-icon {
   font-size: 1.5em;
   color: var(--bg);
   border-radius: 5px;
-  display: contents;
-}
-.home-icon svg {
-  margin-left: 0.35em;
-  padding: 0.25em;
-  border-radius: 5px;
 }
-.home-icon svg {
-  box-shadow: inset 0 0 2px var(--shadow);
-  transition: box-shadow 0.1s;
+.header-icon:hover {
+  text-shadow: 0px 0px 5px var(--highlight);
 }
 .social-info {
   display: flex;
   flex-wrap: wrap;
-}
-.social-link {
-  color: var(--bg);
-  padding: 0.15em 0.35em;
-  border-radius: 5px;
-  font-size: 0.9em;
-  font-weight: 300;
-  text-shadow: 0px 0px 2px var(--bgLight);
-}
-.home-icon svg:hover,
-.social-link:hover {
-  box-shadow: inset 0 0 6px var(--shadow);
-  text-decoration: none;
-}
-.home-icon svg:active,
-.social-link:active {
-  box-shadow: inset 0 0 10px var(--shadow);
+  justify-content: space-between;
 }
 .archive-table {
   width: 100%;
@@ -332,3 +313,27 @@ main img {
   max-width: 100%;
   margin: 1em auto;
 }
+@media only screen and (max-width: 720px) {
+  .home-page-header {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .header-info {
+    width: 98%;
+    align-items: center;
+  }
+  .main-title,
+  .about-narrative {
+    text-align: center;
+  }
+  .about-narrative {
+    margin: 0.5em 0 1.5em 0;
+  }
+  .share-text {
+    display: none;
+  }
+  .document-date {
+    margin: 0;
+  }
+}
author	Urja Acharya <urja.acharya@huskers.unl.edu>	2021-03-03 05:10:12 +0300
committer	Urja Acharya <urja.acharya@huskers.unl.edu>	2021-03-03 05:10:12 +0300
commit	2c4715619c40c9d07dfd3f03ec4f1f2903adfaa6 (patch)
tree	f15a5bbfa33016b022e4e3bff3fa47ae41b415b8
parent	50e93d6278ff8b9cbce7e5e38710efcc3997b729 (diff)