diff --git a/src/_includes/layout_flow.liquid b/src/_includes/layout_flow.liquid new file mode 100644 index 0000000..87cc8d3 --- /dev/null +++ b/src/_includes/layout_flow.liquid @@ -0,0 +1,7 @@ +--- +layout: layout.liquid +--- + +
+ {{ content }} +
diff --git a/src/manifesto.liquid b/src/manifesto.liquid index 103c475..47583b6 100644 --- a/src/manifesto.liquid +++ b/src/manifesto.liquid @@ -3,130 +3,108 @@ layout: layout.liquid ---

The Small Web Manifesto

-

- I grew up with the internet. -

+

I grew up with the internet.

-

- 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. -

+

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.

-

- 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. -

+

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.

-

- 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. -

+

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.

-

- 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. -

+

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.

-

- However, it was websites that really caught my fancy. -

+

However, it was websites that really caught my fancy.

-

- 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. -

+

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.

-

- 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 connection and expression. 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. -

+

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 connection and expression. 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.

-

- 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. -

+

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.

-

- These corporations have made you 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! -

+

These corporations have made you 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!

-

- So how do we fight back? -

+

So how do we fight back?

-

- 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. -

+

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.

-

- Besides, do you really care what your best friend's aunt's sister eats for breakfast every day of the week? -

+

Besides, do you really care what your best friend's aunt's sister eats for +breakfast every day of the week?

-

- 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. -

+

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.

-

- Make your own site. Neocities 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. -

+

Make your own site. Neocities 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.

-

- The web is yours. It always has been. Let's remind corporations that this wild west belongs to the people, - not a bottom line. -

+

The web is yours. It always has been. Let's +remind corporations that this wild west belongs to the people, not a +bottom line.

-

- Stand up for self-expression. Stand up for freedom. -

+

Stand up for self-expression. Stand up for freedom.

-

- Take back the web. -

+

Take back the web.


diff --git a/src/style/_theme.scss b/src/style/_theme.scss index 443466e..4663d14 100644 --- a/src/style/_theme.scss +++ b/src/style/_theme.scss @@ -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'), diff --git a/src/style/_utils.scss b/src/style/_utils.scss index db7d392..cc5b404 100644 --- a/src/style/_utils.scss +++ b/src/style/_utils.scss @@ -4,4 +4,8 @@ text-align: center; } +.flow { + @include mixins.flow; +} + @include mixins.rainbowify-text('.u-rainbowifyChildren', --rainbow-text); diff --git a/src/style/components/_StyleGuide.scss b/src/style/components/_StyleGuide.scss new file mode 100644 index 0000000..9b9991a --- /dev/null +++ b/src/style/components/_StyleGuide.scss @@ -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; +} diff --git a/src/style/components/_index.scss b/src/style/components/_index.scss index fac5e6a..b1c7c31 100644 --- a/src/style/components/_index.scss +++ b/src/style/components/_index.scss @@ -12,6 +12,7 @@ /* global components */ @forward 'Gallery'; +@forward "StyleGuide"; /* page-specific components */ @forward 'index/UpdateBox'; diff --git a/src/style/components/base/_Title.scss b/src/style/components/base/_Title.scss index fb88075..0702662 100644 --- a/src/style/components/base/_Title.scss +++ b/src/style/components/base/_Title.scss @@ -38,3 +38,9 @@ font-size: theme.$fontSize-2; } + +.Title--sizeH5 { + @include Title(theme.$fontSize-0); + + font-size: theme.$fontSize-1; +} diff --git a/src/styleguide.liquid b/src/styleguide.liquid new file mode 100644 index 0000000..ce0b9c6 --- /dev/null +++ b/src/styleguide.liquid @@ -0,0 +1,116 @@ +--- +layout: layout_flow.liquid +title: Style Guide +--- + +

Colors

+ +
+ +
for backgrounds
+
for text
+ + +
$red-400
+
$red-600
+ + +
$orange-400
+
$orange-600
+ + +
$yellow-400
+
$yellow-600
+ + +
$green-400
+
$green-600
+ + +
$blue-400
+
$blue-600
+ + +
$purple-400
+
$purple-600
+ + +
$pink-400
+
$pink-600
+ + +
$neutral-400
+
$neutral-600
+ +
$gradient
+
+ +

Text

+ +

<p>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!</p>

+ +
+
+ <i>italic text</i>
+ <i>italic text</i>
+ <i>italic text</i>
+ <i>italic text</i>
+ <i>italic text</i>
+ <i>italic text</i>
+ <i>italic text</i>
+
+ +
+ <b>bold text</b>
+ <b>bold text</b>
+ <b>bold text</b>
+ <b>bold text</b>
+ <b>bold text</b>
+ <b>bold text</b>
+ <b>bold text</b>
+
+ + +
+ +
+
.Title--sizeH2
+
.Title--sizeH3
+
.Title--sizeH4
+
.Title--sizeH5
+
+ + + +

Mixins/Components

+ +
@include mixins.gradient-border;
+ +
<hr>
+