Skip to content

Commit

Permalink
feat(index): download link styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@gijosso
gijosso committed Oct 4, 2023
1 parent 815875f commit fd7dd4b
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 32 deletions.
50 changes: 30 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand Down
39 changes: 27 additions & 12 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -46,7 +46,7 @@ p {
font-weight: 300;
font-size: 12px;
letter-spacing: 1px;
color: var(--alternate-color);
color: var(--alternative-color);
}

hr {
Expand All @@ -57,7 +57,7 @@ hr {
}

a:-webkit-any-link {
color: var(--alternate-color);
color: var(--alternative-color);
text-decoration: none;
}

Expand All @@ -76,7 +76,7 @@ a:-webkit-any-link {
}

.discreet {
color: var(--alternate-color);
color: var(--alternative-color);
}

.alternate-contrasted {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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%
);
}

Expand Down

0 comments on commit fd7dd4b

Please sign in to comment.