Fix styling

Author: Reboot-Codes

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/_includes/layouts/post.njk

@@ -8,10 +8,6 @@ useContainer: true
 
 <p>on {{ page.date | formatDate }}, takes {{ content | timeToRead }} to read.</p>
 
-{% if (openGraph.imgUrl) %}
-<img id="ogimage" class="og-image" src="{{ openGraph.imgUrl }}">
-{% endif %}
-
 <h2>Tags</h2>
 {% if ((tags | length) > 1) %}
 <ul>
@@ -29,6 +25,10 @@ useContainer: true
 <p>No tags</p>
 {% endif %}
 
+{% if (openGraph.imgUrl) %}
+<img id="ogimage" class="og-image" src="{{ openGraph.imgUrl }}">
+{% endif %}
+
 <div id="post-content" class="content">
 {{ content | safe }}
 <div>

src/_includes/layouts/project.njk

@@ -29,10 +29,10 @@ useContainer: true
 <div id="posts-list" class="post-list">
 {%- for item in pagination.items %}
   {% if item.data.published != false %}
-    <article id="post-{{ loop.index }}" class="post">
-      <a href="{{ item.page.url }}">{{ item.data.title }}</a>
+    <a id="post-{{ loop.index }}" class="post transition" href="{{ item.page.url }}">
+      <p>{{ item.data.title }}</p>
       <p>on {{ item.page.date | formatDate }}, takes {{ item.content | timeToRead }} to read.</p>
-    </article>
+    </a>
   {% endif %}
 {% endfor -%}
 </div>

src/index.njk

@@ -16,7 +16,7 @@ pagination:
   </div>
   <div class="home-section-card-content">
     {%- for item in pagination.items %}
-      <a href="{{ item.page.url }}">
+      <a href="{{ item.page.url }}" class="home-section-card">
         <h3>{{ item.data.title }}</h3>
         <p>{{ item.data.description }}</p>
       </a>

src/posts.njk

@@ -30,10 +30,10 @@ pagination:
 
 <div id="posts-list" class="post-list">
 {%- for item in pagination.items %}
-  <article id="post-{{ loop.index }}" class="post">
-    <a href="{{ item.page.url }}">{{ item.data.title }}</a>
+  <a id="post-{{ loop.index }}" href="{{ item.page.url }}" class="post transition">
+    <p>{{ item.data.title }}</p>
     <p>on {{ item.page.date | formatDate }}, takes {{ item.content | timeToRead }} to read.</p>
-  </article>
+  </a>
 {% endfor -%}
 </div>
 

src/projects.njk

@@ -12,10 +12,10 @@ pagination:
 
 <div id="posts-list" class="post-list">
 {%- for item in pagination.items %}
-  <article id="post-{{ loop.index }}" class="post">
-    <a href="{{ item.page.url }}">{{ item.data.title }}</a>
+  <a id="post-{{ loop.index }}" class="post transition" href="{{ item.page.url }}">
+    <p>{{ item.data.title }}</p>
     <p>{{ item.data.description }}</p>
-  </article>
+  </a>
 {% endfor -%}
 </div>
 

src/styles/global.scss

@@ -6,7 +6,7 @@
 :root {
   --bg: var(--black);
   --color: var(--white);
-  --contrast: var(--gray-700);
+  --contrast: var(--gray-800);
   --hover: var(--green-300);
 }
 
@@ -101,7 +101,7 @@ a:hover {
 
 .nav-bar {
   width: 100%;
-  height: 32px;
+  min-height: 64px;
   display: flex;
   flex-direction: row;
   padding: 12px;
@@ -143,34 +143,62 @@ a:hover {
   align-items: center;
 
   .pagination-control {
-    margin: 6px;
-    padding: 6px 12px;
-    border-radius: 12px;
-    background-color: var(--green-500);
-
     a {
+      margin: 6px;
+      padding: 6px 12px;
+      display: block;
+      border: 1px solid var(--hover);
+
       text-decoration: none;
     }
 
     a:hover {
-      color: var(--color);
+      color: var(--bg);
+      background-color: var(--hover);
     }
   }
 
   .pagination-control[aria-current] {
+    margin: 6px;
+    padding: 6px 12px;
+    display: block;
+
+    border: 1px solid var(--contrast);
     background-color: var(--contrast);
   }
 }
 
 .post-list {
   .post {
     margin-top: 12px;
+    margin: 6px;
+    padding: 6px 12px;
+    display: block;
+    border: 1px solid var(--hover);
+
+    text-decoration: none;
+  }
+
+  .post:hover {
+    color: var(--bg);
+    background-color: var(--hover);
   }
 }
 
 .tagged-posts {
   .tagged-post {
     margin-top: 12px;
+    margin: 6px;
+    padding: 6px 12px;
+    display: block;
+    border: 1px solid var(--hover);
+
+    text-decoration: none;
+  }
+
+  .tagged-post:hover {
+    color: var(--bg);
+    background-color: var(--hover);
   }
 }
 

src/styles/home.scss

@@ -35,6 +35,19 @@
   }
 }
 
+.home-section-card {
+  padding: 6px 12px;
+  display: block;
+  border: 1px solid var(--hover);
+
+  text-decoration: none;
+}
+
+.home-section-card:hover {
+  color: var(--bg);
+  background-color: var(--hover);
+}
+
 .home-section {
   margin-top: 32px;
   display: flex;

src/tags.njk

@@ -19,9 +19,9 @@ isBlog: true
 
 <div id="taggedposts" class="tagged-posts">
 {% for post in (collections[ tag ] | reverse) %}
-  <article class="tagged-post">
-    <a href="{{ post.url }}">{{ post.data.title }}</a>
+  <a class="tagged-post transition" href="{{ post.url }}">
+    <p>{{ post.data.title }}</p>
     <p>on {{ post.page.date | formatDate }}</p>
-  </article>
+  </a>
 {% endfor %}
 </div>