[Tools] Improve the design

renan-taranto · Oct 4, 2023 · 13fcd18 · 13fcd18
1 parent 5a9114b
commit 13fcd18
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 33 deletions.
diff --git a/_data/en_US/navigation.yml b/_data/en_US/navigation.yml
@@ -1,5 +1,5 @@
-- name: Apps
-  link: /apps/
+- name: Tools
+  link: /tools/
 
 - name: About
   link: /about/
diff --git a/_data/pt_BR/navigation.yml b/_data/pt_BR/navigation.yml
@@ -1,5 +1,5 @@
-- name: Apps
-  link: /apps/
+- name: Ferramentas
+  link: /tools/
 
 - name: Sobre
   link: /about/
diff --git a/_includes/apps.html b/_includes/apps.html
diff --git a/_includes/header.html b/_includes/header.html
@@ -2,7 +2,7 @@
     <div class="container">
         <div>
             <h1 class="header__title">
-                <span>{{ page.title }}</span>
+                <span>{{ page.header_content }}</span>
             </h1>
         </div>
 

diff --git a/_includes/tools.html b/_includes/tools.html
@@ -0,0 +1,12 @@
+<div class="pure-g">
+    <div class="pure-u-1-1 pure-u-md-1-2">
+        <img src="/assets/images/tools.jpg" alt="tools" class="pure-img img--tools">
+    </div>
+    <div class="pure-u-1-1 pure-u-md-1-2">
+        <p>
+            <ul>
+                <li><a href="https://cron.renantaranto.com/">AWS EventBridge Cron Expressions Validator</a></li>
+            </ul>
+        </p>
+    </div>
+</div>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -68,10 +68,23 @@ h6 { font-size: $h6-font-size; text-transform: uppercase; letter-spacing: 0.02em
   padding-bottom: 64px;
 }
 
+.visible-ml {
+  display: none;
+}
+
 .visible-md {
   display: none;
 }
 
+@media (min-width: $breakpoint-ml) {
+  .hidden-ml {
+    display: none;
+  }
+  .visible-ml {
+    display: block !important;
+  }
+}
+
 @media (min-width: $breakpoint-md) {
   .hidden-md {
     display: none;

diff --git a/_sass/_components.scss b/_sass/_components.scss
@@ -124,6 +124,12 @@
     color: $color-primary;
 }
 
+.img--tools {
+    max-width: 300px !important;
+    display: block;
+    margin-left: auto;
+}
+
 @media (min-width: $breakpoint-sm) {
     .header__title {
         font-size: 84px;

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -33,6 +33,7 @@ $navigation-padding-vertical: 8px;
 $navigation-border-size: 2px;
 $navigation-content-margin-horizontal: 16px;
 
+$breakpoint-ml: 425px;
 $breakpoint-sm: 568px;
 $breakpoint-md: 768px;
 $breakpoint-xl: 1280px;
diff --git a/about.en_US.html b/about.en_US.html
@@ -1,5 +1,6 @@
 ---
 title: About
+header_content: About
 layout: prose
 lang: en_US
 permalink: /about/

diff --git a/about.pt_BR.html b/about.pt_BR.html
@@ -1,5 +1,6 @@
 ---
 title: Sobre
+header_content: Sobre
 layout: prose
 lang: pt_BR
 permalink: /about/

diff --git a/apps.en_US.html b/apps.en_US.html
diff --git a/apps.pt_BR.html b/apps.pt_BR.html
diff --git a/assets/images/tools.jpg b/assets/images/tools.jpg
diff --git a/tools.en_US.html b/tools.en_US.html
@@ -0,0 +1,9 @@
+---
+title: Tools
+header_content: Tools
+layout: prose
+lang: en_US
+permalink: /tools/
+---
+
+{% include tools.html %}
diff --git a/tools.pt_BR.html b/tools.pt_BR.html
@@ -0,0 +1,17 @@
+---
+title: Ferramentas
+header_content:
+    <span class="hidden-ml">
+        Ferra
+        <br>
+        mentas
+    </span>
+    <span class="visible-ml">
+        Ferramentas
+    </span>
+layout: prose
+lang: pt_BR
+permalink: /tools/
+---
+
+{% include tools.html %}