Optimized and cleaned CSS

Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>
This commit is contained in:
Louis Vallat 2021-09-22 17:23:46 +02:00
parent af7207d0f5
commit 53649e3b1a
No known key found for this signature in database
GPG Key ID: 0C87282F76E61283
4 changed files with 160 additions and 221 deletions

View File

@ -1,30 +1,144 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); @charset "utf-8";
/* Coded by Louis Vallat */
:root { @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
--eerie-black: #141414ff;
--royal-purple: #724e91ff;
--saffron: #f8c630ff;
--tea-green: #c5ebc3ff;
--international-orange-engineering: #b80c09ff;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
height: 100vh; font-family: 'Roboto', sans-serif;
font-weight: 400;
background-color: #1f1f1f; background-color: #1f1f1f;
} }
h1 {
font-size: 4.5rem;
}
h3 {
font-size: 2.25rem;
}
h4 {
font-size: 1.8rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.3rem;
}
.bold {
font-weight: 500;
}
.button-style {
text-decoration: none;
padding: 13px 32px;
color: black;
font-size: 1em;
border-radius: 8px;
margin-bottom: 10px;
margin-right: 13px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
.button-style:hover {
background-color: lightgrey;
box-shadow: 0px 0px 6px 0px lightblue;
}
.button-style > img {
height: 0.9em;
margin-right: 5px;
}
.grey {
color: grey;
}
.white {
color: white;
}
.lightgrey {
color: lightgrey;
}
.black {
color: black;
}
.section {
margin-top: 35px;
margin-bottom: 55px;
}
.section > h3, footer > h3 {
margin-bottom: 7px;
letter-spacing: 1px;
}
.center-align-inline {
display: flex;
align-items: center;
}
.icon {
height: 1.8rem;
transition: cubic-bezier(.65,.05,.36,1) 100ms;
margin-left: 10px;
}
.icon:hover {
transform: translateY(-3px);
}
footer {
padding: 65px 10% 145px 10%;
background-color: #0A0A0A;
}
footer > div > p {
line-height: 1.3em;
flex-basis: 40%;
text-align: justify;
}
.flex-sb {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#additional-information > img {
margin-right: 8px;
}
#additional-information > h6 {
margin-right: 50px;
}
#inspiration {
line-height: 1.3em;
margin-top: 15px;
}
#copyright {
margin-top: 35px;
}
#skills-logos { #skills-logos {
margin-top: 55px; margin-top: 55px;
display: flex;
margin-left: 5%; margin-left: 5%;
margin-right: 5%; margin-right: 5%;
justify-content: space-between;
align-content: flex-start;
flex-wrap: wrap;
} }
#skills-logos > img { #skills-logos > img {
@ -32,95 +146,23 @@ body {
margin: 5px 20px; margin: 5px 20px;
} }
.white-outline-png {
filter: drop-shadow(0px 0px 3px white);
}
#schools {
margin: 0px 50px;
margin-top: 55px;
display: flex;
}
#about > div {
margin-bottom: 75px;
}
#call-to-action { #call-to-action {
margin-top: 8vh; margin-top: 8vh;
} }
#call-to-action > a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
padding: 13px 32px;
font-size: 1em;
border-radius: 8px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
#about { #about {
padding: 50px 10% 0px 10%; padding: 20px 10% 35px 10%;
}
h3 {
color: white;
font-size: 2.25rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin-bottom: 7px;
letter-spacing: 1px;
}
h5 {
color: grey;
font-size: 1.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
#call-to-action > a:hover {
background-color: lightgrey;
box-shadow: 0px 0px 6px 0px lightblue;
}
#call-to-action > a:first-child {
margin-right: 10px;
} }
#landing-zone { #landing-zone {
background-color: var(--eerie-black); background-color: #141414ff;
padding: 0px 10% 0px 10%; padding: 0px 10%;
height: 100vh; height: 100vh;
display: flex; display: flex;
} align-items: center;
#presentation {
align-self: center;
}
.white {
color: white;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 6rem;
}
#name {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.8rem;
} }
#subtitle { #subtitle {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 4.5rem;
letter-spacing: 3px; letter-spacing: 3px;
word-spacing: 4px; word-spacing: 4px;
line-height: 1.35em; line-height: 1.35em;
@ -134,106 +176,3 @@ h1 {
width: 70px; width: 70px;
margin: 10px; margin: 10px;
} }
.center-align-inline {
display: flex;
align-items: center;
}
#additional-information > img {
fill: lightgrey;
margin-right: 8px;
}
#additional-information {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1.3em;
color: lightgrey;
}
#additional-information > p {
margin-right: 50px;
}
.icons {
height: 1.8rem;
transition: cubic-bezier(.65,.05,.36,1) 100ms;
margin-left: 10px;
}
.icons:hover {
transform: translateY(-3px);
}
footer {
padding: 65px 10% 145px 10%;
background-color: #0A0A0A;
}
footer > div > p {
line-height: 1.3em;
color: grey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
flex-basis: 40%;
text-align: justify;
}
footer > div {
display: flex;
justify-content: space-between;
}
footer > div > div {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
footer > div > div > a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
padding: 13px 32px;
font-size: 1em;
border-radius: 8px;
margin-bottom: 10px;
margin-left: 8px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
footer > div > div > a > img {
height: 0.9em;
margin-right: 5px;
}
#inspiration {
line-height: 1.3em;
color: grey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-top: 15px;
}
#inspiration > a {
text-decoration: underline;
color: grey;
}
#copyright > a {
text-decoration: underline;
color: lightgrey;
}
#copyright {
margin-top: 35px;
color: lightgrey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2c-4.2,0-8,3.22-8,8.2c0,3.18,2.45,6.92,7.34,11.23c0.38,0.33,0.95,0.33,1.33,0C17.55,17.12,20,13.38,20,10.2 C20,5.22,16.2,2,12,2z M12,12c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,11.1,13.1,12,12,12z"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="lightgrey"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2c-4.2,0-8,3.22-8,8.2c0,3.18,2.45,6.92,7.34,11.23c0.38,0.33,0.95,0.33,1.33,0C17.55,17.12,20,13.38,20,10.2 C20,5.22,16.2,2,12,2z M12,12c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,11.1,13.1,12,12,12z"/></g></svg>

Before

Width:  |  Height:  |  Size: 420 B

After

Width:  |  Height:  |  Size: 423 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="lightgrey"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 313 B

View File

@ -20,32 +20,32 @@ PAGE CODED BY :
</head> </head>
<body> <body>
<div id="landing-zone"> <div id="landing-zone">
<div id="presentation"> <div>
<div class="center-align-inline"> <div class="center-align-inline">
<img src="assets/images/square_pp.jpg" id="profile-picture"> <img src="assets/images/square_pp.jpg" id="profile-picture">
<h2 class="white" id="name">Louis Vallat</h2> <h4 class="white bold">Louis Vallat</h4>
<div class="center-align-inline"> <div class="center-align-inline">
<a href="https://gitlab.com/lovallat" target="_blank" title="Gitlab"><img src="/assets/images/gitlab-icon-rgb.svg" class="icons" alt="Gitlab RGB logo"/></a> <a href="https://gitlab.com/lovallat" target="_blank" title="Gitlab"><img src="/assets/images/gitlab-icon-rgb.svg" class="icon" alt="Gitlab RGB logo"/></a>
<a href="https://twitter.com/VallatLouis" target="_blank" title="Twitter"><img src="/assets/images/twitter-logo-blue.svg" class="icons" alt="Twitter blue logo"/></a> <a href="https://twitter.com/VallatLouis" target="_blank" title="Twitter"><img src="/assets/images/twitter-logo-blue.svg" class="icon" alt="Twitter blue logo"/></a>
<a href="https://www.linkedin.com/in/louis-vallat/" target="_blank" title="LinkedIN"><img src="/assets/images/LI-In-Bug.png" class="icons" alt="LinkedIN small blue logo"/></a> <a href="https://www.linkedin.com/in/louis-vallat/" target="_blank" title="LinkedIN"><img src="/assets/images/LI-In-Bug.png" class="icon" alt="LinkedIN small blue logo"/></a>
</div> </div>
</div> </div>
<h1 class="white" id="subtitle">Un étudiant développeur, passionné de technologies, quelles qu'elles soient.</h1> <h1 class="white bold" id="subtitle">Un étudiant développeur, passionné de technologies, quelles qu'elles soient.</h1>
<div class="center-align-inline" id="additional-information"> <div class="center-align-inline lightgrey" id="additional-information">
<img src="/assets/images/work.svg" alt="Logo travail valise"/><p>Étudiant ingénieur en informatique</p> <img src="/assets/images/work.svg" alt="Logo travail valise"/><h6>Étudiant ingénieur en informatique</h6>
<img src="/assets/images/location.svg" alt="Logo localisation"/><p>Bordeaux &mdash; France</p> <img src="/assets/images/location.svg" alt="Logo localisation"/><h6>Bordeaux &mdash; France</h6>
</div> </div>
<div id="call-to-action" class="center-align-inline"> <div id="call-to-action" class="center-align-inline">
<a href="mailto:contact@louis-vallat.xyz">Me contacter</a> <a class="button-style" href="mailto:contact@louis-vallat.xyz">Me contacter</a>
<a href="#about">En savoir plus</a> <a class="button-style" href="#about">En savoir plus</a>
</div> </div>
</div> </div>
</div> </div>
<div id="about"> <div id="about">
<div id="skills"> <div id="skills" class="section">
<h3>Compétences</h3> <h3 class="white bold">Compétences</h3>
<h5>Des technologies que j'utilise souvent</h5> <h5 class="grey">Des technologies que j'utilise souvent</h5>
<div id="skills-logos"> <div id="skills-logos" class="flex-sb">
<img alt="Logo Docker" title="Docker" src="/assets/images/docker-monochromatic.png"/> <img alt="Logo Docker" title="Docker" src="/assets/images/docker-monochromatic.png"/>
<img alt="Logo Git" title="Git" src="/assets/images/git-logo-orange.png"/> <img alt="Logo Git" title="Git" src="/assets/images/git-logo-orange.png"/>
<img alt="Logo Tux" title="Linux" src="/assets/images/tux.svg"/> <img alt="Logo Tux" title="Linux" src="/assets/images/tux.svg"/>
@ -60,23 +60,23 @@ PAGE CODED BY :
<!-- more information, footer --> <!-- more information, footer -->
</div> </div>
<footer> <footer>
<h3>À propos</h3> <h3 class="white bold">À propos</h3>
<div> <div class="flex-sb">
<p> <p class="grey">
Véritable factotum du développement, j'aime mettre les mains dans le cambouis.</br>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.</br>Je suis aussi passionné de 👨‍💻, 📸, 🚄 et de 👨‍🔧. Véritable factotum du développement, j'aime mettre les mains dans le cambouis.</br>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.</br>Je suis aussi passionné de 👨‍💻, 📸, 🚄 et de 👨‍🔧.
</p> </p>
<div> <div class="flex-sb">
<a href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>Me contacter</a> <a class="button-style" href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>Me contacter</a>
<a href="/key.gpg"><img src="/assets/images/key.svg" alt="Logo de clef"/>Ma clef GPG</a> <a class="button-style" href="/key.gpg"><img src="/assets/images/key.svg" alt="Logo de clef"/>Ma clef GPG</a>
<a href="https://gallery.louis-vallat.xyz" target="_blank"><img src="/assets/images/camera.svg" alt="Logo d'appareil photo"/>Gallerie photo</a> <a class="button-style" href="https://gallery.louis-vallat.xyz" target="_blank"><img src="/assets/images/camera.svg" alt="Logo d'appareil photo"/>Gallerie photo</a>
<a href="https://blog.louis-vallat.xyz" target="_blank"><img src="/assets/images/article.svg" alt="Logo d'article"/>Blog</a> <a class="button-style" href="https://blog.louis-vallat.xyz" target="_blank"><img src="/assets/images/article.svg" alt="Logo d'article"/>Blog</a>
</div> </div>
</div> </div>
<p id="inspiration"> <p id="inspiration" class="grey">
Design inspiré par <a href="https://louisgrasset.fr/" target="_blank">ceci</a> et <a href="https://dribbble.com/shots/6672981-Personal-Website-Idea-V2/attachments/6672981-Personal-Website-Idea-V2?mode=media" target="_blank">ceci</a>. Design inspiré par <a href="https://louisgrasset.fr/" target="_blank" class="grey">ceci</a> et <a class="grey" href="https://dribbble.com/shots/6672981-Personal-Website-Idea-V2/attachments/6672981-Personal-Website-Idea-V2?mode=media" target="_blank">ceci</a>.
<p> <p>
<p id="copyright"> <p class="lightgrey" id="copyright">
Louis Vallat &mdash; 2021 &mdash; Made with ❤ and <a href="https://gitlab.com/lovallat/louis-vallat.xyz" target="_blank">Open Source</a>. Louis Vallat &mdash; 2021 &mdash; Made with ❤ and <a class="lightgrey" href="https://gitlab.com/lovallat/louis-vallat.xyz" target="_blank">Open Source</a>.
</p> </p>
</footer> </footer>
</body> </body>