Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 43 add sponsors section #52

Merged
merged 5 commits into from
Apr 15, 2024
Merged

Issue 43 add sponsors section #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53ffdaf
adds sponsor section on home page
jakebogan01 Apr 14, 2024
c4a2e7b
adds correct logos to sponsors
jakebogan01 Apr 15, 2024
8ec7186
separates sponsor components
jakebogan01 Apr 15, 2024
685d044
Update sponsor headings in BCSponsors.svelte and CSponsors.svelte
xuelink Apr 15, 2024
9f837ac
Uncomment sponsor headings in BCSponsors.svelte and CSponsors.svelte
xuelink Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 194 additions & 0 deletions src/lib/components/organisms/BCSponsors.svelte
View file
Open in desktop
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
Loading