Add pride flags

This commit is contained in:
Helen Chong 2023-10-23 15:28:23 +08:00
parent 5c602d5663
commit e9c5dc7717
1 changed files with 90 additions and 3 deletions

View File

@ -1,5 +1,9 @@
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
/* ------------------- */
/* Custom Properties */
/* ------------------- */
:root { :root {
--clr-body-bg: #08031A; --clr-body-bg: #08031A;
--img-body-bg: url('/assets/starsforever.png'); --img-body-bg: url('/assets/starsforever.png');
@ -32,7 +36,10 @@
--ff-primary: 'Noto Sans'; --ff-primary: 'Noto Sans';
} }
/* CSS RESET */ /* ------------------- */
/* CSS Reset */
/* ------------------- */
/* Box sizing rules */ /* Box sizing rules */
*, *,
*::before, *::before,
@ -108,7 +115,9 @@ select {
} }
} }
/* ------------------- */
/* STYLING BEGINS */ /* STYLING BEGINS */
/* ------------------- */
/* General Styles */ /* General Styles */
body { body {
@ -249,6 +258,7 @@ summary {
.main-header img { .main-header img {
object-fit: scale-down; object-fit: scale-down;
overflow: hidden; overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
} }
/* NAVIGATION BAR COMPONENT */ /* NAVIGATION BAR COMPONENT */
@ -532,11 +542,88 @@ article, .content-container {
gap: 0.5rem; gap: 0.5rem;
} }
/* REFERENCES LIST */ /* References list */
.references-list { .references-list {
font-size: 0.96em; font-size: 0.96em;
} }
/* Pride flag backgrounds */
.flag-ace {
background: repeating-linear-gradient(
#000000 0 25%,
#a3a3a3 0 50%,
#ffffff 0 75%,
#800080 0 100%
);
}
.flag-bi {
background: repeating-linear-gradient(
#d60270 0 40%,
#9b4f97 0 60%,
#0038a7 0 100%
);
}
.flag-lesbian {
background: repeating-linear-gradient(
#d52d00 0 14.29%,
#ef7627 0 28.57%,
#ff9a56 0 42.86%,
#ffffff 0 57.14%,
#d362a4 0 71.43%,
#b85490 0 86.71%,
#a30262 0 100%
);
}
.flag-non-binary {
background: repeating-linear-gradient(
#fff430 0 25%,
#ffffff 0 50%,
#9c59d1 0 75%,
#000000 0 100%
);
}
.flag-pan {
background: repeating-linear-gradient(
#ff218c 0 33.33%,
#ffd800 0 66.67%,
#21b1ff 0 100%
);
}
.flag-rainbow {
background: repeating-linear-gradient(
#e40303 0 16.67%,
#ff8c00 0 33.33%,
#ffed00 0 50%,
#008026 0 66.67%,
#004dff 0 83.33%,
#750787 0 100%
);
}
.flag-trans {
background: repeating-linear-gradient(
#5bcefa 0 20%,
#f5a9b8 0 40%,
#ffffff 0 60%,
#f5a9b8 0 80%,
#5bcefa 0 100%
);
}
.flag-intersex {
background: radial-gradient(closest-side circle at center,
#ffd800 44%,
#7902aa 44%,
#7902aa 56%,
#ffd800 56%
);
}
/* FOOTER COMPONENT */ /* FOOTER COMPONENT */
.main-footer { .main-footer {
background: var(--clr-main-footer-bg); background: var(--clr-main-footer-bg);