/* Version: core.css */ /* -------------------------------------------------------------------------- */ /* ----- master elements ---------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* ----- clear defaults ----------------------------------------------------- */ * { margin: 0; padding: 0; } /* ----- ------------------------------------------------------------- */ body { font-family: Arial, sans-serif; line-height: 1.6; color: white; background-color: black; } /* -----

and

---------------------------------------------- */ header, footer { width: 100%; text-align: center; background-color: #333; } /* -----

------------------------------------------------------------- */ main { display: flex; flex-direction: column; align-items: center; } /* ----- readable blocks ---------------------------------------------------- */ header h1, header nav, header p, header details, header form, main, footer p { width: 100%; max-width: min(600px, 95vw); margin-left: auto; margin-right: auto; } /* ----- fill parent width -------------------------------------------------- */ header, section, article, figure, details, summary, footer { width: 100%; max-width: 100%; } /* ----- restore/set key padding/margins ------------------------------------ */ header, footer, main { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; } nav, header form, h1, h2, h3, p, section, article, figure, li, summary, table { margin-top: 0.5rem; margin-bottom: 0.5rem; } hr { margin-top: 1rem; margin-bottom: 1rem; } ul, ol { margin-top: 0.03rem; margin-bottom: 0.03rem; padding-left: 2.5rem; } summary { padding: 0.5rem; } th, td { padding-left: 0; padding-right: 1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } th:last-child, td:last-child { padding-right: 0; } /* ----- center headers ----------------------------------------------------- */ h1, h2, h3 { text-align: center; } /* -------------------------------------------------------------------------- */ /* -----

elements -------------------------------------------------- */ /* -------------------------------------------------------------------------- */ /* -----

(with Home icon) ---------------------------------------------- / header h1 { position: relative; display: flex; align-items: flex-start; justify-content: center; } header h1 a#home-link { position: absolute; top: 0; left: 0; } header h1 a#story-collection-link { position: absolute; top: 0; right: 0; } #home-icon, #story-collection-icon { width: 1.25em; height: auto; } img.tips-icon { height: 2em; width: auto; vertical-align: middle; } / -----
-------------------------------------------------------------- / nav ul { margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: center; } nav li { display: flex; align-items: center; } .nav-item { display: flex; flex-direction: column; align-items: center; text-align: center; } nav li:not(:last-child)::after { content: "✧"; color: gray; margin-left: 0.25rem; margin-right: 0.25rem; } / ----- header sections ---------------------------------------------------- / / #usageTips {} / #quickUsageTips { margin-top: 1rem; margin-bottom: 1rem; } / ----- site icons --------------------------------------------------------- / header p img, .almost-ready img, img.movie-disc, img.movie-stream, img.movie-flag { height: 1em; width: auto; vertical-align: middle; } / ----- search form -------------------------------------------------------- / #search-clear-button { margin-right: 10px; } / -------------------------------------------------------------------------- / / -----
elements ---------------------------------------------------- / / -------------------------------------------------------------------------- / / -----
--------------------------------------------------------------- / hr { width: 150px; border-color: gray; } / -----
and
-------------------------------------------- / summary { background-color: gray; } details.header-expand summary { margin: auto; background-color: transparent; } details.header-expand div { width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } details.header-expand li { text-align: left; } / ----- ,
, and -------------------------------------------- / table { width: auto; max-width: 100%; margin-left: auto; margin-right: auto; } th { color: gray; font-weight: normal; text-align: left; } td { height: auto; text-align: left; } td img { max-width: 128px; height: auto; } / ----- unassuming pointers ------------------------------------------------ / [onclick]:hover, summary:hover { cursor: pointer; } / ----- text appearance ---------------------------------------------------- / em { color: #FFD1DC; font-style: normal; } .search-excerpt em { color: #FFE8EE; } cite { color: cyan; } q { font-style: italic; quotes: none; } code { color: yellow; } strong { color: magenta; } .subtle { color: gray; } .subtle-back { background-color: gray; } .basic-back { font-weight: bold; color: white; background-color: gray; text-align: center; } .heading { color: lightgreen; font-weight: bold; } .bold { font-weight: bold; } .subheading { color: #FFAD66; font-weight: bold; } .welcome { font-size: 115%; } .CTA { color: lightgreen; font-weight: bold; font-size: large; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .nowrap { white-space: nowrap; } ul.compact { line-height: 1.0; padding-left: 1em; } .top-align td { vertical-align: top; } .almost-ready { margin-top: 2rem; margin-bottom: 2rem; text-align: center; } / ----- common fields ------------------------------------------------------ / .negative { color: red; } .neutral { color: yellow; } .positive { color: lightgreen; } .rating-good { color: black; background-color: rgba(90, 200, 90, 0.75); / green / } .rating-mediocre { color: black; background-color: rgba(240, 200, 0, 0.75); / yellow / } .rating-bad { color: black; background-color: rgba(255, 0, 0, 0.75); / red / } / ----- movie fields ------------------------------------------------------- / .movie-review-title { color: #FFE1E9; } img.movie-stream { border: 1px solid gray; border-radius: 2px; } a img.movie-stream { border-color: currentColor; } / ----- buttons ------------------------------------------------------------ / button, input, textarea, .header-expand-button { padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; margin-left: 1px; margin-right: 1px; font-weight: bold; background-color: white; border: none; border-style: solid; border-radius: 8px; border-width: 2px; border-color: white; color: black; text-align: center; } button, input[type="button"], input[type="submit"], .header-expand-button { border-style: outset; } button.active { background-color: #FFD1DC; } / ----- anchor links ------------------------------------------------------- */ a, a.heading, a.subheading { color: #39A3FF; text-decoration: none; white-space: nowrap; } a.subtle { color: #C2E1FF; } a:hover { text-decoration: underline; } @keyframes link-pulse { 0% { transform: scale(1); color: #39A3FF; } 50% { transform: scale(1.1); color: #63B7F6; } 100% { transform: scale(1); color: #39A3FF; } } .pulsating-link { display: inline-block; animation: link-pulse 1s infinite; }