diff --git a/public/assets/book-circle.svg b/app/assets/icons/book-circle.svg
similarity index 100%
rename from public/assets/book-circle.svg
rename to app/assets/icons/book-circle.svg
diff --git a/app/assets/icons/get-involved-mobile.svg b/app/assets/icons/get-involved-mobile.svg
new file mode 100644
index 00000000..cd345dd5
--- /dev/null
+++ b/app/assets/icons/get-involved-mobile.svg
@@ -0,0 +1,46 @@
+
diff --git a/app/assets/icons/intro-mobile.svg b/app/assets/icons/intro-mobile.svg
new file mode 100644
index 00000000..62d13c66
--- /dev/null
+++ b/app/assets/icons/intro-mobile.svg
@@ -0,0 +1,24 @@
+
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index 02694af9..acf7505d 100644
--- a/app/components/Article/article.css
+++ b/app/components/Article/article.css
@@ -66,8 +66,6 @@ article .glossary-entry {
article .link-popup {
visibility: hidden;
opacity: 0;
- width: 522px;
- height: 304px;
position: absolute;
display: inline-block;
font: var(--baseFont);
@@ -80,6 +78,10 @@ article .link-popup {
visibility 0s 300ms,
opacity cubic-bezier(1, 0, 1, 1) 300ms;
}
+article .glossary-popup {
+ width: 522px;
+ height: 304px;
+}
article .contents a.button {
font-weight: normal;
@@ -88,13 +90,14 @@ article .link-popup .glossary-popup > .contents {
padding: var(--spacing-24) var(--spacing-40) var(--spacing-24);
}
article .defintion {
- height: 160px;
+ height: 140px;
display: -webkit-box;
/* These are webkit specific things, so might not work in all browsers (firefox handles them fine) */
-webkit-box-orient: vertical;
- -webkit-line-clamp: 4; /* Number of lines you want to display */
+ -webkit-line-clamp: 5; /* Number of lines you want to display */
overflow: hidden;
text-overflow: ellipsis;
+ margin-bottom: var(--spacing-32);
}
article .link-popup .glossary-popup > img {
width: 100%;
diff --git a/app/components/ContentBox/box.css b/app/components/ContentBox/box.css
index 8ebe9b58..b9898854 100644
--- a/app/components/ContentBox/box.css
+++ b/app/components/ContentBox/box.css
@@ -42,20 +42,9 @@
text-decoration: none;
}
-.content-box-table.main svg {
- margin: -10px 0;
-}
-
-.content-box-table.main img {
- width: fit-content;
- height: -webkit-fill-available;
- height: -moz-available;
- margin: -7px 0;
-}
.content-box-table.main {
overflow: hidden;
- padding: 0;
- padding-right: var(--spacing-8);
+ padding: 0 var(--spacing-8);
}
@media (max-width: 640px) {
diff --git a/app/components/ContentBox/index.tsx b/app/components/ContentBox/index.tsx
index e0c7dfbf..8cb372e5 100644
--- a/app/components/ContentBox/index.tsx
+++ b/app/components/ContentBox/index.tsx
@@ -2,7 +2,10 @@ import {ReactNode} from 'react'
import {ArrowRight} from '~/components/icons-generated'
import ListTable from '~/components/Table'
import Button from '~/components/Button'
+import BookCircle from '~/components/icons-generated/BookCircle'
import SvgGroup from '~/components/icons-generated/Group'
+import IntroMobile from '~/components/icons-generated/IntroMobile'
+import GetInvolvedMobile from '~/components/icons-generated/GetInvolvedMobile'
import {questionUrl} from '~/routesMapper'
import './box.css'
@@ -53,12 +56,8 @@ export const ContentBoxMain = () => (
}
>
- 
+
+
)
@@ -94,7 +93,8 @@ export const ContentBoxThird = () => {
actionTitle="Get involved"
classNameTable={'content-box-table main'}
>
-
+
+
)
}
diff --git a/app/components/icons-generated/BookCircle.tsx b/app/components/icons-generated/BookCircle.tsx
new file mode 100644
index 00000000..362411ed
--- /dev/null
+++ b/app/components/icons-generated/BookCircle.tsx
@@ -0,0 +1,81 @@
+import type {SVGProps} from 'react'
+const SvgBookCircle = (props: SVGProps) => (
+
+)
+export default SvgBookCircle
diff --git a/app/components/icons-generated/GetInvolvedMobile.tsx b/app/components/icons-generated/GetInvolvedMobile.tsx
new file mode 100644
index 00000000..cc3dfdd2
--- /dev/null
+++ b/app/components/icons-generated/GetInvolvedMobile.tsx
@@ -0,0 +1,96 @@
+import type {SVGProps} from 'react'
+const SvgGetInvolvedMobile = (props: SVGProps) => (
+
+)
+export default SvgGetInvolvedMobile
diff --git a/app/components/icons-generated/IntroMobile.tsx b/app/components/icons-generated/IntroMobile.tsx
new file mode 100644
index 00000000..19c926ae
--- /dev/null
+++ b/app/components/icons-generated/IntroMobile.tsx
@@ -0,0 +1,45 @@
+import type {SVGProps} from 'react'
+const SvgIntroMobile = (props: SVGProps) => (
+
+)
+export default SvgIntroMobile
diff --git a/app/components/icons-generated/index.ts b/app/components/icons-generated/index.ts
index 48255dfc..6ad14434 100644
--- a/app/components/icons-generated/index.ts
+++ b/app/components/icons-generated/index.ts
@@ -2,6 +2,7 @@ export {default as Aisafety} from './Aisafety'
export {default as ArrowRight} from './ArrowRight'
export {default as ArrowUpRight} from './ArrowUpRight'
export {default as Arrow} from './Arrow'
+export {default as BookCircle} from './BookCircle'
export {default as Bot} from './Bot'
export {default as BottomEclipse} from './BottomEclipse'
export {default as BoxArrow} from './BoxArrow'
@@ -21,9 +22,11 @@ export {default as Edit} from './Edit'
export {default as Ellipsis} from './Ellipsis'
export {default as Flag} from './Flag'
export {default as Followup} from './Followup'
+export {default as GetInvolvedMobile} from './GetInvolvedMobile'
export {default as Group} from './Group'
export {default as GroupTopEcplise} from './GroupTopEcplise'
export {default as Hide} from './Hide'
+export {default as IntroMobile} from './IntroMobile'
export {default as Like} from './Like'
export {default as Link} from './Link'
export {default as ListLarge} from './ListLarge'
diff --git a/app/root.css b/app/root.css
deleted file mode 100644
index 9f5c7430..00000000
--- a/app/root.css
+++ /dev/null
@@ -1,1003 +0,0 @@
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-:root,
-:root.light {
- /* light theme: */
- --bgColorPage: #f9fafc;
- --bgColorQuestion: #fff;
- --bgColorQuestionSearch: #fff;
- --bgColorCopied: #fed;
- --colorText: #222;
- --colorTitle: #666;
- --colorTitleHighlight: #d86;
- --colorQuestionTitle: #333;
- --colorButtonText: #3073b7;
- --colorTagBorderAndText: #3073b7;
- --colorTagBody: rgba(48, 115, 183, 0.1);
- --borderColor: #ddd;
- --borderColorButton: #999;
- --bgColorButton: #f5f5f5;
- --bgColorHighlight: #ebf1f8;
- --bgColorTableRows: #e8f7fe;
- --colorLink: #79f;
- --colorLinkVisited: #8ac;
-
- /* same in both themes: */
- --paddingSides: clamp(8px, 2vw, 16px);
- --marginTags: clamp(5px, 1vw, 10px);
- --baseFont: normal 400 1rem 'Open Sans', Arial, sans-serif;
- --colorDialogOther: #402a32;
-
- /* dark theme at the end of file to overwrite all previous rules */
-}
-
-.light article {
- border: 1px solid var(--borderColor);
-}
-
-@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
-}
-@keyframes grow {
- from {
- max-height: 0;
- }
-}
-@keyframes slideFromRight {
- from {
- transform: translateX(10vw);
- }
-}
-
-html {
- height: 100%;
- overflow-y: scroll;
- background: var(--bgColorPage);
-}
-
-html.embed {
- background: transparent;
- padding: 2px; /* search box outline */
- overflow: hidden; /* change height of iframe to avoid nested scroll, see embed-example.html */
-}
-
-body {
- height: 100%;
- width: 100%;
- margin: auto;
- padding: 0 var(--paddingSides);
- color: var(--colorText);
- display: flex;
- flex-direction: column;
- font: var(--baseFont);
- line-height: 1.5;
- padding: 0px 5.556vw;
-}
-
-html.embed body {
- max-width: unset;
- padding: 0;
-}
-
-body > div:last-of-type {
- min-height: 1px;
-}
-
-a,
-.link {
- color: var(--colorLink);
- text-decoration: none;
- cursor: pointer;
-}
-
-a:visited {
- color: var(--colorLinkVisited);
-}
-
-button:hover.icon-link,
-a:hover,
-.link:hover {
- text-decoration: underline;
- cursor: pointer;
-}
-
-a.transparent-link {
- width: 100%;
- color: inherit;
-}
-
-/* reset default styles if user prefers light/dark mode, but chooses dark/light mode in the toggle */
-input,
-textarea,
-select {
- background: var(--bgColorPage);
- color: var(--colorText);
- border: 1px solid var(--borderColorButton);
- border-radius: 10px;
-}
-
-button {
- background: var(--bgColorButton);
- color: var(--colorButtonText);
- border: 1px solid var(--borderColorButton);
- border-radius: 10px;
- cursor: pointer;
-}
-
-.loader {
- flex: none;
- border: 4px solid #f3f3f3; /* Light grey */
- border-top: 4px solid #3498db; /* Blue */
- border-radius: 50%;
- width: 30px;
- height: 30px;
- animation: spin 2s linear infinite;
- margin: 10px auto;
-}
-
-header {
- position: relative;
-}
-
-.header-bar {
- display: flex;
- align-items: flex-start;
- padding: 24px 0 48px;
- color: var(--colorTitle);
-}
-
-header-bar.fun-logo {
- background-image: url('/assets/coded-banner.svg');
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-position: top center;
- background-size: 800px;
-}
-
-.fun-logo .logo {
- height: clamp(100px, 20vw, 150px);
- width: auto;
- aspect-ratio: 150 / 129;
- padding: clamp(1rem, 5vw, 2rem) 24px 0 16px;
-}
-
-.min-logo .logo {
- height: clamp(50px, 15vw, 100px);
- width: auto;
- aspect-ratio: 79 / 68;
- padding: clamp(1rem, 5vw, 2rem) 12px 0 0;
-}
-
-.intro {
- margin: min(23px, 3.5vw) 0 10px;
- font-size: clamp(1rem, 2vw, 1.2rem);
-}
-
-.logo-intro-group {
- width: 100%;
- display: flex;
- flex-direction: row;
-}
-
-.intro a,
-.intro a:visited {
- color: var(--colorButtonText);
-}
-
-h1 {
- color: var(--colorTitle);
- margin: 4px 0 10px -2px; /* visually align */
- font-size: clamp(1rem, 4.5vw, 2.5rem);
- font-weight: 600;
- line-height: 1;
-}
-
-.highlight {
- font-family: 'Courier New', Courier, monospace;
- color: var(--colorTitleHighlight);
-}
-
-.icon-link-group {
- align-self: flex-end;
- padding: 0 0 10px 30px;
- flex: none;
- display: flex;
- align-items: center;
- gap: 16px;
- transition: opacity 1s;
-}
-
-.fun-logo .icon-link-group {
- flex-direction: column;
-}
-
-.min-logo .icon-link-group {
- flex-direction: row;
-}
-
-.icon-link,
-button.icon-link,
-a:visited.icon-link {
- font-size: 0.6rem;
- text-transform: uppercase;
- color: inherit;
- border: none;
- background: inherit;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 4px;
-}
-button.icon-link:hover,
-button.icon-link:focus {
- background: inherit;
-}
-
-svg {
- width: 24px;
- height: 24px;
-}
-
-.icon-link-group svg {
- width: 32px;
- height: 32px;
-}
-
-svg * {
- transition: fill 300ms;
-}
-
-.icon-link:not(.focused, :hover) svg *:not([class$='svg__gray']),
-.searchbar input + svg circle {
- fill: transparent !important;
-}
-
-.icon-link:active {
- filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
-}
-
-.menu {
- border: 1px solid var(--borderColor);
- border-radius: 5px;
- overflow: hidden; /* needed to be able to round inner corner */
- width: 11em;
- position: absolute;
- top: 9em;
- right: -6em;
- z-index: 10;
-}
-.fun-logo + .menu {
- top: 14em;
-}
-
-.menu-link {
- display: inline-block;
- width: 100%;
- padding: 10px;
- border-top: 1px solid var(--borderColor);
- text-decoration: none;
- background-color: var(--bgColorQuestion);
- color: inherit; /* blue colors for links too */
-}
-/* Make menu links pretend to not be links */
-a.menu-link {
- color: inherit;
- text-decoration: inherit;
-}
-.menu-link:hover {
- background-color: var(--bgColorPage);
-}
-
-.menu-link:first-child {
- border-top: none;
-}
-
-.menu-link:last-child {
- border-bottom: none;
-}
-
-.share::after {
- content: 'Link copied to clipboard';
- text-transform: none;
- background: var(--bgColorCopied);
- color: black;
- padding: 4px 6px;
- border-radius: 2px;
- position: absolute;
- pointer-events: none;
- opacity: 0;
- transform: translate(0, -3.2em);
-}
-
-.share.copied::after {
- opacity: 1;
- transform: translate(0, 3.2em);
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .share::after {
- transition:
- opacity 2s,
- transform 0s 2s;
- will-change: opacity, transform;
- }
-
- .share.copied::after {
- transition:
- opacity 200ms,
- transform 200ms;
- }
-}
-
-.articles-container {
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-
-article {
- background-color: var(--bgColorQuestion);
- border-radius: 10px;
-}
-
-article > h2 {
- margin: 0;
- padding: 9px var(--paddingSides) 10px;
- background-color: var(--bgColorQuestion);
- color: var(--colorQuestionTitle);
- font-size: clamp(1rem, 2vw, 1.2rem);
- line-height: 1.2;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-radius: 10px;
-}
-
-article > h2.chevron {
- cursor: pointer;
-}
-
-article > h2 > .transparent-button {
- padding-right: var(--paddingSides);
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-article > h2 > .transparent-button svg {
- transition: opacity 100ms;
-}
-
-article > h2:not(:hover) > .transparent-button svg {
- opacity: 0;
-}
-
-article > h2.chevron::after {
- content: url('/assets/chevron-right.svg');
- width: 12px;
- height: 12px;
- flex: none;
- transform: translateY(-3px);
-}
-
-article:not(.link-hovered) > h2:hover::after {
- transform: rotate(20deg);
-}
-
-article.expanded h2.chevron::after {
- transform: translateY(3px) rotate(90deg);
-}
-
-article.expanded:not(.link-hovered) h2:hover::after {
- transform: translateY(3px) rotate(60deg);
-}
-
-.transparent-button {
- /* all: unset; removes outline which wasn't good for accessibility */
- background: none;
- border: none;
- color: inherit;
- font: inherit;
- text-align: inherit;
- padding: 0;
- cursor: inherit;
- user-select: inherit;
-}
-
-.answer {
- padding: 0 var(--paddingSides);
-}
-
-.answer > div {
- margin: var(--paddingSides) 0;
-}
-
-.answer table {
- border-collapse: collapse;
-}
-
-.answer table th {
- text-align: left;
- padding: 4px;
- font-size: 0.8rem;
- font-weight: 600;
- text-transform: uppercase;
- text-decoration: none;
- background-color: var(--bgColorHighlight);
- border: 1px solid var(--bgColorQuestion);
-}
-
-.answer table td {
- padding: 4px;
- vertical-align: top;
- border: 1px solid var(--bgColorQuestion);
-}
-
-tr:nth-child(even) {
- background-color: var(--bgColorTableRows);
-}
-
-.answer table p {
- margin: 0;
-}
-
-.answer ul,
-.answer ol {
- margin: var(--paddingSides);
-}
-
-.answer blockquote {
- padding-left: 16px;
- font-style: italic;
-}
-
-.answer img {
- max-width: 100%;
-}
-
-.answer iframe {
- width: 100%;
- aspect-ratio: 16/9;
-}
-
-.answer .glossary-entry {
- border-bottom: 2px dotted grey;
- cursor: pointer;
-}
-
-.answer .link-popup {
- visibility: hidden;
- opacity: 0;
- position: absolute;
- display: inline-block;
- border-radius: 5px;
- background: var(--bgColorHighlight);
- color: var(--colorText);
- font: var(--baseFont);
- padding: 5px 10px;
- margin-left: 10px;
- max-width: 35%;
- z-index: 2;
- transition:
- visibility 0s 300ms,
- opacity cubic-bezier(1, 0, 1, 1) 300ms;
-}
-.answer .link-popup::after {
- content: '';
- position: absolute;
- top: 5px;
- right: 100%;
- border-width: 5px;
- border-style: solid;
- border-color: transparent var(--bgColorHighlight) transparent transparent;
-}
-
-.answer .link-popup.shown {
- visibility: visible;
- opacity: 1;
- pointer-events: auto;
- transition:
- visibility 0s,
- opacity 100ms;
-}
-.answer .link-popup p {
- margin: 0;
-}
-
-.answer .banner {
- padding: 1px 10px 5px 10px;
- margin: 10px;
-}
-.answer .banner h3 {
- display: flex;
- align-items: center;
-}
-.answer .banner h3 img {
- width: 2em;
-}
-.answer .banner h3 .title {
- padding-left: 10px;
-}
-
-.question-footer {
- display: grid;
- grid-template-columns: auto auto;
-}
-
-.tags-container {
- align-items: center;
- display: grid;
-}
-.tags-container button {
- background-color: var(--colorTagBody);
- border-color: var(--colorTagBorderAndText);
-}
-
-.question-tag {
- margin: 5px 2px 0 0;
- padding: 5px;
-}
-.tag-questions {
- margin: 20px 0 10px 10px;
-}
-.tag-questions .question-tag {
- margin: 5px;
-}
-
-.actions {
- display: flex;
- justify-content: flex-end;
- margin: 16px;
- gap: 16px;
-}
-
-article.related {
- /* do NOT change here, change global --paddingSides if needed,
- * must be synchronized to avoid changing width on transition,
- * because changing width reflows text, which looks janky on opening the related question */
- margin-left: calc(2 * var(--paddingSides));
- max-height: 999px;
- will-change: margin-left;
-
- /* keep even for reduced motion */
- animation: fadeIn 400ms ease-out;
- animation-fill-mode: both;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .react-auto-height {
- overflow: hidden;
- transition: height 400ms;
- will-change: height;
- }
-
- .answer {
- transition: margin 400ms;
- }
-
- article {
- transition: margin 400ms;
- }
-
- article > h2 > .transparent-button {
- transition: padding 400ms;
- font-weight: 600;
- }
-
- article > h2::after {
- transition: transform 400ms;
- }
-
- article.related {
- /* prettier-ignore */
- animation: grow 400ms cubic-bezier(1, 0, 1, 0),
- fadeIn 400ms 400ms ease-out,
- slideFromRight 400ms 400ms ease-out;
- animation-fill-mode: both;
- }
-}
-
-article.related > h2 > .transparent-button,
-article.related .answer {
- margin-right: calc(-2 * var(--paddingSides));
- will-change: margin-right;
-}
-
-footer {
- --space: 12px;
- align-self: center;
- margin-top: auto;
- padding: 100px var(--space) 50px;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: var(--space);
- font-size: 0.8rem;
- line-height: 1;
-}
-
-footer a,
-footer a:visited {
- color: var(--colorButtonText);
-}
-
-footer > *:not(:last-child) {
- border-right: 1px solid #999;
- padding-right: var(--space);
-}
-
-.searchbar {
- display: flex;
- justify-content: stretch;
- align-items: center;
- position: relative;
-}
-
-.searchbar input {
- flex: 1;
- font-size: 1rem;
- padding: 10px;
- border: none;
- outline: 1px solid var(--borderColor);
- border-radius: 10px;
-}
-
-.searchbar input::-webkit-search-cancel-button {
- margin-right: 35px;
-}
-
-.searchbar svg {
- position: absolute;
- right: 11px; /* visually aligned to the chevron */
-}
-
-.search-loader {
- position: absolute;
- left: 50%;
- margin-top: 15px;
-}
-.no-questions {
- margin-top: 10px;
-}
-
-.dropdown {
- min-height: 65px;
- border: 1px solid var(--borderColor);
- margin-top: 10px;
- border-radius: 10px;
-}
-
-.dropdown div {
- color: var(--colorText);
- background-color: var(--bgColorQuestionSearch);
- overflow: auto;
- z-index: 1;
- border-radius: 10px;
-}
-
-.dropdown.hidden {
- display: none;
-}
-
-.dropdown button {
- border: none;
-}
-
-.result-item-box {
- padding: 12px 16px;
- line-height: 1;
- display: block;
- width: 100%;
- border: none;
-}
-
-.result-item {
- cursor: pointer;
- text-decoration: none;
-}
-
-.result-item:hover {
- background-color: var(--bgColorHighlight);
-}
-
-.result-item.already-open {
- color: #999;
- cursor: default;
- background-color: transparent;
-}
-
-.result-item.none-of-the-above,
-.result-item.none-of-the-above:visited {
- text-decoration: none;
- font-style: italic;
- padding: 12px 16px;
- line-height: 1;
- display: block;
-}
-
-/*I am sure there is a more elegant way of doing this than a single use css class*/
-.transparent-result-item {
- background: transparent;
-}
-
-.possible-question {
- display: flex;
- align-items: center;
- margin: 16px;
- gap: 16px;
-}
-.possible-question .result-item {
- display: flex;
- align-items: center;
- flex: auto;
- padding: 12px 0 12px 16px;
-}
-.possible-question .title {
- flex: auto;
- font-weight: 700;
-}
-.possible-question svg {
- width: 16px;
- height: 16px;
-}
-.possible-question .padding {
- width: 23px;
-}
-.possible-question form.none-of-the-above {
- padding-left: 0;
- margin-bottom: 2.8em;
- color: var(--colorDialogOther);
- opacity: 0.7;
-}
-
-.dialog {
- width: 30em;
- background: var(--bgColorPage);
- color: var(--colorText);
- border: 1px solid;
- border-radius: 10px;
-}
-
-.light .dialog {
- border: none;
-}
-
-.dialog::backdrop {
- background: rgba(0, 0, 0, 0.7);
-}
-/* Make sure older browsers work correctly */
-div.dialog {
- z-index: 100;
- background-color: var(--bgColorQuestion);
- padding: 10px;
- left: 50%;
- max-width: 90%;
- position: absolute;
- transform: translate(-50%, -50%);
-}
-div.dialog .close {
- position: absolute;
- right: 10px;
-}
-
-.dialog-title {
- text-align: center;
-}
-
-.dialog-title-header {
- font-weight: 700;
-}
-
-.no-stretch {
- width: 0;
- min-width: 100%;
-}
-
-input:focus-visible,
-button:focus-visible,
-a:focus-visible,
-.link:focus-visible {
- outline: 2px solid #bbb;
-}
-
-a.see-more:not(.visible) + div.see-more-contents {
- display: none;
-}
-a.see-more:after {
- content: 'See more...';
-}
-a.see-more.visible:after {
- content: 'See less';
-}
-
-.error {
- color: red;
-}
-
-/* Tags */
-.tag-controls {
- display: flex;
- flex-wrap: wrap;
-}
-.tag-controls a {
- margin: var(--marginTags);
-}
-
-.tag-controls .searchbar {
- flex: 1;
- margin: var(--marginTags);
-}
-.tag-controls .sort-by {
- flex: 1;
- margin: var(--marginTags);
-}
-.tag-controls .sort-by input {
- padding: 10px;
- font-size: 15px;
-}
-
-.tag {
- all: unset;
-}
-.tag {
- display: inline-block;
- border-radius: 30px;
- background: var(--colorTagBody);
- /* visually consistent padding is numerically different due to line-height: 1.5 */
- padding: 10px 15px;
- margin: var(--marginTags);
- cursor: pointer;
- border: 1px solid var(--colorTagBorderAndText);
- color: var(--colorTagBorderAndText);
-}
-.all-tags-container .tag .tag-name {
- padding-right: 10px;
-}
-.tags-container .tag {
- padding: 2px 1px;
-}
-.tags-container .tag .tag-name {
- font-size: inherit;
- padding: 2px 10px;
-}
-
-.cache button {
- margin: 0 5px;
-}
-
-.toc-container {
- display: flex;
-}
-
-/* Smaller screen stuff */
-
-@media (max-width: 740px) {
- header {
- flex-direction: column;
- padding: 12px 0 12px;
- }
-
- .intro {
- line-height: 1.2;
- }
-
- .logo-intro-group {
- width: 100%;
- }
-
- .fun-logo .icon-link-group,
- .min-logo .icon-link-group {
- width: 100%;
- padding: 16px;
- align-self: flex-start;
- flex-direction: row;
- justify-content: center;
- }
-
- footer {
- font-size: 0.75rem;
- }
-
- footer > *:not(:last-child) {
- border-right: 0;
- padding-right: 0;
- }
-}
-
-/* Begin Discord chat embed */
-
-#discordChatBtn > svg {
- -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
- filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
- cursor: pointer;
- position: fixed;
- bottom: 1vw;
- right: 2vw;
- height: 3vw;
- min-height: 40px;
- min-width: 45px;
-}
-
-@media screen and (max-width: 410px) {
- /* avoid potential overlap with .fixedBottom buttons on small screens */
- #discordChatBtn {
- bottom: 40px;
- }
-}
-/* End Discord chat embed */
-
-/* dark theme */
-@media (prefers-color-scheme: dark) {
- :root {
- /* duplicate to avoid flash of white background while JS loads, consider some CSS postprocessing solution if this needs to be maintainable */
- --bgColorPage: #fff;
- --bgColorQuestion: #212936;
- --bgColorQuestionSearch: #121826;
- --bgColorCopied: #fed;
- --colorText: #ffffff;
- --colorTitle: #f7fff9;
- --colorTitleHighlight: #d86;
- --colorQuestionTitle: #f0f2f6;
- --colorButtonText: #3073b7;
- --colorTagBorderAndText: #3073b7;
- --colorTagBody: #212936;
- --borderColor: #dcdcdc;
- --borderColorButton: #666;
- --bgColorButton: #212936;
- --bgColorHighlight: #182a43;
- --bgColorTableRows: #1d2436;
- --colorLink: #89e3ff;
- --colorLinkVisited: #79f;
- --colorDialogOther: #ffffff;
- }
-}
-:root.dark {
- --bgColorPage: #fff;
- --bgColorQuestion: #212936;
- --bgColorQuestionSearch: #121826;
- --bgColorCopied: #fed;
- --colorText: #ffffff;
- --colorTitle: #f7fff9;
- --colorTitleHighlight: #d86;
- --colorQuestionTitle: #f0f2f6;
- --colorButtonText: #3073b7;
- --colorTagBorderAndText: #3073b7;
- --colorTagBody: #212936;
- --borderColor: #dcdcdc;
- --borderColorButton: #666;
- --bgColorButton: #212936;
- --bgColorHighlight: #182a43;
- --bgColorTableRows: #1d2436;
- --colorLink: #89e3ff;
- --colorLinkVisited: #79f;
- --colorDialogOther: #ffffff;
-}
-
-:root.dark svg *[class$='svg__gray'] {
- fill: #ccc;
-}
-
-:root.dark article > h2::after {
- filter: invert(1);
-}
-
-:root.dark .icon-link:active {
- filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
-}
-
-/* do not add more rules below, add them above dark theme */