An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
header.svelte-khlxmc.svelte-khlxmc{}main.svelte-khlxmc.svelte-khlxmc{}footer.svelte-khlxmc.svelte-khlxmc{display:flex;flex:flex-grow;flex-direction:row}footer.svelte-khlxmc nav.svelte-khlxmc{flex:1}@import 'sass/_variables';.inactive.svelte-1iby9by{stroke:var(--color-inactive);fill:var(--color-bg)}hero.svelte-1yhtz8t.svelte-1yhtz8t{display:block;padding:3rem;background-color:var(--color-bg-secondary)}hero.svelte-1yhtz8t h1.svelte-1yhtz8t{font-size:3rem}aside.svelte-1yhtz8t a.svelte-1yhtz8t{--text-decoration:underline}rationale.svelte-1yhtz8t.svelte-1yhtz8t{display:flex;flex-direction:column;font-size:1.5em;padding-left:4rem;padding-right:4rem}#demo-link.svelte-1yhtz8t.svelte-1yhtz8t{margin-top:1.5rem;padding:2rem;font-size:2em}quote.svelte-1yhtz8t.svelte-1yhtz8t{box-shadow:4px 4px 4px 4px var(--color-shadow);padding:1em;font-style:italic;background-color:var(--color-bg-secondary);margin-top:2em}h1.svelte-c8ddwn{font-size:3em}images.svelte-1bny7ze.svelte-1bny7ze{display:grid;grid-template-columns:1fr 1fr}figure:hover content{filter:grayscale(1) blur(6px);background-color:var(--color-bg-secondary);cursor:pointer}figure.svelte-1bny7ze.svelte-1bny7ze{padding:0.5em;position:sticky}figure.svelte-1bny7ze figcaption.svelte-1bny7ze{display:none;color:var(--color-text);font-size:6em;filter:drop-shadow(10px 5px 5px var(--color-shadow-secondary));font-weight:bold}figure.svelte-1bny7ze:hover figcaption.svelte-1bny7ze{display:flex;padding-top:2em;width:100%;justify-content:center;position:absolute;top:0;left:0}:root{--pin-red:#e60023}content.svelte-8rhjm4.svelte-8rhjm4.svelte-8rhjm4{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;padding:1rem}header.svelte-8rhjm4.svelte-8rhjm4.svelte-8rhjm4{width:100%;flex-direction:row}header.svelte-8rhjm4 nav.svelte-8rhjm4.svelte-8rhjm4{flex:1}header.svelte-8rhjm4 nav input.svelte-8rhjm4.svelte-8rhjm4{width:100%}header.svelte-8rhjm4 nav button.svelte-8rhjm4.svelte-8rhjm4{border-radius:30px;background-color:var(--color-bg-secondary);border:unset;color:var(--color-text);padding-left:1rem;padding-right:1rem}header.svelte-8rhjm4 nav button#signup.svelte-8rhjm4.svelte-8rhjm4{background-color:var(--pin-red);color:var(--color-bg)}header.svelte-8rhjm4 nav a.svelte-8rhjm4.svelte-8rhjm4{color:var(--text-color)}header.svelte-8rhjm4 logo.svelte-8rhjm4.svelte-8rhjm4{color:var(--pin-red);display:flex;font-size:1.2em}header.svelte-8rhjm4 left.svelte-8rhjm4.svelte-8rhjm4{display:flex;justify-content:space-evenly;padding:1em;flex:2}header.svelte-8rhjm4 input.svelte-8rhjm4.svelte-8rhjm4{border-radius:30px;flex:3;padding:1rem}profile.svelte-8rhjm4.svelte-8rhjm4.svelte-8rhjm4{display:flex;flex-direction:row;width:100%;justify-content:center}profile.svelte-8rhjm4 info.svelte-8rhjm4.svelte-8rhjm4{margin-right:2em}profile.svelte-8rhjm4 h1.svelte-8rhjm4.svelte-8rhjm4{margin-bottom:unset;font-size:3em}profile.svelte-8rhjm4 p.svelte-8rhjm4.svelte-8rhjm4{margin-bottom:0.5rem;margin-top:0.5rem}pins.svelte-8rhjm4.svelte-8rhjm4.svelte-8rhjm4{display:flex;flex-direction:row}pins.svelte-8rhjm4 lane figure.svelte-8rhjm4.svelte-8rhjm4{margin:0.5rem}pins.svelte-8rhjm4 lane figure.svelte-8rhjm4 img.svelte-8rhjm4{border-radius:15px}pins.svelte-8rhjm4 lane.svelte-8rhjm4.svelte-8rhjm4{display:flex;flex-direction:column}a.svelte-i1di9h.svelte-i1di9h{color:var(--color)}content.svelte-i1di9h.svelte-i1di9h{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem;padding-top:0px}header.svelte-i1di9h.svelte-i1di9h{display:flex;width:100%;flex-direction:row}header.svelte-i1di9h nav.svelte-i1di9h{flex:1}header.svelte-i1di9h nav input.svelte-i1di9h{display:flex;flex-grow:2;margin:1rem}header.svelte-i1di9h nav button.svelte-i1di9h{background-color:var(--color-bg);color:var(--color);padding:0.5rem}profile.svelte-i1di9h.svelte-i1di9h{display:flex;flow-direction:row}profile.svelte-i1di9h figure.svelte-i1di9h{padding-right:3rem;padding-left:3rem}profile.svelte-i1di9h info.svelte-i1di9h{display:flex;flex-direction:column;width:100%}profile.svelte-i1di9h
|
|
|
|
|
"middle middle"
|
|
|
|
|
"bottomleft bottomright";height:100vh}one.svelte-1c5ml3s.svelte-1c5ml3s{grid-area:topright;background-color:var(--color-accent);border-radius:50% 0 0;font-size:2em;color:#fff;text-align:right}two.svelte-1c5ml3s.svelte-1c5ml3s{grid-area:middle;background-color:var(--color-accent);opacity:80%;font-size:2em;color:#fff;text-align:center;border-radius:20% 0 20% 0}three.svelte-1c5ml3s.svelte-1c5ml3s{grid-area:bottomleft;background-color:var(--color-accent);opacity:90%;font-size:2em;color:#fff;border-radius:0 0 10% 40%;padding:1rem}content.svelte-1ofkzoq.svelte-1ofkzoq{display:flex;flex-direction:column}nav-bar.svelte-1ofkzoq.svelte-1ofkzoq{display:flex;flex-direction:row;width:100%;justify-content:space-evenly;padding:1em;border:1px solid var(--color-accent);margin-bottom:1em}nav-bar.svelte-1ofkzoq middle.svelte-1ofkzoq{display:flex;flex:2;justify-content:center;padding-left:1em;padding-right:1em}nav-bar.svelte-1ofkzoq middle input.svelte-1ofkzoq{width:100%}.alternate.svelte-1ofkzoq.svelte-1ofkzoq{background-color:#ddd}code-view.svelte-1job9fs.svelte-1job9fs{display:flex;flex-direction:row;justify-content:space-evenly}code-view.svelte-1job9fs css-view.svelte-1job9fs{flex:1}code-view.svelte-1job9fs html-view.svelte-1job9fs{flex:2;max-width:50%}content.svelte-1prpjq7.svelte-1prpjq7{border:1px solid #ddd;display:flex;flex-direction:row;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:0rem}middle.svelte-1prpjq7.svelte-1prpjq7{display:flex;flex:2;flex-direction:column}header.svelte-1prpjq7.svelte-1prpjq7{width:100%;text-align:unset}header.svelte-1prpjq7 nav.svelte-1prpjq7{justify-content:left}header.svelte-1prpjq7 nav back.svelte-1prpjq7{padding-left:1rem;padding-right:1rem}header.svelte-1prpjq7 nav name h4.svelte-1prpjq7{margin:unset;padding:unset}header.svelte-1prpjq7 nav name span.svelte-1prpjq7{font-size:0.8em;font-weight:normal}middle.svelte-1prpjq7 images.svelte-1prpjq7{display:grid;grid-template-columns:1fr min-content}middle.svelte-1prpjq7 images figure#background.svelte-1prpjq7{z-index:-1;grid-column:1/2;grid-row:1/ span 2}figure#background.svelte-1prpjq7 img.svelte-1prpjq7{height:200px;min-width:500px}middle.svelte-1prpjq7 images figure#avatar.svelte-1prpjq7{z-index:5;grid-column:1/1;grid-row:2/2}middle.svelte-1prpjq7 images figure#avatar img.svelte-1prpjq7{z-index:5;position:relative;top:90px;left:10px;width:128px}figure#avatar.svelte-1prpjq7 img.svelte-1prpjq7{border-radius:50%;border:5px white solid}button#follow.svelte-1prpjq7.svelte-1prpjq7{padding:0.8rem;border-radius:30px;border:1px var(--color) solid;background:var(--color-bg);color:var(--color);position:relative;top:60px;left:220px}profile.svelte-1prpjq7.svelte-1prpjq7{margin-top:6rem;margin-left:1rem;margin-right:1rem}content.svelte-t7gl8c{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}content.svelte-1xw0xeo.svelte-1xw0xeo{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem}header.svelte-1xw0xeo.svelte-1xw0xeo{display:flex;flex:flex-grow;width:100%;flex-direction:row;padding:unset}nav.svelte-1xw0xeo.svelte-1xw0xeo{flex:1}figure.svelte-1xw0xeo.svelte-1xw0xeo{display:flex;justify-content:center;margin-top:4rem}search.svelte-1xw0xeo.svelte-1xw0xeo{display:flex;justify-content:center;flex-direction:column;margin-top:2rem}search.svelte-1xw0xeo input.svelte-1xw0xeo{align-self:center;width:50ch}search.svelte-1xw0xeo buttons.svelte-1xw0xeo{display:flex;justify-content:space-evenly}button.svelte-1xw0xeo.svelte-1xw0xeo{padding:0.5rem;background-color:#ddd;border:unset;color:#000;font-weight:unset}nav.svelte-1xw0xeo.svelte-1xw0xeo{font-weight:normal}a.svelte-1xw0xeo.svelte-1xw0xeo{color:unset;font-weight:normal}content.svelte-oxwxiv.svelte-oxwxiv{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem;--sub-color:#999;--title-color:#000}header.svelte-oxwxiv.svelte-oxwxiv{display:flex;width:100%;flex-direction:row}nav.svelte-oxwxiv.svelte-oxwxiv{flex:1}nav.svelte-oxwxiv input.svelte-oxwxiv{display:flex;flex-grow:2;margi
|
|
|
|
|
"middle middle"
|
|
|
|
|
"bottomleft bottomright"}one.svelte-1n9y415.svelte-1n9y415{grid-area:topright;background-color:var(--color-accent);border-radius:50% 0 0;font-size:0.8em;color:#fff;text-align:right}two.svelte-1n9y415.svelte-1n9y415{grid-area:middle;background-color:var(--color-accent);opacity:80%;font-size:0.8em;color:#fff;text-align:center;border-radius:20% 0 20% 0}three.svelte-1n9y415.svelte-1n9y415{grid-area:bottomleft;background-color:var(--color-accent);opacity:90%;font-size:0.8em;color:#fff;text-align:center;border-radius:0 0 10% 40%}content.svelte-1gt8gt4.svelte-1gt8gt4{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}calendar.svelte-1gt8gt4.svelte-1gt8gt4{display:grid;grid-template-columns:repeat(7, 1fr);grid-template-rows:auto;max-width:300px;outline:1px solid var(--color-accent)}calendar.svelte-1gt8gt4 day.svelte-1gt8gt4{background-color:var(--color-bg-secondary);font-weight:bold;padding-left:0.3rem;padding-right:0.3rem}calendar.svelte-1gt8gt4 month.svelte-1gt8gt4{grid-column:span 7;font-size:1.5em;font-weight:bold;text-align:center}calendar.svelte-1gt8gt4 date.svelte-1gt8gt4{padding:0.3rem}calendar.svelte-1gt8gt4 date.svelte-1gt8gt4:hover{background-color:var(--color-bg-secondary)}content.svelte-15us2jh.svelte-15us2jh{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;padding:1rem}carousel.svelte-15us2jh.svelte-15us2jh{position:relative}carousel.svelte-15us2jh figure.svelte-15us2jh{display:none}carousel.svelte-15us2jh figure.active.svelte-15us2jh{display:flex;position:relative;flex-direction:column}carousel.svelte-15us2jh figure img.svelte-15us2jh{width:100%}carousel.svelte-15us2jh figure figcaption.svelte-15us2jh{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:2em;background:var(--color-bg-secondary);opacity:0%}carousel.svelte-15us2jh figure figcaption.svelte-15us2jh:hover{opacity:90%}carousel.svelte-15us2jh next.svelte-15us2jh,prev.svelte-15us2jh.svelte-15us2jh{position:absolute;bottom:0;opacity:0%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:center}carousel.svelte-15us2jh next.svelte-15us2jh{right:0}carousel.svelte-15us2jh prev.svelte-15us2jh{left:0}carousel.svelte-15us2jh next.svelte-15us2jh:hover,prev.svelte-15us2jh.svelte-15us2jh:hover{opacity:60%;background-color:var(--color-bg)}content.svelte-fwzpwr.svelte-fwzpwr{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}tile.svelte-fwzpwr.svelte-fwzpwr{padding:0.5rem;display:flex;flex-direction:row;border:1px solid #eee;max-width:50vh}tile.svelte-fwzpwr middle.svelte-fwzpwr{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:3}tile.svelte-fwzpwr middle h4.svelte-fwzpwr{margin-top:0;margin-bottom:0}tile.svelte-fwzpwr right.svelte-fwzpwr{flex-shrink:0}tile.svelte-fwzpwr right button.svelte-fwzpwr{padding:0.2rem}content.svelte-1rd3ni4.svelte-1rd3ni4{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}card.svelte-1rd3ni4.svelte-1rd3ni4{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}card.svelte-1rd3ni4 top img.svelte-1rd3ni4{padding:0;margin:0;min-width:480px}card.svelte-1rd3ni4 middle.svelte-1rd3ni4{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}card.svelte-1rd3ni4 middle h4.svelte-1rd3ni4{margin:0}card.svelte-1rd3ni4 bottom.svelte-1rd3ni4{flex-shrink:0}card.svelte-1rd3ni4 bottom button.svelte-1rd3ni4{padding:0.2rem}phone-warn.svelte-b88acd{display:none}
|
