vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 11:33:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

dev21w38a

Browse source
This commit is contained in:
Victor Westerlund 2021-09-21 16:47:23 +02:00
parent 04ccab7927
commit ea033cea92
5 changed files with 144 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/assets/css/index.css Normal file
View file

@ -0,0 +1,31 @@
/* Victor Westerlund - www.victorwesterlund.com */
a {
font-weight: bold;
}
a::after {
content: " →";
}
main {
display: flex;
flex-direction: column;
gap: 30px;
font-size: 20px;
transform: translateY(0);
}
/* -- Media Queries -- */
@media (max-width: 300px) {
main {
text-align: center;
align-items: center;
}
}
@media print {
a::after {
content: ": " attr(href);
}
}

83
public/assets/css/search.css Normal file
View file

@ -0,0 +1,83 @@
/* Victor Westerlund - www.victorwesterlund.com */
:root {
--padding: 20px;
}
html,
body {
justify-content: flex-start;
}
header {
display: flex;
align-items: center;
height: 100px;
}
header h1 {
font-size: clamp(16px,5vw,25px);
font-weight: normal;
}
/* -- Searchbox -- */
#search input {
background-color: var(--swatch-contrast);
color: var(--swatch-background);
border: none;
font-size: 16px;
width: calc(100vw - (var(--padding) * 2));
max-width: 800px;
text-transform: lowercase;
padding: var(--padding);
}
#search input::placeholder {
color: rgba(var(--palette-background),.4);
}
#search input::selection {
color: var(--swatch-contrast);
background-color: var(--swatch-background);
}
#search input:focus {
outline: none;
}
/* -- Results -- */
#results {
width: 100%;
max-width: 1000px;
box-sizing: border-box;
padding: var(--padding);
display: flex;
flex-wrap: wrap;
}
.card {
padding: var(--padding);
box-sizing: border-box;
width: clamp(100%,100%,200px);
overflow: auto;
border: solid 1px var(--swatch-contrast);
}
/* -- Media Queries -- */
@media (pointer: fine) {
#search input:focus {
outline: solid 5px rgba(var(--palette-contrast),.2);
}
}
@media (prefers-color-scheme: dark) {
#search {
--palette-background: 255,255,255;
--palette-contrast: 33,33,33;
--swatch-background: rgb(var(--palette-background));
--swatch-contrast: rgb(var(--palette-contrast));
}
}

27
public/assets/css/style.css
View file

@ -43,6 +43,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -52,36 +53,10 @@ body {
a { a {
display: content; display: content;
text-decoration: none; text-decoration: none;
font-weight: bold;
}
a::after {
content: " →";
}
main {
display: flex;
flex-direction: column;
gap: 30px;
font-size: 20px;
transform: translateY(0);
} }
/* -- Media Queries -- */ /* -- Media Queries -- */
@media (max-width: 300px) {
main {
text-align: center;
align-items: center;
}
}
@media print {
a::after {
content: ": " attr(href);
}
}
@media (pointer: fine) { @media (pointer: fine) {
a:hover { a:hover {
background: rgba(var(--palette-contrast),.1); background: rgba(var(--palette-contrast),.1);

2
public/index.html
View file

@ -8,11 +8,13 @@
<meta name="description" content="Full-stack web developer from Stockholm, Sweden."> <meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
<link rel="icon" href="assets/img/favicon.png"> <link rel="icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/index.css">
</head> </head>
<body> <body>
<main class="hidden"> <main class="hidden">
<p>victor westerlund</p> <p>victor westerlund</p>
<p><a href="https://github.com/VictorWesterlund">github</a></p> <p><a href="https://github.com/VictorWesterlund">github</a></p>
<p><a href="search">search</a></p>
</main> </main>
</body> </body>
</html> </html>

27
public/search.html Normal file
View file

@ -0,0 +1,27 @@
<!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/search.css">
</head>
<body>
<header>
<h1><a href="/">victor westerlund</a></h1>
</header>
<div id="search">
<input type="text" placeholder="start typing to search..">
</div>
<div id="results">
<div class="card">
<h3>hello</h3>
<p>mafriend</p>
</div>
</div>
</body>
</html>