Updated design components

7 files changed, 350 insertions, 220 deletions

diff --git a/README.md b/README.md
index ab1cef2..90656ec 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,6 @@
-# Sugoi
\ No newline at end of file
+# Sugoi

+

+- Landing Page

+- Custom Icon for category

+- Read time on blog page

+- Social Sharing
\ No newline at end of file
diff --git a/archetypes/default.md b/archetypes/default.md
index ac36e06..b24fe88 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -1,2 +1,13 @@
-+++
-+++
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
+**Insert Lead paragraph here.**
+
+## New Cool Posts
+
+{{ range first 10 ( where .Site.RegularPages "Type" "cool" ) }}
+* {{ .Title }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index d0321b4..8ac245f 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,10 +1,30 @@
 {{ define "main" }}

 

+<div class="section hero">

+  <div class="container">

+    <div class="row">

 <h1>{{ .Title }}</h1>

-{{ range .Pages.ByPublishDate.Reverse }}

-<p>

-  <a class="" href="{{ .RelPermalink }}">{{ .Title }}</a>

-</p>

+<hr>

+{{ $paginator := .Paginate (where .Site.RegularPages "Type" "post") }}

+{{ range $paginator.Pages }}

+<h5>

+  {{ range .Params.Categories }}

+  <a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}" class="text-primary">{{ . | title | humanize }}</a>

+  {{ end }}

+</h5>

+<h4>

+  <a href="{{ .Permalink }}" class="h5 d-block my-3">{{ .Title | markdownify }}</a>

+</h4>

+<div class="mb-3 post-meta">

+  <span>By {{ .Site.Params.Author }} on

+    {{ if not .Params.HideDate }}{{ .PublishDate.Format "02 January 2006" }}{{ end }}</span>

+</div>

+<p class="card-text">{{ .Summary }}</p>

+<a href="{{ .Permalink }}" class="btn btn-outline-primary">read more</a>

 {{ end }}

 

+</div>

+</div>

+</div>

