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');
/* ------------------- */
/* Custom Properties */
/* ------------------- */
:root {
--clr-body-bg: #08031A;
--img-body-bg: url('/assets/starsforever.png');
@ -32,7 +36,10 @@
--ff-primary: 'Noto Sans';
}
/* CSS RESET */
/* ------------------- */
/* CSS Reset */
/* ------------------- */
/* Box sizing rules */
*,
*::before,
@ -108,7 +115,9 @@ select {
}
}
/* STYLING BEGINS */
/* ------------------- */
/* STYLING BEGINS */
/* ------------------- */
/* General Styles */
body {
@ -249,6 +258,7 @@ summary {
.main-header img {
object-fit: scale-down;
overflow: hidden;
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
}
/* NAVIGATION BAR COMPONENT */
@ -532,11 +542,88 @@ article, .content-container {
gap: 0.5rem;
}
/* REFERENCES LIST */
/* References list */
.references-list {
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 */
.main-footer {
background: var(--clr-main-footer-bg);