rafaremo
/
rafa-links
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added new styles

This commit is contained in:
Rafael González 2022-08-18 19:43:54 -05:00
parent dc42b224b7
commit 6d6675eaf2
4 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/icon.svelte
View File

@ -2,8 +2,6 @@
export let perLink; export let perLink;
export let profileName; export let profileName;
console.log(perLink)
function handleClick(event){ function handleClick(event){
gtag('event', 'view_item', { gtag('event', 'view_item', {
'event_category' : 'Links', 'event_category' : 'Links',

6
src/layouts/main.astro
View File

@ -4,7 +4,7 @@ import '../styles/base.css';
const profileName = profileData.name; const profileName = profileData.name;
const { frontmatter, title: titleProp, description: descriptionProp } = Astro.props; const { frontmatter, title: titleProp, description: descriptionProp, blog } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
@ -51,7 +51,7 @@ const { frontmatter, title: titleProp, description: descriptionProp } = Astro.pr
</script> </script>
</head> </head>
<body class="bg-white dark:bg-gray-900"> <body class={`bg-white dark:bg-gray-900`}>
<header class="w-full flex flex-col justify-center items-center pt-10 "> <header class="w-full flex flex-col justify-center items-center pt-10 ">
<img <img
class="w-1/3 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square" class="w-1/3 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square"
@ -72,7 +72,7 @@ const { frontmatter, title: titleProp, description: descriptionProp } = Astro.pr
<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> <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> <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> </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"> <main class={`font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white ${blog || frontmatter ? "blog": ""}`}>
<slot/> <slot/>
</main> </main>
<footer class="px-3 py-8"> <footer class="px-3 py-8">

2
src/pages/blog.astro
View File

@ -2,7 +2,7 @@
import MainLayout from "../layouts/main.astro"; import MainLayout from "../layouts/main.astro";
--- ---
<MainLayout title="Recent Blog Entries" description="List of my most resent blog entries."> <MainLayout title="Recent Blog Entries" description="List of my most resent blog entries." blog={true}>
<h1 class="text-4xl">Recent Blog Entries</h1> <h1 class="text-4xl">Recent Blog Entries</h1>
<div class="grid grid-cols-2 md:grid-cols-4"> <div class="grid grid-cols-2 md:grid-cols-4">

18
src/styles/base.css
View File

@ -4,39 +4,39 @@
@tailwind utilities; @tailwind utilities;
@layer components { @layer components {
main h1 { main.blog h1 {
@apply text-4xl font-bold mb-8 text-center uppercase; @apply text-4xl font-bold mb-8 text-center uppercase;
} }
main h2 { main.blog h2 {
@apply text-2xl font-bold mb-8 uppercase; @apply text-2xl font-bold mb-8 uppercase;
} }
main h3 { main.blog h3 {
@apply text-xl font-bold mb-8; @apply text-xl font-bold mb-8;
} }
main h4 { main.blog h4 {
@apply text-sm font-bold mb-8 uppercase; @apply text-sm font-bold mb-8 uppercase;
} }
main ol { main.blog ol {
@apply list-decimal mb-8 ml-8; @apply list-decimal mb-8 ml-8;
} }
main li:not(:last-child) { main.blog li:not(:last-child) {
@apply mb-4; @apply mb-4;
} }
main a { main.blog a {
@apply text-green-500; @apply text-green-500;
} }
main p { main.blog p {
@apply mb-8; @apply mb-8;
} }
main img { main.blog img {
@apply w-full mb-8 aspect-[5/2] object-cover; @apply w-full mb-8 aspect-[5/2] object-cover;
} }
} }