Compare commits
2 commits
9912f5d07d
...
4b9ae72f0a
| Author | SHA1 | Date | |
|---|---|---|---|
4b9ae72f0a
|
|||
|
289e1ae711
|
4 changed files with 98 additions and 124 deletions
177
css/index.css
177
css/index.css
|
|
@ -1,123 +1,94 @@
|
|||
.left, .right {
|
||||
position: absolute;
|
||||
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;
|
||||
body {
|
||||
background: url('/images/pic1.webp');
|
||||
background-position: center;
|
||||
z-index: 1;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.left h1, .left h2 {
|
||||
position: absolute;
|
||||
font-size: 3rem;
|
||||
height: 1em;
|
||||
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;
|
||||
.title {
|
||||
height: 200px;
|
||||
width: 600px;
|
||||
margin: calc((100vh - 200px) / 2) auto;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
padding: 1em;
|
||||
font-weight: 800;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 1rem black;
|
||||
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;
|
||||
line-height: 2em;
|
||||
}
|
||||
.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 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #000000de;
|
||||
color: #ffffffde;
|
||||
background: white;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
footer ul {
|
||||
list-style: none;
|
||||
footer>p>* {
|
||||
padding: 1em;
|
||||
line-height: 3em;
|
||||
}
|
||||
footer li {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 12px;
|
||||
footer>p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
footer li span {
|
||||
font-weight: 800;
|
||||
margin-right: 1em;
|
||||
}
|
||||
footer a {
|
||||
color: #dededede;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #ffffffde;
|
||||
}
|
||||
footer a:active {
|
||||
color: #ffffffde;
|
||||
footer>.author {
|
||||
font-family: 'IBM Plex Serif';
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px), screen and (orientation: landscape) {
|
||||
.left, .right {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@media screen and (max-width: 700px) {
|
||||
.title {
|
||||
width: auto;
|
||||
height: 300px;
|
||||
margin: calc((100vh - 300px) / 2) 1em;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr 2fr;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 0;
|
||||
left: 40%
|
||||
.title h1, .title h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.left {
|
||||
right: 60%;
|
||||
.title h1 {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.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;
|
||||
.title nav {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
14
css/main.css
14
css/main.css
|
|
@ -1,11 +1,5 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -15,13 +9,19 @@ body {
|
|||
color: #000000de;
|
||||
font-family: Inter, sans-serif;
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'IBM Plex Serif', serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Edgar P. Burkhart</h1>
|
||||
<h1>Edgar P. Burkhart</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="homepage"><a href="https://edgarpierre.fr">edgarpierre.fr</a></li>
|
||||
|
|
|
|||
29
index.html
29
index.html
|
|
@ -38,24 +38,27 @@
|
|||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
<body>
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<h2>Edgar P.</h2>
|
||||
<h1>Burkhart</h1>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav>
|
||||
<a href="/cv">CV</a>
|
||||
<a href="https://git.edgarpierre.fr">Gitea</a>
|
||||
<a href="https://www.komoot.fr/user/383887346799">Komoot</a>
|
||||
</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>
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue