mirror of https://github.com/gtitov/wcwb.git
Compare commits
1 Commits
a6eadac66e
...
d313bac332
| Author | SHA1 | Date |
|---|---|---|
gman
|
d313bac332 | 3 months ago |
|
After Width: | Height: | Size: 183 KiB |
@ -0,0 +1,48 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="sl-flex" aria-labelledby="about-astro-heading">
|
||||
<small id="about-astro-heading">
|
||||
{title}
|
||||
<span class="sr-only">Astro</span>
|
||||
</small>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 301 79"
|
||||
fill="var(--sl-color-white)"
|
||||
>
|
||||
<path
|
||||
d="M20.8 66.8c-3.6-3.2-4.6-10-3.1-15 2.5 3.2 6.1 4.2 9.8 4.7 5.7.9 11.3.6 16.5-2l1.9-1.1a9 9 0 0 1 .4 4.3 12 12 0 0 1-5 8.5l-3.6 2.4c-3.6 2.4-4.6 5.3-3.2 9.4l.1.5c-1.8-.8-3.2-2-4.2-3.6-1-1.7-1.6-3.5-1.6-5.5 0-1 0-2-.2-3-.3-2.3-1.4-3.3-3.4-3.4a4 4 0 0 0-4.3 3.3l-.1.5ZM.5 51s10.5-5 21-5l8-24.6c.3-1.2 1.2-2 2.2-2 1 0 1.8.8 2.1 2l8 24.5c12.5 0 21 5.1 21 5.1L45 2.4C44.4.9 43.6 0 42.4 0H21c-1.2 0-2 1-2.6 2.4L.5 51Zm111-7c0 4.3-5.4 6.8-12.8 6.8-4.9 0-6.6-1.2-6.6-3.7 0-2.6 2.1-3.9 7-3.9 4.3 0 8 .1 12.4.6v.2Zm0-5.4a56 56 0 0 0-11.4-1c-14 0-20.5 3.4-20.5 11 0 8 4.5 11 14.9 11 8.8 0 14.7-2.2 17-7.6h.3l-.2 3.6c0 2.8.5 3 2.8 3h10.9c-.6-1.6-1-6.3-1-10.4l.2-12c0-9.1-5.4-14.8-22.4-14.8a83 83 0 0 0-21.7 3C81 27 82 32 82.3 35.2c5.3-2.5 13-3.6 18.8-3.6 8.2 0 10.4 1.9 10.4 5.6v1.5Zm29.8 7.9c-1.5.2-3.5.2-5.5.2-2.2 0-4.2-.1-5.6-.3V48c0 7.5 4.9 11.8 22 11.8 16.3 0 21.6-4.3 21.6-11.8 0-7.2-3.5-10.8-19-11.5-11.9-.6-13-1.9-13-3.4 0-1.7 1.6-2.6 9.6-2.6 8.3 0 10.6 1.1 10.6 3.5v.6a120.9 120.9 0 0 1 11 0l.1-1.4c0-8.8-7.3-11.7-21.5-11.7-15.9 0-21.3 4-21.3 11.5 0 6.8 4.3 11 19.6 11.7 11.3.4 12.5 1.6 12.5 3.4 0 1.8-1.8 2.7-9.7 2.7-9 0-11.4-1.3-11.4-3.9v-.3ZM193.2 15c-4.3 4-12 8-16.3 9v8.5l4 .1-.1 12.8c0 8 4.2 14 17.2 14 5.5 0 9.1-.7 13.7-1.6-.5-3-1-7.4-1.2-10.8-2.7.9-6.1 1.3-10 1.3-5.2 0-7.3-1.4-7.3-5.5v-10l17.5.2c0-3 0-7.6.2-10.6-5.7.2-12.1.2-17.4.2l.1-7.6h-.4Zm35.3 15.8.1-8.4h-11.8a752.4 752.4 0 0 1 0 36.2h13.5c-.2-3.5-.3-9.6-.3-14.7 0-8.1 3.3-10.5 10.8-10.5 3.5 0 6 .5 8.2 1.2 0-3 .6-9 1-11.6-2.3-.6-4.7-1-7.7-1-6.5-.1-11.2 2.5-13.4 8.8h-.4Zm59 9.5c0 6.5-4.7 9.6-12.1 9.6-7.4 0-12.1-2.9-12.1-9.6 0-6.7 4.8-9.2 12-9.2 7.4 0 12.2 2.7 12.2 9.2Zm12.3-.3c0-13-10.1-18.8-24.4-18.8-14.4 0-24.2 5.8-24.2 18.8s9.1 20 24.1 20c15.1 0 24.5-7 24.5-19.9Z"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
<style>
|
||||
article {
|
||||
max-width: 40rem;
|
||||
margin-inline: auto;
|
||||
padding-block: 5rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
article > :global(*) {
|
||||
max-width: 50ch;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
small {
|
||||
color: var(--sl-color-gray-3);
|
||||
}
|
||||
svg {
|
||||
width: 15rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
interface Props {
|
||||
name: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { name, title } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="testimonial">
|
||||
<blockquote class="quote">
|
||||
<slot />
|
||||
</blockquote>
|
||||
<div class="footer">
|
||||
<div>
|
||||
<p class="name">{name}</p>
|
||||
<span class="title">{title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
.testimonial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5em;
|
||||
}
|
||||
@media (min-width: 50rem) {
|
||||
.testimonial {
|
||||
gap: 2em;
|
||||
}
|
||||
}
|
||||
.quote {
|
||||
position: relative;
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
.quote::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
inset-block: 0.5em;
|
||||
inset-inline-start: 0;
|
||||
border-inline-start: 1px solid var(--sl-color-text-accent);
|
||||
}
|
||||
.quote > :global(* + *) {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: var(--sl-text-h4);
|
||||
color: var(--sl-color-white);
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
.title {
|
||||
color: var(--sl-color-text-accent);
|
||||
line-height: 2px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="testimonial-wrapper not-content" data-pagefind-ignore>
|
||||
<h2 class="testimonial-grid-title">{title}</h2>
|
||||
<ul class="testimonial-grid">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.testimonial-wrapper {
|
||||
margin-block: 7rem 2.5rem !important;
|
||||
font-size: clamp(
|
||||
var(--sl-text-sm),
|
||||
calc(0.5rem + 1vw),
|
||||
var(--sl-text-body)
|
||||
);
|
||||
}
|
||||
.testimonial-grid-title {
|
||||
text-align: center;
|
||||
font-size: var(--sl-text-h3);
|
||||
font-weight: 600;
|
||||
color: var(--sl-color-white);
|
||||
line-height: var(--sl-line-height-headings);
|
||||
}
|
||||
.testimonial-grid {
|
||||
margin-top: 2.5rem;
|
||||
display: grid;
|
||||
gap: 5em;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
@media (min-width: 50rem) {
|
||||
.testimonial-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue