diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css new file mode 100644 index 00000000..07c5a2c7 --- /dev/null +++ b/_site/assets/css/main.css @@ -0,0 +1,753 @@ +/* ------------------- */ +/* Custom Properties */ +/* ------------------- */ +:root { + --clr-body-bg: #08031A; + --img-body-bg: url('/assets/images/starsforever.png'); + --clr-body-txt: #fceaff; + --clr-content-bg: #3d2163; + + --clr-main-heading: #ED64F5; + --clr-sub-heading: #e8b86f; + --clr-title-border: #d3aad5; + --clr-bold-txt: #ff9933; + --clr-link: #ED64F5; + --clr-link-hover: #c355c9; + --clr-quote-bg: #13092D; + --clr-quote-border: #999999; + + --clr-code-bg: #241445; + --clr-code-border: #82668f; + --clr-dates: rgb(158, 203, 255); + + --clr-link-btn-bg: #873eb5; + --clr-link-btn-txt: white; + --clr-link-btn-hover: #241445; + + --clr-main-header-bg: black; + --clr-navbar-bg: #222; + --clr-navbar-link: white; + + --clr-main-footer-bg: #13092D; + + --ff-primary: 'Noto Sans'; +} + +/* ------------------- */ +/* CSS Reset */ +/* ------------------- */ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* ------------------- */ +/* STYLING BEGINS */ +/* ------------------- */ + +/* General Styles */ +body { + display: flex; + align-items: center; + flex-direction: column; + font-family: var(--ff-primary), Arial, Helvetica, sans-serif; + color: var(--clr-body-txt); + background-color: var(--clr-body-bg); + background-image: var(--img-body-bg); + background-attachment: fixed; +} + +h1 { + color: var(--clr-main-heading); +} + +h1 { + margin-bottom: 1.2rem; +} + +h2, h3 { + color: var(--clr-sub-heading); +} + +h1 { + font-size: 2.2rem; + border-bottom: 0.18rem solid var(--clr-title-border); +} + +h2 { + font-size: 1.7rem; +} + +article:not(.divided-article) h2, +article h3, +.content-section h3 { + margin-top: 1.5rem; +} + +p { + padding: 0.5rem 0; +} + +hr { + border: 0.05rem solid var(--clr-title-border); +} + +strong { + color: var(--clr-bold-txt); +} + +:focus { + outline: 0.15em solid var(--clr-body-txt); +} + +a { + font-weight: 700; + color: var(--clr-link); +} + +a:hover { + color: var(--clr-link-hover); +} + +a:not([class]):focus { + outline: 0.15rem solid var(--clr-link); +} + +a:focus img { + outline: 0.2em solid var(--clr-body-txt); +} + +blockquote { + margin: 1.5rem 0; + padding: 0.5rem 1rem; + border-inline-start: 0.1rem solid var(--clr-main-heading); + background-color: var(--clr-quote-bg); +} + +button:hover { + cursor: pointer; +} + +button:focus, +detail:focus { + outline-offset: 0.2em; +} + +pre { + white-space: pre-wrap; + overflow-x: auto; +} + +summary { + cursor: pointer; +} + +dl { + display: grid; + grid-gap: 0.5rem 1rem; + grid-template-columns: max-content; +} + +dt { + font-weight: bold; +} + +dd { + grid-column-start: 2; +} + +/* ELEMENT STYLES WITH CUSTOM CLASSES */ +.bold-text { + font-weight: 700; +} + +.center-el { + display: grid; + place-content: center; +} + +.center-text { + text-align: center; +} + +.date-style { + font-weight: 700; + color: var(--clr-dates); +} + +.hidden { + display: none; +} + +.article-list { + display: grid; + gap: 0.5em; +} + +/* HEADER COMPONENT */ +.main-header { + width: 100%; + background-color: var(--clr-main-header-bg); + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +.main-header__top-bar { + background-color: var(--clr-navbar-bg); + width: 100%; + padding: 0.5em 0; +} + +.main-header__img { + display: grid; + place-content: center; +} + +.main-header img { + object-fit: scale-down; + overflow: hidden; + filter: drop-shadow(0.1rem 0.1rem 0.2rem black); +} + +/* NAVIGATION BAR COMPONENT */ +.navbar { + background: var(--clr-navbar-bg); + padding: 0 0.6rem; + width: 100%; + z-index: 999; +} + +.navbar a { + color: var(--clr-navbar-link); + text-decoration: none; + cursor: pointer; +} + +.navbar a:hover { + color: var(--clr-link-hover); +} + +.navbar a:focus { + outline-offset: 0.3em; + outline: 0.15em solid var(--clr-navbar-link); +} + +.nav__menu { + list-style: none; + padding: 0; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 0.5rem; +} + +/* Added to the navbar with JS when it reaches its scroll position */ +.sticky-nav { + position: fixed; + width: 100%; + top: 0; +} + +/* Add some top padding to the page content to prevent sudden quick movement +as the navigation bar gets a new position at the top of the page +(position:fixed and top:0) */ +.sticky-nav + main { + padding-top: 3.75rem; +} + +/* MAIN CONTENT */ +main, +.content-container, +.divided-article { + gap: 0.8rem; + display: flex; + flex-direction: column; + width: 100%; +} + +main { + font-size: 1.2rem; +} + +article:not(.divided-article), +.content-section, +.qna-section { + background-color: var(--clr-content-bg); + padding: 1.35rem; +} + +.article-section { + padding: 1.25rem 0; +} + +article, .content-container { + order: 1; +} + +.sidebar--sticky { + position: sticky; + top: 5rem; +} + +.left-sidebar, +.right-sidebar { + padding: 1rem; + font-size: 0.9rem; + background-color: var(--clr-content-bg); +} + +.left-sidebar { + order: 2; +} + +.right-sidebar { + order: 3; +} + +.left-sidebar:empty, +.right-sidebar:empty { + display: none; +} + +/* Tablet main content layout */ +@media only screen and (min-width: 43.75rem) { + main { + flex-direction: row; + } + + aside { + width: 10rem; + } + + article, .content-container { + flex: 1; + order: 2; + } + + .left-sidebar { + order: 1; + } + + .right-sidebar { + order: 3; + } +} + +/* Desktop main content layout */ +@media only screen and (min-width: 60rem) { + main { + width: 60rem; + display: flex; + flex-direction: row; + justify-content: center; + } + + aside { + width: 12rem; + } +} + +@media only screen and (min-width: 65rem) { + main { + width: 65rem; + } +} + +/* CUSTOM CLASSES FOR SPECIAL ELEMENTS */ +.inline-code { + font-family: monospace; + border: 0.07rem solid var(--clr-code-border); + padding: 0.125rem 0.3rem; + margin: 0 0.125rem; + background: var(--clr-code-bg); +} + +.code-snippet { + background: var(--clr-code-bg); + border: 0.08rem solid var(--clr-code-border); + display: block; + padding: 0.5em 0.8rem; + overflow-x: auto; + word-break: keep-all; +} + +.text-box { + background: var(--clr-quote-bg); + border: 0.1em solid var(--clr-main-heading); + padding: 0.4em 0.8em; + margin: 0.5em 0; +} + +/* Link button */ +.link-btn { + font: 1.3rem 'Source Sans Pro', Arial, sans-serif; + display: inline-block; + border: 0.15rem solid var(--clr-link-btn-bg); + border-radius: 0.6rem; + padding: 0.75rem 1rem; + margin: 0.3rem; + background: var(--clr-link-btn-bg); + color: var(--clr-link-btn-txt); + cursor: pointer; + font-weight: 700; + text-transform: uppercase; +} + +.link-btn, +.link-btn:hover, +.link-btn:visited { + text-decoration: none; +} + +.link-btn:hover { + cursor: pointer; + background: var(--clr-link-btn-hover); + transition: 0.5s; +} + +.link-btn:focus { + outline-offset: 0.2em; + outline: 0.15em solid var(--clr-link); +} + +/* Q&A accordion */ +.qna-accordion { + padding: 1rem 0; +} + +.qna-accordion__question { + font-weight: 700; +} + +.qna-accordion__answer { + padding: 0.7rem 1.5rem; + margin-top: 0.5rem; + background: hsla(0, 0%, 100%, 0.15); +} + +/* Spoiler Accordion */ +.spoiler-accordion { + padding: 0.5rem 0; +} + +.spoiler-accordion__hint { + font-weight: 700; +} + +.spoiler-accordion__spoiler { + padding: 0 1rem; +} + +/* Embedded YouTube video */ +.full-width-youtube-video { + position: relative; + padding-bottom: 56.25%; + height: 0; +} + +.full-width-youtube-video iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Website link button */ +.site-btn__container { + display: flex; + gap: 1rem; + align-items: center; + margin: 0.5rem 0; +} + +.site-btn__textarea { + width: 10rem; + height: 2.5rem; + font-size: 0.75rem; + background-color:black; + color: var(--clr-body-txt); +} + +.copy-txt-btn { + border: none; + background: var(--clr-link-btn-bg); + color: var(--clr-body-txt); + padding: 0.3rem 0.8rem; + border-radius: 0.5rem; + font-size: 0.9rem; + font-weight: bold; +} + +.copy-txt-btn:hover { + background: var(--clr-link-hover); +} + +/* Web button lists */ +.web-btn-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +/* 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-agender { + background: linear-gradient( + black 0 14.28%, + silver 0 28.57%, + white 0 42.85%, + #a3fa73 0 57.14%, + white 0 71.42%, + silver 0 85.71%, + black 0 + ); +} + +.flag-aro { + background: linear-gradient( + #0a2 20%, + #7d6 0 40%, + white 0 60%, + darkgray 0 80%, + black 0 + ); +} + +.flag-bi { + background: repeating-linear-gradient( + #d60270 0 40%, + #9b4f97 0 60%, + #0038a7 0 100% + ); +} + +.flag-demigirl { + background: linear-gradient( + #7F7F7F 0 14.28%, + #C4C4C4 0 28.57%, + #FDADC8 0 42.85%, + white 0 57.14%, + #FDADC8 0 71.42%, + #C4C4C4 0 85.71%, + #7F7F7F 0 + ); +} + +.flag-bigender { + background: linear-gradient( + #d074a2 0 14.28%, + #f8a1cd 0 28.57%, + #d9c6ea 0 42.85%, + white 0 57.14%, + #d9c6ea 0 71.42%, + #90c8ec 0 85.71%, + #6583d5 0 + ); +} + +.flag-gilbert-baker { + background: linear-gradient( + #FF6599 12.5%, + #e40303 0 25%, + #ff8c00 0 37.5%, + #ffed00 0 50%, + #008026 0 62.5%, + #00C0C0 0 75%, + #004dff 0 87.5%, + #750787 0 + ); +} + +.flag-gilbert-baker-2017 { + background: linear-gradient( + #CD66FF 11.1%, + #FF6599 0 22.2%, + #e40303 0 33.3%, + #ff8c00 0 44.4%, + #ffed00 0 55.5%, + #008026 0 66.6%, + #00C0C0 0 77.7%, + #004dff 0 88.8%, + #750787 0 + ); +} + +.flag-intersex { + background: radial-gradient(closest-side circle at center, + #ffd800 44%, + #7902aa 44%, + #7902aa 56%, + #ffd800 56% + ); +} + +.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-progress { + background: + conic-gradient(at 14% 50%, #0000 221.25deg, #ffffff 222deg 318deg, #0000 318.25deg), + conic-gradient(at 23% 50%, #0000 221.25deg, #f5a9b8 222deg 318deg, #0000 318.25deg), + conic-gradient(at 32% 50%, #0000 221.25deg, #5bcefa 222deg 318deg, #0000 318.25deg), + conic-gradient(at 41% 50%, #0000 221.25deg, #784F17 222deg 318deg, #0000 318.25deg), + conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg), + linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0); +} + +.flag-progress-intersex { + background: + radial-gradient(circle at 9.75% 50%, #0000 6.66%, #7902aa 6.7% 8.33%, #0000 8.4%), + conic-gradient(at 26.66% 50%, #0000 222.75deg, #ffd800 0 317.25deg, #0000 0), + conic-gradient(at 33% 50%, #0000 222.75deg, #ffffff 0 317.25deg, #0000 0), + conic-gradient(at 39% 50%, #0000 222.75deg, #f5a9b8 0 317.25deg, #0000 0), + conic-gradient(at 45.66% 50%, #0000 222.75deg, #5bcefa 0 317.25deg, #0000 0), + conic-gradient(at 52% 50%, #0000 222.75deg, #753000 0 317.25deg, #0000 0), + conic-gradient(at 58.33% 50%, #0000 222.75deg, #000 0 317.25deg, #0000 0), + linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0); +} + +.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% + ); +} + +/* FOOTER COMPONENT */ +.main-footer { + background: var(--clr-main-footer-bg); + width: 100%; + padding: 0.5rem; + text-align: center; +} + +.main-footer p { + padding: 0; +} \ No newline at end of file diff --git a/_site/assets/css/style-main.css b/_site/assets/css/style-main.css new file mode 100644 index 00000000..14c05945 --- /dev/null +++ b/_site/assets/css/style-main.css @@ -0,0 +1,756 @@ +@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'); + --clr-body-txt: #fceaff; + --clr-content-bg: #3d2163; + + --clr-main-heading: #ED64F5; + --clr-sub-heading: #e8b86f; + --clr-title-border: #d3aad5; + --clr-bold-txt: #ff9933; + --clr-link: #ED64F5; + --clr-link-hover: #c355c9; + --clr-quote-bg: #13092D; + --clr-quote-border: #999999; + + --clr-code-bg: #241445; + --clr-code-border: #82668f; + --clr-dates: rgb(158, 203, 255); + + --clr-link-btn-bg: #873eb5; + --clr-link-btn-txt: white; + --clr-link-btn-hover: #241445; + + --clr-main-header-bg: black; + --clr-navbar-bg: #222; + --clr-navbar-link: white; + + --clr-main-footer-bg: #13092D; + + --ff-primary: 'Noto Sans'; +} + +/* ------------------- */ +/* CSS Reset */ +/* ------------------- */ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* ------------------- */ +/* STYLING BEGINS */ +/* ------------------- */ + +/* General Styles */ +body { + display: flex; + align-items: center; + flex-direction: column; + font-family: var(--ff-primary), Arial, Helvetica, sans-serif; + color: var(--clr-body-txt); + background-color: var(--clr-body-bg); + background-image: var(--img-body-bg); + background-attachment: fixed; +} + +h1 { + color: var(--clr-main-heading); +} + +h1 { + margin-bottom: 1.2rem; +} + +h2, h3 { + color: var(--clr-sub-heading); +} + +h1 { + font-size: 2.2rem; + border-bottom: 0.18rem solid var(--clr-title-border); +} + +h2 { + font-size: 1.7rem; +} + +article:not(.divided-article) h2, +article h3, +.content-section h3 { + margin-top: 1.5rem; +} + +p { + padding: 0.5rem 0; +} + +hr { + border: 0.05rem solid var(--clr-title-border); +} + +strong { + color: var(--clr-bold-txt); +} + +:focus { + outline: 0.15em solid var(--clr-body-txt); +} + +a { + font-weight: 700; + color: var(--clr-link); +} + +a:hover { + color: var(--clr-link-hover); +} + +a:not([class]):focus { + outline: 0.15rem solid var(--clr-link); +} + +a:focus img { + outline: 0.2em solid var(--clr-body-txt); +} + +blockquote { + margin: 1.5rem 0; + padding: 0.5rem 1rem; + border-inline-start: 0.1rem solid var(--clr-main-heading); + background-color: var(--clr-quote-bg); +} + +button:hover { + cursor: pointer; +} + +button:focus, +detail:focus { + outline-offset: 0.2em; +} + +pre { + white-space: pre-wrap; + overflow-x: auto; +} + +summary { + cursor: pointer; +} + +dl { + display: grid; + grid-gap: 0.5rem 1rem; + grid-template-columns: max-content; +} + +dt { + font-weight: bold; +} + +dd { + grid-column-start: 2; +} + +/* ELEMENT STYLES WITH CUSTOM CLASSES */ +.bold-text { + font-weight: 700; +} + +.center-el { + display: grid; + place-content: center; +} + +.center-text { + text-align: center; +} + +.date-style { + font-weight: 700; + color: var(--clr-dates); +} + +.hidden { + display: none; +} + +.article-list { + display: grid; + gap: 0.5em; +} + +/* HEADER COMPONENT */ +.main-header { + width: 100%; + background-color: var(--clr-main-header-bg); + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +.main-header__top-bar { + background-color: var(--clr-navbar-bg); + width: 100%; + padding: 0.5em 0; +} + +.main-header__img { + display: grid; + place-content: center; +} + +.main-header img { + object-fit: scale-down; + overflow: hidden; + filter: drop-shadow(0.1rem 0.1rem 0.2rem black); +} + +/* NAVIGATION BAR COMPONENT */ +.navbar { + background: var(--clr-navbar-bg); + padding: 0 0.6rem; + width: 100%; + z-index: 999; +} + +.navbar a { + color: var(--clr-navbar-link); + text-decoration: none; + cursor: pointer; +} + +.navbar a:hover { + color: var(--clr-link-hover); +} + +.navbar a:focus { + outline-offset: 0.3em; + outline: 0.15em solid var(--clr-navbar-link); +} + +.nav__menu { + list-style: none; + padding: 0; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 0.5rem; +} + +/* Added to the navbar with JS when it reaches its scroll position */ +.sticky-nav { + position: fixed; + width: 100%; + top: 0; +} + +/* Add some top padding to the page content to prevent sudden quick movement +as the navigation bar gets a new position at the top of the page +(position:fixed and top:0) */ +.sticky-nav + main { + padding-top: 3.75rem; +} + +/* MAIN CONTENT */ +main, +.content-container, +.divided-article { + gap: 0.8rem; + display: flex; + flex-direction: column; + width: 100%; +} + +main { + font-size: 1.2rem; +} + +article:not(.divided-article), +.content-section, +.qna-section { + background-color: var(--clr-content-bg); + padding: 1.35rem; +} + +.article-section { + padding: 1.25rem 0; +} + +article, .content-container { + order: 1; +} + +.sidebar--sticky { + position: sticky; + top: 5rem; +} + +.left-sidebar, +.right-sidebar { + padding: 1rem; + font-size: 0.9rem; + background-color: var(--clr-content-bg); +} + +.left-sidebar { + order: 2; +} + +.right-sidebar { + order: 3; +} + +.left-sidebar:empty, +.right-sidebar:empty { + display: none; +} + +/* Tablet main content layout */ +@media only screen and (min-width: 43.75rem) { + main { + flex-direction: row; + } + + aside { + width: 10rem; + } + + article, .content-container { + flex: 1; + order: 2; + } + + .left-sidebar { + order: 1; + } + + .right-sidebar { + order: 3; + } +} + +/* Desktop main content layout */ +@media only screen and (min-width: 60rem) { + main { + width: 60rem; + display: flex; + flex-direction: row; + justify-content: center; + } + + aside { + width: 12rem; + } +} + +@media only screen and (min-width: 65rem) { + main { + width: 65rem; + } +} + +/* CUSTOM CLASSES FOR SPECIAL ELEMENTS */ +.inline-code { + font-family: monospace; + border: 0.07rem solid var(--clr-code-border); + padding: 0.125rem 0.3rem; + margin: 0 0.125rem; + background: var(--clr-code-bg); +} + +.code-snippet { + background: var(--clr-code-bg); + border: 0.08rem solid var(--clr-code-border); + display: block; + padding: 0.5em 0.8rem; + overflow-x: auto; + word-break: keep-all; +} + +.text-box { + background: var(--clr-quote-bg); + border: 0.1em solid var(--clr-main-heading); + padding: 0.4em 0.8em; + margin: 0.5em 0; +} + +/* Link button */ +.link-btn { + font: 1.3rem 'Source Sans Pro', Arial, sans-serif; + display: inline-block; + border: 0.15rem solid var(--clr-link-btn-bg); + border-radius: 0.6rem; + padding: 0.75rem 1rem; + margin: 0.3rem; + background: var(--clr-link-btn-bg); + color: var(--clr-link-btn-txt); + cursor: pointer; + font-weight: 700; + text-transform: uppercase; +} + +.link-btn, +.link-btn:hover, +.link-btn:visited { + text-decoration: none; +} + +.link-btn:hover { + cursor: pointer; + background: var(--clr-link-btn-hover); + transition: 0.5s; +} + +.link-btn:focus { + outline-offset: 0.2em; + outline: 0.15em solid var(--clr-link); +} + +/* Q&A accordion */ +.qna-accordion { + padding: 1rem 0; +} + +.qna-accordion__question { + font-weight: 700; +} + +.qna-accordion__answer { + padding: 0.7rem 1.5rem; + margin-top: 0.5rem; + background: hsla(0, 0%, 100%, 0.15); +} + +/* Spoiler Accordion */ +.spoiler-accordion { + padding: 0.5rem 0; +} + +.spoiler-accordion__hint { + font-weight: 700; +} + +.spoiler-accordion__spoiler { + padding: 0 1rem; +} + +/* Embedded YouTube video */ +.full-width-youtube-video { + position: relative; + padding-bottom: 56.25%; + height: 0; +} + +.full-width-youtube-video iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Website link button */ +.site-btn__container { + display: flex; + gap: 1rem; + align-items: center; + margin: 0.5rem 0; +} + +.site-btn__textarea { + width: 10rem; + height: 2.5rem; + font-size: 0.75rem; + background-color:black; + color: var(--clr-body-txt); +} + +.copy-txt-btn { + border: none; + background: var(--clr-link-btn-bg); + color: var(--clr-body-txt); + padding: 0.3rem 0.8rem; + border-radius: 0.5rem; + font-size: 0.9rem; + font-weight: bold; +} + +.copy-txt-btn:hover { + background: var(--clr-link-hover); +} + +/* Web button lists */ +.web-btn-wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +/* 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-agender { + background: linear-gradient( + black 0 14.28%, + silver 0 28.57%, + white 0 42.85%, + #a3fa73 0 57.14%, + white 0 71.42%, + silver 0 85.71%, + black 0 + ); +} + +.flag-aro { + background: linear-gradient( + #0a2 20%, + #7d6 0 40%, + white 0 60%, + darkgray 0 80%, + black 0 + ); +} + +.flag-bi { + background: repeating-linear-gradient( + #d60270 0 40%, + #9b4f97 0 60%, + #0038a7 0 100% + ); +} + +.flag-demigirl { + background: linear-gradient( + #7F7F7F 0 14.28%, + #C4C4C4 0 28.57%, + #FDADC8 0 42.85%, + white 0 57.14%, + #FDADC8 0 71.42%, + #C4C4C4 0 85.71%, + #7F7F7F 0 + ); +} + +.flag-bigender { + background: linear-gradient( + #d074a2 0 14.28%, + #f8a1cd 0 28.57%, + #d9c6ea 0 42.85%, + white 0 57.14%, + #d9c6ea 0 71.42%, + #90c8ec 0 85.71%, + #6583d5 0 + ); +} + +.flag-gilbert-baker { + background: linear-gradient( + #FF6599 12.5%, + #e40303 0 25%, + #ff8c00 0 37.5%, + #ffed00 0 50%, + #008026 0 62.5%, + #00C0C0 0 75%, + #004dff 0 87.5%, + #750787 0 + ); +} + +.flag-gilbert-baker-2017 { + background: linear-gradient( + #CD66FF 11.1%, + #FF6599 0 22.2%, + #e40303 0 33.3%, + #ff8c00 0 44.4%, + #ffed00 0 55.5%, + #008026 0 66.6%, + #00C0C0 0 77.7%, + #004dff 0 88.8%, + #750787 0 + ); +} + +.flag-intersex { + background: radial-gradient(closest-side circle at center, + #ffd800 44%, + #7902aa 44%, + #7902aa 56%, + #ffd800 56% + ); +} + +.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-progress { + background: + conic-gradient(at 14% 50%, #0000 221.25deg, #ffffff 222deg 318deg, #0000 318.25deg), + conic-gradient(at 23% 50%, #0000 221.25deg, #f5a9b8 222deg 318deg, #0000 318.25deg), + conic-gradient(at 32% 50%, #0000 221.25deg, #5bcefa 222deg 318deg, #0000 318.25deg), + conic-gradient(at 41% 50%, #0000 221.25deg, #784F17 222deg 318deg, #0000 318.25deg), + conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg), + linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0); +} + +.flag-progress-intersex { + background: + radial-gradient(circle at 9.75% 50%, #0000 6.66%, #7902aa 6.7% 8.33%, #0000 8.4%), + conic-gradient(at 26.66% 50%, #0000 222.75deg, #ffd800 0 317.25deg, #0000 0), + conic-gradient(at 33% 50%, #0000 222.75deg, #ffffff 0 317.25deg, #0000 0), + conic-gradient(at 39% 50%, #0000 222.75deg, #f5a9b8 0 317.25deg, #0000 0), + conic-gradient(at 45.66% 50%, #0000 222.75deg, #5bcefa 0 317.25deg, #0000 0), + conic-gradient(at 52% 50%, #0000 222.75deg, #753000 0 317.25deg, #0000 0), + conic-gradient(at 58.33% 50%, #0000 222.75deg, #000 0 317.25deg, #0000 0), + linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0); +} + +.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% + ); +} + +/* FOOTER COMPONENT */ +.main-footer { + background: var(--clr-main-footer-bg); + width: 100%; + padding: 0.5rem; + text-align: center; +} + +.main-footer p { + padding: 0; +} \ No newline at end of file diff --git a/_site/assets/fanlistings/jedi-100x50.png b/_site/assets/fanlistings/jedi-100x50.png new file mode 100644 index 00000000..fa290be9 Binary files /dev/null and b/_site/assets/fanlistings/jedi-100x50.png differ diff --git a/_site/assets/fanlistings/kotor-100x50.png b/_site/assets/fanlistings/kotor-100x50.png new file mode 100644 index 00000000..3a1524f0 Binary files /dev/null and b/_site/assets/fanlistings/kotor-100x50.png differ diff --git a/_site/assets/fanlistings/kotor2-100x50.jpg b/_site/assets/fanlistings/kotor2-100x50.jpg new file mode 100644 index 00000000..17ca3be2 Binary files /dev/null and b/_site/assets/fanlistings/kotor2-100x50.jpg differ diff --git a/_site/assets/js/events.js b/_site/assets/js/events.js new file mode 100644 index 00000000..46bcd3c0 --- /dev/null +++ b/_site/assets/js/events.js @@ -0,0 +1,183 @@ +// const header = document.querySelector(".main-header"); + +const todayEvent = getTodayEvent(); +const headerTopBarEl = document.querySelector(".main-header__top-bar"); +const headerImgEl = document.querySelector(".main-header__img"); + +if (todayEvent != "No event") { + if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") { + headerTopBarEl.innerHTML = getBlurbHtml(todayEvent); + } else { + headerImgEl.classList.add(getBanner(todayEvent)); + headerTopBarEl.innerHTML = getBlurbHtml(todayEvent); + } +} else { + headerTopBarEl.textContent = "Welcome to Leilukin's Hub!" +}; + +function getTodayEvent() { + const date = new Date(); + const month = date.getMonth() + 1; + const day = date.getDate(); + + if (month == 3 && day == 1) + return "Zero Discrimination Day"; + else if (month == 3 && day == 31) + return "Trans Day of Visibility"; + else if (month == 4 && day == 6) + return "International Asexuality Day"; + else if (month == 4 && day == 26) + return "Lesbian Visibility Day"; + else if (month == 5 && day == 17) + return "IDAHOBIT"; + else if (month == 5 && day == 19) + return "Agender Pride Day"; + else if (month == 5 && day == 25) + return "Pansexual and Panromantic Awareness & Visibility Day"; + else if (month == 6) + return "Pride Month"; + else if (month == 7 && day == 14) + return "Non-Binary People's Day"; + else if (month == 7 && day == 28) + return "Leilukin's Birthday"; + else if (month == 9 && day == 11) + return "Leilukin's Hub Anniversary"; + else if (month == 9 && day == 23) + return "Bi Visibility Day"; + else if (month == 10 && day == 8) + return "International Lesbian Day"; + else if (month == 10 && day == 11) + return "National Coming Out Day"; + else if (month == 10 && day == 26) + return "Intersex Awareness Day"; + else + return "No event"; +} + +function getBanner(day) { + switch (day) { + case "Zero Discrimination Day": + return "flag-progress-intersex"; + break; + case "Trans Day of Visibility": + return "flag-trans"; + break; + case "International Asexuality Day": + return "flag-ace"; + break; + case "Lesbian Visibility Day": + return "flag-lesbian"; + break; + case "IDAHOBIT": + return "flag-progress"; + break; + case "Agender Pride Day": + return "flag-agender"; + break; + case "Pansexual and Panromantic Awareness & Visibility Day": + return "flag-pan"; + break; + case "Pride Month": + return "flag-progress-intersex"; + break; + case "Non-Binary People's Day": + return "flag-non-binary"; + break; + case "Bi Visibility Day": + return "flag-bi"; + break; + case "International Lesbian Day": + return "flag-lesbian"; + break; + case "National Coming Out Day": + return "flag-rainbow"; + break; + case "Intersex Awareness Day": + return "flag-intersex"; + break; + default: + return ""; + } +} + +function getBlurbHtml(day) { + switch (day) { + case "Zero Discrimination Day": + return ` + Today is Zero Discrimination Day + `; + break; + case "Trans Day of Visibility": + return ` + Today is Trans Day of Visibility + `; + break; + case "International Asexuality Day": + return ` + Today is International Asexuality Day + `; + break; + case "Lesbian Visibility Day": + return ` + Today is Lesbian Visibility Day + `; + break; + case "IDAHOBIT": + return ` + Today is International Day Against Homophobia, Biphobia and Transphobia + `; + break; + case "Agender Pride Day": + return ` + Today is Agender Pride Day + `; + break; + case "Pansexual and Panromantic Awareness & Visibility Day": + return ` + Today is Pansexual and Panromantic Visibility Day + `; + break; + case "Pride Month": + return ` + Happy Pride Month! + `; + break; + case "Non-Binary People's Day": + return ` + Today is Non-Binary People's Day + `; + break; + case "Leilukin's Birthday": + return ` + Today is Leilukin's birthday + `; + break; + case "Leilukin's Hub Anniversary": + return ` + Today is the anniversary of the launch of Leilukin's Hub + `; + break; + case "Bi Visibility Day": + return ` + Today is Bi Visibility Day + `; + break; + case "International Lesbian Day": + return ` + Today is International Lesbian Day + `; + break; + case "National Coming Out Day": + return ` + Today is National Coming Out Day + `; + break; + case "Intersex Awareness Day": + return ` + Today is Intersex Awareness Day + `; + break; + default: + return ``; + } +} diff --git a/_site/assets/js/navbar.js b/_site/assets/js/navbar.js new file mode 100644 index 00000000..4af68202 --- /dev/null +++ b/_site/assets/js/navbar.js @@ -0,0 +1,13 @@ +// Make the navigation bar sticky +const header = document.querySelector(".main-header"); +const navbar = document.querySelector(".navbar"); + +window.addEventListener("scroll", e => { + const scrollPos = window.scrollY || document.documentElement.scrollTop; + const stickyLine = header.scrollHeight - navbar.scrollHeight; + if (scrollPos > stickyLine) { + navbar.classList.add("sticky-nav"); + } else { + navbar.classList.remove("sticky-nav"); + } +}); diff --git a/_site/assets/webrings/queercoded-left.png b/_site/assets/webrings/queercoded-left.png new file mode 100644 index 00000000..e38d6110 Binary files /dev/null and b/_site/assets/webrings/queercoded-left.png differ diff --git a/_site/assets/webrings/queercoded-right.png b/_site/assets/webrings/queercoded-right.png new file mode 100644 index 00000000..a4eaa35e Binary files /dev/null and b/_site/assets/webrings/queercoded-right.png differ diff --git a/_site/assets/webrings/queercoded.png b/_site/assets/webrings/queercoded.png new file mode 100644 index 00000000..e907872f Binary files /dev/null and b/_site/assets/webrings/queercoded.png differ diff --git a/_site/home/index.html b/_site/home/index.html new file mode 100644 index 00000000..5349585e --- /dev/null +++ b/_site/home/index.html @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Home | Leilukin's Hub + + +
+ +
+
+ +
+
+ +
+ + + +
+
+

Welcome!

+

Hello! You can call me Leilukin. Welcome to my website! This site is my own personal hub and corner on the internet.

+

Feel free to drop a message and say hi on my guestbook!

+

You may use the site map to quickly navigate this website.

+

Enjoy your stay!

+
+ +
+

Link to My Website

+ +

You can link to my website with this button:

+ +
+
+ Button of Leilukin's Hub +
+ + + +
+ +

Credit to hekate2 for their 88x31 Web Button Maker!

+
+ +
+

Updates

+
+

5 April 2024:

+ +

View all site changelog

+
+

You can subscribe to the Leilukin's Hub RSS feed or follow my Neocities profile to get notified of the updates on this website.

+
+ + RSS feed button + +
+
+ +
+

Always Proud

+
+ A website button of the 2018 Progress Flag + A website button of the 9 stripe rainbow flag + A website button of the lesbian pride flag + A website button of the non-binary pride flag + A website button of the demigirl pride flag + A website button of the agender pride flag + A website button of the bigender pride flag +
+

Credit to Dime for these pride buttons!

+
+ +
+

Webrings

+
left arrow queer coded webring right arrow
+
+ +
+

Support Me

+

If you enjoy my work, you can support me on Ko-Fi or Buy Me a Coffee: +

+ +

+
+
+ + +
+ + + \ No newline at end of file diff --git a/_site/index.html b/_site/index.html index 89c15e58..df075d4c 100644 --- a/_site/index.html +++ b/_site/index.html @@ -10,7 +10,7 @@ - + @@ -26,8 +26,8 @@
- Home Page - Site Map + Home Page + Site Map