edpibu/web2.0
1
Fork 0
Code Issues Activity

Update template with css grid

Browse source
This commit is contained in:
Edgar P. Burkhart 2022-05-08 09:29:36 +02:00
parent 9f352d5a16
commit 63afbd9bac
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 119 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/index.html
View file

@ -17,12 +17,13 @@
</a> </a>
</nav> </nav>
<div class="info">
<h1>Edgar P. <strong>Burkhart</strong></h1> <h1>Edgar P. <strong>Burkhart</strong></h1>
<div class="img-block"> <div class="img-block">
<img src="static/img/pic1.webp" /> <img src="static/img/pic1.webp" alt="" />
<img src="static/img/pic2.webp" /> <img src="static/img/pic2.webp" alt="" />
<img src="static/img/pic3.webp" /> <img src="static/img/pic3.webp" alt="" />
</div> </div>
<h2>Contact</h2> <h2>Contact</h2>
@ -36,7 +37,9 @@
<li><a href="https://github.com/edpiburkhart">Github — edpiburkhart</a></li> <li><a href="https://github.com/edpiburkhart">Github — edpiburkhart</a></li>
<li><a href="https://www.komoot.fr/user/383887346799">Komoot — edpibu</a></li> <li><a href="https://www.komoot.fr/user/383887346799">Komoot — edpibu</a></li>
</ul> </ul>
</div>
<div class="cv">
<h2>CV</h2> <h2>CV</h2>
<h3>Études</h3> <h3>Études</h3>
<dl> <dl>
@ -145,6 +148,7 @@
<dt>Loisirs</dt> <dt>Loisirs</dt>
<dd>Informatique, Électronique, Bricolage</dd> <dd>Informatique, Électronique, Bricolage</dd>
</dl> </dl>
</div>
<footer> <footer>
© Edgar P. Burkhart — 2022 © Edgar P. Burkhart — 2022

18
src/static/css/main.css
View file

@ -25,8 +25,20 @@ body {
padding: 1rem; padding: 1rem;
font-weight: 350; font-weight: 350;
font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08"; font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
column-width: 18rem;
max-width: 90rem; max-width: 90rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-gap: 1rem;
}
body > div {
column-width: 20rem;
column-gap: 1rem;
}
body > div.info {grid-column: 1}
body > div.cv {grid-column: 2 / -1}
@media (max-width: 40rem) {
body {grid-template-columns: 1fr}
body > div.cv {grid-column: 1}
} }
h1, h2, h3 {font-weight: 250} h1, h2, h3 {font-weight: 250}
@ -99,9 +111,7 @@ li {padding-left: .5rem}
footer { footer {
background: var(--bg-01); background: var(--bg-01);
bottom: 0; grid-column: 1 / -1;
left: 0;
right: 0;
text-align: center; text-align: center;
height: 4rem; height: 4rem;
padding: 1rem; padding: 1rem;