Merge pull request #3 from gowin20/gwen

variable name swapping, card overhaul, tags
gowin20 · Feb 22, 2024 · c4352db · c4352db
2 parents 65b65c3 + 2f4ed63
commit c4352db
Show file tree

Hide file tree

Showing 14 changed files with 256 additions and 193 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -81,7 +81,7 @@ module.exports = function (eleventyConfig) {
 
   // CSS minifier
   eleventyConfig.addFilter('cssMin', css => {
-    return new CleanCSS({}).minify(code).styles;
+    return new CleanCSS({}).minify(css).styles;
   });
 
 
@@ -105,8 +105,8 @@ module.exports = function (eleventyConfig) {
       output: "public",
       includes: "_includes",
       layouts: "_layouts",
-      markdownTemplateEngine: "md"
     },
+    markdownTemplateEngine: "njk",
     cname: 'geowen.dev'
   };
 };
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
@@ -13,10 +13,10 @@
     {% include "style/sidebar.css" %}
   {% endset %}
   <style>
-    {{ css | safe }}
+    {{ css | cssMin | safe }}
   </style>
-
-  <title>{{ title }}</title>
+  {% from "name.njk" import myName %}
+  <title>{{ title + " | " + myName + ' Owen'}}</title>
 
 </head>
 <body>

diff --git a/src/_includes/components/post-card.njk b/src/_includes/components/post-card.njk
@@ -1,11 +1,21 @@
 <div class="post-card">
-    <div class="card-inner">
-        <p class="card-title">{{post.data.title}}</p>
-        <!--p class="card-description">{{post.data.description}}</p-->
-        <p class="card-category"># {{post.data.category}}</p>
-    </div> 
     <div class="post-card-img">
         <img src="/images/{{post.data.image}}" alt="Click to read"/>
+        <a href="{{post.url}}"><span class="card-link"></span></a>
+    </div>
+    <div class="card-text">
+        <div class="card-title">
+            {{post.data.title}}
+            <a href="{{post.url}}"><span class="card-link"></span></a>
+        </div>
+        <div class="card-tag-container">
+            <div class="card-tags">
+                {% for tag in post.data.tags %}
+                {%if tag != 'posts'%}
+                    <a href="/blog/tags/{{tag}}">#{{tag}}</a>
+                {%endif%}
+                {%endfor%}
+            </div>  
+        </div>
     </div>
-    <a href="{{post.url}}"><span class="card-link"></span></a>
 </div>
diff --git a/src/_includes/components/post-list.njk b/src/_includes/components/post-list.njk
@@ -1,9 +1,11 @@
+{% set css %}
+    {%include "style/postCards.css"%}
+{%endset%}
+<style>
+    {{ css | cssMin | safe }}
+</style>
 <div class="card-grid">
-
-{%- for post in collections.posts | reverse -%}
-
-{% include "components/post-card.njk" %}
-
-{%- endfor -%}
-
+    {%- for post in collections.posts | reverse -%}
+        {% include "components/post-card.njk" %}
+    {%- endfor -%}
 </div>
diff --git a/src/_includes/components/sidebar-leaf.njk b/src/_includes/components/sidebar-leaf.njk
@@ -1,5 +1,13 @@
 {%extends "components/sidebar.njk" %}
+{% from 'name.njk' import myName %}
+{% set nameClass %}
+    {%if myName == 'George'%}
+        name-george
+    {%else%}
+        name-gwen
+    {%endif%}
+{%endset%}
 {% block topmatter %}
-<div onclick="location.href='/blog'" class="side-name name-full">GWEN OWEN</div>
+<div onclick="location.href='/blog'" class="side-name name-full {{nameClass}}">{{myName | upper}} OWEN</div>
 <div onclick="location.href='/blog'" class="side-name name-mini">OWEN</div>
 {%endblock%}
