hyro/links
1
0
Fork 0
mirror of https://github.com/xHyroM/links.git synced 2024-11-22 07:31:06 +01:00
Code Issues Projects Releases Wiki Activity Actions

perf(components): create headcommon

Browse source
This commit is contained in:
OLIMINATOR 2023-01-06 21:02:23 +01:00
parent 605ad84eff
commit a4fac55ef8
4 changed files with 16 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/Card.astro
View file

@ -1,62 +0,0 @@
---
export interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 0.15rem;
background-color: white;
background-image: var(--accent-gradient);
background-size: 400%;
border-radius: 0.5rem;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: 1rem 1.3rem;
border-radius: 0.35rem;
color: #111;
background-color: white;
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;
color: #444;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent));
}
</style>

11
src/components/HeadCommon.astro Normal file
View file

@ -0,0 +1,11 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" /><link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin
/><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap" rel="stylesheet" media="all" />

0
src/components/HeadSEO.astro Normal file
View file

30
src/layouts/Layout.astro
View file

@ -1,35 +1,15 @@
--- ---
export interface Props { import HeadCommon from '../components/HeadCommon.astro';
title: string; import HeadSEO from '../components/HeadSEO.astro';
}
const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html dir="ltr" lang="sk-SK">
<head> <head>
<meta charset="UTF-8" /> <HeadCommon />
<meta name="viewport" content="width=device-width" /> <HeadSEO />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head> </head>
<body> <body>
<slot /> <slot />
</body> </body>
</html> </html>
<style is:global>
:root {
--accent: 124, 58, 237;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
}
html {
font-family: system-ui, sans-serif;
background-color: #F6F6F6;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
</style>