This commit is contained in:
Victor Westerlund 2020-11-17 16:30:32 +01:00
parent 97de527e46
commit c34db81cd5
9 changed files with 110 additions and 0 deletions

View file

@ -0,0 +1,73 @@
:root {
--color: black;
}
@font-face {
font-family: "Roboto Mono";
font-weight: 400;
src: local("Roboto Mono Regular"),
local("RobotoMono-Regular"),
url("../fonts/RobotoMono-Regular.woff2"),
url("../fonts/RobotoMono-Regular.ttf");
}
@font-face {
font-family: "Roboto Mono";
font-weight: 700;
src: local("Roboto Mono Bold"),
local("RobotoMono-Bold"),
url("../fonts/RobotoMono-Bold.woff2"),
url("../fonts/RobotoMono-Bold.ttf");
}
/* Cornerstones */
* {
margin: auto;
font-family: "Roboto Mono","Arial",sans-serif;
color: var(--color);
}
html,
body,
main {
width: 100%;
height: 100%;
}
/* Components */
.logo {
--size: 3vw;
--skew: calc(var(--size) / 1.7);
width: 0;
height: 0;
border-left: var(--skew) solid transparent;
border-right: var(--skew) solid transparent;
border-top: var(--size) solid var(--color);
}
.logo::after {
content: "";
width: 0;
height: 0;
border-left: var(--skew) solid transparent;
border-right: var(--skew) solid transparent;
border-top: var(--size) solid var(--color);
opacity: .3;
}
/* Layout */
main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
main > div {
width: 80%;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

37
public/index.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/css/style.css" rel="stylesheet">
<title>Victor Westerlund</title>
</head>
<body>
<main>
<div>
<div class="block">
<div class="logo"></div>
<h1>victor westerlund</h1>
<h2>full-stack web developer</h2>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis, nibh sed ultrices vehicula, risus enim fermentum lacus, vitae lacinia erat arcu in magna. Sed eget aliquam diam, vitae facilisis enim. Morbi laoreet nulla sit amet eros tempor tincidunt.</p>
<p>Donec facilisis efficitur dui, sed vestibulum dolor luctus et. Sed tincidunt nulla urna.</p>
</div>
<div class="block">
<nav>
<a href="#">contact</a>
<a href="#">github</a>
</nav>
</div>
</div>
<div>
<p>Placeholder</p>
</div>
</main>
<script type="module" src="assets/js/script.js"></script>
</body>
</html>

0
public/sw.js Normal file
View file