+

 {{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 67a9eeb..f24b5de 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,81 +1,42 @@
 {{ define "main" }}
-  <div class="container">
-    <div class="row">
-      <div class="one-half column" style="margin-top: 25%">
-        <h2 class="title">A dead simple, responsive boilerplate.</h2>
-        {{ range first 5 (where .Site.Pages "Type" "post" )}}
-        <p>
-          <a href="{{.RelPermalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
-        </p>
-        {{ end }}       
-      </div>
-      <div class="one-half column" style="margin-top: 25%">
-        <h2 class="title">A dead simple, responsive boilerplate.</h2>
-        <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some
-          content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
-          <a class="button button-primary" href="https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip">Download</a>
-      </div>
-    </div>
-  </div>
-  
-  <div class="section hero">
-    <div class="container">
-      <div class="row">
-        <div class="one-half column">
-          <h4 class="hero-heading">Stop coding non-responsive sites. Let users view sites from anywhere.</h4>
-          <a class="button button-primary" href="http://getskeleton.com">Try Skeleton</a>
-        </div>
-        <div class="one-half column phones">
-          <img class="phone" src="http://getskeleton.com/examples/landing/images/iphone.png">
-          <img class="phone" src="http://getskeleton.com/examples/landing/images/iphone.png">
-        </div>
-      </div>
-    </div>
-  </div>
 
-  <div class="section values">
-    <div class="container">
-      <div class="row">
-        <div class="one-third column value">
-          <h2 class="value-multiplier">67%</h2>
-          <h5 class="value-heading">Purchase Increase</h5>
-          <p class="value-description">Percentage of users more likely to purchase on mobile friendly site.</p>
-        </div>
-        <div class="one-third column value">
-          <h2 class="value-multiplier">90%</h2>
-          <h5 class="value-heading">Multi-device Users</h5>
-          <p class="value-description">Most of the world accesses the internet on multiple devices.</p>
-        </div>
-        <div class="one-third column value">
-          <h2 class="value-multiplier">66%</h2>
-          <h5 class="value-heading">Sad Users</h5>
-          <p class="value-description">Percentage of users that are frustrated with page load times.</p>
-        </div>
-      </div>
-    </div>
-  </div>
+{{ partial "header.html" . }}
 
-  <div class="section get-help">
-    <div class="container">
-      <h3 class="section-heading">Need help getting started?</h3>
-      <p class="section-description">Skeleton is an amazingly easy place to start with responsive development. If you want to learn more, just visit the documentation!</p>
-      <a class="button button-primary" href="http://getskeleton.com">View Skeleton Docs</a>
-    </div>
+<div class="section hero">
+  <div class="container">
+    <h3 class="section-heading">Need help getting started?</h3>
+    <a class="button button-primary" href="http://getskeleton.com">View Skeleton Docs</a>
   </div>
+</div>
 
-  <div class="section categories">
-    <div class="container">
-      <h3 class="section-heading">Responsive Images</h3>
-      <p class="section-description">Skeleton images sit easily in grid with .u-max-full-width class. I suggest exploring solution to serving different images based on device size.</p>
-      <div class="row">
-        <div class="one-half column category">
-          <img class="u-max-full-width" src="http://getskeleton.com/examples/landing/images/placeholder.png">
-        </div>
-        <div class="one-half column category">
-          <img class="u-max-full-width" src="http://getskeleton.com/examples/landing/images/placeholder.png">
-        </div>
-      </div>
+<div class="section main">
+    <div class="row content">
+        <article>
+        {{ range first 5 (where .Site.RegularPages "Type" "post" )}}
+        <i class="{{.Params.Icon}}"></i> 
+        <span class="category">
+        {{ range .Params.Categories }}
+          <a href="{{ "/categories/" | relLangURL}}{{ . | urlize }}">
+          {{.}}
+        </a>
+        </span>
+        {{ end }}
+        {{ if gt .ReadingTime 1 }}
+        {{ .Scratch.Set "readingTime" "minutes" }}
+        {{ else }}
+        {{ .Scratch.Set "readingTime" "minute" }}
+        {{ end }}
+
+        <i class="far fa-clock"></i> {{ .ReadingTime }} {{ .Scratch.Get "readingTime" }} <i
+          class="fas fa-share-alt"></i>
+        </h6>
+        <h5>
+          <a href="{{.RelPermalink}}" class="category" alt="{{.Title}}" title="{{.Title}}">{{.Title}}</a>
+        </h5>
+        <i class="far fa-calendar"></i> {{.Date.Format "2006-01-02"}}
+      </article>
+        {{ end }}
     </div>
-  </div>
+</div>
 
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e79a047..bc10049 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,6 +16,8 @@
 {{ $css := "css/custom.css" | absURL }}

 <link rel="stylesheet" href="{{ $css }}">

 

+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

+

 {{ if .Site.Params.favicon }}

 <link rel="shortcut icon" href="/{{ .Site.Params.favicon }}" type="image/png" />

 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d3f5a12..c5c66bf 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1 +1,14 @@
-

+<nav>

+    <label for="drop" class="toggle"><i class="fas fa-bars float_right" aria-hidden="true"></i> Sugoi</label>

+    <input type="checkbox" id="drop" />

+    <ul class="menu">

+        <li><a href="{$mybb->settings['bburl']}" class="Home"><span><i class="fas fa-home" aria-hidden="true"></i>

+                    Home</span></a></li>

+        <li><a href="{$mybb->settings['bburl']}/index.php" class="Forum"><span><i class="fas fa-circle"

+                        aria-hidden="true"></i> Forum</span></a></li>

+        <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fas fa-user"

+                        aria-hidden="true"></i> Memberlist</span></a></li>

+        <li class="float_right mobile_hide"><a href="{$mybb->settings['bburl']}/member.php?action=register"

+                class="register"><i class="fas fa-child"></i> Create an account</a></li>

+    </ul>

+</nav>
\ No newline at end of file
diff --git a/static/css/custom.css b/static/css/custom.css
index 4b5b533..c8e94c8 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,151 +1,269 @@
-/* Shared

-–––––––––––––––––––––––––––––––––––––––––––––––––– */

-.button {

-    border-radius: 100px;

+.toggle,

+input[id="drop"] {

+  display: none;

+}

+

+nav {

+  margin: 0;

+  padding: 0;

+  display: block;

+  background: #222;

+}

+

+nav::after {

+  clear: both;

+  content: "";

+  display: table;

+}

+

+nav ul {

+  list-style: outside none none;

+  margin: 0;

+  padding: 0;

+  position: relative;

+}

+

+nav ul li {

+  display: inline-block;

+  margin: 0;

+  float: left;

+}

+

+nav ul li>a:only-child::after {

+  content: "";

+}

+

+nav ul li>a::after {

+  content: " ";

+  display: inline;

+  font-family: fontawesome;

+}

+

+nav a {

+  color: #fff;

+  display: block;

+  font-size: 14px;

+  padding: 14px 12px;

+  text-decoration: none;

+  text-transform: uppercase;

+}

+

+nav a:link {

+  color: #fff;

+  text-decoration: none;

+}

+

+nav a:visited {

+  color: #fff;

+  text-decoration: none;

+}

+

+nav a:hover {

+  background: #333;

+}

+

+nav ul li ul li:hover {

+  background: #444 none repeat scroll 0 0;

+}

+

+nav ul ul {

+  display: none;

+  position: absolute;

+  top: 35px;

+}

+

+nav ul li:hover>ul {

+  display: inherit;

+}

+

+nav ul ul li {

+  display: list-item;

+  float: none;

+  position: relative;

+  width: 170px;

+}

+

+nav ul ul ul li {

+  left: 170px;

+  position: relative;

+  top: -60px;

+}

+

+nav ul li>a::after {

+  content: " ";

+  display: inline;

+  font-family: fontawesome;

+}

+

+nav ul li>a:only-child::after {

+  content: "";

+}

+

+@media all and (max-width: 768px) {

+  nav {

+    margin: 0;

   }

-  

-  /* Sections

-  –––––––––––––––––––––––––––––––––––––––––––––––––– */

-  .section {

-    padding: 8rem 0 7rem;

-    text-align: center;

+

+  .toggle+a,

+  .menu {

+    display: none;

   }

-  .section-heading,

-  .section-description {

-    margin-bottom: 1.2rem;

+

+  .toggle {

+    color: #ffffff;

+    display: block;

+    font-size: 22px;

+    padding: 10px 10px;

+    text-decoration: none;

+    text-align: left;

   }

-  

-  /* Hero

-  –––––––––––––––––––––––––––––––––––––––––––––––––– */

-  .phones {

-    position: relative;

+

+  .toggle:hover {

+    background-color: #333;

+  }

+

+  [id^="drop"]:checked+ul {

+    display: block;

+  }

+

+  nav ul li {

+    display: block;

+    width: 100%;

+  }

+

+  nav ul ul .toggle,

+  nav ul ul a {

+    padding: 0 40px;

+  }

+

+  nav ul ul ul a {

+    padding: 0 80px;

+  }

+

+  nav a,

+  nav ul ul ul a {

+    background-color: #222;

+    text-decoration: none;

+    width: 100%;

+    text-align: left;

+

   }

-  .phone {

-    position: relative;

-    max-width: 80%;

-    margin: 3rem auto -12rem;

+

+  nav a:hover,

+  nav ul ul ul a {

+    background-color: #111;

+    text-decoration: none;

   }

-  .phone + .phone {

+

+  nav ul li ul li .toggle,

+  nav ul ul a,

+  nav ul ul ul a {

+    color: #ffffff;

+    font-size: 12px;

+    padding: 10px 15px;

+  }

+

+  nav ul li ul li .toggle,

+  nav ul ul a {

+    background-color: #555;

+  }

+

+  nav ul ul {

+    color: #ffffff;

+    float: none;

+    position: static;

+  }

+

+  nav ul ul li:hover>ul,

+  nav ul li:hover>ul {

     display: none;

   }

-  

-  /* Values

-  –––––––––––––––––––––––––––––––––––––––––––––––––– */

-  .values {

-    background-image: url('http://getskeleton.com/examples/landing/images/values-bg.jpg');

-    background-size: cover;

-    color: #fff;

-    padding-bottom: 5rem;

+

+  nav ul ul li {

+    display: block;

+    width: 100%;

   }

-  .value-multiplier {

-    margin-bottom: .5rem;

-    color: #11DFC7;

+

+  nav ul ul ul li {

+    position: static;

   }

-  .value-heading {

-    margin-bottom: .3rem;

+}

+

+@media all and (max-width: 330px) {

+  nav ul li {

+    display: block;

+    width: 100%;

   }

-  .value-description {

-    opacity: .8;

-    font-weight: 300;

+}

+

+@media only screen and (min-width: 769px) {

+  nav ul {

+    margin-left: 5%;

+    margin-right: 5%;

   }

-  

-  /* Help

-  –––––––––––––––––––––––––––––––––––––––––––––––––– */

-  .get-help {

-    border-bottom: 1px solid #ddd;

+

+  nav ul ul {

+    margin-left: 0;

   }

-  

-  /* Categories

+}

+

+/* Floating FA icon */

+.svg-inline--fa.fa-bars.fa-w-14.float_right {

+  float: right;

+}

+

+.button {

+  border-radius: 100px;

+}

+

+/* main */

+.main {

+  background: #ffffff;

+  margin-left: auto;

+  margin-right: auto;

+  margin-bottom: auto;

+  min-height: 400px;

+  padding: 0;

+  width: 97%;

+  margin-top: -100px;

+  border-top-left-radius: 20px;

+  border-top-right-radius: 20px;

+}

+

+@media (min-width: 400px) {

+  .main {

+    width: 85%;

+    padding: 0; }

+}

+

+/* For devices larger than 550px */

+@media (min-width: 550px) {

+  .main {

+    margin-top: -100px;

+    width: 80%; }

+  }

+

+/* Sections

+  –––––––––––––––––––––––––––––––––––––––––––––––––– */

+.section {

+  padding: 8rem 0 7rem;

+}

+

+.section-heading,

+.section-description {

+  margin-bottom: 1.2rem;

+}

+

+/* Hero

   –––––––––––––––––––––––––––––––––––––––––––––––––– */

-  .categories {

-    background-image: url('http://getskeleton.com/examples/landing/images/values-bg.jpg');

-    background-size: cover;

-    color: #fff;

-  }

-  .categories .section-description { 

-    margin-bottom: 4rem;

-  }

-  

-  /* Bigger than 550 */

-  @media (min-width: 550px) {

-    .section {

-      padding: 12rem 0 11rem;

-    }

-    .hero {

-      padding-bottom: 12rem;

-      text-align: left;

-      height: 165px;

-    }

-    .phone {

-      position: absolute;

-      top: -7rem;

-      right: 3rem;

-      max-height: 362px;

-      z-index: 3;

-    }

-    .phone + .phone {

-      top: -6rem;

-      display: block;

-      max-width: 73.8%;

-      right: 0;

-      z-index: 2;

-      max-height: 338px;

-    }

-    .hero-heading {

-      font-size: 2.4rem;

-    }

-  }

-  

-  /* Bigger than 750 */

-  @media (min-width: 750px) {

-    .hero {

-      height: 190px;

-    }

-    .hero-heading {

-      font-size: 2.6rem;

-    }

-    .section {

-      padding: 14rem 0 15rem;

-    }

-    .hero {

-      padding: 16rem 0 14rem;

-    }

-    .section-description {

-      max-width: 60%;

-      margin-left: auto;

-      margin-right: auto;

-    }

-    .phone {

-      top: -14rem;

-      right: 5rem;

-      max-height: 510px;

-    }

-    .phone + .phone {

-      top: -12rem;

-      max-height: 472px;

-    }

-    .categories {

-      padding: 15rem 0 8rem;

-    }

-  }

-  

-  /* Bigger than 1000 */

-  @media (min-width: 1000px) {

-    .section {

-      padding: 20rem 0 19rem;

-    }

-    .hero {

-      padding: 22rem 0;

-    }

-    .hero-heading {

-      font-size: 3.0rem;

-    }

-    .phone {

-      top: -16rem;

-      max-height: 615px;

-    }

-    .phone + .phone {

-      top: -14rem;

-      max-height: 570px;

-    }

-  }
\ No newline at end of file
+  .hero {

+    background: #222;

+    background-size: 100%;

+    background-repeat: no-repeat;

+    height: 200px;

+    color: #eeeeee;

+    display: flex;

+    justify-content: center;

+    align-items: center;

+    text-align: center;

+  }