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 {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: 1em 1.3em;
border-radius: 0.35rem;
color: var(--text-color);
@ -61,6 +60,11 @@ const { href, title, rel, body, newTab = false } = Astro.props;
h2 {
margin: 0;
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 {

6
src/components/Footer.astro
View file

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

30
src/components/Nav.astro
View file

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

14
src/layouts/Layout.astro
View file

@ -10,6 +10,10 @@ export interface Props {
const { title, description } = Astro.props;
const links: Link[] = [
{
url: "/",
icon: "home",
},
{
url: "https://ayos.blog",
icon: "blog",
@ -35,10 +39,10 @@ const links: Link[] = [
<body>
<Nav links={links} />
<slot />
<style>
:root {
--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-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@ -107,6 +111,14 @@ const links: Link[] = [
border-radius: 0.4rem;
}
p,
img,
table,
ul {
margin: 1em 0;
font-size: var(--font-size-base);
}
.text-gradient {
font-weight: 900;
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;
max-width: var(--content-width);
font-weight: normal;
font-size: large;
font-size: (--font-size-lg);
color: var(--color-bg);
line-height: 1.6;
}
.now-wrapper {
@ -75,7 +74,7 @@ const description = "Have you tried turning it off and on again?";
padding: 8px 4px;
font-weight: normal;
color: white;
font-size: small;
font-size: var(--font-size-sm);
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) {
.now-wrapper {
border: 0px;
font-size: x-small;
font-size: var(--font-size-sm);
width: 100%;
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) {
.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) {
.highlighted-section__content ul li {
font-size: 20px;
font-size: var(--font-size-base);
}
}
</style>

14
src/pages/index.astro
View file

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

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

@ -17,9 +17,6 @@ const title = "Previously...";
</Layout>
<style>
h1 {
margin: 2rem 0;
}
main {
margin: auto;
@ -40,7 +37,6 @@ const title = "Previously...";
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
@ -49,7 +45,7 @@ const title = "Previously...";
}
.highlighted-content code {
font-size: 0.875em;
font-size: var(--font-size-base);
border: 0.1em solid var(--color-border);
border-radius: 4px;
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>
<style>
h1 {
margin: 2rem 0;
}
main {
margin: auto;
@ -52,7 +49,6 @@ const description =
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
@ -61,7 +57,7 @@ const description =
}
.highlighted-content code {
font-size: 0.875em;
font-size: var(--font-size-base);
border: 0.1em solid var(--color-border);
border-radius: 4px;
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>
<style>
h1 {
margin: 2rem 0;
}
main {
margin: auto;
padding: 1em;
@ -74,7 +70,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
@ -83,7 +78,7 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
}
.highlighted-content code {
font-size: 0.875em;
font-size: var(--font-size-base);
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;

6
src/pages/social.astro
View file

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