From 21f62de6967ee60693deeda5f17c9edc3e28455e Mon Sep 17 00:00:00 2001 From: Daniel O'Connell Date: Thu, 29 Feb 2024 13:55:13 +0100 Subject: [PATCH] mobile pics --- .../assets/icons}/book-circle.svg | 0 app/assets/icons/get-involved-mobile.svg | 46 + app/assets/icons/intro-mobile.svg | 24 + app/components/Article/article.css | 11 +- app/components/ContentBox/box.css | 13 +- app/components/ContentBox/index.tsx | 14 +- app/components/icons-generated/BookCircle.tsx | 81 ++ .../icons-generated/GetInvolvedMobile.tsx | 96 ++ .../icons-generated/IntroMobile.tsx | 45 + app/components/icons-generated/index.ts | 3 + app/root.css | 1003 ----------------- 11 files changed, 310 insertions(+), 1026 deletions(-) rename {public/assets => app/assets/icons}/book-circle.svg (100%) create mode 100644 app/assets/icons/get-involved-mobile.svg create mode 100644 app/assets/icons/intro-mobile.svg create mode 100644 app/components/icons-generated/BookCircle.tsx create mode 100644 app/components/icons-generated/GetInvolvedMobile.tsx create mode 100644 app/components/icons-generated/IntroMobile.tsx delete mode 100644 app/root.css 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 = () => ( } > - AI Safety Image + + ) @@ -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 */