From fd7dd4bc2a657b9ffe4409fc5a1d78c197bf82f9 Mon Sep 17 00:00:00 2001
From: Thomas Josso <thomas.josso@gmail.com>
Date: Wed, 4 Oct 2023 11:49:11 +0200
Subject: [PATCH] feat(index): download link styling

---
 index.html | 50 ++++++++++++++++++++++++++++++--------------------
 style.css  | 39 +++++++++++++++++++++++++++------------
 2 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 02ee2c4..baa1578 100644
--- a/index.html
+++ b/index.html
@@ -59,15 +59,17 @@ <h1>Documents</h1>
 
                 <div class="section">
                   <div class="column">
+                    <div class="row align-start entry"></div>
+
                     <div class="row align-start entry">
                       <div class="column bullet desktop">
                         <i class="fa fa-circle contrasted"></i>
                       </div>
 
-                      <a href="cv.html">
-                        <div class="column description">
-                          <div class="row justify-space-between">
-                            <div class="row justify-space-between">
+                      <div class="column description">
+                        <div class="row justify-space-between file-entry">
+                          <a href="cv.html">
+                            <div class="row justify-space-between no-break">
                               <div class="row">
                                 <i class="fa fa-file-image contrasted"></i
                                 >&nbsp;<strong>Curriculum Vitae</strong>
@@ -77,26 +79,30 @@ <h1>Documents</h1>
                             <div class="row justify-space-between">
                               <i>Français - 🇫🇷</i>
                             </div>
+                          </a>
 
-                            <a href="cv.pdf" download="thomas-josso-cv.pdf"
-                              ><div class="row contrasted">
+                          <a href="cv.pdf" download="thomas-josso-cv.pdf"
+                            ><div
+                              class="row justify-space-between no-break contrasted button"
+                            >
+                              <div class="row">
                                 Télécharger &nbsp;
                                 <i class="fa fa-file-arrow-down"></i>
                               </div>
-                            </a>
-                          </div>
+                            </div>
+                          </a>
                         </div>
-                      </a>
+                      </div>
                     </div>
 
                     <div class="row align-start entry">
                       <div class="column bullet desktop">
                         <i class="fa fa-circle contrasted"></i>
                       </div>
-                      <a href="resume.html">
-                        <div class="column description">
-                          <div class="row justify-space-between">
-                            <div class="row justify-space-between">
+                      <div class="column description">
+                        <div class="row justify-space-between file-entry">
+                          <a href="resume.html">
+                            <div class="row justify-space-between no-break">
                               <div class="row">
                                 <i class="fa fa-file contrasted"></i
                                 >&nbsp;<strong>Resume</strong> &nbsp;<i
@@ -108,18 +114,22 @@ <h1>Documents</h1>
                             <div class="row justify-space-between">
                               <i>International - 🇺🇸</i>
                             </div>
+                          </a>
 
-                            <a
-                              href="resume.pdf"
-                              download="thomas-josso-resume.pdf"
-                              ><div class="row contrasted">
+                          <a
+                            href="resume.pdf"
+                            download="thomas-josso-resume.pdf"
+                            ><div
+                              class="row justify-space-between no-break contrasted button"
+                            >
+                              <div class="row">
                                 Download &nbsp;
                                 <i class="fa fa-file-arrow-down"></i>
                               </div>
-                            </a>
-                          </div>
+                            </div>
+                          </a>
                         </div>
-                      </a>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/style.css b/style.css
index 30cc529..4a04055 100644
--- a/style.css
+++ b/style.css
@@ -8,11 +8,11 @@
   --main-bg-color-rgb: 247, 250, 255;
   --main-color: #000000;
   --main-contrast-color: #26252d;
+  --title-color: #ffffff;
 
-  --alternate-bg-color: #282c34;
-  --alternate-bg-color-rgb: 40, 44, 52;
-  --alternate-color: #a9b7c6;
-  --alternate-contrast-color: #ffffff;
+  --alternative-bg-color: #282c34;
+  --alternative-bg-color-rgb: 40, 44, 52;
+  --alternative-color: #a9b7c6;
 
   --contrast-color: #f78c6c;
   --contrast-opposite-color: #a9b7c6;
@@ -46,7 +46,7 @@ p {
   font-weight: 300;
   font-size: 12px;
   letter-spacing: 1px;
-  color: var(--alternate-color);
+  color: var(--alternative-color);
 }
 
 hr {
@@ -57,7 +57,7 @@ hr {
 }
 
 a:-webkit-any-link {
-  color: var(--alternate-color);
+  color: var(--alternative-color);
   text-decoration: none;
 }
 
@@ -76,7 +76,7 @@ a:-webkit-any-link {
 }
 
 .discreet {
-  color: var(--alternate-color);
+  color: var(--alternative-color);
 }
 
 .alternate-contrasted {
@@ -119,6 +119,16 @@ a:-webkit-any-link {
   min-width: 22px;
 }
 
+.button {
+  display: flex;
+  justify-content: center;
+  width: 125px;
+  padding: 10px 5px;
+  color: var(--title-color);
+  background: var(--contrast-color);
+  border-radius: 5px;
+}
+
 /* LAYOUT */
 .resume-container {
   padding: 0;
@@ -149,12 +159,12 @@ a:-webkit-any-link {
   min-width: var(--side-size);
   height: var(--doc-height);
 
-  background-color: var(--alternate-bg-color);
+  background-color: var(--alternative-bg-color);
 }
 
 .page-container {
   flex: 10;
-  min-width: calc(var(--doc-width) - var(--side-size));
+  /* min-width: calc(var(--doc-width) - var(--side-size)); */
   height: var(--doc-height);
 
   background-color: var(--main-bg-color);
@@ -192,13 +202,18 @@ a:-webkit-any-link {
   margin: 5px;
 }
 
+/* INDEX */
+.file-entry {
+  gap: 50px;
+}
+
 /* SIDE */
 .side {
-  color: var(--alternate-color);
+  color: var(--alternative-color);
 }
 
 .side h1 {
-  color: var(--alternate-contrast-color);
+  color: var(--title-color);
 }
 
 .mugshot-container {
@@ -396,7 +411,7 @@ a:-webkit-any-link {
     background: linear-gradient(
       180deg,
       rgba(var(--main-bg-color-rgb), 1) 50%,
-      rgba(var(--alternate-bg-color-rgb), 1) 50%
+      rgba(var(--alternative-bg-color-rgb), 1) 50%
     );
   }