kglt/fensir
1
0
Fork 0
Code Activity

Feature: Layouting home page (#4)

Browse source 
Complete issue #2

Reviewed-on: ofs/fensir#4
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>
This commit is contained in:
Konrad Geletey 2024-12-08 12:14:55 +03:00 • committed by Konrad Geletey
parent 3adfe995d2
commit 0c96e84708
Signed by: git
GPG key ID: 0CB1190D5D313992
8 changed files with 133 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/Footer.astro Normal file
View file

@ -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>

73
src/components/Search.vue Normal file
View file

@ -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>