mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 03:23:41 +02:00
About me template
Added about me template, now it's time to write a dazzling README about myself
This commit is contained in:
parent
b08169fe88
commit
8ec41ca2e3
5 changed files with 111 additions and 19 deletions
28
public/about.html
Normal file
28
public/about.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Victor Westerlund - www.victorwesterlund.com -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Victor Westerlund - Search</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
|
||||
<link rel="icon" href="assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/about.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><a href="/">victor westerlund</a></h1>
|
||||
</header>
|
||||
<main class="column">
|
||||
<div class="column">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis condimentum mauris quis maximus. Integer pellentesque justo dignissim, posuere quam ut, mollis augue. Aliquam eget pharetra sem. Cras iaculis, arcu a fringilla consectetur, risus libero tincidunt tellus, id accumsan quam erat eget quam. Aenean odio ligula, varius ut tellus ac, dignissim imperdiet felis. Donec vel molestie orci. Mauris sodales mauris tortor, lacinia eleifend velit pharetra non.</p>
|
||||
<p>Nam cursus mi dui, tempor lobortis odio finibus sit amet. Fusce congue magna in mauris ullamcorper iaculis. Ut facilisis erat nec bibendum bibendum. In feugiat,</p>
|
||||
<p>Curabitur faucibus ligula eget urna ornare iaculis. Phasellus volutpat eros massa, vitae malesuada velit vulputate nec. Quisque ipsum nisi, pharetra vel egestas sit amet, faucibus eget quam.</p>
|
||||
</div>
|
||||
<div class="button">
|
||||
<p>stalk me</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
59
public/assets/css/about.css
Normal file
59
public/assets/css/about.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* Victor Westerlund - www.victorwesterlund.com */
|
||||
html,
|
||||
body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
--stroke: 1px;
|
||||
--max-width: 700px;
|
||||
--min-width: calc(100% - ((var(--padding) + var(--stroke)) * 2));
|
||||
align-items: center;
|
||||
width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
|
||||
main > div:not(.button) {
|
||||
border: solid var(--stroke) var(--swatch-contrast);
|
||||
padding: var(--padding);
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
main .button {
|
||||
background-color: var(--swatch-contrast);
|
||||
color: var(--swatch-background);
|
||||
text-align: center;
|
||||
padding: var(--padding);
|
||||
width: var(--min-width);
|
||||
max-width: calc(var(--max-width) / 2);
|
||||
margin: var(--padding);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* -- Media Queries -- */
|
||||
|
||||
@media (min-width: 600px) {
|
||||
main {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.button:hover {
|
||||
background-color: rgba(var(--palette-contrast),.1);
|
||||
color: var(--swatch-contrast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: rgba(var(--palette-contrast),.3);
|
||||
color: var(--swatch-contrast);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,9 @@
|
|||
/* Victor Westerlund - www.victorwesterlund.com */
|
||||
:root {
|
||||
--padding: 20px;
|
||||
--max-width: 800px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
min-height: 80px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: clamp(16px,5vw,25px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* -- Searchbox -- */
|
||||
|
||||
#search input {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
|
||||
--swatch-background: rgb(var(--palette-background));
|
||||
--swatch-contrast: rgb(var(--palette-contrast));
|
||||
|
||||
--padding: 20px;
|
||||
--max-width: 800px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -46,7 +49,6 @@ body {
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--swatch-background);
|
||||
}
|
||||
|
||||
|
|
@ -54,6 +56,26 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* -- Global components -- */
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
min-height: 80px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: clamp(16px,5vw,25px);
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* -- Media Queries -- */
|
||||
|
||||
@media (pointer: fine) {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
<main class="hidden">
|
||||
<p>victor westerlund</p>
|
||||
<p><a href="https://github.com/VictorWesterlund">github</a></p>
|
||||
<p><a href="about">about</a></p>
|
||||
<!--<p><a href="search">search</a></p>-->
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue