✨ 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>
|
<h2 class="Title--sizeH4 u-textCenter">The Small Web Manifesto</h2>
|
||||||
|
|
||||||
<p>
|
<p>I grew up with the internet.</p>
|
||||||
I grew up with the internet.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>I was born in 1997. The internet was flourishing by then, but it was still
|
||||||
I was born in 1997. The internet was flourishing by then, but it was still the wild west of technology. It was a
|
the wild west of technology. It was a place of wonder, of creativity, a place
|
||||||
place of wonder, of creativity, a place you visited rather than lived in. Growing up in the 2000s meant growing up
|
you visited rather than lived in. Growing up in the 2000s meant growing up with
|
||||||
with the internet. I was slightly too young and sheltered to have my own Geocities page, but it was sites like that,
|
the internet. I was slightly too young and sheltered to have my own Geocities
|
||||||
that I grew up with.
|
page, but it was sites like that, that I grew up with.</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>In the 3rd grade, at my school's Scholastic Book Fair, I came across a copy
|
||||||
In the 3rd grade, at my school's Scholastic Book Fair, I came across a copy of Petz 5. I begged and begged my
|
of Petz 5. I begged and begged my parents to buy it, and they did! This simple
|
||||||
parents to buy it, and they did! This simple game, centered around raising virtual dogz and catz, is an intregal
|
game, centered around raising virtual dogz and catz, is an intregal part of who
|
||||||
part of who I am today.
|
I am today.</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>I don't remember how I discovered Petz fansites, but once I did, I was
|
||||||
I don't remember how I discovered Petz fansites, but once I did, I was hooked. I spent hours downloading custom
|
hooked. I spent hours downloading custom breeds, clothes, and toys, and learning
|
||||||
breeds, clothes, and toys, and learning what the various game files did. I convinced my mom to make me an email
|
what the various game files did. I convinced my mom to make me an email address
|
||||||
address so I could adopt petz from the people who ran these sites. I learned the sad truth that just because a site
|
so I could adopt petz from the people who ran these sites. I learned the sad
|
||||||
is online, doesn't mean that it's active, and the cute puppies I requested were never arriving to my inbox.
|
truth that just because a site is online, doesn't mean that it's active, and the
|
||||||
</p>
|
cute puppies I requested were never arriving to my inbox.</p>
|
||||||
|
|
||||||
<p>
|
<p>Computer game files were much more hackable back then, and I credit Petz for
|
||||||
Computer game files were much more hackable back then, and I credit Petz for showing me that computers weren't
|
showing me that computers weren't magic, they were created by a hundred little
|
||||||
magic, they were created by a hundred little parts working together, and that by changing one part you could
|
parts working together, and that by changing one part you could customize your
|
||||||
customize your experience. Computers could be moulded to fit whatever I desired them to do.
|
experience. Computers could be moulded to fit whatever I desired them to do.</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>However, it was websites that really caught my fancy.</p>
|
||||||
However, it was websites that really caught my fancy.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>I have always been an artist. Most people don't think of web design as art
|
||||||
I have always been an artist. Most people don't think of web design as art anymore, because most people only
|
anymore, because most people only interact with the internet through sanitized
|
||||||
interact with the internet through sanitized social media and clickbait article sites that all look more or less the
|
social media and clickbait article sites that all look more or less the same.
|
||||||
same. But websites used to be personal, they used to be unique, they used to be about self-expression. People made
|
But websites used to be personal, they used to be unique, they used to be about
|
||||||
websites to share something they created with the world.
|
self-expression. People made websites to share something they created with the
|
||||||
</p>
|
world.</p>
|
||||||
|
|
||||||
<p class="u-rainbowifyChildren">
|
<p class="u-rainbowifyChildren">The world wide web is only 33 years old, and yet
|
||||||
The world wide web is only 33 years old, and yet most people have already forgotten what it was invented for. At its
|
most people have already forgotten what it was invented for. At its heart, the
|
||||||
heart, the internet is about <i>connection</i> and <i>expression.</i> Anybody from anywhere in the world can talk to
|
internet is about <i>connection</i> and <i>expression.</i> Anybody from anywhere
|
||||||
someone anywhere else in the world, provided they have an internet connection and a device to access it through. You
|
in the world can talk to someone anywhere else in the world, provided they have
|
||||||
can share whatever you want, however you want.
|
an internet connection and a device to access it through. You can share whatever
|
||||||
</p>
|
you want, however you want.</p>
|
||||||
|
|
||||||
<p>
|
<p>This is something social media has tried to take away from us. Remember the
|
||||||
This is something social media has tried to take away from us. Remember the days when you could customize your
|
days when you could customize your MySpace profile? Or put as many blinkies on
|
||||||
MySpace profile? Or put as many blinkies on your Geocities as your heart desired? Twitter doesn't even let you set a
|
your Geocities as your heart desired? Twitter doesn't even let you set a profile
|
||||||
profile color anymore. Instagram will delete your photo if you happen to show a little too much skin. Neither will
|
color anymore. Instagram will delete your photo if you happen to show a little
|
||||||
let you show your feed in chronological order or only show posts from people you follow.
|
too much skin. Neither will let you show your feed in chronological order or
|
||||||
</p>
|
only show posts from people you follow.</p>
|
||||||
|
|
||||||
<p class="u-rainbowifyChildren">
|
<p class="u-rainbowifyChildren">These corporations have made <i>you</i> the
|
||||||
These corporations have made <i>you</i> the product. Products don't get to chose how they're displayed or who uses
|
product. Products don't get to chose how they're displayed or who uses them. So
|
||||||
them. So is it any wonder that social media doesn't let you change the background or font color on your profile? Let
|
is it any wonder that social media doesn't let you change the background or font
|
||||||
alone how your data gets used or even what's collected at all!
|
color on your profile? Let alone how your data gets used or even what's
|
||||||
</p>
|
collected at all!</p>
|
||||||
|
|
||||||
<p>
|
<p>So how do we fight back?</p>
|
||||||
So how do we fight back?
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="u-rainbowifyChildren">
|
<p class="u-rainbowifyChildren">Delete your social media. I'm serious. These
|
||||||
Delete your social media. I'm serious. These sites may pretend their money comes from ads, but without their actual
|
sites may pretend their money comes from ads, but without their actual product,
|
||||||
product, the users, ad companies won't pay to show ads on these sites anymore. Ad companies buy ads on social media
|
the users, ad companies won't pay to show ads on these sites anymore. Ad
|
||||||
because social media has put all of their users into highly specific ad profiles. Ad companies pay to target exactly
|
companies buy ads on social media because social media has put all of their
|
||||||
who is likely to use their product, or has already done so, and nobody else. Without users to fill ad profiles with,
|
users into highly specific ad profiles. Ad companies pay to target exactly who
|
||||||
ad companies won't buy ads.
|
is likely to use their product, or has already done so, and nobody else. Without
|
||||||
</p>
|
users to fill ad profiles with, ad companies won't buy ads.</p>
|
||||||
|
|
||||||
<p>
|
<p>Besides, do you really care what your best friend's aunt's sister eats for
|
||||||
Besides, do you really care what your best friend's aunt's sister eats for breakfast every day of the week?
|
breakfast every day of the week?</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>I say this with the caveat that this isn't always possible, especially if you
|
||||||
I say this with the caveat that this isn't always possible, especially if you make money from social media. As much
|
make money from social media. As much as I hate what Musk has done with Twitter,
|
||||||
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
|
it's the only social media left I'm allowed to be a sex worker on, and in 2023
|
||||||
2023 social media is unfortunately part of the job. So I can't delete it.
|
social media is unfortunately part of the job. So I can't delete it.</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="u-rainbowifyChildren">
|
<p class="u-rainbowifyChildren">Make your own site. <a class="Link"
|
||||||
Make your own site. <a class="Link" href="https://neocities.org" target="_blank">Neocities</a> is a wonderful place
|
href="https://neocities.org" target="_blank">Neocities</a> is a wonderful
|
||||||
to do so - it combines personal sites with a social media-esque following system, all while being open-source and
|
place to do so - it combines personal sites with a social media-esque following
|
||||||
ad-free. Fill the web with personal shrines to self-expression again.
|
system, all while being open-source and ad-free. Fill the web with personal
|
||||||
</p>
|
shrines to self-expression again.</p>
|
||||||
|
|
||||||
<p class="u-rainbowifyChildren">
|
<p class="u-rainbowifyChildren">The web is yours. It always has been. Let's
|
||||||
The web is yours. It always has been. Let's remind corporations that this wild west belongs to the <i>people</i>,
|
remind corporations that this wild west belongs to the <i>people</i>, not a
|
||||||
not a bottom line.
|
bottom line.</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>Stand up for self-expression. Stand up for freedom.</p>
|
||||||
Stand up for self-expression. Stand up for freedom.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>Take back the web.</p>
|
||||||
Take back the web.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<ul class="List">
|
<ul class="List">
|
||||||
<li class="List-item">
|
<li class="List-item"><a
|
||||||
<a href="https://sadgrl.online/cyberspace/internet-manifesto.html" target="_blank" class="Link">The internet has
|
href="https://sadgrl.online/cyberspace/internet-manifesto.html"
|
||||||
changed</a>
|
target="_blank" class="Link">The internet has changed</a></li>
|
||||||
</li>
|
<li class="List-item"><a href="https://yesterweb.org/" target="_blank"
|
||||||
<li class="List-item">
|
class="Link">Yesterweb</a></li>
|
||||||
<a href="https://yesterweb.org/" target="_blank" class="Link">Yesterweb</a>
|
<li class="List-item"><a href="https://auzziejay.com/manifesto/"
|
||||||
</li>
|
target="_blank" class="Link">Auzzie Jay's Manifesto</a></li>
|
||||||
<li class="List-item">
|
<li class="List-item"><a
|
||||||
<a href="https://auzziejay.com/manifesto/" target="_blank" class="Link">Auzzie Jay's Manifesto</a>
|
href="https://lu.tiny-universes.net/indiewebmanifesto.html" target="_blank"
|
||||||
</li>
|
class="Link">The Indie Web Manifesto</a></li>
|
||||||
<li class="List-item">
|
<li class="List-item"><a href="https://flamedfury.com/manifesto/"
|
||||||
<a href="https://lu.tiny-universes.net/indiewebmanifesto.html" target="_blank" class="Link">The Indie Web
|
target="_blank" class="Link">My Web Manifesto : fLaMEdFury</a></li>
|
||||||
Manifesto</a>
|
<li class="List-item"><a
|
||||||
</li>
|
href="https://ajknox.neocities.org/writing/nonfic/whyneocities.html"
|
||||||
<li class="List-item">
|
target="_blank" class="Link">Why Neocities?</a></li>
|
||||||
<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>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,27 @@ $neutral-900: rgb(24 24 27);
|
||||||
/* gradient */
|
/* 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%);
|
$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 color iterator */
|
||||||
$text-colors: [
|
$text-colors: [
|
||||||
$red-600,
|
$red-600,
|
||||||
|
|
@ -49,6 +70,7 @@ $text-colors: [
|
||||||
];
|
];
|
||||||
|
|
||||||
/* bullet image iterator */
|
/* bullet image iterator */
|
||||||
|
//noinspection CssUnknownTarget
|
||||||
$bullet-images-point-left: [
|
$bullet-images-point-left: [
|
||||||
url('/style/assets/ha01-icon-arrow.gif'),
|
url('/style/assets/ha01-icon-arrow.gif'),
|
||||||
url('/style/assets/ha02-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/ha08-icon-arrow.gif'),
|
||||||
url('/style/assets/ha10-icon-arrow.gif')
|
url('/style/assets/ha10-icon-arrow.gif')
|
||||||
];
|
];
|
||||||
|
//noinspection CssUnknownTarget
|
||||||
$bullet-images-point-right: [
|
$bullet-images-point-right: [
|
||||||
url('style/assets/hb01-icon-arrow.gif'),
|
url('style/assets/hb01-icon-arrow.gif'),
|
||||||
url('style/assets/hb02-icon-arrow.gif'),
|
url('style/assets/hb02-icon-arrow.gif'),
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flow {
|
||||||
|
@include mixins.flow;
|
||||||
|
}
|
||||||
|
|
||||||
@include mixins.rainbowify-text('.u-rainbowifyChildren', --rainbow-text);
|
@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 */
|
/* global components */
|
||||||
@forward 'Gallery';
|
@forward 'Gallery';
|
||||||
|
@forward "StyleGuide";
|
||||||
|
|
||||||
/* page-specific components */
|
/* page-specific components */
|
||||||
@forward 'index/UpdateBox';
|
@forward 'index/UpdateBox';
|
||||||
|
|
|
||||||
|
|
@ -38,3 +38,9 @@
|
||||||
|
|
||||||
font-size: theme.$fontSize-2;
|
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