Robert Hall
5 years ago
@ -0,0 +1,80 @@
|
|||||||
|
export const companies = [
|
||||||
|
{
|
||||||
|
href: "https://1password.com",
|
||||||
|
filename: "1password.png",
|
||||||
|
alt: "1Password logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://www.alaskaair.com/",
|
||||||
|
style: "background-color: #01426a;",
|
||||||
|
filename: "alaskaairlines.svg",
|
||||||
|
alt: "Alaska Airlines logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://avast.com",
|
||||||
|
filename: "avast.svg",
|
||||||
|
alt: "Avast logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://chess.com",
|
||||||
|
style: "background-color: #312e2b;",
|
||||||
|
filename: "chess.svg",
|
||||||
|
alt: "Chess.com logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://fusioncharts.com",
|
||||||
|
filename: "fusioncharts.svg",
|
||||||
|
alt: "FusionCharts logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://godaddy.com",
|
||||||
|
filename: "godaddy.svg",
|
||||||
|
alt: "GoDaddy logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://www.ibm.com/",
|
||||||
|
filename: "ibm.svg",
|
||||||
|
alt: "IBM logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://media.lesechos.fr/infographie",
|
||||||
|
filename: "les-echos.svg",
|
||||||
|
alt: "Les Echos",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://www.philips.co.uk",
|
||||||
|
filename: "philips.svg",
|
||||||
|
alt: "Philips logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://global.rakuten.com/corp/",
|
||||||
|
filename: "rakuten.svg",
|
||||||
|
alt: "Rakuten logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://razorpay.com",
|
||||||
|
filename: "razorpay.svg",
|
||||||
|
alt: "Razorpay logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://www.se.com",
|
||||||
|
style: " background-color: #3dcd58; ",
|
||||||
|
filename: "Schneider_Electric.svg",
|
||||||
|
alt: "Schneider Electric",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://squareup.com",
|
||||||
|
filename: "square.svg",
|
||||||
|
alt: "Square",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://nytimes.com",
|
||||||
|
filename: "nyt.svg",
|
||||||
|
alt: "The New York Times logo",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "https://transloadit.com",
|
||||||
|
filename: "transloadit.svg",
|
||||||
|
alt: "Transloadit",
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<script>
|
||||||
|
import { companies } from './WhosUsingSvelte.js';
|
||||||
|
const randomizer = ({prominent}) => Math.random();
|
||||||
|
const doSort = (a, b) => randomizer(b) - randomizer(a);
|
||||||
|
const sortedCompanies = companies.sort(doSort);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.logos {
|
||||||
|
margin: 1em 0 0 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 0.5em 0.5em 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: 2px solid var(--second);
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
picture,
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@media (min-width: 540px) {
|
||||||
|
a {
|
||||||
|
height: 60px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="logos">
|
||||||
|
{#each sortedCompanies as {href, filename, alt, style, picture, span}, index}
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
{href}
|
||||||
|
style="{style || ''}"
|
||||||
|
>
|
||||||
|
{#if picture}
|
||||||
|
<picture>
|
||||||
|
{#each picture as {type, srcset}}
|
||||||
|
<source {type} {srcset}>
|
||||||
|
{/each}
|
||||||
|
<img src="/whos-using-svelte/{filename}" {alt} loading="lazy">
|
||||||
|
</picture>
|
||||||
|
{:else}
|
||||||
|
<img src="/whos-using-svelte/{filename}" {alt} loading="lazy">
|
||||||
|
{#if span}
|
||||||
|
<span>{span}</span>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 705 B |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |