✨ styled with colors and add collections

Gimbardo · Dec 20, 2023 · 9885529 · 9885529
1 parent c80b01b
commit 9885529
Show file tree

Hide file tree

Showing 23 changed files with 202 additions and 108 deletions.
diff --git a/.ruby-version b/.ruby-version
@@ -0,0 +1 @@
+3.1.0
diff --git a/_config.yml b/_config.yml
@@ -19,7 +19,9 @@ collections_dir: all_collections
 collections:
   sheets:
     output: true
-  oneshots:
+  monsters:
+    output: true
+  adventures:
     output: true
 
 defaults:

diff --git a/_includes/head.html b/_includes/head.html
@@ -3,14 +3,18 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{site.title}} | {{page.title}}</title>
-  {% if page.layout == "post" %}
-  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/post.css" />
-  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/syntax.css" />
+
+  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/common.css" />
+  {% if page.layout == "blog" %}
+    <link rel="stylesheet" href="{{site.baseurl}}/assets/css/blog.css" />
   {% else %}
-  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/blog.css" />
+    <link rel="stylesheet" href="{{site.baseurl}}/assets/css/post.css" />
+    <link rel="stylesheet" href="{{site.baseurl}}/assets/css/syntax.css" />
   {%endif%}
-  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/common.css" />
+
+  <script src="{{site.baseurl}}/assets/js/main.js"></script>
   <script src="{{site.baseurl}}/assets/js/categories.js"></script>
+  <script src="{{site.baseurl}}/assets/js/scrolling_menu.js"></script>
   {% if page.layout == "post" %}
   <script defer src="{{site.baseurl}}/assets/js/lbox.js"></script>
   {% endif %}

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,3 +1,8 @@
 <header>
   <a class="site-title" href="{{site.baseurl}}/">{{site.title}}</a>
 </header>
+<div class="navbar">
+  <a href="javascript:;" id="nav_sheets">Sheets</a>
+  <a href="javascript:;" id="nav_monsters">Monsters</a>
+  <a href="javascript:;" id="nav_adventures">Adventures</a>
+</div>
diff --git a/_layouts/adventure.html b/_layouts/adventure.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include head.html %}
+  <body>
+    <main>
+      <section class="article">
+        <div class="content">{{content}}</div>
+      </section>
+      {% include footer.html %}
+    </main>
+    {% include category-modal.html%}
+  </body>
+</html>
diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -4,22 +4,40 @@
   <body>
     <main>
       {% include header.html %}
-      <section class="articles">
+      <section class="articles" id="sheets">
         {% for sheet in site.sheets %}
         <article class="article">
           <h2 class="article-title">
             <a href="{{site.baseurl}}{{sheet.url}}"> {{sheet.title}} </a>
           </h2>
           <div class="categories">
             {% for c in sheet.categories %}
-            <a href="#!" data-base-url="{{site.baseurl}}" class="category"
+            <a href="javascript:;" data-base-url="{{site.baseurl}}" class="category"
               >{{c}}</a
             >
             {% endfor %}
           </div>
         </article>
         {%endfor%}
       </section>
+      <section class="articles" id="monsters">
+        {% for monster in site.monsters %}
+        <article class="article">
+          <h2 class="article-title">
+            <a href="{{site.baseurl}}{{monster.url}}"> {{monster.title}} </a>
+          </h2>
+        </article>
+        {%endfor%}
+      </section>
+      <section class="articles" id="adventures">
+        {% for adventure in site.adventures %}
+        <article class="article">
+          <h2 class="article-title">
+            <a href="{{site.baseurl}}{{adventure.url}}"> {{adventure.title}} </a>
+          </h2>
+        </article>
+        {%endfor%}
+      </section>
       {% include footer.html %}
     </main>
     {% include category-modal.html%}

diff --git a/_layouts/monster.html b/_layouts/monster.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include head.html %}
+  <body>
+    <main>
+      <section class="article">
+        <div class="content">{{content}}</div>
+      </section>
+      {% include footer.html %}
+    </main>
+    {% include category-modal.html%}
+  </body>
+</html>
diff --git a/_layouts/post.html → _layouts/sheet.html b/_layouts/post.html → _layouts/sheet.html
diff --git a/all_collections/_adventures/OmicidioAGabbio.md b/all_collections/_adventures/OmicidioAGabbio.md
@@ -0,0 +1,4 @@
+---
+layout: adventure
+title: Omicidio A Gabbio
+---
diff --git a/all_collections/_monsters/TerenzioCollina.md b/all_collections/_monsters/TerenzioCollina.md
@@ -0,0 +1,4 @@
+---
+layout: monster
+title: Terenzio Collina
+---
diff --git a/all_collections/_sheets/Bababooey.md b/all_collections/_sheets/Bababooey.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: Bababooey
 primary_color: 60eb8a
 secondary_color: 000000

diff --git a/all_collections/_sheets/ErikFaust.md b/all_collections/_sheets/ErikFaust.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: Erik Faust
 primary_color: a12e05
 secondary_color: 56048a
@@ -117,13 +117,13 @@ categories: [ Bard, Tiefling ]
 
 ## Description
 
-idk è un Tiefling dai lunghi capelli neri, che gira con la sua cornamusa raccontando canzoni drammatiche, e che rende overdrammatica ogni situazione.
+Erik Faust è un Tiefling dai lunghi capelli neri, che gira con la sua cornamusa raccontando canzoni drammatiche, e che rende overdrammatica ogni situazione.
 
 ## Spells
 
