add li partial, post-item partial and script js file

10 files changed, 200 insertions, 28 deletions

diff --git a/assets/js/script.js b/assets/js/script.js
new file mode 100644
index 0000000..b2fd3ef
--- /dev/null
+++ b/assets/js/script.js
@@ -0,0 +1,12 @@
+const navButton = document.querySelector('.header__menu-btn')

+const headerNavMobile = document.querySelector('.header-nav.mobile')

+const navCloseButton = document.querySelector('.header-nav__close-btn')

+

+navButton.addEventListener('click', () => {

+    headerNavMobile.setAttribute('active', '')

+    function closeHeaderNavHandler() {

+        headerNavMobile.removeAttribute('active')

+        navCloseButton.removeEventListener('click', closeHeaderNavHandler)

+    }

+    navCloseButton.addEventListener('click', closeHeaderNavHandler)

+})

diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index 168baf2..2fb1076 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -7,7 +7,64 @@ header {
   }
 }
 
-.header-wrapper {
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &__title {
+    font-size: 2rem;
+    font-weight: bold;
+  }
+}
+.header-nav-list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  &__item {
+    margin: 0.5rem;
+  }
+  &__link {
+    color: black;
+    text-decoration: none;
+  }
+  &__link:hover {
+    color: black;
+    text-decoration: underline;
+  }
+}
+
+.header-nav.desktop {
+  display: none;
+  @media (min-width: $screen-lg) {
+    display: block;
+  }
+}
+
+.header-nav.mobile {
+  display: none;
+}
+.header-nav[active].mobile {
+  display: block;
+  position: absolute;
+  top:0;
+  left:0;
+  bottom:0;
+  right:0;
+  width:100%;
+  height: 100%;
+}
+
+.header__menu-btn {
+  background: transparent;
+  border:none;
+  outline: none;
+}
+.header__menu-btn.mobile {
+  display: block;
+  @media (min-width: $screen-lg) {
+    display: none;
+  }
 }
 
 .header-frame {
@@ -24,7 +81,7 @@ header {
   overflow: visible;
 }
 .header-frame:after {
-  content: '';
+  content: "";
   position: absolute;
   background: var(--box-color);
   width: 17px;
@@ -35,7 +92,7 @@ header {
   z-index: -1;
 }
 .header-frame:before {
-  content: '';
+  content: "";
   position: absolute;
   background: var(--box-color);
   width: 15px;
@@ -46,11 +103,5 @@ header {
   z-index: -1;
 }
 
-.header-title {
-  font-size: 2rem;
-  font-weight: bold;
+.header__title {
 }
-
-.header-nav {
-  display: flex;
-}
\ No newline at end of file
diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss
index 6b4bba5..302d8ad 100644
--- a/assets/scss/_mixins.scss
+++ b/assets/scss/_mixins.scss
@@ -1,5 +1,4 @@
 @mixin flex-align($options) {

-    display: flex;

     @if $option == center {

        align-items: center;

     }

@@ -15,4 +14,15 @@
     @else if $option == baseline {

         align-items: baseline;

     }

+}

+@mixin flex-justify($options) {

+    @if $option == center {

+        justify-content: center;

+    }

+    @else if $option == start {

+        justify-content: flex-start;

+    }

+    @else if $option == end {

+        justify-content: flex-end;

+    }

 }
\ No newline at end of file
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 80fbc2a..33d05b0 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -69,7 +69,8 @@ footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
+  font-family: Arial, Helvetica, sans-serif;
 }
 ol, ul {
 	list-style: none;
@@ -87,5 +88,9 @@ table {
 	border-spacing: 0;
 }
 
+button {
+  cursor: pointer;
+}
+
 @import "vars";
 @import "header";
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
new file mode 100644
index 0000000..2a1d0b4
--- /dev/null
+++ b/layouts/_default/li.html
@@ -0,0 +1 @@
+<a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 553a89f..50c12b2 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,2 +1,11 @@
 {{define "main"}}
+<div>
+  {{ $pages := .Pages }}
+      {{ if .IsHome }}
+      {{ $pages = .Site.RegularPages }}
+      {{ end }}
+      {{- range $pages -}}
+        {{ .Render "li" }}
+      {{- end }}
+</div>
 {{end}}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c37c418..5a3eee0 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,19 +1,34 @@
 <header>
   <div class="header header-frame">
     <div>
-      <div class="header-title">{{.Site.Title}}</div>
+      <div class="header__title">{{.Site.Title}}</div>
       {{if .Site.Params.Description}}
-      <div class="header-description">{{.Site.Params.Description}}</div>
+      <div class="header__description">{{.Site.Params.Description}}</div>
       {{end}}
     </div>
-    <nav>
-      <ul class="header-nav">
+    <nav class="header-nav desktop">
+      <ul class="header-nav-list">
         {{ range .Site.Taxonomies.tags }}
-        <li class="header-nav-item">
-          <a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}
+        <li class="header-nav-list__item">
+          <a class="header-nav-list__link" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
         </li>
         {{end}}
       </ul>
     </nav>
+    <button class="header__menu-btn mobile">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
+    </button>
   </div>
+  <nav class="header-nav mobile">
+    <button class="header-nav__close-btn">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+    </button>
+    <ul>
+      {{ range .Site.Taxonomies.tags }}
+      <li class="header-nav-list__item">
+        <a class="header-nav-list__link" href="{{ .Page.Permalink}}">{{.Page.Title}}</a>
+      </li>
+      {{end}}
+    </ul>
+  </nav>
 </header>
diff --git a/layouts/partials/post-item.html b/layouts/partials/post-item.html
new file mode 100644
index 0000000..061e31e
--- /dev/null
+++ b/layouts/partials/post-item.html
@@ -0,0 +1,6 @@
+<article>

+    <h2>{{.Title}}</h2>

+    <p>{{.Description}}</p>

+    <time>{{.Date}}</time>

+    <div>{{.Author}}</div>

+</article>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 3d6852c..33dd715 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -72,6 +72,7 @@ footer, header, hgroup, menu, nav, section {
 
 body {
   line-height: 1;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 ol, ul {
@@ -93,6 +94,10 @@ table {
   border-spacing: 0;
 }
 
+button {
+  cursor: pointer;
+}
+
 header {
   max-width: 1584px;
   margin: 0 auto;
@@ -104,6 +109,73 @@ header {
   }
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header__title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.header-nav-list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+}
+.header-nav-list__item {
+  margin: 0.5rem;
+}
+.header-nav-list__link {
+  color: black;
+  text-decoration: none;
+}
+.header-nav-list__link:hover {
+  color: black;
+  text-decoration: underline;
+}
+
+.header-nav.desktop {
+  display: none;
+}
+@media (min-width: 1056px) {
+  .header-nav.desktop {
+    display: block;
+  }
+}
+
+.header-nav.mobile {
+  display: none;
+}
+
+.header-nav[active].mobile {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.header__menu-btn {
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.header__menu-btn.mobile {
+  display: block;
+}
+@media (min-width: 1056px) {
+  .header__menu-btn.mobile {
+    display: none;
+  }
+}
+
 .header-frame {
   width: calc(100% - 2rem - 16px);
   transform: translateX(-6px);
@@ -142,13 +214,4 @@ header {
   z-index: -1;
 }
 
-.header-title {
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.header-nav {
-  display: flex;
-}
-
 /*# sourceMappingURL=style.css.map */
diff --git a/static/css/style.css.map b/static/css/style.css.map
index 864d18f..3645dd6 100644
--- a/static/css/style.css.map
+++ b/static/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../assets/scss/style.scss","../../assets/scss/_header.scss","../../assets/scss/_vars.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;ACtFD;EACE,WCGW;EDFX;EACA;;AACA;EAJF;IAKI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../assets/scss/style.scss","../../assets/scss/_header.scss","../../assets/scss/_vars.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACE;EACA;;;AAEF;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AAGD;EACE;;;AC3FF;EACE,WCGW;EDFX;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file