(home) card styles
This commit is contained in:
parent
2e168b32eb
commit
0a2e91ad77
|
@ -1,17 +1,25 @@
|
|||
---
|
||||
const email = "maciej@kamoshi.org";
|
||||
const discord = "kamov#2485";
|
||||
import { Maybe } from 'purify-ts';
|
||||
interface Props {
|
||||
email?: string;
|
||||
discord?: string;
|
||||
}
|
||||
---
|
||||
<section class="p-card p-card-contact">
|
||||
<h2 class="p-card__header">Contact</h2>
|
||||
<div class="p-card-contact__grid">
|
||||
{email && (
|
||||
<img class="p-card-contact__image" width="38" height="25" src="/static/svg/email.svg" alt="email">
|
||||
<a class="p-card-contact__text" href={`mailto:${email}`}>{email}</a>
|
||||
)}
|
||||
{discord && (
|
||||
<img class="p-card-contact__image" width="38" height="30" src="/static/svg/discord.svg" alt="discord">
|
||||
<span class="p-card-contact__text">{discord}</span>
|
||||
)}
|
||||
<section class="p-card home-card-contact">
|
||||
<h2 class="p-card__heading">Contact</h2>
|
||||
<div class="home-card-contact__grid">
|
||||
{Maybe.fromNullable(Astro.props.email)
|
||||
.map(email => [`mailto:${email}`, email] as const)
|
||||
.map(([href, email]) => [
|
||||
<img class="home-card-contact__icon" width="38" height="25" src="/static/svg/email.svg" alt="email">,
|
||||
<a class="home-card-contact__text" href={href}>{email}</a>
|
||||
]).extract()
|
||||
}
|
||||
{Maybe.fromNullable(Astro.props.discord)
|
||||
.map(discord => [
|
||||
<img class="home-card-contact__icon" width="38" height="30" src="/static/svg/discord.svg" alt="discord">,
|
||||
<span class="home-card-contact__text">{discord}</span>
|
||||
]).extract()
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -4,9 +4,9 @@ import Image from "astro/components/Image.astro";
|
|||
|
||||
const alt = "A building covered by multicolor Ivy.";
|
||||
---
|
||||
<section class="p-card p-card-image">
|
||||
<h2 class="p-card__header">Image of the Month</h2>
|
||||
<a href={image.src}>
|
||||
<Image src={image} alt={alt} class="p-card-image__image" />
|
||||
<section class="p-card home-card-image">
|
||||
<h2 class="p-card__heading">Image of the Month</h2>
|
||||
<a href={image.src} class="home-card-image__link">
|
||||
<Image src={image} alt={alt} class="home-card-image__image" />
|
||||
</a>
|
||||
</section>
|
||||
|
|
|
@ -16,7 +16,7 @@ import Base from "./Base.astro";
|
|||
<!-- -->
|
||||
<PhotoCard />
|
||||
<!-- -->
|
||||
<ContactCard />
|
||||
<ContactCard email="maciej@kamoshi.org" discord="kamov#2485" />
|
||||
</aside>
|
||||
</main>
|
||||
</Base>
|
||||
|
|
|
@ -33,6 +33,60 @@
|
|||
}
|
||||
}
|
||||
|
||||
.p-card {
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-l);
|
||||
|
||||
&__heading {
|
||||
line-height: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
font-family: var(--serif);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.home-card-image {
|
||||
&__link {
|
||||
display: block;
|
||||
}
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.home-card-contact {
|
||||
a {
|
||||
color: var(--c-primary);
|
||||
font-family: var(--serif);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
text-decoration: unset;
|
||||
font-size: 1.1em;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 0.5em;
|
||||
}
|
||||
&__image {
|
||||
max-width: 2em;
|
||||
height: auto;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
&__text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-jp {
|
||||
max-height: 18em;
|
||||
min-width: fit-content;
|
||||
|
|
|
@ -1,44 +0,0 @@
|
|||
.p-card {
|
||||
padding: 1em;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
box-shadow: var(--shadow-l);
|
||||
|
||||
&__header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-latest {
|
||||
&__pages {
|
||||
display: grid;
|
||||
grid-template-columns: 4em 1fr;
|
||||
row-gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-contact {
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3em 1fr;
|
||||
row-gap: 0.5em;
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: 2em;
|
||||
height: auto;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -20,7 +20,6 @@
|
|||
@use 'partials/nav';
|
||||
@use 'partials/footer';
|
||||
@use 'partials/github';
|
||||
@use 'partials/card';
|
||||
@use 'partials/header';
|
||||
@use 'partials/pagelist';
|
||||
@use 'partials/toc';
|
||||
|
|
Loading…
Reference in a new issue