Feature: Layouting home page (#4)

Complete issue #2

Reviewed-on: #4
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>

src/components/Footer.astro

@@ -0,0 +1,39 @@
+---
+import CarbonArrowRight from "@/icons/CarbonArrowUpRight.vue"
+const commit = "d9ea5cf7d6"
+---
+
+<footer>
+    <div class="commit">
+        build commit: <a href={`/${commit}`}> { commit } <CarbonArrowRight class="icon" /> </a>
+    </div>
+</footer>
+
+<style>
+footer {
+        display: grid;
+        grid-auto-flow: column;
+        justify-self: end;
+        margin-bottom: 2rem;
+        font-size: 14px;
+        color: var(--primary);
+}
+
+footer div.commit {
+    display: flex;
+    justify-self: end;
+    margin-right: 3rem;
+    gap: 5px;
+    a {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        text-decoration: underline;
+        text-underline-offset: 5px;
+    }
+    & .icon {
+        width: 1.1rem;
+        height: 1.1rem;
+    }
+}
+<style>

src/components/Search.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+    import CarbonArrowRight from '@/icons/CarbonArrowRight.vue'
+    import CarbonRecentlyView from '@/icons/CarbonRecentlyViewed.vue'
+</script>
+
+<template>
+    <fieldset class="search">
+        <div class="search__context">
+            <span class="search__context-title"> context: </span>
+            <span class="search__context-item"> global </span>
+        </div>
+        <input type="search" />
+        <div class="search__buttons">
+            <CarbonRecentlyView class="icon" />
+            <CarbonArrowRight class="icon" />
+        </div>
+    </fieldset>
+</template>
+
+<style scoped>
+fieldset.search {
+    border: 1px solid var(--accent);
+    background: var(--darken);
+    min-width: 50%;
+    display: grid;
+    grid-template-columns: 0.2fr 0.5fr 0.3fr;
+    align-items: center;
+    outline: none;
+}
+
+fieldset.search input {
+    border: 0;
+    outline: 0;
+    padding: 10px 10px;
+    color: var(--primary);
+    background: none;
+}
+
+fieldset.search .search__context {
+  display: inline-grid;
+  align-items: center;
+  grid-auto-flow: column;
+  justify-self: start;
+  background: var(--black);
+  margin: 10px;
+  padding: 10px 0;
+  padding-left: 0.625rem;
+  & .search__context-title {
+    color: var(--accent);
+  }
+  & .search__context-item {
+      color: var(--primary);
+  }
+}
+
+input:focus-visible, fieldset:focus-visible {
+    outline: 0;
+}
+
+fieldset.search .search__buttons {
+ display: grid;
+ grid-auto-flow: column;
+ justify-self: end;
+ gap: 15px;
+ margin-right: 15px;
+ & svg.icon {
+    width: 1.3rem;
+    height: 1.3rem;
+    justify-self: end;
+    color: var(--primary);
+ }
+}
+</style>

src/icons/CarbonArrowRight.vue

@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z"/></svg>
+</template>

src/icons/CarbonArrowUpRight.vue

@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6z"/></svg>
+</template>

src/icons/CarbonRecentlyViewed.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M20.59 22L15 16.41V7h2v8.58l5 5.01z"/><path fill="currentColor" d="M16 2A13.94 13.94 0 0 0 6 6.23V2H4v8h8V8H7.08A12 12 0 1 1 4 16H2A14 14 0 1 0 16 2"/></svg>
+</template>

src/layouts/Default.astro

@@ -2,7 +2,6 @@
 import Base from "@/layouts/Base.astro"
 ---
 
-
 <Base>
     <slot />
 </Base>

src/pages/index.astro

@@ -1,15 +1,19 @@
 ---
 import Default from "@/layouts/Default.astro"
 import Button from "@/components/Button.vue"
+import Search from "@/components/Search.vue"
+import Footer from "@/components/Footer.astro"
 ---
 
 <Default>
     <header>
-       <span class="rate"> 0 / 1000 RQT </span>
+       <span class="rate"> 0 / 5000 RQT </span>
        <Button class="sign" />
     </header>
     <main>
+        <Search />
     </main>
+    <Footer />
 </Default>
 
 <style>
@@ -30,4 +34,10 @@ span.rate {
 button.sign {
     margin-right: 15px;
 }
+
+main {
+    display: grid;
+    place-items: center;
+    min-height: calc(100vh - 55px - 2.5rem);
+}
 </style>

src/styles/app.css

@@ -2,6 +2,7 @@
 
 :root {
     --green: #22c55e;
+    --black: #171717;
     --darken: #1c1917;
     --neutral: #404040;
     --shadow: #262626;
@@ -13,5 +14,4 @@
 body {
   font-family: 'JetBrains Mono Variable', monospace;
   background: var(--secondary);
-  min-height: 100vh;
 }