From ea033cea92ba2708b0a4d923b34ea14250a8b66c Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Tue, 21 Sep 2021 16:47:23 +0200
Subject: [PATCH] dev21w38a

---
 public/assets/css/index.css  | 31 ++++++++++++++
 public/assets/css/search.css | 83 ++++++++++++++++++++++++++++++++++++
 public/assets/css/style.css  | 27 +-----------
 public/index.html            |  2 +
 public/search.html           | 27 ++++++++++++
 5 files changed, 144 insertions(+), 26 deletions(-)
 create mode 100644 public/assets/css/index.css
 create mode 100644 public/assets/css/search.css
 create mode 100644 public/search.html

diff --git a/public/assets/css/index.css b/public/assets/css/index.css
new file mode 100644
index 0000000..eed3603
--- /dev/null
+++ b/public/assets/css/index.css
@@ -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);
+    }
+}
\ No newline at end of file
diff --git a/public/assets/css/search.css b/public/assets/css/search.css
new file mode 100644
index 0000000..e4f2c55
--- /dev/null
+++ b/public/assets/css/search.css
@@ -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));
+    }
+}
\ No newline at end of file
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 4aca975..75ffe04 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -43,6 +43,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -52,36 +53,10 @@ body {
 a {
     display: content;
     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 (max-width: 300px) {
-    main {
-        text-align: center;
-        align-items: center;
-    }
-}
-
-@media print {
-    a::after {
-        content: ": " attr(href);
-    }
-}
-
 @media (pointer: fine) {
     a:hover {
         background: rgba(var(--palette-contrast),.1);
diff --git a/public/index.html b/public/index.html
index 7a0c73c..20804d4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,11 +8,13 @@
     <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/index.css">
 </head>
 <body>
     <main class="hidden">
         <p>victor westerlund</p>
         <p><a href="https://github.com/VictorWesterlund">github</a></p>
+        <p><a href="search">search</a></p>
     </main>
 </body>
 </html>
diff --git a/public/search.html b/public/search.html
new file mode 100644
index 0000000..2dc4ecf
--- /dev/null
+++ b/public/search.html
@@ -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>