diff --git a/src/_includes/name.njk b/src/_includes/name.njk
@@ -0,0 +1 @@
+{% set myName = 'George' %}
diff --git a/src/_includes/style/imageSlideshow.css b/src/_includes/style/imageSlideshow.css
diff --git a/src/_includes/style/postCards.css b/src/_includes/style/postCards.css
@@ -0,0 +1,141 @@
+
+:root {
+    /* global variables for width and height, set dynamically using breakpoints */
+    --card-width:296px;
+    --card-height:479px;
+}
+
+.card-grid {
+    display:grid;
+    grid-template-columns: auto auto;
+    gap:24px; 
+}
+
+/* post card related things */
+.post-card {
+    /*appearance and relative position*/
+    margin:auto;
+    height: var(--card-height);
+    width: var(--card-width);
+    position:relative;
+
+
+    /* inner contents */
+    display:flex;
+    flex-direction: column;
+    background-color: #F2F2F2;
+}
+
+.post-card:hover {
+    color:blue
+}
+
+.card-link {
+    position:absolute; 
+    width:100%;
+    height:100%;
+    top:0;
+    left: 0;
+
+    z-index: 1;
+}
+
+.post-card-img {
+    width:100%;
+    height: var(--card-width);
+    z-index: 0;
+
+    border-style:solid;
+    border-width:1px;
+    border-color:#ccc;
+}
+.post-card-img img {
+    width:100%;
+    height:var(--card-width);
+    object-fit:cover;
+}
+
+.card-text {
+    margin: 0px auto 0px 0px;
+    z-index:5;
+    display:flex;
+    flex-direction: row;
+    width:100%;
+    min-height:calc(100% - var(--card-width));
+
+    border-style:none solid solid solid;
+    border-width:1px;
+    border-color:#ccc;
+}
+
+.card-tag-container {
+    width:calc(100% - calc(var(--card-width) / 1.618));
+    height:100%;
+
+    border-style:none none none solid;
+    border-width:1px;
+    border-color:#ccc;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+
+.card-tags {
+    padding:5px 5px 0px 5px;
+    font-size:12px;
+
+    text-decoration:underline;
+}
+.card-tags p {
+    margin:0px;
+    padding:0px;
+}
+.card-tags a {
+    color:#5e5e5e;
+}
+.card-tags a:hover {
+
+    color:black;
+}
+
+.card-title {
+    position:relative;
+    width:calc(304px / 1.618);
+    font-family: 'Montserrat', sans-serif;
+    font-size:20px;
+    line-height:24px;
+    font-weight:600;
+    padding:5px;
+
+}
+
+/* Medium devices (landscape tablets, 600px and up) */
+@media only screen and (min-width: 590px) {  
+:root {
+    --card-width:255px;
+    --card-height:413px;
+}
+} 
+@media only screen and (max-width:670px) {
+:root{
+    --card-width:240px;
+    --card-height:388px;
+}
+.card-grid {grid-template-columns: auto;width:240px;}
+}
+/* Large devices (laptops/desktops, 843px and up) */
+@media only screen and (min-width: 1000px) {
+:root {
+    --card-width:232px;
+    --card-height:375px;
+}
+.card-grid {grid-template-columns: auto auto auto;}
+} 
+
+/* Extra large devices (large laptops and desktops, 1100px and up) */
+@media only screen and (min-width: 1224px) {
+:root {
+    --card-width:304px;
+    --card-height:491px;
+}
+}
diff --git a/src/_includes/style/sidebar.css b/src/_includes/style/sidebar.css
@@ -14,29 +14,35 @@
     z-index:0;
 }
 
+.name-gwen {
+    font-size:25px;
+}
+.name-george {
+    font-size:22px;
+}
+
 .side-name {
+    top:100px;
     width:180px;
     height:40px;
     color: #5e5e5e;
     text-decoration: none;
     margin:0px 5px;
     padding:5px 5px 0px 5px;
     text-align: center;
-    font-size: 25px;
     line-height:1.2;
     letter-spacing:0px;
     font-family: 'Montserrat', sans-serif;
     font-weight:300;
     z-index:5;
     position:absolute;
-    top:125px;
+
     background-color: #e7e7e7;
     cursor:pointer;
 }
 
 .side-name:hover {
     color:black;
-    text-decoration: underline;
 }
 
 .name-full {
@@ -54,7 +60,7 @@
     margin: 0px 5px;
     padding: 0px 5px;
     position:absolute;
-    top:165px;
+    top:140px;
     left:0;
     z-index:5;
     border-radius:0px;