LGBTQ.css

index.html

<div class="banner gay u-mb3"></div>
<h6 class="u-mb3 u-w300 u-px3 u-caps u-lt-5 u-lh-1 u-gray">Gay Pride</h6>
<div class="banner trans u-mb3"></div>
<h6 class="u-mb3 u-w300 u-px3 u-caps u-lt-5 u-lh-1 u-gray">Transgender Pride</h6>
<div class="banner bi u-mb3"></div>
<h6 class="u-mb3 u-w300 u-px3 u-caps u-lt-5 u-lh-1 u-gray">Bisexual Pride</h6>
<div class="banner pan u-mb3"></div>
<h6 class="u-mb3 u-w300 u-px3 u-caps u-lt-5 u-lh-1 u-gray">Pansexual Pride</h6>
<div class="banner asex u-mb3"></div>
<h6 class="u-mb3 u-w300 u-px3 u-caps u-lt-5 u-lh-1 u-gray">Asexual Pride</h6>
<div class="banner nb u-mb3"></div>
<h6 class="u-mb3 u-w300 u-px3 u-caps u-lt-5 u-lh-1 u-gray">Non-Binary Pride</h6>


<article class="u-p3">
  <h1 class="h3 u-w500">LGBTQ.css</h1>
  <p class="h6 u-system">Color values are slighty saturated for preference. Massively WIP. Available on <a href="https://github.com/charlespeters/lgbtq.css">GitHub</a>.</p>
</article>

LGBTQ.css.markdown

LGBTQ.css

Simple CSS gradients to show off your Pride

A Pen by Maya Shankar on CodePen.

License.

style.postcss

@use cssnext;

:root {
  --h: 5rem;
  
  --g-red: #D04B36;
  --g-orange: #E36511;
  --g-yellow: #FFBA00;
  --g-green: #00B180;
  --g-blue: #147AAB;
  --g-indigo: #675997;
  
  --t-blue: #4FA5C2;
  --t-pink: #F587AC;
  --t-white: #F9FBFC;
  
  --b-pink: #C1357E;
  --b-purple: #675997;
  --b-blue: #0655A9;
  
  --p-magenta: #FA5E5B;
  --p-yellow: #FFBA00;
  --p-blue: #4FA5C2;
  
  --a-black: #000000;
  --a-grey: #A3A3A3;
  --a-white: #FFFFFF;
  --a-purple: #800080;
  
  --nb-black: #000000;
  --nb-yellow: #FFF433;
  --nb-white: #FFFFFF;
  --nb-purple: #9B59D0;
}

.banner::before {
  content: '';
  width: 100%;
  height: var(--h);
  display: block;
}

.gay {
  background-image: linear-gradient(var(--g-red) 0%, var(--g-red) 16.6666%, var(--g-orange) 16.6666%,var(--g-orange) 33.333%, var(--g-yellow) 33.333%, var(--g-yellow) 50%, var(--g-green) 50%, var(--g-green) 66.6666%, var(--g-blue) 66.6666%, var(--g-blue) 83.3333%, var(--g-indigo) 83.3333%, var(--g-indigo) 100%);
}

.trans {
  background-image: linear-gradient(var(--t-blue) 0%, var(--t-blue) 20%, var(--t-pink) 20%, var(--t-pink) 40%, var(--t-white) 40%, var(--t-white) 60%, var(--t-pink) 60%, var(--t-pink) 80%, var(--t-blue) 80%, var(--t-blue) 100%);
}

.bi {
  background-image: linear-gradient(var(--b-pink) 0%, var(--b-pink) 40%, var(--b-purple) 40%, var(--b-purple) 60%, var(--b-blue) 60%, var(--b-blue) 100%);
}

.pan {
  background-image: linear-gradient(var(--p-magenta) 0%, var(--p-magenta) 33.332%, var(--p-yellow) 33.332%, var(--p-yellow) 66.667%, var(--p-blue) 66.667%, var(--p-blue) 100%);
}

.asex {
  background-image: linear-gradient(var(--a-black) 0%, var(--a-black) 20%, var(--a-grey) 20%, var(--a-grey) 40%, var(--a-white) 40%, var(--a-white) 60%, var(--a-purple) 60%, var(--a-purple) 80%, var(--a-black) 80%, var(--a-black) 100%);
}

.nb {
  background-image: linear-gradient(var(--nb-black) 0%, var(--nb-black) 20%, var(--nb-yellow) 20%, var(--nb-yellow) 40%, var(--nb-white) 40%, var(--nb-white) 60%, var(--nb-purple) 60%, var(--nb-purple) 80%, var(--nb-black) 80%, var(--nb-black) 100%);
}

styles

<link href="//npmcdn.com/obsidian.css/dist/obsidian.min.css" rel="stylesheet" />