feat: add some stuff
This commit is contained in:
@ -1,61 +0,0 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
@ -169,8 +169,7 @@
|
||||
box-shadow:
|
||||
-5px -5px 10px #ffffff70 inset,
|
||||
-1px -1px 4px #ffffff96 inset,
|
||||
2px 2px 2px black inset,
|
||||
-2px -2px 5px #00000078;
|
||||
2px 2px 2px black inset;
|
||||
transform: translate(-50%, -50%) rotate(calc(var(--rotation) * -1 + 180deg));
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
46
src/components/HeroCard.svelte
Normal file
46
src/components/HeroCard.svelte
Normal file
@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import Card from "./Card.svelte";
|
||||
|
||||
export let title: string;
|
||||
export let subtitle: string;
|
||||
export let image: string;
|
||||
export let description: string;
|
||||
export let link: string;
|
||||
</script>
|
||||
|
||||
<Card></Card>
|
||||
|
||||
<style>
|
||||
.hero-card-wrapper {
|
||||
display: flex;
|
||||
border-radius: var(--border-radius-md);
|
||||
background-color: var(--background);
|
||||
border: solid thin var(--outline);
|
||||
}
|
||||
|
||||
.hero-card-image {
|
||||
flex: 1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md);
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.hero-card-content {
|
||||
flex: 1;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -4,12 +4,11 @@ import { Image as AstroImage } from "astro:assets";
|
||||
interface Props {
|
||||
src: ImageMetadata;
|
||||
alt: string;
|
||||
caption?: string;
|
||||
maxWidth?: number;
|
||||
}
|
||||
|
||||
const { src, alt, maxWidth } = Astro.props;
|
||||
|
||||
const image = typeof src === "string" ? await import(src) : src;
|
||||
const { src: image, alt, maxWidth } = Astro.props;
|
||||
|
||||
const sizes = [
|
||||
{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import { locales, defaultLocale, getLocale } from "astro-i18n-aut";
|
||||
import { locales, defaultLocale } from "astro-i18n-aut";
|
||||
import { useTranslations } from "../i18n/utils";
|
||||
|
||||
function translatePath(lang: string) {
|
||||
@ -16,15 +16,16 @@ function translatePath(lang: string) {
|
||||
return `/${[lang, ...split].join("/")}`;
|
||||
}
|
||||
|
||||
const locale = getLocale(Astro.url);
|
||||
const t = useTranslations(locale);
|
||||
const t = useTranslations(Astro);
|
||||
---
|
||||
|
||||
<ul>
|
||||
{
|
||||
Object.entries(locales).map(([lang, label]) => (
|
||||
<li>
|
||||
<a href={translatePath(lang)}>{t(label as "de")}</a>
|
||||
<a href={translatePath(lang)} data-astro-prefetch>
|
||||
{t(label as "de")}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
||||
@ -2,17 +2,16 @@
|
||||
import MaxImg from "./Max.png";
|
||||
import Image from "./Image.astro";
|
||||
import GoogleyEye from "./GoogleyEye.svelte";
|
||||
import { Card } from "./card";
|
||||
|
||||
import { useTranslations } from "@i18n/utils";
|
||||
|
||||
import { getLocale } from "astro-i18n-aut";
|
||||
|
||||
const locale = getLocale(Astro.url);
|
||||
|
||||
const t = useTranslations(locale);
|
||||
const t = useTranslations(Astro);
|
||||
---
|
||||
|
||||
<section class="googley-eye-target">
|
||||
<Card
|
||||
classes="googley-eye-target relative rounded-diag-md border border-light gradient grid grid-cols-[250px_1fr] h-[180px] my-8xl"
|
||||
>
|
||||
<div class="image">
|
||||
<Image src={MaxImg} alt="its mee" maxWidth={700} />
|
||||
<div class="eye right">
|
||||
@ -23,11 +22,11 @@ const t = useTranslations(locale);
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h1>{t("home.title")}</h1>
|
||||
<div class="content gap-2">
|
||||
<h1 class="text-2xl">{t("home.title")}</h1>
|
||||
<p>{t("home.subtitle")}</p>
|
||||
</div>
|
||||
</section>
|
||||
</Card>
|
||||
|
||||
<style>
|
||||
.image {
|
||||
@ -35,7 +34,7 @@ const t = useTranslations(locale);
|
||||
height: 130%;
|
||||
align-self: end;
|
||||
overflow: hidden;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-left-radius: var(--border-radius-md);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@ -43,37 +42,19 @@ const t = useTranslations(locale);
|
||||
.image > :global(img) {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
margin-top: 100px;
|
||||
height: 180px;
|
||||
background-color: var(--background);
|
||||
border-radius: 0px 20px 0px 20px;
|
||||
border: solid thin var(--outline);
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
background: var(--background-gradient);
|
||||
background: linear-gradient(
|
||||
150deg,
|
||||
var(--neutral400) 0%,
|
||||
var(--neutral500) 100%
|
||||
);
|
||||
object-position: bottom;
|
||||
}
|
||||
|
||||
.eye {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
top: 25%;
|
||||
right: 30%;
|
||||
top: 29%;
|
||||
right: 27%;
|
||||
}
|
||||
.eye.right {
|
||||
top: 27%;
|
||||
right: 15%;
|
||||
top: 31%;
|
||||
right: 12%;
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -81,6 +62,6 @@ const t = useTranslations(locale);
|
||||
padding-left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
---
|
||||
import { getLocale } from "astro-i18n-aut";
|
||||
import { useTranslations, useTranslatedPath } from "../i18n/utils";
|
||||
import Logo from "./Logo.astro";
|
||||
|
||||
function isActive(path) {
|
||||
function isActive(path: string) {
|
||||
return Astro.url.pathname === path ? "active" : "";
|
||||
}
|
||||
|
||||
const lang = getLocale(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
const translatePath = useTranslatedPath(lang);
|
||||
const t = useTranslations(Astro);
|
||||
const translatePath = useTranslatedPath(Astro);
|
||||
|
||||
const paths = [
|
||||
{
|
||||
link: translatePath("/"),
|
||||
@ -34,85 +33,37 @@ const paths = [
|
||||
];
|
||||
---
|
||||
|
||||
<style>
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
border: solid thin var(--outline);
|
||||
border-left: none;
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
ul > li.logo {
|
||||
flex: unset;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
background: none;
|
||||
height: 34px;
|
||||
margin: 8px;
|
||||
margin-left: 0px;
|
||||
--fill: #cb5a5a;
|
||||
--background-fill: none;
|
||||
}
|
||||
|
||||
.logo > a {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul > li > a {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul > li.active {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
ul > li:nth-child(2) {
|
||||
border-radius: 0px 0px 0px 10px;
|
||||
border-left: solid thin var(--outline);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
ul > li:last-child {
|
||||
border-radius: 0px 10px 0px 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul>
|
||||
<ul class="flex my-4 divide-x divide-x-1 divide-x-neutral">
|
||||
{
|
||||
paths.map(({ link, text, component }, index) => (
|
||||
paths.map(({ link, text, component }, i) => (
|
||||
<li
|
||||
class={`${component ? "logo" : ""} ${isActive(link) ? "active" : ""}`}
|
||||
class={`
|
||||
flex items-center flex-1 border-t-1 border-b-1 border-neutral
|
||||
${isActive(link) ? "bg-light" : "bg"}
|
||||
${i === 1 ? "rounded-bl-md" : ""}
|
||||
${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
|
||||
${component ? "border-none bg-transparent my-2 mr-4 logo" : ""}
|
||||
`}
|
||||
>
|
||||
<a href={link}>{component ? <Logo /> : text}</a>
|
||||
<a
|
||||
class="text-neutral w-full h-full flex items-center justify-center lowercase"
|
||||
href={link}
|
||||
data-astro-prefetch
|
||||
>
|
||||
{component ? <Logo /> : text}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
ul > li.logo {
|
||||
background: none;
|
||||
flex: 0;
|
||||
height: 34px;
|
||||
margin-left: 0px;
|
||||
--fill: #cb5a5a;
|
||||
--background-fill: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
18
src/components/button/Button.svelte
Normal file
18
src/components/button/Button.svelte
Normal file
@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
export let classes = "";
|
||||
</script>
|
||||
|
||||
<button class="bg-light p-2 rounded-md ml-2 px-4 {classes}">
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
background-color: var(--background-light);
|
||||
border-radius: var(--border-radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-md);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
</style>
|
||||
5
src/components/button/Icon.svelte
Normal file
5
src/components/button/Icon.svelte
Normal file
@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
export let icon: string;
|
||||
</script>
|
||||
|
||||
<span class="i-tabler-{icon}" />
|
||||
12
src/components/button/index.ts
Normal file
12
src/components/button/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import _Button from './Button.svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
|
||||
const Button = {
|
||||
..._Button,
|
||||
Icon,
|
||||
} as typeof _Button & {
|
||||
Icon: typeof Icon;
|
||||
};
|
||||
|
||||
|
||||
export { Button }
|
||||
7
src/components/card/Content.svelte
Normal file
7
src/components/card/Content.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
export let classes = "";
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col gap-4 {classes} w-[66%]">
|
||||
<slot />
|
||||
</div>
|
||||
9
src/components/card/Description.svelte
Normal file
9
src/components/card/Description.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<p class="max-h-32 text-ellipsis overflow-hidden line-clamp-4">
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
15
src/components/card/Image.svelte
Normal file
15
src/components/card/Image.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let alt: string;
|
||||
export let src: string;
|
||||
export let width: number;
|
||||
export let height: number;
|
||||
</script>
|
||||
|
||||
<img {src} {alt} {width} {height} />
|
||||
|
||||
<style>
|
||||
img {
|
||||
width: 33%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
11
src/components/card/ReadMoreButton.svelte
Normal file
11
src/components/card/ReadMoreButton.svelte
Normal file
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let link: string;
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={link}
|
||||
data-astro-prefetch
|
||||
class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
|
||||
>
|
||||
read more <span class="i-tabler-arrow-right inline-block w-4 h-4" />
|
||||
</a>
|
||||
6
src/components/card/Title.svelte
Normal file
6
src/components/card/Title.svelte
Normal file
@ -0,0 +1,6 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl">
|
||||
<slot />
|
||||
</h2>
|
||||
19
src/components/card/Wrapper.svelte
Normal file
19
src/components/card/Wrapper.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let classes = "flex bg";
|
||||
</script>
|
||||
|
||||
<div class="relative rounded-diag-md {classes} noise">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-wrapper {
|
||||
align-items: stretch;
|
||||
|
||||
min-height: 200px;
|
||||
border: solid thin var(--outline);
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
23
src/components/card/index.ts
Normal file
23
src/components/card/index.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import Wrapper from './Wrapper.svelte';
|
||||
import Image from './Image.svelte';
|
||||
import Content from './Content.svelte';
|
||||
import Title from './Title.svelte';
|
||||
import Description from './Description.svelte';
|
||||
import ReadMoreButton from './ReadMoreButton.svelte';
|
||||
|
||||
const Card = {
|
||||
...Wrapper,
|
||||
Image,
|
||||
Content,
|
||||
Title,
|
||||
Description,
|
||||
ReadMoreButton
|
||||
} as typeof Wrapper & {
|
||||
Image: typeof Image;
|
||||
Content: typeof Content;
|
||||
Title: typeof Title;
|
||||
Description: typeof Description;
|
||||
ReadMoreButton: typeof ReadMoreButton;
|
||||
}
|
||||
|
||||
export { Card };
|
||||
Reference in New Issue
Block a user