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 {
|
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;
|
||||||
|
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 {
|
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) {
|
@media screen and (max-width: 700px) {
|
||||||
.left, .right {
|
.title {
|
||||||
top: 0;
|
width: auto;
|
||||||
bottom: 0;
|
height: 300px;
|
||||||
|
margin: calc((100vh - 300px) / 2) 1em;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr 2fr;
|
||||||
}
|
}
|
||||||
|
.title h1, .title h2 {
|
||||||
.right {
|
text-align: center;
|
||||||
right: 0;
|
|
||||||
left: 40%
|
|
||||||
}
|
}
|
||||||
.left {
|
.title h1 {
|
||||||
right: 60%;
|
align-self: start;
|
||||||
}
|
}
|
||||||
|
.title nav {
|
||||||
.left h1, .left h2 {
|
grid-column: 1;
|
||||||
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
14
css/main.css
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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
29
index.html
|
|
@ -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>
|
||||||
|
|
|
||||||
Reference in a new issue