ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: section spacing

Browse source
This commit is contained in:
Ayo 2022-09-26 10:49:23 +02:00
parent a46a11298c
commit 8300bb6327
2 changed files with 100 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
src/layouts/Layout.astro
View file

@ -1,109 +1,104 @@
--- ---
export interface Props { export interface Props {
title: string; title: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
import Footer from '../components/Footer.astro';
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="theme-color" content="#3054bf"> <meta name="theme-color" content="#3054bf" />
<link rel="shortcut icon" type="image/png" href="/favicon.ico"> <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<slot /> <slot />
</body>
</html>
<style>
:root {
--content-width: 700px;
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-text: hsl(12, 5%, 4%); <style>
--color-bg: hsl(10, 21%, 95%); :root {
--color-border: hsl(17, 24%, 90%); --content-width: 700px;
--color-link: #416fff; --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-brand-blue-1: #3054bf; --color-text: hsl(12, 5%, 4%);
--color-brand-blue-2: #203880; --color-bg: hsl(10, 21%, 95%);
--color-brand-blue-3: #416fff; --color-border: hsl(17, 24%, 90%);
--color-brand-blue-4: #101c40; --color-link: #416fff;
--color-brand-blue-5: #3964e6;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff); --color-brand-blue-1: #3054bf;
} --color-brand-blue-2: #203880;
--color-brand-blue-3: #416fff;
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
html { --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
font-family: system-ui, sans-serif; }
font-size: var(--font-size-base);
color: var(--color-text); html {
background-color: var(--color-bg); font-family: system-ui, sans-serif;
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
}
body {
margin: 0;
}
@keyframes pulse {
0%,
100% {
background-position-y: 0%;
} }
50% {
background-position-y: 80%;
}
}
</style>
body { <style is:global>
margin: 0; main {
} margin: auto;
max-width: var(--content-width);
padding: 1em;
}
@keyframes pulse { h1 {
0%, font-size: var(--font-size-xl);
100% { }
background-position-y: 0%;
}
50% {
background-position-y: 80%;
}
}
h2 {
font-size: var(--font-size-lg);
}
</style> code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
<style is:global> a {
main { font-weight: 900;
margin: auto; color: var(--color-link);
padding: 1em; border-radius: 0.4rem;
max-width: var(--content-width); }
}
h1 { .text-gradient {
font-size: var(--font-size-xl); font-weight: 900;
} background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
h2 { background-size: 500% 500%;
font-size: var(--font-size-lg); -webkit-background-clip: text;
} -webkit-text-fill-color: transparent;
background-size: 100% 200%;
code { background-position-y: 100%;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, border-radius: 0.4rem;
Bitstream Vera Sans Mono, Courier New, monospace; }
} </style>
</body>
a { </html>
font-weight: 900;
color: var(--color-link);
border-radius: 0.4rem;
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
</style>

33
src/pages/index.astro
View file

@ -5,23 +5,23 @@ import Footer from "../components/Footer.astro";
--- ---
<Layout title="Ayo Ayco | Software Engineer + Web Developer"> <Layout title="Ayo Ayco | Software Engineer + Web Developer">
<section class="highlighted-section">
<div class="highlighted-section__content">
<h1 title="Ayo Ayco | Software Engineer + Web Developer">
<span class="heavy-text">Ayo</span>Ayco
</h1>
<ul role="list">
<li>👨🏻‍💻 Software Extraordinaire</li>
<li>🕵🏻‍♂️ Frontend Detective Consultant</li>
<li>📚 BS Computer Science</li>
</ul>
<a href="/now" class="now-wrapper">
<span class="now-label">Now</span>
<span class="status">Settling in The Netherlands &rarr;</span>
</a>
</div>
</section>
<main> <main>
<section class="highlighted-section">
<div class="highlighted-section__content">
<h1 title="Ayo Ayco | Software Engineer + Web Developer">
<span class="heavy-text">Ayo</span>Ayco
</h1>
<ul role="list">
<li>👨🏻‍💻 Software Extraordinaire</li>
<li>🕵🏻‍♂️ Frontend Detective Consultant</li>
<li>📚 BS Computer Science</li>
</ul>
<a href="/now" class="now-wrapper">
<span class="now-label">Now</span>
<span class="status">Settling in The Netherlands &rarr;</span>
</a>
</div>
</section>
<section class="cards-section"> <section class="cards-section">
<ul role="list" class="cards-section__grid"> <ul role="list" class="cards-section__grid">
<Card <Card
@ -124,7 +124,6 @@ import Footer from "../components/Footer.astro";
.cards-section { .cards-section {
margin: auto; margin: auto;
padding: 1em;
max-width: var(--content-width); max-width: var(--content-width);
} }