Title And Stuff
\ndiff --git a/public/build/bundle.css b/public/build/bundle.css index 462fb80..61857d7 100644 --- a/public/build/bundle.css +++ b/public/build/bundle.css @@ -1,5 +1,5 @@ -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-3owcui.svelte-3owcui{display:block;padding:3rem;background-color:var(--color-bg-secondary)}hero.svelte-3owcui h1.svelte-3owcui{font-size:3rem}aside.svelte-3owcui a.svelte-3owcui{--text-decoration:underline}rationale.svelte-3owcui.svelte-3owcui{display:flex;flex-direction:column;font-size:1.5em;padding-left:4rem;padding-right:4rem}h1#faq.svelte-3owcui.svelte-3owcui{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-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 h4.svelte-bnvc6y.svelte-bnvc6y{}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.5rem;width:100%;font-size:0.9em}aside#newperson.svelte-bnvc6y p.svelte-bnvc6y.svelte-bnvc6y{font-size:0.8em;color:var(--color-inactive)}recent-media.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:1px}profile.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{margin-top:6rem;margin-left:1rem;margin-right:1rem}tweet.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:flex;flex-direction:row}tweet.svelte-bnvc6y post.svelte-bnvc6y.svelte-bnvc6y{padding-left:1em;flex-grow:2;margin-bottom:1rem}tweet.svelte-bnvc6y figure#avatar.svelte-bnvc6y img.svelte-bnvc6y{min-width:64px;height:64px}tweet.svelte-bnvc6y post h4.svelte-bnvc6y.svelte-bnvc6y{margin:unset}tweet.svelte-bnvc6y post p.svelte-bnvc6y.svelte-bnvc6y{margin-bottom:0.5rem}tweet.svelte-bnvc6y post actions.svelte-bnvc6y.svelte-bnvc6y{display:flex;justify-content:space-evenly}hr.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{margin-top:0.5em;margin-bottom:0.5em}aside#trending.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{background-color:var(--color-bg-secondary);padding:0px}aside#trending.svelte-bnvc6y h3.svelte-bnvc6y.svelte-bnvc6y{margin-left:1em}aside#trending.svelte-bnvc6y a.svelte-bnvc6y.svelte-bnvc6y{margin-left:1em;color:var(--color)}aside#trending.svelte-bnvc6y li.svelte-bnvc6y.svelte-bnvc6y{border-top:1px var(--color-bg) solid;list-style-type:none;list-style-position:outside;padding:0.3rem}aside#trending.svelte-bnvc6y ul.svelte-bnvc6y.svelte-bnvc6y{padding-left:0px}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-87j0be.svelte-87j0be{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-87j0be.svelte-87j0be{display:flex;width:100%;flex-direction:row}nav.svelte-87j0be.svelte-87j0be{flex:1}nav.svelte-87j0be input.svelte-87j0be{display:flex;flex-grow:2;margin:1rem}logo.svelte-87j0be.svelte-87j0be{font-weight:bold;font-size:1rem;color:black}button.svelte-87j0be.svelte-87j0be{background-color:var(--color-bg);color:var(--color);padding:0.5rem;border-radius:2px}hr.svelte-87j0be.svelte-87j0be{margin-top:0.5rem;margin-bottom:0.5rem}main.svelte-87j0be.svelte-87j0be{display:flex;flex-direction:row}right.svelte-87j0be.svelte-87j0be{margin-left:0.5rem}left.svelte-87j0be.svelte-87j0be{margin-right:0.5rem}figcaption.svelte-87j0be a.svelte-87j0be{color:var(--color-secondary);font-size:0.8em}figcaption.svelte-87j0be p.svelte-87j0be{font-weight:bold;margin-top:unset}figcaption.svelte-87j0be video-actions.svelte-87j0be{color:var(--sub-color);font-weight:unset;display:flex;flex-grow:1;justify-content:space-between}card.svelte-87j0be.svelte-87j0be{display:flex;margin-top:0.2rem;margin-bottom:0.2rem;--img-width:120px;--img-height:80px;--font-size:0.8em}card.svelte-87j0be img.svelte-87j0be{width:var(--img-width);height:var(--img-height)}card.svelte-87j0be info.svelte-87j0be{display:flex;flex-direction:column;padding:0.2rem;color:var(--sub-color);font-size:var(--font-size)}card.svelte-87j0be info h4.svelte-87j0be{font-weight:bold;color:var(--title-color);margin:0px}card.small.svelte-87j0be.svelte-87j0be{--img-width:100px;--img-height:70px;--font-size:0.6em}promotion.svelte-87j0be.svelte-87j0be{display:flex;flex-direction:column}promotion.svelte-87j0be nav button#subscribe.svelte-87j0be{background-color:red;color:#fff;border:unset}promotion.svelte-87j0be card.svelte-87j0be{--img-width:4rem;--img-height:4rem}promotion.svelte-87j0be content.svelte-87j0be{border:unset;padding-left:4rem}comments.svelte-87j0be nav.svelte-87j0be{justify-content:left;font-weight:unset}comments.svelte-87j0be nav sort.svelte-87j0be{color:var(--sub-color)}comments.svelte-87j0be card.svelte-87j0be{color:black;--img-width:4rem;--img-height:4rem;--font-size:1em}comments.svelte-87j0be card p.svelte-87j0be{color:black}comments.svelte-87j0be card reply.svelte-87j0be{color:var(--color)}a.svelte-cr3eg9.svelte-cr3eg9{color:var(--color)}content.svelte-cr3eg9.svelte-cr3eg9{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;padding:1rem}header.svelte-cr3eg9.svelte-cr3eg9{display:flex;width:100%;flex-direction:row}nav.svelte-cr3eg9.svelte-cr3eg9{flex:1}button.svelte-cr3eg9.svelte-cr3eg9{padding:0.5rem}profile.svelte-cr3eg9.svelte-cr3eg9{display:flex;flow-direction:row}profile.svelte-cr3eg9 figure.svelte-cr3eg9{padding-right:3rem;padding-left:3rem}profile.svelte-cr3eg9 info.svelte-cr3eg9{display:flex;flex-direction:column;width:100%}profile.svelte-cr3eg9 info p.svelte-cr3eg9{padding:0.5rem}tabs.svelte-cr3eg9 nav.svelte-cr3eg9{justify-content:center;border-top:1px black solid;border-color:var(--color-inactive)}posts.svelte-cr3eg9.svelte-cr3eg9{display:grid;grid-template-columns:1fr 1fr 1fr}pins.svelte-cr3eg9.svelte-cr3eg9{display:flex;flex-direction:row;justify-content:space-evenly;margin-top:1rem;margin-bottom:1rem}: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 info p.svelte-i1di9h{padding:0.5rem}posts.svelte-i1di9h.svelte-i1di9h{display:grid;grid-template-columns:1fr 1fr 1fr}posts.svelte-i1di9h figure.svelte-i1di9h{}related.svelte-i1di9h.svelte-i1di9h{display:flex;flex-direction:row;justify-content:space-evenly;margin-top:1rem;margin-bottom:1rem}nav.svelte-i1di9h a.svelte-i1di9h,a.svelte-i1di9h.svelte-i1di9h:visited,a.svelte-i1di9h.svelte-i1di9h:active{text-decoration:none;color:var(--color-text)}content.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;--sub-color:#999;--title-color:#000}main.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;flex-direction:column}header.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;width:100%;flex-direction:row}header.svelte-9c6eed nav.svelte-9c6eed.svelte-9c6eed{flex:1;margin-left:1rem;margin-right:1rem}header.svelte-9c6eed nav input.svelte-9c6eed.svelte-9c6eed{display:flex;flex-grow:2;margin:1rem}header.svelte-9c6eed nav.svelte-9c6eed button.svelte-9c6eed{background-color:var(--color-bg);color:var(--color);padding:0.5rem}hr.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{margin-top:0.5rem;margin-bottom:0.5rem}figcaption.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{padding:1rem}figcaption.svelte-9c6eed a.svelte-9c6eed.svelte-9c6eed{color:var(--color-secondary);font-size:0.8em}figcaption.svelte-9c6eed p.svelte-9c6eed.svelte-9c6eed{font-weight:bold;margin-top:unset}figcaption.svelte-9c6eed video-actions.svelte-9c6eed.svelte-9c6eed{color:var(--sub-color);font-weight:unset;display:flex;flex-grow:1;justify-content:space-between}card.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;margin-top:0.2rem;margin-bottom:0.2rem;--img-width:120px;--img-height:80px;--font-size:0.8em}card.svelte-9c6eed img.svelte-9c6eed.svelte-9c6eed{width:var(--img-width);height:var(--img-height)}card.svelte-9c6eed info.svelte-9c6eed.svelte-9c6eed{display:flex;flex-direction:column;padding:0.2rem;color:var(--sub-color);font-size:var(--font-size)}card.svelte-9c6eed info h4.svelte-9c6eed.svelte-9c6eed{font-weight:bold;color:var(--title-color);margin:0px}promotion.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;flex-direction:column}promotion.svelte-9c6eed card.svelte-9c6eed.svelte-9c6eed{--img-width:4rem;--img-height:4rem}promotion.svelte-9c6eed content.svelte-9c6eed.svelte-9c6eed{border:unset;padding-left:4rem}comments.svelte-9c6eed nav.svelte-9c6eed.svelte-9c6eed{justify-content:left;font-weight:unset}comments.svelte-9c6eed nav sort.svelte-9c6eed.svelte-9c6eed{color:var(--sub-color)}comments.svelte-9c6eed card.svelte-9c6eed.svelte-9c6eed{color:black;--img-width:4rem;--img-height:4rem;--font-size:1em}comments.svelte-9c6eed card p.svelte-9c6eed.svelte-9c6eed{color:black}comments.svelte-9c6eed card reply.svelte-9c6eed.svelte-9c6eed{color:var(--color)}lower.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{padding:1rem}nav#vote-nav.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{justify-content:flex-end}nav.svelte-9c6eed a.svelte-9c6eed.svelte-9c6eed,a.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed:visited,a.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed:active{text-decoration:none;color:var(--color-text)}content.svelte-t7gl8c{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}content.svelte-12f1gxf.svelte-12f1gxf{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}card.svelte-12f1gxf.svelte-12f1gxf{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}card.svelte-12f1gxf top img.svelte-12f1gxf{padding:0;margin:0;width:480px}card.svelte-12f1gxf middle.svelte-12f1gxf{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}card.svelte-12f1gxf middle h4.svelte-12f1gxf{margin:0}card.svelte-12f1gxf bottom.svelte-12f1gxf{flex-shrink:0}card.svelte-12f1gxf bottom button.svelte-12f1gxf{padding:0.2rem}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-1lajyim.svelte-1lajyim{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}panel.svelte-1lajyim.svelte-1lajyim{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}panel.svelte-1lajyim top.svelte-1lajyim{width:480px;padding:0.5rem}panel.svelte-1lajyim middle.svelte-1lajyim{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}panel.svelte-1lajyim bottom.svelte-1lajyim{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-evenly}panel.svelte-1lajyim bottom button.svelte-1lajyim{display:flex;margin:0;border-radius:unset;width:100%;justify-content:space-evenly}button.svelte-1lajyim.svelte-1lajyim:hover{filter:invert(20%)}button#cancel.svelte-1lajyim.svelte-1lajyim{background:unset;color:var(--color-text)}content.svelte-cwnhgy{display:flex;justify-content:center}button.svelte-cwnhgy{padding:5em}modal.svelte-cwnhgy{display:flex;position:fixed;align-items:center;justify-content:center;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(244,244,244,0.75);padding:0px}modal-content.svelte-cwnhgy{flex-direction:column;background:white;border:1px solid var(--color-accent);border-radius:5px;max-height:300px;min-height:300px;max-width:300px;width:100%;z-index:20;padding:0.5em}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}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-1c5ml3s.svelte-1c5ml3s{display:flex;flex-direction:column}icecream.svelte-1c5ml3s.svelte-1c5ml3s{position:relative}icecream.svelte-1c5ml3s background.svelte-1c5ml3s{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}icecream.svelte-1c5ml3s background img.svelte-1c5ml3s{width:100vh}overlay.svelte-1c5ml3s.svelte-1c5ml3s{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-template-areas:"topleft topright" +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-1nza6iy.svelte-1nza6iy{display:block;padding:3rem;background-color:var(--color-bg-secondary)}hero.svelte-1nza6iy h1.svelte-1nza6iy{font-size:3rem}aside.svelte-1nza6iy a.svelte-1nza6iy{--text-decoration:underline}rationale.svelte-1nza6iy.svelte-1nza6iy{display:flex;flex-direction:column;font-size:1.5em;padding-left:4rem;padding-right:4rem}quote.svelte-1nza6iy.svelte-1nza6iy{box-shadow:4px 4px 4px 4px var(--color-shadow);padding:1em;font-style:italic;background-color:var(--color-bg-secondary)}pre.svelte-1nza6iy code.svelte-1nza6iy{font-size:0.8em}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 info p.svelte-i1di9h{padding:0.5rem}posts.svelte-i1di9h.svelte-i1di9h{display:grid;grid-template-columns:1fr 1fr 1fr}posts.svelte-i1di9h figure.svelte-i1di9h{}related.svelte-i1di9h.svelte-i1di9h{display:flex;flex-direction:row;justify-content:space-evenly;margin-top:1rem;margin-bottom:1rem}nav.svelte-i1di9h a.svelte-i1di9h,a.svelte-i1di9h.svelte-i1di9h:visited,a.svelte-i1di9h.svelte-i1di9h:active{text-decoration:none;color:var(--color-text)}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-87j0be.svelte-87j0be{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-87j0be.svelte-87j0be{display:flex;width:100%;flex-direction:row}nav.svelte-87j0be.svelte-87j0be{flex:1}nav.svelte-87j0be input.svelte-87j0be{display:flex;flex-grow:2;margin:1rem}logo.svelte-87j0be.svelte-87j0be{font-weight:bold;font-size:1rem;color:black}button.svelte-87j0be.svelte-87j0be{background-color:var(--color-bg);color:var(--color);padding:0.5rem;border-radius:2px}hr.svelte-87j0be.svelte-87j0be{margin-top:0.5rem;margin-bottom:0.5rem}main.svelte-87j0be.svelte-87j0be{display:flex;flex-direction:row}right.svelte-87j0be.svelte-87j0be{margin-left:0.5rem}left.svelte-87j0be.svelte-87j0be{margin-right:0.5rem}figcaption.svelte-87j0be a.svelte-87j0be{color:var(--color-secondary);font-size:0.8em}figcaption.svelte-87j0be p.svelte-87j0be{font-weight:bold;margin-top:unset}figcaption.svelte-87j0be video-actions.svelte-87j0be{color:var(--sub-color);font-weight:unset;display:flex;flex-grow:1;justify-content:space-between}card.svelte-87j0be.svelte-87j0be{display:flex;margin-top:0.2rem;margin-bottom:0.2rem;--img-width:120px;--img-height:80px;--font-size:0.8em}card.svelte-87j0be img.svelte-87j0be{width:var(--img-width);height:var(--img-height)}card.svelte-87j0be info.svelte-87j0be{display:flex;flex-direction:column;padding:0.2rem;color:var(--sub-color);font-size:var(--font-size)}card.svelte-87j0be info h4.svelte-87j0be{font-weight:bold;color:var(--title-color);margin:0px}card.small.svelte-87j0be.svelte-87j0be{--img-width:100px;--img-height:70px;--font-size:0.6em}promotion.svelte-87j0be.svelte-87j0be{display:flex;flex-direction:column}promotion.svelte-87j0be nav button#subscribe.svelte-87j0be{background-color:red;color:#fff;border:unset}promotion.svelte-87j0be card.svelte-87j0be{--img-width:4rem;--img-height:4rem}promotion.svelte-87j0be content.svelte-87j0be{border:unset;padding-left:4rem}comments.svelte-87j0be nav.svelte-87j0be{justify-content:left;font-weight:unset}comments.svelte-87j0be nav sort.svelte-87j0be{color:var(--sub-color)}comments.svelte-87j0be card.svelte-87j0be{color:black;--img-width:4rem;--img-height:4rem;--font-size:1em}comments.svelte-87j0be card p.svelte-87j0be{color:black}comments.svelte-87j0be card reply.svelte-87j0be{color:var(--color)}a.svelte-cr3eg9.svelte-cr3eg9{color:var(--color)}content.svelte-cr3eg9.svelte-cr3eg9{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;padding:1rem}header.svelte-cr3eg9.svelte-cr3eg9{display:flex;width:100%;flex-direction:row}nav.svelte-cr3eg9.svelte-cr3eg9{flex:1}button.svelte-cr3eg9.svelte-cr3eg9{padding:0.5rem}profile.svelte-cr3eg9.svelte-cr3eg9{display:flex;flow-direction:row}profile.svelte-cr3eg9 figure.svelte-cr3eg9{padding-right:3rem;padding-left:3rem}profile.svelte-cr3eg9 info.svelte-cr3eg9{display:flex;flex-direction:column;width:100%}profile.svelte-cr3eg9 info p.svelte-cr3eg9{padding:0.5rem}tabs.svelte-cr3eg9 nav.svelte-cr3eg9{justify-content:center;border-top:1px black solid;border-color:var(--color-inactive)}posts.svelte-cr3eg9.svelte-cr3eg9{display:grid;grid-template-columns:1fr 1fr 1fr}pins.svelte-cr3eg9.svelte-cr3eg9{display:flex;flex-direction:row;justify-content:space-evenly;margin-top:1rem;margin-bottom:1rem}content.svelte-12f1gxf.svelte-12f1gxf{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}card.svelte-12f1gxf.svelte-12f1gxf{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}card.svelte-12f1gxf top img.svelte-12f1gxf{padding:0;margin:0;width:480px}card.svelte-12f1gxf middle.svelte-12f1gxf{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}card.svelte-12f1gxf middle h4.svelte-12f1gxf{margin:0}card.svelte-12f1gxf bottom.svelte-12f1gxf{flex-shrink:0}card.svelte-12f1gxf bottom button.svelte-12f1gxf{padding:0.2rem}content.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;--sub-color:#999;--title-color:#000}main.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;flex-direction:column}header.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;width:100%;flex-direction:row}header.svelte-9c6eed nav.svelte-9c6eed.svelte-9c6eed{flex:1;margin-left:1rem;margin-right:1rem}header.svelte-9c6eed nav input.svelte-9c6eed.svelte-9c6eed{display:flex;flex-grow:2;margin:1rem}header.svelte-9c6eed nav.svelte-9c6eed button.svelte-9c6eed{background-color:var(--color-bg);color:var(--color);padding:0.5rem}hr.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{margin-top:0.5rem;margin-bottom:0.5rem}figcaption.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{padding:1rem}figcaption.svelte-9c6eed a.svelte-9c6eed.svelte-9c6eed{color:var(--color-secondary);font-size:0.8em}figcaption.svelte-9c6eed p.svelte-9c6eed.svelte-9c6eed{font-weight:bold;margin-top:unset}figcaption.svelte-9c6eed video-actions.svelte-9c6eed.svelte-9c6eed{color:var(--sub-color);font-weight:unset;display:flex;flex-grow:1;justify-content:space-between}card.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;margin-top:0.2rem;margin-bottom:0.2rem;--img-width:120px;--img-height:80px;--font-size:0.8em}card.svelte-9c6eed img.svelte-9c6eed.svelte-9c6eed{width:var(--img-width);height:var(--img-height)}card.svelte-9c6eed info.svelte-9c6eed.svelte-9c6eed{display:flex;flex-direction:column;padding:0.2rem;color:var(--sub-color);font-size:var(--font-size)}card.svelte-9c6eed info h4.svelte-9c6eed.svelte-9c6eed{font-weight:bold;color:var(--title-color);margin:0px}promotion.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{display:flex;flex-direction:column}promotion.svelte-9c6eed card.svelte-9c6eed.svelte-9c6eed{--img-width:4rem;--img-height:4rem}promotion.svelte-9c6eed content.svelte-9c6eed.svelte-9c6eed{border:unset;padding-left:4rem}comments.svelte-9c6eed nav.svelte-9c6eed.svelte-9c6eed{justify-content:left;font-weight:unset}comments.svelte-9c6eed nav sort.svelte-9c6eed.svelte-9c6eed{color:var(--sub-color)}comments.svelte-9c6eed card.svelte-9c6eed.svelte-9c6eed{color:black;--img-width:4rem;--img-height:4rem;--font-size:1em}comments.svelte-9c6eed card p.svelte-9c6eed.svelte-9c6eed{color:black}comments.svelte-9c6eed card reply.svelte-9c6eed.svelte-9c6eed{color:var(--color)}lower.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{padding:1rem}nav#vote-nav.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed{justify-content:flex-end}nav.svelte-9c6eed a.svelte-9c6eed.svelte-9c6eed,a.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed:visited,a.svelte-9c6eed.svelte-9c6eed.svelte-9c6eed:active{text-decoration:none;color:var(--color-text)}content.svelte-1lajyim.svelte-1lajyim{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}panel.svelte-1lajyim.svelte-1lajyim{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}panel.svelte-1lajyim top.svelte-1lajyim{width:480px;padding:0.5rem}panel.svelte-1lajyim middle.svelte-1lajyim{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}panel.svelte-1lajyim bottom.svelte-1lajyim{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-evenly}panel.svelte-1lajyim bottom button.svelte-1lajyim{display:flex;margin:0;border-radius:unset;width:100%;justify-content:space-evenly}button.svelte-1lajyim.svelte-1lajyim:hover{filter:invert(20%)}button#cancel.svelte-1lajyim.svelte-1lajyim{background:unset;color:var(--color-text)}content.svelte-cwnhgy{display:flex;justify-content:center}button.svelte-cwnhgy{padding:5em}modal.svelte-cwnhgy{display:flex;position:fixed;align-items:center;justify-content:center;top:0;left:0;right:0;bottom:0;z-index:10;background:rgba(244,244,244,0.75);padding:0px}modal-content.svelte-cwnhgy{flex-direction:column;background:white;border:1px solid var(--color-accent);border-radius:5px;max-height:300px;min-height:300px;max-width:300px;width:100%;z-index:20;padding:0.5em}content.svelte-t7gl8c{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}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-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-12uwa5s.svelte-12uwa5s{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;padding:1rem}carousel.svelte-12uwa5s.svelte-12uwa5s{outline:2px solid green;position:relative}carousel.svelte-12uwa5s figure.svelte-12uwa5s{display:none}carousel.svelte-12uwa5s figure.active.svelte-12uwa5s{display:flex;position:relative;flex-direction:column;outline:1px solid red}carousel.svelte-12uwa5s figure img.svelte-12uwa5s{width:100%}carousel.svelte-12uwa5s figure figcaption.svelte-12uwa5s{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:2em;background:var(--color-bg-secondary);opacity:0%}carousel.svelte-12uwa5s figure figcaption.svelte-12uwa5s:hover{opacity:90%}carousel.svelte-12uwa5s next.svelte-12uwa5s,prev.svelte-12uwa5s.svelte-12uwa5s{position:absolute;bottom:0;opacity:0%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:center}carousel.svelte-12uwa5s next.svelte-12uwa5s{right:0}carousel.svelte-12uwa5s prev.svelte-12uwa5s{left:0}carousel.svelte-12uwa5s next.svelte-12uwa5s:hover,prev.svelte-12uwa5s.svelte-12uwa5s: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-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 h4.svelte-bnvc6y.svelte-bnvc6y{}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.5rem;width:100%;font-size:0.9em}aside#newperson.svelte-bnvc6y p.svelte-bnvc6y.svelte-bnvc6y{font-size:0.8em;color:var(--color-inactive)}recent-media.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:1px}profile.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{margin-top:6rem;margin-left:1rem;margin-right:1rem}tweet.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{display:flex;flex-direction:row}tweet.svelte-bnvc6y post.svelte-bnvc6y.svelte-bnvc6y{padding-left:1em;flex-grow:2;margin-bottom:1rem}tweet.svelte-bnvc6y figure#avatar.svelte-bnvc6y img.svelte-bnvc6y{min-width:64px;height:64px}tweet.svelte-bnvc6y post h4.svelte-bnvc6y.svelte-bnvc6y{margin:unset}tweet.svelte-bnvc6y post p.svelte-bnvc6y.svelte-bnvc6y{margin-bottom:0.5rem}tweet.svelte-bnvc6y post actions.svelte-bnvc6y.svelte-bnvc6y{display:flex;justify-content:space-evenly}hr.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{margin-top:0.5em;margin-bottom:0.5em}aside#trending.svelte-bnvc6y.svelte-bnvc6y.svelte-bnvc6y{background-color:var(--color-bg-secondary);padding:0px}aside#trending.svelte-bnvc6y h3.svelte-bnvc6y.svelte-bnvc6y{margin-left:1em}aside#trending.svelte-bnvc6y a.svelte-bnvc6y.svelte-bnvc6y{margin-left:1em;color:var(--color)}aside#trending.svelte-bnvc6y li.svelte-bnvc6y.svelte-bnvc6y{border-top:1px var(--color-bg) solid;list-style-type:none;list-style-position:outside;padding:0.3rem}aside#trending.svelte-bnvc6y ul.svelte-bnvc6y.svelte-bnvc6y{padding-left:0px}content.svelte-1c5ml3s.svelte-1c5ml3s{display:flex;flex-direction:column}icecream.svelte-1c5ml3s.svelte-1c5ml3s{position:relative}icecream.svelte-1c5ml3s background.svelte-1c5ml3s{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}icecream.svelte-1c5ml3s background img.svelte-1c5ml3s{width:100vh}overlay.svelte-1c5ml3s.svelte-1c5ml3s{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-template-areas:"topleft topright" "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%}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-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-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:1;justify-content:space-between}a.svelte-oov5yx.svelte-oov5yx{color:var(--color)}content.svelte-oov5yx.svelte-oov5yx{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem}header.svelte-oov5yx.svelte-oov5yx{display:flex;width:100%;flex-direction:row}nav.svelte-oov5yx.svelte-oov5yx{flex:1}button.svelte-oov5yx.svelte-oov5yx{padding:0.5rem}profile.svelte-oov5yx.svelte-oov5yx{display:flex;flow-direction:row}profile.svelte-oov5yx figure.svelte-oov5yx{padding-right:3rem;padding-left:3rem}profile.svelte-oov5yx info.svelte-oov5yx{display:flex;flex-direction:column;width:100%}profile.svelte-oov5yx info p.svelte-oov5yx{padding:0.5rem}pins.svelte-oov5yx.svelte-oov5yx{display:flex;flex-direction:row;justify-content:space-evenly;margin-top:1rem;margin-bottom:1rem}:root{--pin-red:#e60023}content.svelte-1w7ltga.svelte-1w7ltga{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem}header.svelte-1w7ltga.svelte-1w7ltga{display:flex;width:100%;flex-direction:row}header.svelte-1w7ltga nav.svelte-1w7ltga{display:flex;flex:1}header.svelte-1w7ltga nav input.svelte-1w7ltga{width:100%}header.svelte-1w7ltga nav button.svelte-1w7ltga{border-radius:30px;background-color:var(--color-bg-secondary);border:unset;color:var(--color-text);padding-left:1rem;padding-right:1rem}header.svelte-1w7ltga nav button#signup.svelte-1w7ltga{background-color:var(--pin-red);color:var(--color-bg)}header.svelte-1w7ltga nav a.svelte-1w7ltga{color:var(--text-color)}header.svelte-1w7ltga logo.svelte-1w7ltga{color:var(--pin-red);display:flex;font-size:1.2em}header.svelte-1w7ltga left.svelte-1w7ltga{display:flex;justify-content:space-evenly;padding:1em;flex:2}header.svelte-1w7ltga input.svelte-1w7ltga{border-radius:30px;flex:3;padding:1rem}profile.svelte-1w7ltga.svelte-1w7ltga{display:flex;flex-direction:row;width:100%;justify-content:center}profile.svelte-1w7ltga info.svelte-1w7ltga{margin-right:2em}profile.svelte-1w7ltga h1.svelte-1w7ltga{margin-bottom:unset;font-size:3em}profile.svelte-1w7ltga p.svelte-1w7ltga{margin-bottom:0.5rem;margin-top:0.5rem}content.svelte-t7gl8c{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}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}content.svelte-1lajyim.svelte-1lajyim{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}panel.svelte-1lajyim.svelte-1lajyim{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}panel.svelte-1lajyim top.svelte-1lajyim{width:480px;padding:0.5rem}panel.svelte-1lajyim middle.svelte-1lajyim{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}panel.svelte-1lajyim bottom.svelte-1lajyim{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-evenly}panel.svelte-1lajyim bottom button.svelte-1lajyim{display:flex;margin:0;border-radius:unset;width:100%;justify-content:space-evenly}button.svelte-1lajyim.svelte-1lajyim:hover{filter:invert(20%)}button#cancel.svelte-1lajyim.svelte-1lajyim{background:unset;color:var(--color-text)}content.svelte-tbrdkg.svelte-tbrdkg{display:flex;flex-direction:column}nav-bar.svelte-tbrdkg.svelte-tbrdkg{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-tbrdkg middle.svelte-tbrdkg{display:flex;flex:2;justify-content:center;padding-left:1em;padding-right:1em}nav-bar.svelte-tbrdkg middle input.svelte-tbrdkg{width:100%}.alternate.svelte-tbrdkg.svelte-tbrdkg{background-color:#ddd}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-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-1n9y415.svelte-1n9y415{display:flex;flex-direction:column}icecream.svelte-1n9y415.svelte-1n9y415{position:relative}icecream.svelte-1n9y415 background.svelte-1n9y415{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}icecream.svelte-1n9y415 background img.svelte-1n9y415{width:100vh}overlay.svelte-1n9y415.svelte-1n9y415{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-template-areas:"topleft topright" + "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;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:1;justify-content:space-between}:root{--pin-red:#e60023}content.svelte-1w7ltga.svelte-1w7ltga{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem}header.svelte-1w7ltga.svelte-1w7ltga{display:flex;width:100%;flex-direction:row}header.svelte-1w7ltga nav.svelte-1w7ltga{display:flex;flex:1}header.svelte-1w7ltga nav input.svelte-1w7ltga{width:100%}header.svelte-1w7ltga nav button.svelte-1w7ltga{border-radius:30px;background-color:var(--color-bg-secondary);border:unset;color:var(--color-text);padding-left:1rem;padding-right:1rem}header.svelte-1w7ltga nav button#signup.svelte-1w7ltga{background-color:var(--pin-red);color:var(--color-bg)}header.svelte-1w7ltga nav a.svelte-1w7ltga{color:var(--text-color)}header.svelte-1w7ltga logo.svelte-1w7ltga{color:var(--pin-red);display:flex;font-size:1.2em}header.svelte-1w7ltga left.svelte-1w7ltga{display:flex;justify-content:space-evenly;padding:1em;flex:2}header.svelte-1w7ltga input.svelte-1w7ltga{border-radius:30px;flex:3;padding:1rem}profile.svelte-1w7ltga.svelte-1w7ltga{display:flex;flex-direction:row;width:100%;justify-content:center}profile.svelte-1w7ltga info.svelte-1w7ltga{margin-right:2em}profile.svelte-1w7ltga h1.svelte-1w7ltga{margin-bottom:unset;font-size:3em}profile.svelte-1w7ltga p.svelte-1w7ltga{margin-bottom:0.5rem;margin-top:0.5rem}a.svelte-oov5yx.svelte-oov5yx{color:var(--color)}content.svelte-oov5yx.svelte-oov5yx{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;flex-basis:100%;grid-column:1/3;padding:1rem}header.svelte-oov5yx.svelte-oov5yx{display:flex;width:100%;flex-direction:row}nav.svelte-oov5yx.svelte-oov5yx{flex:1}button.svelte-oov5yx.svelte-oov5yx{padding:0.5rem}profile.svelte-oov5yx.svelte-oov5yx{display:flex;flow-direction:row}profile.svelte-oov5yx figure.svelte-oov5yx{padding-right:3rem;padding-left:3rem}profile.svelte-oov5yx info.svelte-oov5yx{display:flex;flex-direction:column;width:100%}profile.svelte-oov5yx info p.svelte-oov5yx{padding:0.5rem}pins.svelte-oov5yx.svelte-oov5yx{display:flex;flex-direction:row;justify-content:space-evenly;margin-top:1rem;margin-bottom:1rem}content.svelte-1lajyim.svelte-1lajyim{display:flex;flex:flex-shrink;flex-grow:1;justify-content:center}panel.svelte-1lajyim.svelte-1lajyim{display:flex;flex-direction:column;border:1px solid #eee;width:min-content}panel.svelte-1lajyim top.svelte-1lajyim{width:480px;padding:0.5rem}panel.svelte-1lajyim middle.svelte-1lajyim{padding-left:0.5rem;padding-right:0.5rem;display:flex;flex-direction:column;justify-content:flex-start}panel.svelte-1lajyim bottom.svelte-1lajyim{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-evenly}panel.svelte-1lajyim bottom button.svelte-1lajyim{display:flex;margin:0;border-radius:unset;width:100%;justify-content:space-evenly}button.svelte-1lajyim.svelte-1lajyim:hover{filter:invert(20%)}button#cancel.svelte-1lajyim.svelte-1lajyim{background:unset;color:var(--color-text)}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-tbrdkg.svelte-tbrdkg{display:flex;flex-direction:column}nav-bar.svelte-tbrdkg.svelte-tbrdkg{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-tbrdkg middle.svelte-tbrdkg{display:flex;flex:2;justify-content:center;padding-left:1em;padding-right:1em}nav-bar.svelte-tbrdkg middle input.svelte-tbrdkg{width:100%}.alternate.svelte-tbrdkg.svelte-tbrdkg{background-color:#ddd}content.svelte-1n9y415.svelte-1n9y415{display:flex;flex-direction:column}icecream.svelte-1n9y415.svelte-1n9y415{position:relative}icecream.svelte-1n9y415 background.svelte-1n9y415{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}icecream.svelte-1n9y415 background img.svelte-1n9y415{width:100vh}overlay.svelte-1n9y415.svelte-1n9y415{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-template-areas:"topleft topright" "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)}phone-warn.svelte-b88acd{display:none} \ No newline at end of file + "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-12uwa5s.svelte-12uwa5s{border:1px solid #ddd;display:flex;flex-direction:column;flex:flex-grow;padding:1rem}carousel.svelte-12uwa5s.svelte-12uwa5s{outline:2px solid green;position:relative}carousel.svelte-12uwa5s figure.svelte-12uwa5s{display:none}carousel.svelte-12uwa5s figure.active.svelte-12uwa5s{display:flex;position:relative;flex-direction:column;outline:1px solid red}carousel.svelte-12uwa5s figure img.svelte-12uwa5s{width:100%}carousel.svelte-12uwa5s figure figcaption.svelte-12uwa5s{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:2em;background:var(--color-bg-secondary);opacity:0%}carousel.svelte-12uwa5s figure figcaption.svelte-12uwa5s:hover{opacity:90%}carousel.svelte-12uwa5s next.svelte-12uwa5s,prev.svelte-12uwa5s.svelte-12uwa5s{position:absolute;bottom:0;opacity:0%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:center}carousel.svelte-12uwa5s next.svelte-12uwa5s{right:0}carousel.svelte-12uwa5s prev.svelte-12uwa5s{left:0}carousel.svelte-12uwa5s next.svelte-12uwa5s:hover,prev.svelte-12uwa5s.svelte-12uwa5s: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} \ No newline at end of file diff --git a/public/build/bundle.js b/public/build/bundle.js index 3e5aa94..a03610b 100644 --- a/public/build/bundle.js +++ b/public/build/bundle.js @@ -1990,108 +1990,398 @@ var app = (function () { let t50; let hr2; let t51; - let section5; let h12; let t53; - let h13; - let t55; let p8; + let t55; + let ol0; + let li0; let t56; let b3; let t58; - let b4; + let t59; + let li1; let t60; - let t61; - let p9; + let b4; let t62; let b5; let t64; - let b6; - let t66; - let b7; - let t68; - let b8; + let t65; + let li2; + let t67; + let h20; + let t69; + let p9; let t70; - let t71; - let h14; - let t73; - let p10; + let b6; + let t72; + let a5; + let t74; let t75; - let p11; + let pre2; + let code0; let t77; - let h15; - let t79; - let p12; + let p10; + let t78; + let b7; let t80; - let b9; + let b8; let t82; - let b10; - let t84; - let b11; + let t83; + let pre3; + let code1; + let t85; + let p11; let t86; - let b12; + let b9; let t88; - let b13; + let b10; let t90; - let b14; - let t92; + let t91; + let pre4; + let code2; let t93; + let p12; + let t95; let p13; - let t94; - let b15; let t96; - let b16; + let a6; let t98; - let b17; - let t100; - let b18; + let t99; + let quote0; + let t101; + let p14; let t102; - let b19; + let a7; let t104; let t105; - let p14; + let p15; let t106; - let b20; + let b11; let t108; - let b21; - let t110; - let b22; + let t109; + let h33; + let t111; + let p16; let t112; - let b23; + let b12; let t114; - let b24; - let t116; + let t115; + let ol1; + let li3; let t117; - let h16; + let li4; let t119; - let p15; + let li5; let t120; - let b25; + let b13; let t122; - let b26; + let b14; let t124; - let b27; - let t126; + let t125; + let li6; let t127; - let p16; - let t128; - let b28; - let t130; - let b29; - let t132; - let b30; - let t134; - let t135; - let h17; - let t137; + let li7; + let t129; let p17; - let t139; - let h18; - let t141; + let t131; + let ol2; + let li8; + let t133; + let li9; + let t134; + let b15; + let t136; + let li10; + let t138; let p18; + let t140; + let h21; let t142; - let a5; - let t144; + let p19; + let t143; + let a8; + let t145; + let t146; + let pre5; + let code3; + let t148; + let p20; + let t149; + let b16; + let t151; + let b17; + let t153; + let t154; + let ol3; + let li11; + let b18; + let t156; + let t157; + let li12; + let b19; + let t159; + let t160; + let li13; + let t161; + let b20; + let t163; + let b21; + let t165; + let a9; + let t167; + let h34; + let t169; + let p21; + let t170; + let b22; + let t172; + let a10; + let t174; + let b23; + let t176; + let b24; + let t178; + let t179; + let pre6; + let code4; + let t181; + let pre7; + let code5; + let t183; + let p22; + let t184; + let b25; + let t186; + let b26; + let t188; + let b27; + let t190; + let b28; + let t192; + let t193; + let p23; + let t195; + let pre8; + let code6; + let t197; + let p24; + let t198; + let b29; + let t200; + let b30; + let t202; + let t203; + let h35; + let t205; + let p25; + let t206; + let b31; + let t208; + let b32; + let t210; + let b33; + let t212; + let t213; + let pre9; + let code7; + let t215; + let p26; + let t216; + let b34; + let t218; + let b35; + let t220; + let b36; + let t222; + let t223; + let p27; + let t224; + let a11; + let t226; + let t227; + let pre10; + let code8; + let t229; + let p28; + let t230; + let b37; + let t232; + let b38; + let t234; + let b39; + let t236; + let b40; + let t238; + let t239; + let h22; + let t241; + let p29; + let t242; + let a12; + let t244; + let a13; + let t246; + let t247; + let quote1; + let p30; + let t249; + let p31; + let t251; + let p32; + let t253; + let p33; + let t254; + let b41; + let t256; + let em; + let t258; + let t259; + let p34; + let t261; + let quote2; + let ol4; + let li14; + let t263; + let li15; + let t265; + let li16; + let t267; + let p35; + let t269; + let quote3; + let ol5; + let li17; + let t271; + let li18; + let t273; + let li19; + let t275; + let li20; + let t277; + let li21; + let t279; + let li22; + let t281; + let li23; + let t283; + let li24; + let t285; + let p36; + let t286; + let b42; + let t288; + let b43; + let t290; + let b44; + let t292; + let a14; + let t294; + let b45; + let t296; + let t297; + let p37; + let t298; + let b46; + let t300; + let t301; + let ol6; + let li25; + let t303; + let li26; + let t305; + let li27; + let t307; + let p38; + let t309; + let p39; + let t310; + let b47; + let t312; + let t313; + let ol7; + let li28; + let t315; + let li29; + let t317; + let p40; + let t318; + let b48; + let t320; + let t321; + let h23; + let t323; + let p41; + let t325; + let ol8; + let li30; + let t327; + let li31; + let t328; + let b49; + let t330; + let b50; + let t332; + let t333; + let li32; + let t334; + let b51; + let t336; + let t337; + let p42; + let t338; + let b52; + let t340; + let b53; + let t342; + let t343; + let h24; + let t345; + let p43; + let t347; + let ol9; + let li33; + let b54; + let t349; + let b55; + let t351; + let t352; + let li34; + let b56; + let t354; + let b57; + let t356; + let b58; + let t358; + let t359; + let li35; + let b59; + let t361; + let b60; + let t363; + let t364; + let li36; + let b61; + let t366; + let t367; + let li37; + let b62; + let t369; + let b63; + let t371; + let t372; + let li38; + let b64; + let t374; + let b65; + let t376; + let t377; + let li39; + let b66; + let t379; + let b67; + let t381; + let t382; let current; let mounted; let dispose; @@ -2139,7 +2429,7 @@ var app = (function () { t12 = text("Using a classless style like "); a0 = element("a"); a0.textContent = "MVP.css"; - t14 = text(", you\n bring back CSS specificity to its original intent."); + t14 = text(", you\n bring back CSS specificity to its original intent."); t15 = space(); aside1 = element("aside"); h31 = element("h3"); @@ -2171,10 +2461,10 @@ var app = (function () { h11.textContent = "Cleaner CSS"; t31 = space(); p4 = element("p"); - t32 = text("This website is nothing more than a set of small demos for the idea of\n using flexbox and grids to clean up and simplify CSS. Most everything else\n about CSS stays. Filters, transforms, attributes, and everything that\n applies to the visual display of the components of a design. What gets\n removed is "); + t32 = text("This website is nothing more than a set of small demos for the idea of\n using flexbox and grids to clean up and simplify CSS. Most everything else\n about CSS stays. Filters, transforms, attributes, and everything that\n applies to the visual display of the components of a design. What gets\n removed is "); b2 = element("b"); b2.textContent = "div"; - t34 = text(" heavy, class heavy, not-semantic-at-all layout\n systems cluttering the real information available through simple HTML\n tags."); + t34 = text(" heavy, class heavy, not-semantic-at-all layout\n systems cluttering the real information available through simple HTML\n tags."); t35 = space(); p5 = element("p"); p5.textContent = "In short, if you're writing this:"; @@ -2196,7 +2486,7 @@ var app = (function () { t44 = space(); section4 = element("section"); p7 = element("p"); - t45 = text("I demonstrate the idea with a series of copies of existing websites and other layout problems \n people frequently encounter. If you have a suggested layout challenge for me, then tell me on Twitter "); + t45 = text("I demonstrate the idea with a series of copies of existing websites and other layout problems \n people frequently encounter. If you have a suggested layout challenge for me, then tell me on Twitter "); a3 = element("a"); a3.textContent = "@lzsthw"; t47 = text(" and I'll give it a shot."); @@ -2207,250 +2497,807 @@ var app = (function () { t50 = space(); hr2 = element("hr"); t51 = space(); - section5 = element("section"); h12 = element("h1"); - h12.textContent = "FAQ"; + h12.textContent = "Discussion"; t53 = space(); - h13 = element("h1"); - h13.textContent = "Why did you do this?"; - t55 = space(); p8 = element("p"); - t56 = text("It started as an attempt to relearn modern CSS for myself so I can teach others. As I did this I realized that most of the things I learned have been completely replaced with flexbox and grids, and if I just use those then CSS becomes much easier to understand. Specificity works as expected. When I change a component with "); + p8.textContent = "We can analyze the problems with modern CSS by looking at how popular frameworks use specificity and the cascade:"; + t55 = space(); + ol0 = element("ol"); + li0 = element("li"); + t56 = text("Relying on "); b3 = element("b"); - b3.textContent = "class"; - t58 = text(" or "); + b3.textContent = "div"; + t58 = text(" to structure layout, which breaks the separation between display and content originally intended for CSS and HTML."); + t59 = space(); + li1 = element("li"); + t60 = text("Relying on "); b4 = element("b"); - b4.textContent = "id"; - t60 = text(" it actually changes. The layout flows correctly and is easier to create. Nearly everything works better and is easier to understand."); - t61 = space(); - p9 = element("p"); - t62 = text("This website became a demonstration to others that "); + b4.textContent = "class"; + t62 = text(" (or worse "); b5 = element("b"); - b5.textContent = "layout"; - t64 = text(" doesn't need "); + b5.textContent = "tag.class=tag"; + t64 = text(") which subverts the normal specificity rules originally intended to reduce duplication."); + t65 = space(); + li2 = element("li"); + li2.textContent = "Relying on the vaguely defined cascade rules to dominate the entire CSS cascade using #1 and #2."; + t67 = space(); + h20 = element("h2"); + h20.textContent = "
Title And Stuff
\n\n zedshaw \n
\n\n\n 280 posts 4,695 followers 1,778 following\n
\n\nZed A. Shaw
\nPainter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:
\n www.twitch.tv/zedashaw\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n\n \n {css_code}\n
\n
\n \n \n {html_code}\n
\n
\n Lorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n
\n@lzsthw
\nThe author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.
\n167 Following 10.4k Followers
\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:
\n\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title And Stuff
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
\n \n\n zedshaw \n
\n\n\n 280 posts 4,695 followers 1,778 following\n
\n\nZed A. Shaw
\nPainter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:
\n www.twitch.tv/zedashaw\n
Collection by A Person
\n420 Pins • 3.59k Followers
\n\"I dream my painting and I paint my dream.\" ~ Vincent van Gogh\n
\n \n
\n\n\n 10 videos 4,695 followers\n
\n\nThe first module you should take. It covers the basics of drawing and how to get started\n making drawing a habit.\n
\nTitle And Stuff
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
\n \nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nLorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nDesigners love modals. Click anywhere to close this.
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n
\nTitle And Stuff
\n\n zedshaw \n
\n\n\n 280 posts 4,695 followers 1,778 following\n
\n\nZed A. Shaw
\nPainter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:
\n www.twitch.tv/zedashaw\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n\n \n {css_code}\n
\n
\n \n \n {html_code}\n
\n
\n Lorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n
\n@lzsthw
\nThe author of The Hard Way Series published by Addison/Wesley including Learn Python The Hard Way and many more. Follow me here for coding tips and book news.
\n167 Following 10.4k Followers
\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam:
\n\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Title And Stuff
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
\n \n\n zedshaw \n
\n\n\n 280 posts 4,695 followers 1,778 following\n
\n\nZed A. Shaw
\nPainter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:
\n www.twitch.tv/zedashaw\n
Collection by A Person
\n420 Pins • 3.59k Followers
\n\"I dream my painting and I paint my dream.\" ~ Vincent van Gogh\n
\n \n
\n\n\n 10 videos 4,695 followers\n
\n\nThe first module you should take. It covers the basics of drawing and how to get started\n making drawing a habit.\n
\nTitle And Stuff
\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
\n \nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nLorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nDesigners love modals. Click anywhere to close this.
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n
\nIt started as an attempt to relearn modern CSS for myself so I can teach others. As I did this I realized that most of the things I learned have been completely replaced with flexbox and grids, and if I just use those then CSS becomes much easier to understand. Specificity works as expected. When I change a component with class or id it actually changes. The layout flows correctly and is easier to create. Nearly everything works better and is easier to understand. +
+ +This website became a demonstration to others that layout doesn't need div.class structure, subverting ul/li tags, and other CSS hacks. You can use simple truly semantic HTML and simple CSS to accomplish 90% of what you're doing today with more reliable results faster. +
+ +I used an entirely monochrome simplified design because I'm not a designer, and I want people to focus on the visual structure of each demo, not whether my use of Cornflower Blue was appropriate for a button. +
+ +I'm also an experienced oil painter and a fundamental teaching in realist art is that color does not matter for visual comprehension. What matters most is the "drawing", or monochrome aspects of visual experience. If you can't make something work in monochrome then no amount of color will help. Make it visually understandable in monochrome and any color scheme you choose should work (barring a few rules about color perception's relationship to monochrome values). +
+ +There's nothing wrong with classes in CSS. How they're used in recent CSS frameworks subverts the normal specificity rules making CSS unnecessarily difficult. The original specificity rules put the base design of a component at the tag level, then a class can be used to modify and extend the design, and an id can make this even more specific. In today's use of div.class heavy markup you lose this ability to alter the design as needed where its used, and instead you have to resort to !important and specificity hacking to change how something looks, or add more div with more class.
+ +The other problem with div.class is it's more difficult to debug problems with the layout. There's the obvious problem of debugging failures in layout through a forest of divs, but you're also relying on specificity that can come from anywhere in the cascade. It's much more difficult to find exactly what bit of CSS is overriding your local decisions. If you've ever had to open the inspector in your browser to troll through CSS locations looking for the culprit then that's why. If the base design decisions are at the tag level, then your local class and id specifics will work as expected. You can also replace many uses of class as design modifiers with scoped CSS variables and reduce the use of div.class even further.
+ +Finally, using div.class heavy layout systems pollutes your markup with structure that's difficult to analyze and maintain. When you focus on using truly semantic named tags and follow specificity as intended then your HTML is lighter and easier to understand because it isn't full of div.grid.col-1.col-mx-auto class rules that really have nothing to do with the actual meaning of that particular visual element. With flexbox and CSS grids you don't need any layout divs, and can keep the HTML clean and semantic. This also ends up being more flexible with less or the same effort as using a pre-made grid system full of divs.
+ +Hell no. The current problem of too much class based CSS is because of trends in recent years calling for everyone to irrationally ban some practice. Remember when everyone decided tables were evil? So then we banned tables and grids completely? Then nobody could do a layout without crazy tricks and JavaScript? Nobody wants a repeat of the anti-tables "semantic markup" war, so please don't ban div.class.
+ +All this website does is demonstrate that you don't need so much div.class. You can scrap a lot of what you're using now to do layout and go with clean HTML with flatter structure, then judiciously use div.class as needed. Treat div.class like salt. Right now you're pouring a whole box of it on your HTML when a little bit makes it taste better.
+ +They could but I haven't taken the time to make them adapt. That may come in a later release. Try it anyway +as you may be surprised how well the layouts still work on smaller screens.
+ +Yes please. If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on Twitter at @lzsthw and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using. This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks. Also keep in mind that I am not invested in "winning" and only curious about the limits of flexbox and CSS grids. If you find something I can't do, that means I found a useful limit to avoid. It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s. +
diff --git a/src/Home.svelte b/src/Home.svelte index f0d11ac..86d4260 100644 --- a/src/Home.svelte +++ b/src/Home.svelte @@ -26,14 +26,21 @@ padding-right: 4rem; } - h1#faq { - font-size: 3em; + quote { + box-shadow: 4px 4px 4px 4px var(--color-shadow); + padding: 1em; + font-style: italic; + background-color: var(--color-bg-secondary); + } + + pre code { + font-size: 0.8em; }An experiment in cleaning up CSS and HTML with modern tools like flexbox and grids.
+An experiment in cleaning up CSS and HTML with modern tools like flexbox and grids.
Using a classless style like MVP.css, you - bring back CSS specificity to its original intent.
+ bring back CSS specificity to its original intent.