Adjust archive ui (#73)

nushackers · Aug 9, 2017 · 002e3df · 002e3df
1 parent 2e85972
commit 002e3df
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 24 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,7 +1,9 @@
 {{ define "main" }}
 <main class="row front-page main">
   <section class="hero col-12 section">
-    <h1>Spreading the hacker culture</h1>
+    <header class="section-header">
+      <h1 class="section-title">Spreading the hacker culture</h1>
+    </header>
     <div class="hero-content">
       <h2>What we do</h2>
       <ul class="hero-list list row">
@@ -17,12 +19,12 @@ <h2>What we do</h2>
     </div>
   </section>
   <section class="col-12 section">
-    <header>
-      <h1>Upcoming events</h1>
+    <header class="section-header">
+      <h1 class="section-title">Upcoming events</h1>
     </header>
     <div class="fh events">
-      <header class="front">
-        <h2 class="front-header">Friday Hacks</h2>
+      <header class="front-header">
+        <h2 class="front-title">Friday Hacks</h2>
         <ul class="front-list">
           <li>
             <a href="/sponsor">Supported</a> by NEC and IDA.
@@ -60,8 +62,8 @@ <h3 class="fh-topic">{{ $topic.title }}</h3>
       </ol>
     </div>
     <div class="hs events">
-      <header class="front">
-        <h2 class="front-header hs-header">Hackerschool</h2>
+      <header class="front-header">
+        <h2 class="front-title hs-header">Hackerschool</h2>
       </header>
       <ol class="list row">
         {{ range $index, $event := $.Site.Data.hacker_school.events }}
@@ -77,8 +79,9 @@ <h3 class=hs-topic>{{ $event.topic }}</h3>
     </div>
   </section>
   <section class="posts col-12 section">
-    <header class="front">
-      <h1>Articles</h1>
+    <header class="section-header">
+      <h1 class="section-title">Articles</h1>
+      <a href="/archive">Read more</a>
     </header>
     <ul class="list row">
       {{ range first 8 .Data.Pages }}
@@ -88,7 +91,7 @@ <h1>Articles</h1>
           <h3 class="posts-title"><a class="posts-link" href='{{ .Permalink }}'> {{ .LinkTitle }}</a> </h3>
           <div class="posts-meta">{{ .Date.Format "Mon, Jan 2" }} • {{ .ReadingTime }} min read</div>
         </header>
-        {{ .Summary | truncate 150 }} <a href='{{ .Permalink }}'>Read more</a>
+        {{ .Summary | truncate 150 }} <a href='{{ .Permalink }}'>more</a>
       </article>
       </li>
       {{ end }}

diff --git a/layouts/section/archive.html b/layouts/section/archive.html
@@ -1,13 +1,13 @@
 {{ define "main" }}
 <main class="container">
   <section class="row section">
-    <div class="col-12 col-md-8 push-md-4">
-      {{ $paginator := .Paginate (where .Site.Pages "Type" "post") }}
+    <div class="archive posts col-12 col-md-8 push-md-4">
+      {{ $paginator := .Paginate (where .Site.Pages "Type" "post") 15 }}
       {{ range $paginator.Pages.GroupByDate "2006"}}
-      <h1><a href="#">{{ .Key }}</a></h1>
-      <ul class="posts-list">
+      <h1 class="archive-title"><a href="#">{{ .Key }}</a></h1>
+      <ul class="archive-list">
         {{ range .Pages }}
-        <li class="posts-list-item">
+        <li class="item">
         <article>
           <header>
             <h2 class="posts-title"><a class="posts-link" href='{{ .Permalink }}'> {{ .LinkTitle }}</a> </h2>

diff --git a/static/scss/archive.scss b/static/scss/archive.scss
@@ -0,0 +1,9 @@
+.archive {
+  .archive-list {
+    @extend .clear-list;
+  }
+
+  .posts-title {
+    font-weight: 500;
+  }
+}
diff --git a/static/scss/front-page.scss b/static/scss/front-page.scss
@@ -1,10 +1,6 @@
 $font-small: 0.9rem;
 
 .front-page {
-  h1 {
-    border-bottom: 2px dotted $highlight-orange;
-  }
-
   h3,
   h4,
   h5,
@@ -23,7 +19,17 @@ $font-small: 0.9rem;
   }
 
   .section {
-    margin-bottom: 1.5rem;
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 0.75rem;
+      border-bottom: 2px dotted $highlight-orange;
+    }
+
+    .section-title {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -46,8 +52,8 @@ $font-small: 0.9rem;
   }
 }
 
-.front {
-  .front-header {
+.front-header {
+  .front-title {
     margin-bottom: 0;
   }
   .front-list {

diff --git a/static/scss/main.scss b/static/scss/main.scss
@@ -64,3 +64,5 @@ h6 {
 @import "./section.scss";
 @import "./footer.scss";
 @import "./front-page.scss";
+@import "./archive.scss";
+@import "./paginate.scss";
diff --git a/static/scss/paginate.scss b/static/scss/paginate.scss
@@ -1,5 +1,3 @@
-// Styles
-
 .pagination {
   display: flex;
   // 1-2: Disable browser default list styles