Skip to content

Commit

Permalink
Merge pull request #52 from jakebogan01/issue-43-add-sponsors-section
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuelink
xuelink authored Apr 15, 2024
2 parents 6df2a09 + 9f837ac commit 963facb
Show file tree
Hide file tree
Showing 3 changed files with 473 additions and 0 deletions.
194 changes: 194 additions & 0 deletions src/lib/components/organisms/BCSponsors.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<section id="bcsponsors">
<div>
<h2>Powered by companies from world's growing organizations</h2>
<div class="sponsor-container">
<div>
<a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer">
<svg
fill="var(--color--text)"
width="58px"
height="58px"
viewBox="0 -3.5 31 31"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
d="m21.462 18.152c.071-.194.112-.417.112-.651 0-.394-.117-.76-.318-1.067l.005.007c-.321-.413-.817-.677-1.376-.677-.002 0-.004 0-.006 0l-11.257-.146c-.001 0-.001 0-.002 0-.071 0-.134-.036-.171-.09v-.001c-.023-.038-.037-.083-.037-.132 0-.025.004-.049.01-.071v.002c.042-.112.143-.192.264-.202h.001l11.353-.146c1.505-.168 2.749-1.135 3.309-2.461l.01-.027.655-1.687c.017-.041.027-.088.027-.138 0-.029-.003-.057-.01-.084v.002c-.765-3.332-3.704-5.78-7.216-5.78-3.234 0-5.983 2.076-6.987 4.968l-.016.052c-.549-.416-1.244-.667-1.997-.667-1.718 0-3.131 1.303-3.306 2.974l-.001.014c-.01.101-.016.218-.016.336 0 .293.036.578.104.85l-.005-.024c-2.551.075-4.59 2.161-4.59 4.722v.006c.002.244.019.481.05.715l-.003-.029c.017.108.108.19.219.192h20.776c.125-.002.23-.086.265-.2l.001-.002z"
/>

