Adrien/Site-internet
Adrien/Site-internet
1
1
Fork 0
Code Issues 2 Pull Requests Releases 5 Activity

Adaptation du contenu

Browse Source 
Correction diverses, amélioration des tailles d'éléments
This commit is contained in:
Adrien CHARBONNEAU 2021-12-07 17:16:22 +01:00
parent 65f001a5d7
commit 59be2c030f
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
assets/css/main.css
View File

@ -44,6 +44,12 @@ section, summary, time, mark, audio, video {
color: #fff; color: #fff;
} }
.crop {
height: 1000px;
object-fit: cover;
object-position: 60%;
}
p.details { p.details {
color:#484848; color:#484848;
font-weight: 400; font-weight: 400;
@ -1760,7 +1766,7 @@ input, select, textarea {
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: calc(100% - 4.5em); max-width: calc(100% - 4.5em);
width: 45em; width: 50em;
} }
.container.xsmall { .container.xsmall {
@ -1812,7 +1818,7 @@ input, select, textarea {
header p { header p {
color: #aaa; color: #aaa;
position: relative; position: relative;
margin: 0 0 1.6875em 0; margin: 0 0 2em 0;
} }
header h2 + p { header h2 + p {
@ -2275,10 +2281,11 @@ input, select, textarea {
list-style: disc; list-style: disc;
margin: 0 0 2.25em 0; margin: 0 0 2.25em 0;
padding-left: 1em; padding-left: 1em;
} }
ul li { ul li {
padding-left: 0.5em; padding-left: 0em;
} }
ul.alt { ul.alt {
@ -2433,17 +2440,24 @@ input, select, textarea {
ul.feature-icons li.menu { ul.feature-icons li.menu {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
margin: 0 0 1.6875em 0; margin: 0 0 2em 0;
padding: 0.35em 0 0 3.5em; padding: 0.35em 0 0 3.5em;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
width: 48%; width: 48%;
} }
ul.feature-icons li.icon {
text-decoration: none;
margin: 0 0 2em 0;
padding: 0.35em 0 0 3.5em;
position: relative;
vertical-align: top;
}
ul.feature-icons li { ul.feature-icons li {
text-decoration: none; text-decoration: none;
margin: 0 0 1.6875em 0; margin: 0 0 2em 0;
padding: 0.35em 0 0 3.5em;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
} }
@ -2910,7 +2924,7 @@ input, select, textarea {
} }
#main > section > .container { #main > section > .container {
padding: 6em 0 4em 0; padding: 2em 0 2em 0;
} }
#main > section:first-child { #main > section:first-child {
@ -3280,7 +3294,7 @@ input, select, textarea {
} }
#header > header .avatar { #header > header .avatar {
margin: 0 auto 1.6875em auto; margin: 0 auto 2em auto;
width: 6em; width: 6em;
} }

8
index.html
View File

@ -95,7 +95,7 @@ Bonne lecture ! -->
<p align="center"><a href="https://git.adriencharbonneau.fr/Adrien/CV/raw/branch/master/CV_Adrien_CHARBONNEAU.pdf" target="_blank" class="button">– CURRICULUM VITAE –</a></p> <p align="center"><a href="https://git.adriencharbonneau.fr/Adrien/CV/raw/branch/master/CV_Adrien_CHARBONNEAU.pdf" target="_blank" class="button">– CURRICULUM VITAE –</a></p>
<p>Elle vous présente divers liens et informations utiles à ma présentation. Vous retrouverez notamment la liste de mes <u><b>compétences professionnelles</b></u>.<br> <p>Elle vous présente divers liens et informations utiles à ma présentation. Vous retrouverez notamment la liste de mes <u><b>compétences professionnelles</b></u>.<br>
<br> <br>
<span class="image fit"><img src="images/CORSICA.jpg" alt=""><legend>En quête du Cincle plongeur (<i>Cinclus cinclus</i>) dans les rivières Corses – © Adrien CHARBONNEAU</legend></span> <span class="image fit"><img src="images/CORSICA.jpg" alt=""><legend>En quête du Cincle plongeur (<i>Cinclus cinclus</i>) dans les rivières Corses</legend></span>
<div class="identity">Que fais-je en ce moment ? Pour le savoir rendez-vous ici : <a href="ACTUALITE.html" class="button small">- ACTUALITÉ -</a></div><br> <div class="identity">Que fais-je en ce moment ? Pour le savoir rendez-vous ici : <a href="ACTUALITE.html" class="button small">- ACTUALITÉ -</a></div><br>
N’hésitez pas à me contacter, que ce soit pour une question, une compétence ou une demande de précision sur une expérience professionnelle, en utilisant mon adresse courriel ci-dessous :<br> N’hésitez pas à me contacter, que ce soit pour une question, une compétence ou une demande de précision sur une expérience professionnelle, en utilisant mon adresse courriel ci-dessous :<br>
<ul> <ul>
@ -344,7 +344,7 @@ Bonne lecture ! -->
<article> <article>
<h5 id="acoustique">Compétences acoustiques et audionaturalistes</h5> <h5 id="acoustique">Compétences acoustiques et audionaturalistes</h5>
<a class="image comp"><img src="images/AUDIOMOTH.jpg" alt="" /><legend>AudioMoth durant le stage de M2</legend></a> <a class="image comp"><img src="images/AUDIOMOTH.jpg" alt="Enregistreur AudioMoth" class="crop" /><legend>AudioMoth durant le stage de M2</legend></a>
<div class="inner comp"> <div class="inner comp">
<ul class="feature-icons"> <ul class="feature-icons">
<li class="icon solid fa-microphone-alt">Prise de son<p class="details"><ul class="sublist"> <li class="icon solid fa-microphone-alt">Prise de son<p class="details"><ul class="sublist">
@ -370,11 +370,11 @@ Bonne lecture ! -->
</div> </div>
</article> </article>
<p> <p>
<span class="image fit"><img src="images/CLAGLA.jpg" alt="" /><legend>Sonogramme partiel d’un Coucou geai (<i>Clamator glandarius</i>) en migration nocturne – © Adrien CHARBONNEAU</legend></span> <span class="image fit"><img src="images/CLAGLA.jpg" alt="" /><legend>Sonogramme partiel d’un Coucou geai (<i>Clamator glandarius</i>) en migration nocturne</legend></span>
</p> </p>
<article> <article>
<h5 id="interets">Les autres compétences et intérêts</h5> <h5 id="interets">Les autres compétences et intérêts</h5>
<a class="image comp"><img src="images/LAUZANIER.jpg" alt="" /><legend>Lac du Lauzanier - Mercantour (04)</legend></a> <a class="image comp"><img src="images/LAUZANIER.jpg" alt="Lac du Lauzanier" class="crop"/><legend>Lac du Lauzanier - Mercantour (04)</legend></a>
<div class="inner comp"> <div class="inner comp">
<ul class="feature-icons"> <ul class="feature-icons">
<li class="icon solid fa-cloud-sun-rain">Astronomie/Météorologie</li> <li class="icon solid fa-cloud-sun-rain">Astronomie/Météorologie</li>