mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: start of strings
This commit is contained in:
TrèsAbhi committed
1 parent
0209d48475
commit
4ed4395535
5 files changed
+80
-1583
No files matched your search
+20
-1515
File diff suppressed because it is too large.
Load diff
@@ -27,21 +27,6 @@ const accentVariables = {
|
||||
@import "@radix-ui/colors/mauve-dark.css";
|
||||
@import "@radix-ui/colors/mauve-alpha.css";
|
||||
|
||||
:root {
|
||||
--accent-1: var(--amber-1);
|
||||
--accent-2: var(--amber-2);
|
||||
--accent-3: var(--amber-3);
|
||||
--accent-4: var(--amber-4);
|
||||
--accent-5: var(--amber-5);
|
||||
--accent-6: var(--amber-6);
|
||||
--accent-7: var(--amber-7);
|
||||
--accent-8: var(--amber-8);
|
||||
--accent-9: var(--amber-9);
|
||||
--accent-10: var(--amber-10);
|
||||
--accent-11: var(--amber-11);
|
||||
--accent-12: var(--amber-12);
|
||||
}
|
||||
|
||||
body {
|
||||
--gray-1: var(--mauve-1);
|
||||
--gray-2: var(--mauve-2);
|
||||
@@ -56,28 +41,28 @@ const accentVariables = {
|
||||
--gray-11: var(--mauve-11);
|
||||
--gray-12: var(--mauve-12);
|
||||
|
||||
--gray-a1: var(--mauve-a1);
|
||||
--gray-a2: var(--mauve-a2);
|
||||
--gray-a3: var(--mauve-a3);
|
||||
--gray-a4: var(--mauve-a4);
|
||||
--gray-a5: var(--mauve-a5);
|
||||
--gray-a6: var(--mauve-a6);
|
||||
--gray-a7: var(--mauve-a7);
|
||||
--gray-a8: var(--mauve-a8);
|
||||
--gray-a9: var(--mauve-a9);
|
||||
--gray-a10: var(--mauve-a10);
|
||||
--gray-a11: var(--mauve-a11);
|
||||
--gray-a12: var(--mauve-a12);
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-0: 0.0625rem;
|
||||
--space-1: 0.125rem;
|
||||
--space-2: 0.25rem;
|
||||
--space-3: 0.5rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 2.5rem;
|
||||
--space-8: 3rem;
|
||||
--space-9: 4rem;
|
||||
--space-5: 2rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 8rem;
|
||||
--space-8: 16rem;
|
||||
--space-9: 32rem;
|
||||
|
||||
--weight-thin: 100;
|
||||
--weight-extra-light: 200;
|
||||
--weight-light: 300;
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
--weight-extra-bold: 800;
|
||||
--weight-black: 900;
|
||||
|
||||
--font-size-regular: 1rem;
|
||||
|
||||
background-color: var(--gray-1);
|
||||
color: var(--gray-12);
|
||||
|
||||
@@ -1,45 +1,44 @@
|
||||
---
|
||||
import "@fontsource-variable/roboto-flex/wdth.css";
|
||||
import { TextField } from "./TextField";
|
||||
---
|
||||
|
||||
<style is:global>
|
||||
@import "@radix-ui/colors/violet-dark.css";
|
||||
@import "@radix-ui/colors/plum-dark.css";
|
||||
|
||||
<style>
|
||||
.home-hero {
|
||||
background-image: url(/assets/home-hero.webp);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--space-7);
|
||||
.wallpaper {
|
||||
width: 100%;
|
||||
background-image: url(/assets/home-hero.webp);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
height: 13rem;
|
||||
|
||||
background: linear-gradient(var(--gray-a11), var(--gray-1));
|
||||
padding: var(--space-9);
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--space-7);
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: 3rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: linear-gradient(transparent, var(--gray-1));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="home-hero">
|
||||
<div class="wrapper">
|
||||
<h1>BlitzKit 2.0</h1>
|
||||
|
||||
<TextField placeholder="Search..." className="search" type="search" />
|
||||
<div class="wallpaper">
|
||||
<div class="wrapper"></div>
|
||||
</div>
|
||||
|
||||
<TextField placeholder="asdasdasd" />
|
||||
</div>
|
||||
@@ -1,8 +1,15 @@
|
||||
input {
|
||||
min-width: 0;
|
||||
background-color: var(--gray-1);
|
||||
border: solid 1px var(--gray-4);
|
||||
max-width: var(--space-9);
|
||||
|
||||
border-radius: 9999px;
|
||||
|
||||
background-color: var(--gray-3);
|
||||
border: solid 1px var(--gray-6);
|
||||
color: var(--gray-12);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--space-3);
|
||||
margin: 0 var(--space-4);
|
||||
|
||||
font-weight: var(--weight-medium);
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
@@ -1,12 +1,13 @@
|
||||
---
|
||||
import "@radix-ui/colors/amber-dark.css";
|
||||
import packageJson from "../../../../package.json";
|
||||
import HomeHero from "../components/HomeHero.astro";
|
||||
import { tools } from "../core/tools/tools";
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
---
|
||||
|
||||
<BaseLayout accent="amber">
|
||||
<!-- <HomeHero /> -->
|
||||
<HomeHero />
|
||||
|
||||
<h1>blitzkit {packageJson.version}</h1>
|
||||
|
||||
|
||||
Reference in new issue
Block a user