Added blog list
This commit is contained in:
Rafael González
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Rafael González",
|
||||
"description": "Mexican web developer, building stuff @ Acromático Developement during the day and working as husband and dad the rest of the time 🚀",
|
||||
"description": "Mexican web developer, Shopify Expert and foundero of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀",
|
||||
"personalLinks": [
|
||||
{
|
||||
"name": "GitHub",
|
||||
|
||||
82
src/layouts/main.astro
Normal file
82
src/layouts/main.astro
Normal file
@ -0,0 +1,82 @@
|
||||
---
|
||||
import profileData from '../data/profile.json';
|
||||
import '../styles/base.css';
|
||||
|
||||
const profileName = profileData.name;
|
||||
|
||||
const { frontmatter, title: titleProp, description: descriptionProp } = Astro.props;
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`}</title>
|
||||
<meta name="description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description}>
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`} />
|
||||
<meta property="og:description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description} />
|
||||
<meta property="og:image" content={frontmatter?.image ? frontmatter?.image : "https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"} />
|
||||
<meta property="og:url" content={Astro.site} />
|
||||
<link rel="canonical" href={Astro.site}>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script>
|
||||
<script>
|
||||
// @ts-ignore
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
// @ts-ignore
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
// @ts-ignore
|
||||
gtag('js', new Date());
|
||||
// @ts-ignore
|
||||
gtag('config', 'G-45FLVCCPTZ');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-white dark:bg-gray-900">
|
||||
<header class="w-full flex flex-col justify-center items-center pt-10 ">
|
||||
<img
|
||||
class="w-1/3 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square"
|
||||
loading="lazy"
|
||||
src="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"
|
||||
sizes="(max-width: 640px) 50vw,
|
||||
208px"
|
||||
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 50w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_100,w_100/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 100w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_200,w_200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 200w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_600,w_600/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 600w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_900,w_900/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 900w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1200w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1500,w_1500/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1500w"
|
||||
alt="Rafael González"
|
||||
>
|
||||
<h1 class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">{profileName}</h1>
|
||||
<p class="font-mono text-center text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">{profileData.description}</p>
|
||||
<a href="/main.vcf" target="_blank" rel="noopener" class="md:hidden"><button class="mt-4 p-4 bg-black text-white dark:text-black dark:bg-white border-2 border-black rounded-md font-bold uppercase tracking-wide">Agregar a Contactos</button></a>
|
||||
</header>
|
||||
<main class="font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">
|
||||
<slot/>
|
||||
</main>
|
||||
<footer class="px-3 py-8">
|
||||
<p class="dark:text-white text-center">Powered by <a class="underline" href="https://acromatico.dev" target="_blank" rel="noopener">Acromático Development</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
10
src/pages/blog.astro
Normal file
10
src/pages/blog.astro
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
import MainLayout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<MainLayout title="Recent Blog Entries" description="List of my most resent blog entries.">
|
||||
<h1 class="text-4xl">Recent Blog Entries</h1>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||
|
||||
</div>
|
||||
</MainLayout>
|
||||
66
src/pages/blog/optimizeing-shopify-theme.mdx
Normal file
66
src/pages/blog/optimizeing-shopify-theme.mdx
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
layout: ../../layouts/main.astro
|
||||
title: Optimizing performance of an old Shopify Theme
|
||||
description:
|
||||
Some tips and recommendations for optimizing and boosting performance of an
|
||||
old Shopify theme.
|
||||
exerpt:
|
||||
In this first blog post I want to share some of the things I've learned during
|
||||
this process, that way maybe I can help other jump through some of the hard
|
||||
parts of successfully optimizing a Shopify theme.
|
||||
image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1600&ar=16:9&fit=crop
|
||||
---
|
||||
|
||||
# Optimizing an old Shopify Theme
|
||||
|
||||
<img
|
||||
alt="Optimizing an old Shopify Theme"
|
||||
src="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop"
|
||||
srcset="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop 300w,
|
||||
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=500&ar=5:2&fit=crop 500w,
|
||||
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=800&ar=5:2&fit=crop 800w,
|
||||
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1024&ar=5:2&fit=crop 1024w"
|
||||
sizes="(max-width: 310px) 300px,
|
||||
(max-width: 510px) 500px,
|
||||
(max-width: 810px) 800px,
|
||||
1024px"
|
||||
/>
|
||||
|
||||
## Some tips and recommendations for optimizing and boosting performance of an old Shopify theme.
|
||||
|
||||
At <a href="https://acromatico.dev" target="_blank">Acromático Development</a>
|
||||
we are allways helping our clients optimize their Shopify stores, not only the
|
||||
UX and UI, but also the performance and speed of the site. Optimizing a Shopify
|
||||
theme is not a simple task, it has been a long learning path that continues
|
||||
evolving and improving as we test and try new methodologies.
|
||||
|
||||
In this first blog post I want to share some of the things I've learned during
|
||||
this process, that way maybe I can help other jump through some of the hard
|
||||
parts of successfully optimizing a Shopify theme.
|
||||
|
||||
### Initial Analysis
|
||||
|
||||
Let's start by (in a really broad sense) diferenciating the optimizations that
|
||||
can be done on a Site. We started by separating them in two main areas:
|
||||
|
||||
1. **Optimizing the Server:** Changes that have to do with where you are hosting
|
||||
the page, things like having a fast and reliable CDN, having all the correct
|
||||
catching policies, how fast the server responds, how near to the end user the
|
||||
server is located, etc. This part is nearly imposible to optimize for a
|
||||
Shopify theme since all this part is controlled by Shopify itself.
|
||||
2. **Optimizing the Code:** Changes that have to be done on the code of the
|
||||
theme, here's where most of our efforts will be focused. Things like
|
||||
preconnecting to 3rd party servers, preloading assets, removing unused code,
|
||||
optimizing images and orchestating CSS and JavaScript loading times are the
|
||||
things we are going to focus on this section.
|
||||
|
||||
### Optimizing the Code
|
||||
|
||||
I know there are many ways to aproach the optimization the differents parts of
|
||||
the code, but this is the process I follow, hope that it makes sense for the
|
||||
mayority of the cases. For this example I will use one of our client's themes
|
||||
(we have previus authorisation to use this theme as an example), the store is
|
||||
calles <a href="https://lycklig.com.mx" target="_blank">Lycklig Party Shop</a> and they sell party supplies. They have been in
|
||||
Shopify since 2016 and the theme has been the same sinse the start of the store.
|
||||
|
||||
#### Preconnecting to 3rd party servers and preloading known assets
|
||||
@ -1,13 +1,14 @@
|
||||
---
|
||||
import MainLayout from "../layouts/main.astro";
|
||||
import profileData from '../data/profile.json';
|
||||
import Icon from "../components/icon.svelte";
|
||||
|
||||
type IconData = {
|
||||
name: string;
|
||||
url: string;
|
||||
icon: string;
|
||||
iconUrl?: string;
|
||||
}
|
||||
name: string;
|
||||
url: string;
|
||||
icon: string;
|
||||
iconUrl?: string;
|
||||
}
|
||||
|
||||
const profileName = profileData.name;
|
||||
|
||||
@ -15,7 +16,7 @@ const personalLinks = [];
|
||||
const profesionalLinks = [];
|
||||
|
||||
for (let link of profileData.personalLinks) {
|
||||
const withUrl: IconData = {...link};
|
||||
const withUrl: IconData = { ...link };
|
||||
|
||||
withUrl.iconUrl = `/icons/${link.icon}.svg`;
|
||||
|
||||
@ -23,7 +24,7 @@ for (let link of profileData.personalLinks) {
|
||||
}
|
||||
|
||||
for (let link of profileData.profesionalLinks) {
|
||||
const withUrl: IconData = {...link};
|
||||
const withUrl: IconData = { ...link };
|
||||
|
||||
withUrl.iconUrl = `/icons/${link.icon}.svg`;
|
||||
|
||||
@ -31,86 +32,20 @@ for (let link of profileData.profesionalLinks) {
|
||||
}
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{profileName} | Links</title>
|
||||
<meta name="description" content={profileData.description}>
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={`${profileName} | Links`} />
|
||||
<meta property="og:description" content={profileData.description} />
|
||||
<meta property="og:image" content="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf" />
|
||||
<meta property="og:url" content={Astro.site} />
|
||||
<link rel="canonical" href={Astro.site}>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
<MainLayout>
|
||||
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
|
||||
Personal Links</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
|
||||
|
||||
gtag('config', 'G-45FLVCCPTZ');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-white dark:bg-gray-900">
|
||||
<header class="w-full flex flex-col justify-center items-center pt-10 ">
|
||||
<img
|
||||
class="w-1/2 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square"
|
||||
loading="lazy"
|
||||
src="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"
|
||||
sizes="(max-width: 640px) 50vw,
|
||||
208px"
|
||||
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 50w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_100,w_100/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 100w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_200,w_200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 200w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_600,w_600/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 600w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_900,w_900/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 900w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1200w,
|
||||
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1500,w_1500/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1500w"
|
||||
alt="Rafael González"
|
||||
>
|
||||
<h1 class="font-mono font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">{profileName}</h1>
|
||||
<p class="font-mono text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">{profileData.description}</p>
|
||||
<a href="/main.vcf" target="_blank" rel="noopener" class="md:invisible"><button class="mt-4 p-4 bg-black text-white dark:text-black dark:bg-white border-2 border-black rounded-md font-bold uppercase tracking-wide">Agregar a Contactos</button></a>
|
||||
</header>
|
||||
<main>
|
||||
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">Personal Links</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
|
||||
|
||||
{personalLinks.map(perLink => (
|
||||
<Icon client:load perLink={perLink} profileName={profileName} />
|
||||
))}
|
||||
</div>
|
||||
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">Profesional Links</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
|
||||
{profesionalLinks.map(perLink => (
|
||||
<Icon client:load perLink={perLink} profileName={profileName} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
<footer class="px-3 py-8">
|
||||
<p class="dark:text-white text-center">Powered by <a class="underline" href="https://acromatico.dev" target="_blank" rel="noopener">Acromático Development</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
{personalLinks.map(perLink => (
|
||||
<Icon client:load perLink={perLink} profileName={profileName} />
|
||||
))}
|
||||
</div>
|
||||
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
|
||||
Profesional Links</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
|
||||
{profesionalLinks.map(perLink => (
|
||||
<Icon client:load perLink={perLink} profileName={profileName} />
|
||||
))}
|
||||
</div>
|
||||
</MainLayout>
|
||||
42
src/styles/base.css
Normal file
42
src/styles/base.css
Normal file
@ -0,0 +1,42 @@
|
||||
/* The integration's default injected base.css fileeee */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
main h1 {
|
||||
@apply text-4xl font-bold mb-8 text-center uppercase;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
@apply text-2xl font-bold mb-8 uppercase;
|
||||
}
|
||||
|
||||
main h3 {
|
||||
@apply text-xl font-bold mb-8;
|
||||
}
|
||||
|
||||
main h4 {
|
||||
@apply text-sm font-bold mb-8 uppercase;
|
||||
}
|
||||
|
||||
main ol {
|
||||
@apply list-decimal mb-8 ml-8;
|
||||
}
|
||||
|
||||
main li:not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
main a {
|
||||
@apply text-green-500;
|
||||
}
|
||||
|
||||
main p {
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
main img {
|
||||
@apply w-full mb-8 aspect-[5/2] object-cover;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user