alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

update cards style

Browse source
This commit is contained in:
Alexander Navarro 2023-08-27 12:54:35 -04:00
parent 525d4de3cd
commit 5bde1eb8d3
4 changed files with 164 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/assets/style/themes.css
View file

@ -4,10 +4,20 @@
/* Variables prefixed with prj to avoid collisions */
:root {
/* Using catppuccin for now, make a theme switcher later */
--prj-bg: var(--ctp-macchiato-base);
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
--prj-bg: var(--ctp-macchiato-mantle);
--prj-text: var(--ctp-macchiato-text);
--prj-surface-1: var(--ctp-macchiato-base);
--prj-surface-2: var(--ctp-macchiato-surface0);
--prj-surface-3: var(--ctp-macchiato-surface1);
--prj-surface-text: var(--ctp-macchiato-text);
--prj-link-text: var(--ctp-macchiato-teal);
--prj-accent-bg: var(--ctp-macchiato-teal);
--prj-accent-text: var(--ctp-macchiato-base);
--prj-primary: var(--ctp-macchiato-teal);
--prj-primary-text: var(--ctp-macchiato-base);
}

118
src/assets/style/utils.css
View file

@ -13,6 +13,16 @@
align-items: center;
}
.vstack {
--prj-gap: var(--prj-spacing-3);
display: flex;
flex-direction: column;
}
.flex-grow {
flex-grow: 1;
}
.grid {
--prj-gap: var(--prj-spacing-3);
--prj-columns: repeat(3, 1fr);
@ -109,3 +119,111 @@
.text-end {
text-align: end;
}
/* Start Margins */
.m-1 {
margin: var(--prj-spacing-1);
}
.m-2 {
margin: var(--prj-spacing-2);
}
.m-3 {
margin: var(--prj-spacing-3);
}
.m-4 {
margin: var(--prj-spacing-4);
}
.m-5 {
margin: var(--prj-spacing-5);
}
.mx-1 {
margin-right: var(--prj-spacing-1) 0;
}
.mx-2 {
margin-right: var(--prj-spacing-2) 0;
}
.mx-3 {
margin-right: var(--prj-spacing-3) 0;
}
.mx-4 {
margin-right: var(--prj-spacing-4) 0;
}
.mx-5 {
margin-right: var(--prj-spacing-5) 0;
}
.my-1 {
margin-right: 0 var(--prj-spacing-1);
}
.my-2 {
margin-right: 0 var(--prj-spacing-2);
}
.my-3 {
margin-right: 0 var(--prj-spacing-3);
}
.my-4 {
margin-right: 0 var(--prj-spacing-4);
}
.my-5 {
margin-right: 0 var(--prj-spacing-5);
}
.mt-1 {
margin-top: var(--prj-spacing-1);
}
.mt-2 {
margin-top: var(--prj-spacing-2);
}
.mt-3 {
margin-top: var(--prj-spacing-3);
}
.mt-4 {
margin-top: var(--prj-spacing-4);
}
.mt-5 {
margin-top: var(--prj-spacing-5);
}
.mb-1 {
margin-bottom: var(--prj-spacing-1);
}
.mb-2 {
margin-bottom: var(--prj-spacing-2);
}
.mb-3 {
margin-bottom: var(--prj-spacing-3);
}
.mb-4 {
margin-bottom: var(--prj-spacing-4);
}
.mb-5 {
margin-bottom: var(--prj-spacing-5);
}
.ml-1 {
margin-left: var(--prj-spacing-1);
}
.ml-2 {
margin-left: var(--prj-spacing-2);
}
.ml-3 {
margin-left: var(--prj-spacing-3);
}
.ml-4 {
margin-left: var(--prj-spacing-4);
}
.ml-5 {
margin-left: var(--prj-spacing-5);
}
.mr-1 {
margin-right: var(--prj-spacing-1);
}
.mr-2 {
margin-right: var(--prj-spacing-2);
}
.mr-3 {
margin-right: var(--prj-spacing-3);
}
.mr-4 {
margin-right: var(--prj-spacing-4);
}
.mr-5 {
margin-right: var(--prj-spacing-5);
}
/* End Margins */

14
src/components/Card.astro
View file

@ -8,12 +8,12 @@ export interface Props {
const { href, title, body } = Astro.props;
---
<div class="card">
<div class="card vstack">
<div class="title">
<slot name="title" />
</div>
<div class="content">
<div class="content flex-grow mb-3">
<slot />
</div>
@ -24,12 +24,22 @@ const { href, title, body } = Astro.props;
<style>
.card {
background-color: var(--prj-surface-1);
color: var(--prj-surface-text);
border: 1px solid var(--prj-accent-bg);
border-radius: 8px;
padding: var(--prj-spacing-2) var(--prj-spacing-3);
}
.card :global(a) {
text-decoration-line: none;
}
.card :global(a):hover {
text-decoration-line: underline;
}
.title > :global(:last-child) {
margin-bottom: var(--prj-spacing-2);
}

32
src/pages/index.astro
View file

@ -1,9 +1,11 @@
---
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { Image } from 'astro:assets';
import portrait from '../assets/images/portrait.jpg';
const games = await getCollection('games', (_, idx) => idx < 3);
---
<Layout title="aleidk">
@ -32,9 +34,9 @@ import portrait from '../assets/images/portrait.jpg';
<Card>
<h3 slot="title">Portafolio</h3>
<ul>
<li><a href="">Entry 1</a></li>
<li><a href="">Entry 2</a></li>
<li><a href="">Entry 3</a></li>
<li><a href="">This is a project X</a></li>
<li><a href="">This is a project Y</a></li>
<li><a href="">This is a project Z</a></li>
</ul>
<div slot="footer" class="text-end">
<a href="">See more...</a>
@ -44,9 +46,17 @@ import portrait from '../assets/images/portrait.jpg';
<Card>
<h3 slot="title">Blog</h3>
<ul>
<li><a href="">Entry 1</a></li>
<li><a href="">Entry 2</a></li>
<li><a href="">Entry 3</a></li>
<li><a href="">How I do X thing because I wanted</a></li>
<li>
<a href=""
>The day I discover something marvelous and everything was better</a
>
</li>
<li>
<a href=""
>This is a clickbait title trying to make you enter this article</a
>
</li>
</ul>
<div slot="footer" class="text-end">
<a href="">See more...</a>
@ -56,9 +66,13 @@ import portrait from '../assets/images/portrait.jpg';
<Card>
<h3 slot="title">Games</h3>
<ul>
<li><a href="">Entry 1</a></li>
<li><a href="">Entry 2</a></li>
<li><a href="">Entry 3</a></li>
{
games.map((item) => (
<li>
<a href={`games/${item.slug}`}>{item.data.Title}</a>
</li>
))
}
</ul>
<div slot="footer" class="text-end">
<a href="">See more...</a>