<path
d="m25.046 10.919c-.101 0-.21 0-.311.008-.077.005-.141.057-.164.127v.001l-.439 1.528c-.071.194-.112.417-.112.651 0 .394.117.76.318 1.067l-.005-.007c.321.413.817.677 1.376.677h.006l2.4.146h.002c.071 0 .134.036.171.09v.001c.023.038.037.084.037.133 0 .024-.003.048-.01.07v-.002c-.042.112-.143.192-.264.202h-.001l-2.496.146c-1.507.162-2.754 1.128-3.315 2.455l-.01.027-.182.467c-.006.015-.01.032-.01.051 0 .073.059.132.132.132h.007 8.578.003c.103 0 .189-.069.216-.163v-.002c.144-.499.227-1.072.228-1.664-.002-3.394-2.754-6.145-6.149-6.145-.002 0-.003 0-.005 0z"
/>
</g>
</svg>
</a>
</div>
<div>
<a href="https://www.digitalocean.com" target="_blank" rel="noopener noreferrer">
<svg
width="52px"
height="52px"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<g fill="var(--color--text)">
<path
d="M8 12.208v2.652c4.495 0 7.988-4.34 6.518-9.053a6.642 6.642 0 00-4.333-4.333C5.48.004 1.14 3.504 1.14 7.992h2.652c0-2.815 2.792-4.993 5.756-3.92a3.975 3.975 0 012.372 2.372c1.08 2.961-1.1 5.75-3.912 5.756V9.563H5.363v2.645H8z"
/>
<path
d="M5.363 14.245H3.325v-2.037h2.038v2.037zM1.622 12.208h1.703v-1.704H1.622v1.704z"
/>
</g>
</g>
</svg>
</a>
</div>
<div>
<a href="https://www.backblaze.com" target="_blank" rel="noopener noreferrer">
<svg
width="50px"
height="50px"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
fill="var(--color-text)"
>
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<circle cx="512" cy="512" r="512" style="fill:var(--color-text)" />
<path
d="M450.77 205.55s85.35 74.82 73.92 141c-5.15 29.87-44.43 78.25-23.22 124.55 22.85 49.88 34.72 146.13-68.1 121.26-101.37-24.3-93.56-148.7-18.22-214.03s50.55-139.56 35.62-172.78zM528.65 430c-5.67 50.48 50.18 100.8 5.75 169.2C504 646.54 551 713.14 611.68 701c66.31-13.22 83-55.18 81.24-103.94-2.31-61.9-27-79.15-81.69-125.59-59.44-50.18-13.66-145.38-13.66-145.38S535.22 374.45 528.65 430zM350.49 651.31c11.87 33.3 30.24 86.69 102.89 113.79 61.15 22.92 146.8 27 196.15-36.29 11.35-14.19-3.58-8.66-18.52-3a119.47 119.47 0 0 1-111.47-21.41c-42-35-25.61-74.22-46.67-74.67-69.44-1.49-105.66-28.6-124.4-51.67-4.25-5.44-10.82 37.34 2.02 73.25z"
style="fill:var(--color--page-background)"
/>
</g>
</svg>
</a>
</div>
<div>
<a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">
<svg
width="50px"
height="50px"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14 4.21281L7.5 0.421143L1 4.21281V10.7872L2.00634 11.3742L4.06264 10.5422C4.62921 10.313 5.00004 9.7629 5.00004 9.15171V4H6.00004V9.15171C6.00004 10.1704 5.382 11.0871 4.43772 11.4692L3.09826 12.0112L7.5 14.5788L14 10.7872V4.21281ZM7 6C7 4.89543 7.89543 4 9 4H10.1667C11.1792 4 12 4.82081 12 5.83333V6H11V5.83333C11 5.3731 10.6269 5 10.1667 5H9C8.44772 5 8 5.44772 8 6C8 6.55228 8.44772 7 9 7H10C11.1046 7 12 7.89543 12 9C12 10.1046 11.1046 11 10 11H9C7.89543 11 7 10.1046 7 9H8C8 9.55228 8.44772 10 9 10H10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8H9C7.89543 8 7 7.10457 7 6Z"
fill="var(--color--text)"
/>
</g>
</svg>
</a>
</div>
<div>
<a href="https://appwrite.io" target="_blank" rel="noopener noreferrer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="45"
height="45"
fill="none"
viewBox="0 0 24 24"
><path
fill="var(--color--text)"
d="M24.443 16.432v5.478H10.752c-3.989 0-7.472-2.203-9.335-5.478A11.041 11.041 0 0 1 0 11.695v-1.48a10.97 10.97 0 0 1 .381-2.247C1.661 3.368 5.82 0 10.751 0c4.934 0 9.092 3.37 10.371 7.967h-5.854c-.96-1.499-2.624-2.49-4.516-2.49s-3.555.991-4.516 2.49a5.47 5.47 0 0 0-.67 1.494 5.562 5.562 0 0 0-.202 1.494 5.5 5.5 0 0 0 1.69 3.983 5.32 5.32 0 0 0 3.698 1.494z"
/><path
fill="var(--color--text)"
d="M24.443 9.46v5.478h-9.994a5.5 5.5 0 0 0 1.691-3.983 5.56 5.56 0 0 0-.203-1.494z"
/>
</svg>
</a>
</div>
</div>
</div>
</section>

<style lang="scss">
@import '$lib/scss/breakpoints.scss';
$yellow: var(--color--primary);
#bcsponsors {
padding: 80px 0 80px 0;
@include for-phone-only {
padding: 40px 0 50px;
}
h2 {
text-align: center;
}
.sponsor-container {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 2.5rem;
row-gap: 2.5rem;
align-items: center;
margin-top: 2.5em;
@include for-tablet-portrait-down {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
@include for-phone-only {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
div {
grid-column: span 1 / span 1;
max-height: 4rem;
display: flex;
justify-content: center;
@include for-tablet-portrait-down {
grid-column: span 2 / span 2;
&:nth-child(4) {
grid-column-start: 2;
}
&:nth-child(5) {
grid-column-start: auto;
}
}
@include for-phone-only {
&:nth-child(4) {
grid-column-start: auto;
}
&:nth-child(5) {
grid-column-start: 2;
}
}
a {
display: inline-block;
svg,
path,
g {
object-fit: contain;
width: 100%;
transition: fill 0.3s ease-in-out;
}
&:hover svg,
&:hover path {
fill: var(--color--secondary);
}
}
}
}
}
</style>
Loading

0 comments on commit 963facb

Please sign in to comment.