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

style: typography adjustments

Browse source
This commit is contained in:
Ayo 2023-05-27 22:09:04 +02:00
parent df2ca8d6ac
commit b8e84ff68c
10 changed files with 46 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Card.astro
View file

@ -50,7 +50,6 @@ const { href, title, rel, body, newTab = false } = Astro.props;
.link-card > a { .link-card > a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 1.4;
padding: 1em 1.3em; padding: 1em 1.3em;
border-radius: 0.35rem; border-radius: 0.35rem;
color: var(--text-color); color: var(--text-color);
@ -61,6 +60,11 @@ const { href, title, rel, body, newTab = false } = Astro.props;
h2 { h2 {
margin: 0; margin: 0;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
} }
p { p {

6
src/components/Footer.astro
View file

@ -8,8 +8,10 @@
<style> <style>
footer { footer {
font-size: small; margin-top: 1em;
margin-top: 2em;
text-align: right; text-align: right;
} }
footer ul {
font-size: var(--font-size-sm);
}
</style> </style>

30
src/components/Nav.astro
View file

@ -6,8 +6,6 @@ export type Link = {
newTab?: boolean; newTab?: boolean;
}; };
const url = Astro.url.pathname.toString();
export interface Props { export interface Props {
links: Array<Link>; links: Array<Link>;
} }
@ -15,15 +13,8 @@ export interface Props {
const { links } = Astro.props; const { links } = Astro.props;
--- ---
<div class="nav-wrapper">
<nav> <nav>
<div id="left-wrapper"> <div id="wrapper">
{
(url !== "/") &&
(<a href="/"><Icon pack="mdi" name="home" />Home</a>)
}
</div>
<div id="right-wrapper">
{ {
links links
.filter((link) => link.url !== "") .filter((link) => link.url !== "")
@ -35,37 +26,32 @@ const { links } = Astro.props;
} }
</div> </div>
</nav> </nav>
</div>
<style> <style>
div.nav-wrapper {
background: var(--ayo-gradient);
}
nav { nav {
background: var(--ayo-gradient);
display: flex; display: flex;
width: var(--content-width);
margin: 0 auto; margin: 0 auto;
} }
nav a { nav a {
display: inline-block; display: inline-block;
text-decoration: underline; text-decoration: underline;
font-weight: normal;
color: var(--color-bg); color: var(--color-bg);
padding: 5px; padding: 0.5em 1em;
font-size: var(--font-size-sm);
} }
nav a:hover { nav a:hover {
color: var(--color-brand-complement); color: var(--color-brand-complement);
} }
nav a svg { nav a svg {
width: 0.75rem; width: 1.5rem;
} }
#left-wrapper, #wrapper {
#right-wrapper {
flex: 1; flex: 1;
} max-width: var(--content-width);
#right-wrapper { margin: 0 auto;
text-align: right; text-align: right;
} }
</style> </style>

14
src/layouts/Layout.astro
View file

@ -10,6 +10,10 @@ export interface Props {
const { title, description } = Astro.props; const { title, description } = Astro.props;
const links: Link[] = [ const links: Link[] = [
{
url: "/",
icon: "home",
},
{ {
url: "https://ayos.blog", url: "https://ayos.blog",
icon: "blog", icon: "blog",
@ -35,10 +39,10 @@ const links: Link[] = [
<body> <body>
<Nav links={links} /> <Nav links={links} />
<slot /> <slot />
<style> <style>
:root { :root {
--content-width: 700px; --content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.20vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --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-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@ -107,6 +111,14 @@ const links: Link[] = [
border-radius: 0.4rem; border-radius: 0.4rem;
} }
p,
img,
table,
ul {
margin: 1em 0;
font-size: var(--font-size-base);
}
.text-gradient { .text-gradient {
font-weight: 900; font-weight: 900;
background-image: var(--ayo-gradient); background-image: var(--ayo-gradient);

11
src/pages/404.astro
View file

@ -64,9 +64,8 @@ const description = "Have you tried turning it off and on again?";
padding: 1em; padding: 1em;
max-width: var(--content-width); max-width: var(--content-width);
font-weight: normal; font-weight: normal;
font-size: large; font-size: (--font-size-lg);
color: var(--color-bg); color: var(--color-bg);
line-height: 1.6;
} }
.now-wrapper { .now-wrapper {
@ -75,7 +74,7 @@ const description = "Have you tried turning it off and on again?";
padding: 8px 4px; padding: 8px 4px;
font-weight: normal; font-weight: normal;
color: white; color: white;
font-size: small; font-size: var(--font-size-sm);
text-decoration: none; text-decoration: none;
} }
@ -123,7 +122,7 @@ const description = "Have you tried turning it off and on again?";
@media only screen and (max-device-width: 360px) { @media only screen and (max-device-width: 360px) {
.now-wrapper { .now-wrapper {
border: 0px; border: 0px;
font-size: x-small; font-size: var(--font-size-sm);
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
@ -152,13 +151,13 @@ const description = "Have you tried turning it off and on again?";
@media only screen and (min-device-width: 280px) and (max-device-width: 653px) { @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
.highlighted-section__content ul li { .highlighted-section__content ul li {
font-size: 14px; font-size: var(--font-size-sm);
} }
} }
@media only screen and (min-device-width: 360px) and (max-device-width: 812px) { @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
.highlighted-section__content ul li { .highlighted-section__content ul li {
font-size: 20px; font-size: var(--font-size-base);
} }
} }
</style> </style>

14
src/pages/index.astro
View file

@ -84,7 +84,7 @@ import Footer from "../components/Footer.astro";
padding: 8px 4px; padding: 8px 4px;
font-weight: normal; font-weight: normal;
color: white; color: white;
font-size: small; font-size: var(--font-size-sm);
text-decoration: none; text-decoration: none;
} }
@ -110,12 +110,11 @@ import Footer from "../components/Footer.astro";
.highlighted-section__content { .highlighted-section__content {
margin: auto; margin: auto;
padding: 1em; padding: 0.5em 1em;
max-width: var(--content-width); max-width: var(--content-width);
font-weight: normal; font-weight: normal;
font-size: large; font-size: var(--font-size-lg);
color: var(--color-bg); color: var(--color-bg);
line-height: 1.6;
} }
.highlighted-section__content__profile-picture { .highlighted-section__content__profile-picture {
@ -152,7 +151,7 @@ import Footer from "../components/Footer.astro";
@media only screen and (max-device-width: 360px) { @media only screen and (max-device-width: 360px) {
.now-wrapper { .now-wrapper {
border: 0px; border: 0px;
font-size: x-small; font-size: var(--font-size-sm);
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
@ -187,16 +186,17 @@ import Footer from "../components/Footer.astro";
@media only screen and (min-device-width: 280px) and (max-device-width: 653px) { @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
.highlighted-section__content__profile-picture { .highlighted-section__content__profile-picture {
float: none; float: none;
margin: 0;
width: 100px; width: 100px;
} }
.highlighted-section__content ul li { .highlighted-section__content ul li {
font-size: 14px; font-size: var(--font-size-sm);
} }
} }
@media only screen and (min-device-width: 360px) and (max-device-width: 812px) { @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
.highlighted-section__content ul li { .highlighted-section__content ul li {
font-size: 20px; font-size: var(--font-size-base);
} }
} }
</style> </style>

6
src/pages/now/and-then/index.astro
View file

@ -17,9 +17,6 @@ const title = "Previously...";
</Layout> </Layout>
<style> <style>
h1 {
margin: 2rem 0;
}
main { main {
margin: auto; margin: auto;
@ -40,7 +37,6 @@ const title = "Previously...";
} }
.highlighted-content { .highlighted-content {
line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
@ -49,7 +45,7 @@ const title = "Previously...";
} }
.highlighted-content code { .highlighted-content code {
font-size: 0.875em; font-size: var(--font-size-base);
border: 0.1em solid var(--color-border); border: 0.1em solid var(--color-border);
border-radius: 4px; border-radius: 4px;
padding: 0.15em 0.25em; padding: 0.15em 0.25em;

6
src/pages/now/and-then/posts/09-20-2022.astro
View file

@ -29,9 +29,6 @@ const description =
</Layout> </Layout>
<style> <style>
h1 {
margin: 2rem 0;
}
main { main {
margin: auto; margin: auto;
@ -52,7 +49,6 @@ const description =
} }
.highlighted-content { .highlighted-content {
line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
@ -61,7 +57,7 @@ const description =
} }
.highlighted-content code { .highlighted-content code {
font-size: 0.875em; font-size: var(--font-size-base);
border: 0.1em solid var(--color-border); border: 0.1em solid var(--color-border);
border-radius: 4px; border-radius: 4px;
padding: 0.15em 0.25em; padding: 0.15em 0.25em;

7
src/pages/now/index.astro
View file

@ -51,10 +51,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
</Layout> </Layout>
<style> <style>
h1 {
margin: 2rem 0;
}
main { main {
margin: auto; margin: auto;
padding: 1em; padding: 1em;
@ -74,7 +70,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
} }
.highlighted-content { .highlighted-content {
line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
@ -83,7 +78,7 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
} }
.highlighted-content code { .highlighted-content code {
font-size: 0.875em; font-size: var(--font-size-base);
border: 0.1em solid var(--color-border); border: 0.1em solid var(--color-border);
border-radius: 4px; border-radius: 4px;
padding: 0.15em 0.25em; padding: 0.15em 0.25em;

6
src/pages/social.astro
View file

@ -38,12 +38,8 @@ import Footer from "../components/Footer.astro";
</Layout> </Layout>
<style> <style>
h1 {
margin: 2rem 0;
}
.highlighted-content { .highlighted-content {
line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
@ -52,7 +48,7 @@ import Footer from "../components/Footer.astro";
} }
.highlighted-content code { .highlighted-content code {
font-size: 0.875em; font-size: var(--font-size-base);
border: 0.1em solid var(--color-border); border: 0.1em solid var(--color-border);
border-radius: 4px; border-radius: 4px;
padding: 0.15em 0.25em; padding: 0.15em 0.25em;