dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved mobile support

Browse source
This commit is contained in:
Daniel Bulant 2022-05-17 14:38:25 +02:00
parent f607c6fa2f
commit 9bfc346b16
3 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/post.svelte
View file

@ -62,10 +62,18 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
width: 100%; width: 100%;
height: 150px;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
}
.data {
flex-grow: 1;
}
@media (max-width: 768px) {
.post {
flex-wrap: wrap;
}
} }
h4 { h4 {
margin: 5px 0; margin: 5px 0;
@ -82,13 +90,13 @@
margin-top: 5px; margin-top: 5px;
object-fit: cover; object-fit: cover;
box-shadow: 0 0 5px rgb(145, 145, 145); box-shadow: 0 0 5px rgb(145, 145, 145);
border-radius: 5px;
} }
.dark .thumbnail { .dark .thumbnail {
box-shadow: 0 0 5px rgb(0, 0, 0); box-shadow: 0 0 5px rgb(0, 0, 0);
} }
img { img {
height: 100%; height: 100%;
border-radius: 5px;
} }
/* .author img { /* .author img {
height: 100%; height: 100%;

2
src/lib/layouts/post.svelte
View file

@ -55,7 +55,7 @@
<hr class:dark={$darkmode}> <hr class:dark={$darkmode}>
<footer> <footer>
Daniel Bulant - Blog posts CC-BY-SA (unless otherwise specified) Daniel Bulant - Blog&nbsp;posts CC-BY-SA (unless&nbsp;otherwise&nbsp;specified)
</footer> </footer>
<style> <style>

9
src/routes/posts/quick-comparison-of-s3/_compare/Compare.svelte
View file

@ -12,26 +12,31 @@
const data = [ const data = [
{ {
name: "Cloudflare R2", name: "Cloudflare R2",
nameShort: "R2",
price: ({ storage, egress, fileCount, dataRetention }) => 10 * storage + Math.max(0, fileCount-10e6)*0.36/1e6, price: ({ storage, egress, fileCount, dataRetention }) => 10 * storage + Math.max(0, fileCount-10e6)*0.36/1e6,
color: "orange", color: "orange",
link: "cloudflare-r2" link: "cloudflare-r2"
}, { }, {
name: "Wasabi", name: "Wasabi",
nameShort: "Wasabi",
price: ({ storage, egress, fileCount, dataRetention }) => 5 * storage * (90/dataRetention), price: ({ storage, egress, fileCount, dataRetention }) => 5 * storage * (90/dataRetention),
color: "green", color: "green",
link: "wasabi" link: "wasabi"
}, { }, {
name: "Backblaze B2", name: "Backblaze B2",
nameShort: "B2",
price: ({ storage, egress, fileCount, dataRetention }) => 4 * storage + 10 * egress + Math.max(0, fileCount - 2500)*4/10e6, price: ({ storage, egress, fileCount, dataRetention }) => 4 * storage + 10 * egress + Math.max(0, fileCount - 2500)*4/10e6,
color: "red", color: "red",
link: "backblaze-b2" link: "backblaze-b2"
}, { }, {
name: "DO Spaces", name: "DO Spaces",
nameShort: "Spaces",
price: ({ storage, egress, fileCount, dataRetention }) => 20 * storage + 10 * egress, price: ({ storage, egress, fileCount, dataRetention }) => 20 * storage + 10 * egress,
color: "blue", color: "blue",
link: "digitalocean-spaces" link: "digitalocean-spaces"
}, { }, {
name: "Storj.io", name: "Storj.io",
nameShort: "Storj",
price: ({ storage, egress, fileCount, dataRetention }) => 4 * storage + 7 * egress, price: ({ storage, egress, fileCount, dataRetention }) => 4 * storage + 7 * egress,
color: "rgb(0,120,180)", color: "rgb(0,120,180)",
link: "storjio" link: "storjio"
@ -51,7 +56,7 @@
return num; return num;
} }
const m = spring(); const m = spring();
$: size = w < 480 ? 'small' : w < 640 ? 'medium' : 'large'; $: size = w < 640 ? 'small' : 'large';
$: $m = data.map((d, i) => ({ x: i, y: d.price({ storage, egress, fileCount, dataRetention }) })); $: $m = data.map((d, i) => ({ x: i, y: d.price({ storage, egress, fileCount, dataRetention }) }));
let max = spring(); let max = spring();
$: $max = Math.max(50, ...data.map(d => d.price({ storage, egress, fileCount, dataRetention }) + d.price({ storage, egress, fileCount, dataRetention }) * 0.2)); $: $max = Math.max(50, ...data.map(d => d.price({ storage, egress, fileCount, dataRetention }) + d.price({ storage, egress, fileCount, dataRetention }) * 0.2));
@ -100,7 +105,7 @@
<Pancake.Grid vertical count={5} let:value> <Pancake.Grid vertical count={5} let:value>
<span class="x label"> <span class="x label">
<a href="#{data[value].link}">{data[value].name}</a> <a href="#{data[value].link}">{size === "large" ? data[value].name : data[value].nameShort}</a>
</span> </span>
</Pancake.Grid> </Pancake.Grid>
</Pancake.Chart> </Pancake.Chart>