✨ feat: styleguide
This commit is contained in:
marleyrae
parent
0c6e781d20
commit
9ba8035f4d
8 changed files with 292 additions and 105 deletions
7
src/_includes/layout_flow.liquid
Normal file
7
src/_includes/layout_flow.liquid
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: layout.liquid
|
||||
---
|
||||
|
||||
<div class="flow">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
|
@ -3,130 +3,108 @@ layout: layout.liquid
|
|||
---
|
||||
<h2 class="Title--sizeH4 u-textCenter">The Small Web Manifesto</h2>
|
||||
|
||||
<p>
|
||||
I grew up with the internet.
|
||||
</p>
|
||||
<p>I grew up with the internet.</p>
|
||||
|
||||
<p>
|
||||
I was born in 1997. The internet was flourishing by then, but it was still the wild west of technology. It was a
|
||||
place of wonder, of creativity, a place you visited rather than lived in. Growing up in the 2000s meant growing up
|
||||
with the internet. I was slightly too young and sheltered to have my own Geocities page, but it was sites like that,
|
||||
that I grew up with.
|
||||
</p>
|
||||
<p>I was born in 1997. The internet was flourishing by then, but it was still
|
||||
the wild west of technology. It was a place of wonder, of creativity, a place
|
||||
you visited rather than lived in. Growing up in the 2000s meant growing up with
|
||||
the internet. I was slightly too young and sheltered to have my own Geocities
|
||||
page, but it was sites like that, that I grew up with.</p>
|
||||
|
||||
<p>
|
||||
In the 3rd grade, at my school's Scholastic Book Fair, I came across a copy of Petz 5. I begged and begged my
|
||||
parents to buy it, and they did! This simple game, centered around raising virtual dogz and catz, is an intregal
|
||||
part of who I am today.
|
||||
</p>
|
||||
<p>In the 3rd grade, at my school's Scholastic Book Fair, I came across a copy
|
||||
of Petz 5. I begged and begged my parents to buy it, and they did! This simple
|
||||
game, centered around raising virtual dogz and catz, is an intregal part of who
|
||||
I am today.</p>
|
||||
|
||||
<p>
|
||||
I don't remember how I discovered Petz fansites, but once I did, I was hooked. I spent hours downloading custom
|
||||
breeds, clothes, and toys, and learning what the various game files did. I convinced my mom to make me an email
|
||||
address so I could adopt petz from the people who ran these sites. I learned the sad truth that just because a site
|
||||
is online, doesn't mean that it's active, and the cute puppies I requested were never arriving to my inbox.
|
||||
</p>
|
||||
<p>I don't remember how I discovered Petz fansites, but once I did, I was
|
||||
hooked. I spent hours downloading custom breeds, clothes, and toys, and learning
|
||||
what the various game files did. I convinced my mom to make me an email address
|
||||
so I could adopt petz from the people who ran these sites. I learned the sad
|
||||
truth that just because a site is online, doesn't mean that it's active, and the
|
||||
cute puppies I requested were never arriving to my inbox.</p>
|
||||
|
||||
<p>
|
||||
Computer game files were much more hackable back then, and I credit Petz for showing me that computers weren't
|
||||
magic, they were created by a hundred little parts working together, and that by changing one part you could
|
||||
customize your experience. Computers could be moulded to fit whatever I desired them to do.
|
||||
</p>
|
||||
<p>Computer game files were much more hackable back then, and I credit Petz for
|
||||
showing me that computers weren't magic, they were created by a hundred little
|
||||
parts working together, and that by changing one part you could customize your
|
||||
experience. Computers could be moulded to fit whatever I desired them to do.</p>
|
||||
|
||||
<p>
|
||||
However, it was websites that really caught my fancy.
|
||||
</p>
|
||||
<p>However, it was websites that really caught my fancy.</p>
|
||||
|
||||
<p>
|
||||
I have always been an artist. Most people don't think of web design as art anymore, because most people only
|
||||
interact with the internet through sanitized social media and clickbait article sites that all look more or less the
|
||||
same. But websites used to be personal, they used to be unique, they used to be about self-expression. People made
|
||||
websites to share something they created with the world.
|
||||
</p>
|
||||
<p>I have always been an artist. Most people don't think of web design as art
|
||||
anymore, because most people only interact with the internet through sanitized
|
||||
social media and clickbait article sites that all look more or less the same.
|
||||
But websites used to be personal, they used to be unique, they used to be about
|
||||
self-expression. People made websites to share something they created with the
|
||||
world.</p>
|
||||
|
||||
<p class="u-rainbowifyChildren">
|
||||
The world wide web is only 33 years old, and yet most people have already forgotten what it was invented for. At its
|
||||
heart, the internet is about <i>connection</i> and <i>expression.</i> Anybody from anywhere in the world can talk to
|
||||
someone anywhere else in the world, provided they have an internet connection and a device to access it through. You
|
||||
can share whatever you want, however you want.
|
||||
</p>
|
||||
<p class="u-rainbowifyChildren">The world wide web is only 33 years old, and yet
|
||||
most people have already forgotten what it was invented for. At its heart, the
|
||||
internet is about <i>connection</i> and <i>expression.</i> Anybody from anywhere
|
||||
in the world can talk to someone anywhere else in the world, provided they have
|
||||
an internet connection and a device to access it through. You can share whatever
|
||||
you want, however you want.</p>
|
||||
|
||||
<p>
|
||||
This is something social media has tried to take away from us. Remember the days when you could customize your
|
||||
MySpace profile? Or put as many blinkies on your Geocities as your heart desired? Twitter doesn't even let you set a
|
||||
profile color anymore. Instagram will delete your photo if you happen to show a little too much skin. Neither will
|
||||
let you show your feed in chronological order or only show posts from people you follow.
|
||||
</p>
|
||||
<p>This is something social media has tried to take away from us. Remember the
|
||||
days when you could customize your MySpace profile? Or put as many blinkies on
|
||||
your Geocities as your heart desired? Twitter doesn't even let you set a profile
|
||||
color anymore. Instagram will delete your photo if you happen to show a little
|
||||
too much skin. Neither will let you show your feed in chronological order or
|
||||
only show posts from people you follow.</p>
|
||||
|
||||
<p class="u-rainbowifyChildren">
|
||||
These corporations have made <i>you</i> the product. Products don't get to chose how they're displayed or who uses
|
||||
them. So is it any wonder that social media doesn't let you change the background or font color on your profile? Let
|
||||
alone how your data gets used or even what's collected at all!
|
||||
</p>
|
||||
<p class="u-rainbowifyChildren">These corporations have made <i>you</i> the
|
||||
product. Products don't get to chose how they're displayed or who uses them. So
|
||||
is it any wonder that social media doesn't let you change the background or font
|
||||
color on your profile? Let alone how your data gets used or even what's
|
||||
collected at all!</p>
|
||||
|
||||
<p>
|
||||
So how do we fight back?
|
||||
</p>
|
||||
<p>So how do we fight back?</p>
|
||||
|
||||
<p class="u-rainbowifyChildren">
|
||||
Delete your social media. I'm serious. These sites may pretend their money comes from ads, but without their actual
|
||||
product, the users, ad companies won't pay to show ads on these sites anymore. Ad companies buy ads on social media
|
||||
because social media has put all of their users into highly specific ad profiles. Ad companies pay to target exactly
|
||||
who is likely to use their product, or has already done so, and nobody else. Without users to fill ad profiles with,
|
||||
ad companies won't buy ads.
|
||||
</p>
|
||||
<p class="u-rainbowifyChildren">Delete your social media. I'm serious. These
|
||||
sites may pretend their money comes from ads, but without their actual product,
|
||||
the users, ad companies won't pay to show ads on these sites anymore. Ad
|
||||
companies buy ads on social media because social media has put all of their
|
||||
users into highly specific ad profiles. Ad companies pay to target exactly who
|
||||
is likely to use their product, or has already done so, and nobody else. Without
|
||||
users to fill ad profiles with, ad companies won't buy ads.</p>
|
||||
|
||||
<p>
|
||||
Besides, do you really care what your best friend's aunt's sister eats for breakfast every day of the week?
|
||||
</p>
|
||||
<p>Besides, do you really care what your best friend's aunt's sister eats for
|
||||
breakfast every day of the week?</p>
|
||||
|
||||
<p>
|
||||
I say this with the caveat that this isn't always possible, especially if you make money from social media. As much
|
||||
as I hate what Musk has done with Twitter, it's the only social media left I'm allowed to be a sex worker on, and in
|
||||
2023 social media is unfortunately part of the job. So I can't delete it.
|
||||
</p>
|
||||
<p>I say this with the caveat that this isn't always possible, especially if you
|
||||
make money from social media. As much as I hate what Musk has done with Twitter,
|
||||
it's the only social media left I'm allowed to be a sex worker on, and in 2023
|
||||
social media is unfortunately part of the job. So I can't delete it.</p>
|
||||
|
||||
<p class="u-rainbowifyChildren">
|
||||
Make your own site. <a class="Link" href="https://neocities.org" target="_blank">Neocities</a> is a wonderful place
|
||||
to do so - it combines personal sites with a social media-esque following system, all while being open-source and
|
||||
ad-free. Fill the web with personal shrines to self-expression again.
|
||||
</p>
|
||||
<p class="u-rainbowifyChildren">Make your own site. <a class="Link"
|
||||
href="https://neocities.org" target="_blank">Neocities</a> is a wonderful
|
||||
place to do so - it combines personal sites with a social media-esque following
|
||||
system, all while being open-source and ad-free. Fill the web with personal
|
||||
shrines to self-expression again.</p>
|
||||
|
||||
<p class="u-rainbowifyChildren">
|
||||
The web is yours. It always has been. Let's remind corporations that this wild west belongs to the <i>people</i>,
|
||||
not a bottom line.
|
||||
</p>
|
||||
<p class="u-rainbowifyChildren">The web is yours. It always has been. Let's
|
||||
remind corporations that this wild west belongs to the <i>people</i>, not a
|
||||
bottom line.</p>
|
||||
|
||||
<p>
|
||||
Stand up for self-expression. Stand up for freedom.
|
||||
</p>
|
||||
<p>Stand up for self-expression. Stand up for freedom.</p>
|
||||
|
||||
<p>
|
||||
Take back the web.
|
||||
</p>
|
||||
<p>Take back the web.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<ul class="List">
|
||||
<li class="List-item">
|
||||
<a href="https://sadgrl.online/cyberspace/internet-manifesto.html" target="_blank" class="Link">The internet has
|
||||
changed</a>
|
||||
</li>
|
||||
<li class="List-item">
|
||||
<a href="https://yesterweb.org/" target="_blank" class="Link">Yesterweb</a>
|
||||
</li>
|
||||
<li class="List-item">
|
||||
<a href="https://auzziejay.com/manifesto/" target="_blank" class="Link">Auzzie Jay's Manifesto</a>
|
||||
</li>
|
||||
<li class="List-item">
|
||||
<a href="https://lu.tiny-universes.net/indiewebmanifesto.html" target="_blank" class="Link">The Indie Web
|
||||
Manifesto</a>
|
||||
</li>
|
||||
<li class="List-item">
|
||||
<a href="https://flamedfury.com/manifesto/" target="_blank" class="Link">My Web Manifesto : fLaMEdFury</a>
|
||||
</li>
|
||||
<li class="List-item">
|
||||
<a href="https://ajknox.neocities.org/writing/nonfic/whyneocities.html" target="_blank" class="Link">Why
|
||||
Neocities?</a>
|
||||
</li>
|
||||
<li class="List-item"><a
|
||||
href="https://sadgrl.online/cyberspace/internet-manifesto.html"
|
||||
target="_blank" class="Link">The internet has changed</a></li>
|
||||
<li class="List-item"><a href="https://yesterweb.org/" target="_blank"
|
||||
class="Link">Yesterweb</a></li>
|
||||
<li class="List-item"><a href="https://auzziejay.com/manifesto/"
|
||||
target="_blank" class="Link">Auzzie Jay's Manifesto</a></li>
|
||||
<li class="List-item"><a
|
||||
href="https://lu.tiny-universes.net/indiewebmanifesto.html" target="_blank"
|
||||
class="Link">The Indie Web Manifesto</a></li>
|
||||
<li class="List-item"><a href="https://flamedfury.com/manifesto/"
|
||||
target="_blank" class="Link">My Web Manifesto : fLaMEdFury</a></li>
|
||||
<li class="List-item"><a
|
||||
href="https://ajknox.neocities.org/writing/nonfic/whyneocities.html"
|
||||
target="_blank" class="Link">Why Neocities?</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,27 @@ $neutral-900: rgb(24 24 27);
|
|||
/* gradient */
|
||||
$gradient: linear-gradient(90deg, $red-400 0%, $orange-400 17%, $yellow-400 33%, $green-400 50%, $blue-400 67%, $purple-400 83%, $pink-400 100%);
|
||||
|
||||
/* color iterator (mostly used for styleguide classes) */
|
||||
$colors: (
|
||||
"red400": $red-400,
|
||||
"red600": $red-600,
|
||||
"orange400": $orange-400,
|
||||
"orange600": $orange-600,
|
||||
"yellow400": $yellow-400,
|
||||
"yellow600": $yellow-600,
|
||||
"green400": $green-400,
|
||||
"green600": $green-600,
|
||||
"blue400": $blue-400,
|
||||
"blue600": $blue-600,
|
||||
"purple400": $purple-400,
|
||||
"purple600": $purple-600,
|
||||
"pink400": $pink-400,
|
||||
"pink600": $pink-600,
|
||||
"neutral50": $neutral-50,
|
||||
"neutral900": $neutral-900,
|
||||
"gradient": $gradient,
|
||||
);
|
||||
|
||||
/* text color iterator */
|
||||
$text-colors: [
|
||||
$red-600,
|
||||
|
|
@ -49,6 +70,7 @@ $text-colors: [
|
|||
];
|
||||
|
||||
/* bullet image iterator */
|
||||
//noinspection CssUnknownTarget
|
||||
$bullet-images-point-left: [
|
||||
url('/style/assets/ha01-icon-arrow.gif'),
|
||||
url('/style/assets/ha02-icon-arrow.gif'),
|
||||
|
|
@ -58,6 +80,7 @@ $bullet-images-point-left: [
|
|||
url('/style/assets/ha08-icon-arrow.gif'),
|
||||
url('/style/assets/ha10-icon-arrow.gif')
|
||||
];
|
||||
//noinspection CssUnknownTarget
|
||||
$bullet-images-point-right: [
|
||||
url('style/assets/hb01-icon-arrow.gif'),
|
||||
url('style/assets/hb02-icon-arrow.gif'),
|
||||
|
|
|
|||
|
|
@ -4,4 +4,8 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.flow {
|
||||
@include mixins.flow;
|
||||
}
|
||||
|
||||
@include mixins.rainbowify-text('.u-rainbowifyChildren', --rainbow-text);
|
||||
|
|
|
|||
52
src/style/components/_StyleGuide.scss
Normal file
52
src/style/components/_StyleGuide.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
@use '../theme';
|
||||
@use '../mixins';
|
||||
|
||||
.StyleGuide-colors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
%StyleGuide-color {
|
||||
padding: theme.$spacer-2xs theme.$spacer-xs;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.StyleGuide-color--heading {
|
||||
@extend %StyleGuide-color;
|
||||
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@each $name, $color in theme.$colors {
|
||||
.StyleGuide-color--#{$name} {
|
||||
@extend %StyleGuide-color;
|
||||
|
||||
@if ($name == "neutral900") {
|
||||
color: theme.$neutral-50;
|
||||
}
|
||||
|
||||
@if ($name == 'gradient') {
|
||||
background-image: $color;
|
||||
width: 100%;
|
||||
} @else {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.StyleGuide-rainbowText {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.StyleGuide-italics, .StyleGuide-bold, .StyleGuide-links {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.StyleGuide-rainbowBorder {
|
||||
@include mixins.gradient-border;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
|
||||
/* global components */
|
||||
@forward 'Gallery';
|
||||
@forward "StyleGuide";
|
||||
|
||||
/* page-specific components */
|
||||
@forward 'index/UpdateBox';
|
||||
|
|
|
|||
|
|
@ -38,3 +38,9 @@
|
|||
|
||||
font-size: theme.$fontSize-2;
|
||||
}
|
||||
|
||||
.Title--sizeH5 {
|
||||
@include Title(theme.$fontSize-0);
|
||||
|
||||
font-size: theme.$fontSize-1;
|
||||
}
|
||||
|
|
|
|||
116
src/styleguide.liquid
Normal file
116
src/styleguide.liquid
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
---
|
||||
layout: layout_flow.liquid
|
||||
title: Style Guide
|
||||
---
|
||||
|
||||
<h2 class="Title--sizeH3">Colors</h2>
|
||||
|
||||
<div class="StyleGuide-colors">
|
||||
<!-- headings -->
|
||||
<div class="StyleGuide-color--heading">for backgrounds</div>
|
||||
<div class="StyleGuide-color--heading">for text</div>
|
||||
|
||||
<!-- reds -->
|
||||
<div class="StyleGuide-color--red400">$red-400</div>
|
||||
<div class="StyleGuide-color--red600">$red-600</div>
|
||||
|
||||
<!-- oranges -->
|
||||
<div class="StyleGuide-color--orange400">$orange-400</div>
|
||||
<div class="StyleGuide-color--orange600">$orange-600</div>
|
||||
|
||||
<!-- yellows -->
|
||||
<div class="StyleGuide-color--yellow400">$yellow-400</div>
|
||||
<div class="StyleGuide-color--yellow600">$yellow-600</div>
|
||||
|
||||
<!-- greens -->
|
||||
<div class="StyleGuide-color--green400">$green-400</div>
|
||||
<div class="StyleGuide-color--green600">$green-600</div>
|
||||
|
||||
<!-- blues -->
|
||||
<div class="StyleGuide-color--blue400">$blue-400</div>
|
||||
<div class="StyleGuide-color--blue600">$blue-600</div>
|
||||
|
||||
<!-- purples -->
|
||||
<div class="StyleGuide-color--purple400">$purple-400</div>
|
||||
<div class="StyleGuide-color--purple600">$purple-600</div>
|
||||
|
||||
<!-- pinks -->
|
||||
<div class="StyleGuide-color--pink400">$pink-400</div>
|
||||
<div class="StyleGuide-color--pink600">$pink-600</div>
|
||||
|
||||
<!-- neutrals -->
|
||||
<div class="StyleGuide-color--neutral50">$neutral-400</div>
|
||||
<div class="StyleGuide-color--neutral900">$neutral-600</div>
|
||||
|
||||
<div class="StyleGuide-color--gradient">$gradient</div>
|
||||
</div>
|
||||
|
||||
<h2 class="Title--sizeH3">Text</h2>
|
||||
|
||||
<p class="u-rainbowifyChildren"><b><p></b>This is a paragraph, containing
|
||||
long amounts of text that likely wraps onto multiple lines. I can say anything
|
||||
here, but if it's too long readers are likely to skip
|
||||
it!<b></p></b></p>
|
||||
|
||||
<div class="StyleGuide-rainbowText">
|
||||
<div class="StyleGuide-italics">
|
||||
<i><i>italic text</i></i><br>
|
||||
<i><i>italic text</i></i><br>
|
||||
<i><i>italic text</i></i><br>
|
||||
<i><i>italic text</i></i><br>
|
||||
<i><i>italic text</i></i><br>
|
||||
<i><i>italic text</i></i><br>
|
||||
<i><i>italic text</i></i><br>
|
||||
</div>
|
||||
|
||||
<div class="StyleGuide-bold">
|
||||
<b><b>bold text</b></b><br>
|
||||
<b><b>bold text</b></b><br>
|
||||
<b><b>bold text</b></b><br>
|
||||
<b><b>bold text</b></b><br>
|
||||
<b><b>bold text</b></b><br>
|
||||
<b><b>bold text</b></b><br>
|
||||
<b><b>bold text</b></b><br>
|
||||
</div>
|
||||
|
||||
<div class="StyleGuide-links">
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
<a class="Link"><a class="Link">link</a></a><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="Title--sizeH2">.Title--sizeH2</div>
|
||||
<div class="Title--sizeH3">.Title--sizeH3</div>
|
||||
<div class="Title--sizeH4">.Title--sizeH4</div>
|
||||
<div class="Title--sizeH5">.Title--sizeH5</div>
|
||||
</div>
|
||||
|
||||
<ul class="List">
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
<li class="List-item"><li class="List-item">unordered
|
||||
list</li></li>
|
||||
</ul>
|
||||
|
||||
<h2 class="Title--sizeH3">Mixins/Components</h2>
|
||||
|
||||
<div class="StyleGuide-rainbowBorder">@include mixins.gradient-border;</div>
|
||||
|
||||
<div class="u-textCenter"><hr></div>
|
||||
<hr>
|
||||
Loading…
Reference in a new issue