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.
|
|
|
|
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-1r7k7pk.svelte-1r7k7pk{display:block;padding:3rem;background-color:var(--color-bg-secondary)}hero.svelte-1r7k7pk h1.svelte-1r7k7pk{font-size:3rem}aside.svelte-1r7k7pk a.svelte-1r7k7pk{--text-decoration:underline}rationale.svelte-1r7k7pk.svelte-1r7k7pk{display:flex;flex-direction:column;font-size:1.5em;padding-left:4rem;padding-right:4rem}#demo-link.svelte-1r7k7pk.svelte-1r7k7pk{margin-top:1.5rem;padding:2rem;font-size:2em}quote.svelte-1r7k7pk.svelte-1r7k7pk{box-shadow:4px 4px 4px 4px var(--color-shadow);padding:1em;font-style:italic;background-color:var(--color-bg-secondary)}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}content.svelte-yyzz8b.svelte-yyzz8b{border:1px solid #ddd;display:flex;flex-direction:column;padding:1rem}header.svelte-yyzz8b.svelte-yyzz8b{display:flex;width:100%;flex-direction:row;padding:0}nav.svelte-yyzz8b.svelte-yyzz8b{flex:1}figure.svelte-yyzz8b.svelte-yyzz8b{display:flex;justify-content:center;margin-top:4rem}search.svelte-yyzz8b.svelte-yyzz8b{display:flex;justify-content:center;flex-direction:column;margin-top:2rem}search.svelte-yyzz8b input.svelte-yyzz8b{align-self:center;width:50ch}search.svelte-yyzz8b buttons.svelte-yyzz8b{display:flex;justify-content:space-evenly}button.svelte-yyzz8b.svelte-yyzz8b{padding:0.5rem;background-color:#ddd;border:0px;color:#000;font-weight:unset}content.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{border:1px solid #ddd;display:flex;flex-direction:row;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:0rem}left.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:flex;flex-basis:200px;flex-direction:column;border-right:1px solid var(--color-bg-secondary);padding:1em;font-size:1.2em}middle.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:flex;flex:2;flex-direction:column}right.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:flex;flex-basis:300px;flex-direction:column;border-left:1px solid var(--color-bg-secondary)}header.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{width:100%;text-align:unset}header.svelte-bnvc6y nav.svelte-bnvc6y.svelte-bnvc6y{justify-content:left}header.svelte-bnvc6y nav back.svelte-bnvc6y.svelte-bnvc6y{padding-left:1rem;padding-right:1rem}header.svelte-bnvc6y nav name h4.svelte-bnvc6y.svelte-bnvc6y{margin:unset;padding:unset}header.svelte-bnvc6y nav name span.svelte-bnvc6y.svelte-bnvc6y{font-size:0.8em;font-weight:normal}middle.svelte-bnvc6y images.svelte-bnvc6y.svelte-bnvc6y{display:grid;grid-template-columns:1fr min-content}middle.svelte-bnvc6y images figure#background.svelte-bnvc6y.svelte-bnvc6y{z-index:-1;grid-column:1/2;grid-row:1/ span 2}figure#background.svelte-bnvc6y img.svelte-bnvc6y.svelte-bnvc6y{height:200px;min-width:500px}middle.svelte-bnvc6y images figure#avatar.svelte-bnvc6y.svelte-bnvc6y{z-index:5;grid-column:1/1;grid-row:2/2}middle.svelte-bnvc6y images figure#avatar img.svelte-bnvc6y.svelte-bnvc6y{z-index:5;position:relative;top:90px;left:10px;width:128px}figure#avatar.svelte-bnvc6y img.svelte-bnvc6y.svelte-bnvc6y{border-radius:50%;border:5px white solid}button#follow.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{padding:0.8rem;border-radius:30px;border:1px var(--color) solid;background:var(--color-bg);color:var(--color);position:relative;top:60px;left:220px}button#signup.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{border-radius:30px;padding:0
|
|
|
|
|
"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}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%}phone-warn.svelte-b88acd{display:none}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-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;margin:1rem}logo.svelte-oxwxiv.svelte-oxwxiv{font-weight:bold;font-size:1rem;color:black}button.svelte-oxwxiv.svelte-oxwxiv{background-color:var(--color-bg);color:var(--color);padding:0.5rem;border-radius:2px}main.svelte-oxwxiv.svelte-oxwxiv{display:flex;flex-direction:row}figcaption.svelte-oxwxiv a.svelte-oxwxiv{color:var(--color-secondary);font-size:0.8em}figcaption.svelte-oxwxiv p.svelte-oxwxiv{font-weight:bold;margin-top:unset}figcaption.svelte-oxwxiv video-actions.svelte-oxwxiv{color:var(--sub-color);font-weight:unset;display:flex;flex-grow:
|
|
|
|
|
"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-j1ijok.svelte-j1ijok{display:flex;flex-direction:column}tabs.svelte-j1ijok.svelte-j1ijok{margin-top:1em;display:flex;justify-content:space-evenly;border-bottom:var(--color-accent)}tabs.svelte-j1ijok a.svelte-j1ijok{text-decoration:none;color:var(--color-text);border-bottom:1px solid var(--color-accent);border-width:thin;width:100%;text-align:center;padding:2rem 0rem 0.5rem}tabs.svelte-j1ijok a.svelte-j1ijok:hover{box-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}tabs.svelte-j1ijok a.active.svelte-j1ijok{background-color:var(--color-bg-secondary)}panel.svelte-j1ijok.svelte-j1ijok{display:none}panel.active.svelte-j1ijok.svelte-j1ijok{border:1px solid var(--color-accent);display:flex;flex-direction:column;padding:1em}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)}
|
