add li, list partials

8 files changed, 181 insertions, 3 deletions

diff --git a/assets/scss/_li.scss b/assets/scss/_li.scss
new file mode 100644
index 0000000..327bd65
--- /dev/null
+++ b/assets/scss/_li.scss
@@ -0,0 +1,81 @@
+.post-item {
+  max-height: 200px;
+  text-decoration: none;
+  color: var(--color-text);
+  padding: 0.5rem;
+  position: relative;
+  margin-bottom: var(--margin-between-cards);
+  margin-right: auto;
+  margin-left: auto;
+  width: calc(100% - 1rem - 10px);
+  background: var(--post-card-bg);
+  transition: transform 0.2s ease;
+  border: 1px solid var(--post-card-border-clr);
+  box-shadow: 5px 5px var(--post-card-boxshdw-clr);
+  transition-property: box-shadow, transform;
+  transition-duration: 0.2s, 0.3s;
+  transition-timing-function: ease;
+  display: block;
+
+  &:hover {
+    transform: translate(4px, 4px);
+    box-shadow: 1px 1px var(--post-card-box-shdw-clr);
+  }
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.4rem;
+    color: black;
+  }
+  &__tag {
+    color: var(--post-card-text);
+    text-decoration: none;
+    display: block;
+  }
+  &__tag:hover {
+    color: black;
+    text-decoration: underline black;
+  }
+  &__tag-text {
+    position: absolute;
+    padding: 3px 5px;
+    background: var(--post-card-tag-bg-color);
+    color: white;
+    top: 0;
+    left: 0;
+    border: 1px solid var(--post-card-tag-bg-color);
+    max-height: 30px;
+  }
+}
+
+.post-item:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+
+.post-item-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  grid-template-rows: minmax(auto, 25px) minmax(0, auto) auto;
+  grid-column-gap: 8px;
+  align-items: center;
+  grid-template-areas:
+  'pad image'
+  'title image'
+  'excerpt image'
+  'excerpt image'
+  'excerpt image';
+
+  &__title {
+    grid-area: title;
+  }
+  &__image {
+    grid-area: image;
+  }
+  &__excerpt {
+    grid-area: excerpt;
+  }
+  &__pad {
+    grid-area: pad;
+  }
+}
diff --git a/assets/scss/_list.scss b/assets/scss/_list.scss
new file mode 100644
index 0000000..059b125
--- /dev/null
+++ b/assets/scss/_list.scss
@@ -0,0 +1,4 @@
+.post-list {
+  display: flex;
+  flex-flow: column nowrap;
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 33d05b0..65d3f8d 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -94,3 +94,5 @@ button {
 
 @import "vars";
 @import "header";
+@import "li";
+@import "list";
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index 2a1d0b4..f4e5ae8 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1 +1,9 @@
-<a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
\ No newline at end of file
+<a class="post-item" href="{{.Permalink}}">
+    <div class="post-item-grid">
+        <div>HELLO</div>
+        <div class="post-item-grid__title">
+            <h2 class="post-item__title">{{.Title}}</h2>
+            <time datetime="{{.Date.Format "2006-01-02"}}">{{.Date.Format "2006-01-02"}}</time>
+        </div>
+    </div>
+</a>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e69de29..68b967f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,4 @@
+<article>
+    <h1>{{.Title}} </h1>
+    <div>{{.Content}}</div>
+</article>
diff --git a/layouts/index.html b/layouts/index.html
index 50c12b2..d637067 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,5 +1,5 @@
 {{define "main"}}
-<div>
+<div class="post-list">
   {{ $pages := .Pages }}
       {{ if .IsHome }}
       {{ $pages = .Site.RegularPages }}
diff --git a/static/css/style.css b/static/css/style.css
index 33dd715..49a3a47 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -214,4 +214,83 @@ header {
   z-index: -1;
 }
 
+.post-item {
+  max-height: 200px;
+  text-decoration: none;
+  color: var(--color-text);
+  padding: 0.5rem;
+  position: relative;
+  margin-bottom: var(--margin-between-cards);
+  margin-right: auto;
+  margin-left: auto;
+  width: calc(100% - 1rem - 10px);
+  background: var(--post-card-bg);
+  transition: transform 0.2s ease;
+  border: 1px solid var(--post-card-border-clr);
+  box-shadow: 5px 5px var(--post-card-boxshdw-clr);
+  transition-property: box-shadow, transform;
+  transition-duration: 0.2s, 0.3s;
+  transition-timing-function: ease;
+  display: block;
+}
+.post-item:hover {
+  transform: translate(4px, 4px);
+  box-shadow: 1px 1px var(--post-card-box-shdw-clr);
+}
+.post-item__title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.4rem;
+  color: black;
+}
+.post-item__tag {
+  color: var(--post-card-text);
+  text-decoration: none;
+  display: block;
+}
+.post-item__tag:hover {
+  color: black;
+  text-decoration: underline black;
+}
+.post-item__tag-text {
+  position: absolute;
+  padding: 3px 5px;
+  background: var(--post-card-tag-bg-color);
+  color: white;
+  top: 0;
+  left: 0;
+  border: 1px solid var(--post-card-tag-bg-color);
+  max-height: 30px;
+}
+
+.post-item:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+
+.post-item-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  grid-template-rows: minmax(auto, 25px) minmax(0, auto) auto;
+  grid-column-gap: 8px;
+  align-items: center;
+  grid-template-areas: "pad image" "title image" "excerpt image" "excerpt image" "excerpt image";
+}
+.post-item-grid__title {
+  grid-area: title;
+}
+.post-item-grid__image {
+  grid-area: image;
+}
+.post-item-grid__excerpt {
+  grid-area: excerpt;
+}
+.post-item-grid__pad {
+  grid-area: pad;
+}
+
+.post-list {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
 /*# sourceMappingURL=style.css.map */
diff --git a/static/css/style.css.map b/static/css/style.css.map
index 3645dd6..446c04b 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;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
+{"version":3,"sourceRoot":"","sources":["../../assets/scss/style.scss","../../assets/scss/_header.scss","../../assets/scss/_vars.scss","../../assets/scss/_li.scss","../../assets/scss/_list.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;;;AEtGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,qBACA;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AC9EJ;EACE;EACA","file":"style.css"}
\ No newline at end of file