Make boxes darker

bdmendes · Dec 5, 2023 · 3576c16 · 3576c16
1 parent e1bc9d0
commit 3576c16
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 129 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,5 +5,4 @@ _site
 vendor
 .bundle
 node_modules
-.vscode
 *_cache*
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["sissel.shopify-liquid", "esbenp.prettier-vscode"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "files.associations": {
+    "*.html": "liquid"
+  },
+  "[liquid]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,108 +4,111 @@
 
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="/dist/output.css" rel="stylesheet">
-  {% if page.description %}
-  <meta name="description" content="{{ page.description }}" />
-  {% elsif layout.description %}
-  <meta name="description" content="{{ layout.description }}" />
-  {% elsif site.description %}
-  <meta name="description" content="{{ site.description }}" />
-  {% endif %}
-  <title>
-    {% if page.standalone or layout.standalone %}
-    {% if page.title and page.collection %}
-    {{ page.title }} | {{ page.collection | capitalize }}
-    {% elsif page.title %}
-    {{ page.title }}
-    {% elsif page.collection %}
-    {{ page.collection | capitalize }}
-    {% else %}
-    {{ site.title }}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="/dist/output.css" rel="stylesheet" />
+    {% if page.description %}
+    <meta name="description" content="{{ page.description }}" />
+    {% elsif layout.description %}
+    <meta name="description" content="{{ layout.description }}" />
+    {% elsif site.description %}
+    <meta name="description" content="{{ site.description }}" />
     {% endif %}
-    {% elsif page.title %}
-    {{ page.title }} | {{ site.title }}
-    {% else %}
-    {{ site.title }}
+    <title>
+      {% if page.standalone or layout.standalone %} {% if page.title and
+      page.collection %} {{ page.title }} | {{ page.collection | capitalize }}
+      {% elsif page.title %} {{ page.title }} {% elsif page.collection %} {{
+      page.collection | capitalize }} {% else %} {{ site.title }} {% endif %} {%
+      elsif page.title %} {{ page.title }} | {{ site.title }} {% else %} {{
+      site.title }} {% endif %}
+    </title>
+    {% if page.icon %}
+    <link rel="icon" type="image/x-icon" href="/assets/icons/{{page.icon}}" />
+    {% elsif layout.icon %}
+    <link rel="icon" type="image/x-icon" href="/assets/icons/{{layout.icon}}" />
+    {% elsif site.icon %}
+    <link rel="icon" type="image/x-icon" href="/assets/icons/{{site.icon}}" />
+    {% endif %} {% assign background = page.background | default:
+    layout.background | default: site.background %} {% if background %}
+    <link
+      rel="preload"
+      href="{{site.url}}/assets/background/{{ background }}"
+      as="image"
+    />
     {% endif %}
-  </title>
-  {% if page.icon %}
-  <link rel="icon" type="image/x-icon" href="/assets/icons/{{page.icon}}">
-  {% elsif layout.icon %}
-  <link rel="icon" type="image/x-icon" href="/assets/icons/{{layout.icon}}">
-  {% elsif site.icon %}
-  <link rel="icon" type="image/x-icon" href="/assets/icons/{{site.icon}}">
-  {% endif %}
-  {% assign background = page.background | default: layout.background | default: site.background %}
-  {% if background %}
-  <link rel="preload" href="{{site.url}}/assets/background/{{ background }}" as="image">
-  {% endif %}
-</head>
+  </head>
 
-<body>
-  {% if background %}
-  <div class="bg-neutral-950 bg-cover bg-center bg-no-repeat h-screen brightness-[25%]"
-    style="background-image: url('{{site.url}}/assets/background/{{ background }}')">
-    {% else %}
-    <div class="bg-neutral-950 h-screen">
-      {% endif %}
-    </div>
+  <body>
+    {% if background %}
     <div
-      class="bg-neutral-950 md:bg-transparent top-0 absolute flex w-screen min-h-screen md:place-items-center text-slate-300 z-10">
-      <div class="basis-full flex flex-col md:flex-row max-w-4xl mx-auto px-4 place-items-center md:gap-4">
+      class="bg-black bg-cover bg-center bg-no-repeat h-screen brightness-[25%]"
+      style="background-image: url('{{site.url}}/assets/background/{{ background }}')"
+    >
+      {% else %}
+      <div class="bg-black h-screen">{% endif %}</div>
+      <div
+        class="bg-black md:bg-transparent top-0 absolute flex w-screen min-h-screen md:place-items-center text-slate-300 z-10"
+      >
+        <div
+          class="basis-full flex flex-col md:flex-row max-w-4xl mx-auto px-4 place-items-center md:gap-4"
+        >
+          {% unless page.standalone or layout.standalone %}
+          <nav
+            class="grow-0 flex md:min-w-fit px-2 py-4 flex-col place-items-center justify-center text-xl no-underline"
+          >
+            <img
+              src="{{site.baseurl}}/assets/about-me/bdmendes.jpg"
+              alt="logo"
+              class="mt-2 mb-4 w-24 h-24 rounded-full brightness-90 drop-shadow-2xl"
+            />
+            <div class="flex gap-4 mt-2">
+              {% for page in site.social %}
+              <a href="{{ page.url }}" target="_blank">
+                <img
+                  class="w-6 h-6"
+                  src="{{site.baseurl}}/assets/socials/{{ page.icon }}"
+                  alt="{{ page.name }}"
+                />
+              </a>
+              {% endfor %}
+            </div>
+            <div
+              class="flex flex-wrap flex-row md:min-w-fit md:flex-col mt-4 place-items-center gap-1 justify-center text-xl no-underline"
+            >
+              {% if page.url == '/' %}
+              <a class="nav-btn-selected" href="/">About me</a>
+              {% else %}
+              <a class="nav-btn" href="/">About me</a>
+              {% endif %} {% if page.url == '/projects.html' %}
+              <a class="nav-btn-selected" href="/projects">Projects</a>
+              {% else %}
+              <a class="nav-btn" href="/projects">Projects</a>
+              {% endif %} {% if page.url == '/favorites.html' %}
+              <a class="nav-btn-selected" href="/favorites">Favorites</a>
+              {% else %}
+              <a class="nav-btn" href="/favorites">Favorites</a>
+              {% endif %}
+            </div>
+          </nav>
+          {% endunless %}
 
-        {% unless page.standalone or layout.standalone %}
-        <nav class="grow-0 flex md:min-w-fit px-2 py-4 flex-col place-items-center justify-center text-xl no-underline">
-          <img src="{{site.baseurl}}/assets/about-me/bdmendes.jpg" alt="logo"
-            class="mt-2 mb-4 w-24 h-24 rounded-full brightness-90 drop-shadow-2xl" />
-          <div class="flex gap-4 mt-2">
-            {% for page in site.social %}
-            <a href="{{ page.url }}" target="_blank">
-              <img class="w-6 h-6" src="{{site.baseurl}}/assets/socials/{{ page.icon }}" alt="{{ page.name }}" />
-            </a>
-            {% endfor %}
-          </div>
           <div
-            class="flex flex-wrap flex-row md:min-w-fit md:flex-col mt-4 place-items-center gap-1 justify-center text-xl no-underline">
-            {% if page.url == '/' %}
-            <a class="nav-btn-selected" href="/">About me</a>
-            {% else %}
-            <a class="nav-btn" href="/">About me</a>
-            {% endif %}
-
-            {% if page.url == '/projects.html' %}
-            <a class="nav-btn-selected" href="/projects">Projects</a>
-            {% else %}
-            <a class="nav-btn" href="/projects">Projects</a>
-            {% endif %}
-
-            {% if page.url == '/favorites.html' %}
-            <a class="nav-btn-selected" href="/favorites">Favorites</a>
-            {% else %}
-            <a class="nav-btn" href="/favorites">Favorites</a>
-            {% endif %}
+            id="content"
+            class="rounded bg-neutral-950 md:bg-transparent md:backdrop-blur-2xl h-min overflow-y-scroll md:max-h-[90vh] p-4 md:grow text-lg w-full m-4 md:m-0"
+          >
+            {{ content }}
           </div>
-        </nav>
-        {% endunless %}
-
-        <div id="content"
-          class="rounded bg-neutral-900 md:bg-transparent md:backdrop-blur-2xl h-min overflow-y-scroll md:max-h-[90vh] p-4 md:grow text-lg w-full m-4 md:m-0">
-          {{ content }}
         </div>
       </div>
     </div>
-</body>
-
-<script>
-  const target = document.getElementById("content");
-  document.addEventListener("wheel", function (e) {
-    e.preventDefault();
-    target.scrollBy(e.deltaX, e.deltaY);
-  })
-</script>
+  </body>
 
-</html>
+  <script>
+    const target = document.getElementById("content");
+    document.addEventListener("wheel", function (e) {
+      e.preventDefault();
+      target.scrollBy(e.deltaX, e.deltaY);
+    });
+  </script>
+</html>
diff --git a/assets/style.css b/assets/style.css
@@ -40,6 +40,10 @@
   .nav-btn {
     @apply p-2;
   }
+
+  .box {
+    @apply p-2 bg-neutral-900 rounded;
+  }
 }
 
 *::-webkit-scrollbar {

diff --git a/dist/output.css b/dist/output.css
diff --git a/favorites.html b/favorites.html
@@ -9,9 +9,12 @@ <h2>Music</h2>
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mt-4 mb-8 text-base">
   {% for band in site.music %}
-  <div class="flex items-center gap-2 bg-neutral-800 p-2 rounded-lg">
-    <img src="{{site.url}}/assets/music/{{ band.image }}" alt="{{ band.name }}"
-      class="w-16 h-16 rounded-lg object-cover" />
+  <div class="flex items-center gap-2 box">
+    <img
+      src="{{site.url}}/assets/music/{{ band.image }}"
+      alt="{{ band.name }}"
+      class="w-16 h-16 rounded-lg object-cover"
+    />
     <p>{{ band.name }}</p>
   </div>
   {% endfor %}
@@ -23,9 +26,12 @@ <h2>Movies</h2>
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mt-4 mb-8 text-base">
   {% for movie in site.movies %}
-  <div class="flex items-center gap-2 bg-neutral-800 p-2 rounded-lg">
-    <img src="{{site.url}}/assets/movies/{{ movie.image }}" alt="{{ movie.name }}"
-      class="w-16 h-16 rounded-lg object-cover" />
+  <div class="flex items-center gap-2 box">
+    <img
+      src="{{site.url}}/assets/movies/{{ movie.image }}"
+      alt="{{ movie.name }}"
+      class="w-16 h-16 rounded-lg object-cover"
+    />
     <p>{{ movie.name }}</p>
   </div>
   {% endfor %}
@@ -37,10 +43,13 @@ <h2>Series</h2>
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4 text-base">
   {% for show in site.series %}
-  <div class="flex items-center gap-2 bg-neutral-800 p-2 rounded-lg">
-    <img src="{{site.url}}/assets/series/{{ show.image }}" alt="{{ show.name }}"
-      class="w-16 h-16 rounded-lg object-cover" />
+  <div class="flex items-center gap-2 box">
+    <img
+      src="{{site.url}}/assets/series/{{ show.image }}"
+      alt="{{ show.name }}"
+      class="w-16 h-16 rounded-lg object-cover"
+    />
     <p>{{ show.name }}</p>
   </div>
   {% endfor %}
-</div>
+</div>
diff --git a/paradoxo.html b/paradoxo.html
@@ -9,19 +9,20 @@
 
 <h2 class="mb-4">Paradoxo</h2>
 
-<p class="mb-6"><span class="italic">Paradoxo</span> é uma coleção de textos originais que imprimem estórias e
-    sentimentos
-    pertencentes a um mundo real mas distorcido e romantizado. Eles existem por si só e não gostam de ser questionados.
+<p class="mb-6">
+  <span class="italic">Paradoxo</span> é uma coleção de textos originais que
+  imprimem estórias e sentimentos de um passado, ora reais, ora ficcionais. Eles
+  existem por si só e não gostam de ser questionados.
 </p>
 
 {% assign texts = site.paradoxo | sort: "number" %}
 
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-1">
-    {% for text in texts %}
-    <a href="{{ text.url }}" class="bg-neutral-800 p-2 rounded-lg">
-        <div>{{ text.title }}</div>
-    </a>
-    {% endfor %}
+  {% for text in texts %}
+  <a href="{{ text.url }}" class="box">
+    <div>{{ text.title }}</div>
+  </a>
+  {% endfor %}
 </div>
 
-<br>
+<br />
diff --git a/projects.html b/projects.html
@@ -3,20 +3,19 @@
 title: Projects
 ---
 
-{% assign categories = site.projects | group_by: "category" %}
-
-{% for category in categories %}
+{% assign categories = site.projects | group_by: "category" %} {% for category
+in categories %}
 <div class="mb-6">
-    <h2>{{ category.name | capitalize }}</h2>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-        {% for project in category.items %}
-        <div class="bg-neutral-800 p-2 rounded-lg">
-            <a class="flex mb-2" href="{{ project.link }}" target="_blank">
-                <div>{{project.name}}</div>
-            </a>
-            <div class="text-base">{{project.content}}</div>
-        </div>
-        {% endfor %}
+  <h2>{{ category.name | capitalize }}</h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+    {% for project in category.items %}
+    <div class="box">
+      <a class="flex mb-2" href="{{ project.link }}" target="_blank">
+        <div>{{project.name}}</div>
+      </a>
+      <div class="text-base">{{project.content}}</div>
     </div>
+    {% endfor %}
+  </div>
 </div>
-{% endfor %}
+{% endfor %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,4 @@ _site @@
     vendor
     .bundle
     node_modules
-    .vscode
     *_cache*