edpibu/Web
edpibu/Web
Archived
1
Fork 0
Code Issues Pull requests Releases 7 Activity

Updated homepage for new looks (no mobile version)

Browse source
This commit is contained in:
Edgar P. Burkhart 2021-04-11 17:44:10 +02:00
parent 9912f5d07d
commit 289e1ae711
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 84 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
css/index.css
View file

@ -1,123 +1,74 @@
.left, .right { body {
position: absolute; background: url('/images/pic1.webp');
left: 0;
right: 0;
}
.left {
text-align: center;
top: 0;
bottom: 60%;
box-shadow: 0 0 2em black;
z-index: 100;
}
.right {
top: 40%;
bottom: 0;
background: url("../images/pic1.webp");
background-size: cover;
background-position: center; background-position: center;
z-index: 1; background-size: cover;
} }
.left h1, .left h2 { .title {
position: absolute; height: 200px;
font-size: 3rem; width: 600px;
height: 1em; margin: calc((100vh - 200px) / 2) auto;
line-height: 1em;
margin: 0;
width: 100%;
}
.left h2 {
top: calc( 50% - 1em );
}
.left h1 {
bottom: calc( 50% - 1em );
}
nav {
position: absolute;
top: 0;
width: 100%;
background: #ffffffde;
text-align: center; text-align: center;
font-size: 2em; background: #ffffff;
padding: 1em; box-shadow: 0 0 1rem black;
font-weight: 800; display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 1em;
} }
nav > a {
padding: 1em; .title h1, .title h2 {
font-size: 3rem;
margin: 0;
align-self: end;
}
.title h1 {
text-align: left;
}
.title h2 {
text-align: right;
}
.title nav {
font-variant: small-caps;
font-size: 1.5rem;
grid-column: 1 / 3;
padding: .5em;
align-self: center;
}
.title nav a {
border: 0px solid #484848de;
border-width: .1em 0;
padding: 0 .5em;
margin: .5em;
transition: border-color 250ms, background-color 250ms, color 250ms;
}
.title nav a:hover {
background-color: #242424de;
border-color: #242424de;
color: #ffffffde;
}
.title nav a:active {
border-color: #121212de;
background-color: #121212de;
color: #dededede;
} }
footer { footer {
position: absolute; background: white;
bottom: 0; margin: 0;
width: 100%; padding: 1em;
background: #000000de;
color: #ffffffde;
text-align: center; text-align: center;
} }
footer ul { footer>p>* {
list-style: none;
padding: 1em; padding: 1em;
line-height: 3em;
} }
footer li { footer>p {
height: 24px; margin: 0;
line-height: 24px; padding: 0;
margin: 12px;
} }
footer li span { footer>.author {
font-weight: 800; font-family: 'IBM Plex Serif';
margin-right: 1em; font-weight: 300;
}
footer a {
color: #dededede;
}
footer a:hover {
color: #ffffffde;
}
footer a:active {
color: #ffffffde;
}
@media screen and (min-width: 1024px), screen and (orientation: landscape) {
.left, .right {
top: 0;
bottom: 0;
}
.right {
right: 0;
left: 40%
}
.left {
right: 60%;
}
.left h1, .left h2 {
text-align: right;
padding-right: 1em;
}
}
@media screen and (hover: hover) {
footer li {
height: initial;
line-height: initial;
margin: initial;
}
}
@media screen and (min-width: 1024px) {
.left h1, .left h2 {
font-size: 4rem;
}
}
@media screen and (max-width: 700px) and (orientation: landscape) {
.left h1, .left h2 {
font-size: 2rem;
padding-right: .5em;
}
} }

14
css/main.css
View file

@ -1,11 +1,5 @@
html { html {
box-sizing: border-box; box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -15,13 +9,19 @@ body {
color: #000000de; color: #000000de;
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
} }
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
}
h1, h2 { h1, h2 {
font-family: 'IBM Plex Serif', serif; font-family: 'IBM Plex Serif', serif;
} }
h2 { h2 {
font-weight: 800; font-weight: 700;
} }
h1 { h1 {
font-weight: 300; font-weight: 300;

2
cv/index.html
View file

@ -37,7 +37,7 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body>
<h1>Edgar P. Burkhart</h1> <h1>Edgar P. Burkhart</h2>
<nav> <nav>
<ul> <ul>
<li class="homepage"><a href="https://edgarpierre.fr">edgarpierre.fr</a></li> <li class="homepage"><a href="https://edgarpierre.fr">edgarpierre.fr</a></li>

29
index.html
View file

@ -38,24 +38,27 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body>
<div class="left"> <div class="title">
<h2>Edgar P.</h2> <h2>Edgar P.</h2>
<h1>Burkhart</h1> <h1>Burkhart</h1>
</div>
<div class="right">
<nav> <nav>
<a href="/cv">CV</a> <a href="/cv">CV</a>
<a href="https://git.edgarpierre.fr">Gitea</a>
<a href="https://www.komoot.fr/user/383887346799">Komoot</a>
</nav> </nav>
<footer>
<ul>
<li><span>email</span><a href="mailto:contact@edgarpierre.fr">contact@edgarpierre.fr</a></li>
<li><span>komoot</span><a href="https://www.komoot.fr/user/383887346799">edpibu</a></li>
<li><span>last.fm</span><a href="https://www.last.fm/user/edpiburkhart">edpiburkhart</a></li>
<li><span>git</span><a href="https://git.edgarpierre.fr/edpibu">git.edgarpierre.fr/edpibu</a></li>
<li><span>github</span><a href="https://github.com/edpiburkhart">edpiburkhart</a></li>
<li><span>public</span><a href="https://public.edgarpierre.fr">public.edgarpierre.fr</a></li>
</ul>
</footer>
</div> </div>
<footer>
<p class="links">
<a href="mailto:contact@edgarpierre.fr"><strong>contact@edgarpierre.fr</strong></a>
<a href="https://www.komoot.fr/user/383887346799">komoot(edpibu)</a>
<a href="https://www.last.fm/user/edpiburkhart">last.fm(edpiburkhart)</a>
<a href="https://git.edgarpierre.fr/edpibu">git.edgarpierre.fr/edpibu</a>
<a href="https://github.com/edpiburkhart">github(edpiburkhart)</a>
<a href="https://public.edgarpierre.fr">public.edgarpierre.fr</a>
</p>
<p class="author">
<span>edpibu - 2021</span>
</p>
</footer>
</body> </body>
</html> </html>