-| Spellcasting Ability: Charisma | Spell Save DC: 16 | Spell Attack Bonus: 8 |
-|--------------------------------|-------------------|-----------------------|
-|                                |                   |                       |
+| Spellcasting Ability | Spell Save DC | Spell Attack Bonus |
+|:--------------------:|:-------------:|:------------------:|
+|    Charisma          |   16          |     8              |
 
 | Cantrips                                                              | Effect                                         |
 |-----------------------------------------------------------------------|------------------------------------------------|

diff --git a/all_collections/_sheets/JestyTheTortle.md b/all_collections/_sheets/JestyTheTortle.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: Jesty The Tortle
 primary_color: 138513
 secondary_color: de6c09

diff --git a/all_collections/_sheets/O'Birgam.md b/all_collections/_sheets/O'Birgam.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: O'Birgam
 primary_color: 00000
 secondary_color: CE2BFF

diff --git a/all_collections/_sheets/Rac'deLaCoon.md b/all_collections/_sheets/Rac'deLaCoon.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: Rac'de La Coon
 primary_color: 685348
 secondary_color: bba08a

diff --git a/all_collections/_sheets/Romeo.md b/all_collections/_sheets/Romeo.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: Romeo
 primary_color: FFD919
 secondary_color: FF4019

diff --git a/all_collections/_sheets/Xirdhen.md b/all_collections/_sheets/Xirdhen.md
@@ -1,5 +1,5 @@
 ---
-layout: post
+layout: sheet
 title: Xirdhen
 primary_color: CE2BFF
 secondary_color: FF4019

diff --git a/assets/css/blog.css b/assets/css/blog.css
@@ -1,15 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,400;0,800;1,100;1,300;1,400;1,800&display=swap");
 
-:root {
-  --gray-1: #3f3f3f;
-  --gray-2: #32353a;
-  --gray-3: #25282c;
-  --gray-4: #151618;
-  --gray-5: #151618;
-  --gray-6: #111111;
-  --white-1: #eeeeee;
-  --white-2: #a9abb3;
-}
+
 * {
   font-family: inherit;
   text-decoration: none;
@@ -24,11 +15,11 @@
 }
 html,
 body {
-  color: var(--white-2);
-  background-color: var(--gray-6);
+  color: var(--color-3);
   font-family: "JetBrains Mono", monospace;
   line-height: 2rem;
   background-color: var(--gray-5);
+  scroll-behavior: smooth;
 }
 header {
   display: flex;
@@ -37,52 +28,17 @@ header .site-title {
   font-size: 4rem;
   font-weight: bolder;
   line-height: 110%;
-  color: var(--white-1);
+  color: var(--color-);
   text-align: center;
   width: 100%;
+  text-decoration: underline;
 }
 main {
   margin: 0 auto;
   max-width: 800px;
   padding: 3rem 0;
 }
 
-/* header */
-
-#bio {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-#img-wrapper img {
-  border-radius: 50%;
-  max-width: 100px;
-}
-#bio-wrapper {
-  margin-left: 1rem;
-}
-#text-wrapper {
-  line-height: 1.2rem;
-  font-weight: 300;
-}
-#text-wrapper a {
-  color: cyan;
-  border-bottom: 1px solid cyan;
-}
-#social-wrapper {
-  margin-top: 1rem;
-}
-#social-wrapper img {
-  filter: invert() !important;
-  width: 25px;
-  height: 25px;
-  margin: 0 0 0.3rem 0;
-  transition: all 0.2s ease-in-out;
-}
-#social-wrapper img:hover {
-  transform: scale(1.2);
-}
-
 /* article section */
 
 .articles {
@@ -92,13 +48,14 @@ main {
 }
 .articles .article {
   padding: 2rem;
-  background: var(--gray-3);
+  background: var(--color-4);
   border-radius: 15px;
   transition: all 0.2s ease-in-out;
 }
 .articles .article .article-title,
 .articles .article .article-title a {
-  color: var(--white-2);
+  text-decoration: underline;
+  color: var(--color-3);
   font-weight: 100;
   font-style: italic;
   font-size: 1.4rem;
@@ -118,12 +75,12 @@ main {
   justify-content: flex-start;
 }
 .articles .article .categories .category {
-  margin: 0 0.5rem 0.3rem 0;
+  margin: 0.5rem 0.5rem 0.3rem 0;
   display: block;
-  color: var(--gray-4);
-  background: var(--white-2);
+  color: var(--color-3);
+  background: var(--color-2);
   border-radius: 15px;
-  font-size: 0.7rem;
+  font-size: 0.8rem;
   padding: 0 0.8rem;
   line-height: 1.3rem;
   cursor: pointer;
@@ -149,12 +106,6 @@ main {
 }
 
 @media screen and (max-width: 350px) {
-  #img-wrapper img {
-    max-width: 50px;
-  }
-  #bio {
-    align-items: flex-start;
-  }
   main,
   .articles {
     padding: 0;
@@ -178,3 +129,28 @@ main {
     font-size: 1rem;
   }
 }
+
+.navbar {
+  margin-top: 2rem;
+  border-radius: 15px;
+  background-color: var(--color-4);
+  overflow: hidden;
+}
+
+.navbar a {
+  font-weight: 700;
+  float: left;
+  color: var(--color-3);
+  text-align: center;
+  padding: 14px 16px;
+}
+
+.navbar a:hover {
+  color: var(--color-4);
+  background-color: var(--color-3);
+}
+
+.navbar a.active {
+  color: var(--color-4);
+  background-color: var(--color-3);
+}
diff --git a/assets/css/common.css b/assets/css/common.css
@@ -7,7 +7,13 @@
   --gray-6: #111111;
   --white-1: #eeeeee;
   --white-2: #a9abb3;
+
+  --color-1: #04AA6D;
+  --color-2: #005918;
+  --color-3: #DEB887;
+  --color-4: #1D1D35;
 }
+
 #category-modal-bg {
   position: fixed;
   top: 0;