on target children */ /* line-height: var(--heightLine); */ /*}*/ & > nav { /* Outer wrapper for legal links in footer */ margin-top: var(--spacing1); & > div { /* Inner wrapper for legal links in footer */ display: inline-block; margin: 0 .5rem; } } } } /******************** * HEADER POPUP MENU * ********************/ /* Popup menu open & close buttons */ #navPopupToggle { margin-right: var(--hSpaceMin); /* Mobile-first */ } /* Popup menu open & close buttons */ #navPopupToggle figcaption { height: 100%; } /* Popup menu open & close buttons */ #navPopupToggle figcaption > div { align-items: center; display: flex; height: 100%; padding: 0 1rem; position: relative; transition: font-size var(--trnMedia), line-height var(--trnMedia); } /* Popup menu close button */ #navPopupToggle figcaption div div:last-child { align-items: center; display: none; /* If removed, the button's "X" starts in the top-left corner instead of centered. Not worth fixing. */ /*height: 100%;*/ justify-content: center; left: 0; position: absolute; top: 0; /*right: 0;*/ bottom: 0; width: 100%; } /* Popup menu */ #navPopup { background-color: var(--colBgSiteButton); box-shadow: var(--shadowHeader); cursor: pointer; display: none; position: absolute; top: var(--spacing1); right: var(--hSpaceMin); /* Mobile-first */ z-index: 2147483644; /* Always on top, except modals, #pageDisable and reCAPTCHA */ transition: background-color var(--trnLight), /* Otherwise anything aside from "Dark Mode" transitions weird */ color var(--trnLight), font-size var(--trnMedia), line-height var(--trnMedia), right var(--trnMedia), top var(--trnMedia); } /* Popup menu rows */ #navPopup > div { padding: .75em; /* em is smoother than rem for the "Large" media query transition(?) */ } /********* * MODALS * *********/ #pageDisable { background-color: #000; bottom: 0; left: 0; opacity: 0.75; position: fixed; right: 0; top: 0; z-index: 2147483646; /* Always on top, except modals */ } #modal { display: table; height: 100%; position: absolute; width: 100%; z-index: 2147483647; /* Always on top */ & input[type="button"] { margin-top: var(--spacing1Half); & + input[type="button"] { margin-left: var(--spacing2Half); } } } #modal > div { display: table-cell; height: 100%; vertical-align: middle; } #modal > div > div { border-width: 0; height: 100%; /* calc(100% - (var(--hSpaceMin) * 2)); */ margin-left: auto; margin-right: auto; padding: 0 var(--hSpaceMin) var(--hSpaceMin) var(--hSpaceMin); } #modalScroll { height: 12.5rem; margin-top: 1rem; overflow-y: scroll; padding: 1rem; scroll-behavior: smooth; } /* Variation of div.btn for actual s */ /* TO DO: Applies to more than just modals */ input:is([type="button"], [type="submit"]), /* Contact, Modal */ div.btns input { /* Login, Register */ background-color: var(--colBgBtn); border-color: var(--colBorderSectionLight); border-radius: var(--borderRadius); border-width: 1px; box-shadow: var(--shadowButton); color: var(--colFontBtn); font-size: 1.125rem; /* 1/8 larger than standard for emphasis & readability */ font-weight: 400; margin-top: 1em; padding: var(--paddingBtnHalf); text-shadow: .5px .5px var(--colDark01); &[disabled] { /* background-color: rgba(233, 233, 237, 0.5); /* From FF on 2026-04-10 */ opacity: .5; } &:not([disabled]) { /* Modal */ cursor: pointer; border: 1px solid #000; } } /* Group action buttons and keep vertical spacing when rows wrap */ /* TO DO: Applies to more than just modals */ div.btns { /* Used aside from just on modals, but started there */ column-gap: 1rem; display: inline-flex; flex-wrap: wrap; row-gap: 1.5rem; } /* Not the cleanest, but make modal buttons pop more (assuming they continue popping more with browser defaults */ #modal input { border-color: var(--colBdrBtn); } /********* * TABLES * (Contact, Download, Login, Modal, Pastebin) *********/ :not(h2) + div.table { /* On Contact, there is a

above table */ margin-top: var(--spacing2); } /* Row */ div.table > div:first-child { /* Mobile-first; on Log In, there is no

etc. above table */ margin-top: 0; & div:first-child { margin-top: 0; } } /* Cell */ div.table > div > div { margin-top: calc(var(--spacing2) / 2); /* Mobile-first */ } /* Left-aligned headers (1st column) on forms (Contact, Download, Login, Pastebin) */ div.table.form > div > div:first-child { text-align: left; &.required::after { content: '*'; color: red; margin-left: .25rem; } } /* If the table has form fields, left pad cells after column 1 */ div.table.form > div > div:not(:first-child) { & > p + div.btns, & > div.btns + p { margin-top: var(--spacing2); /* Log In */ } } /* Move inputs down if their labels wrap onto multiple lines (Contact) */ div.table.form > div > div { vertical-align: middle; } /* Same as "Cell" above, to add consistent space after text directly above input (Contact) */ div.table.form > div > div span + input { display: block; margin-top: calc(var(--spacing2) / 2) } /* Modal RTA */ /* div.table.notResponsive {} */ /* Modal RTA */ div.table.notResponsive > div { display: table-row; } /* Modal RTA */ div.table.notResponsive > div > div { display: table-cell; } /* Modal RTA */ div.table > div.vAlignMid > div { vertical-align: middle; } /******** * CALCS * ********/ table.calc { background-color: #333; border: .25rem solid #222; border-radius: 1rem; color: var(--highEmphasisNew); display: inline-block; padding-bottom: var(--spacing2); & .infoButton { cursor: pointer; display: inline-block; background-color: blue; border-color: var(--highEmphasisNew); border-radius: .75rem; border-style: solid; border-width: 2px; font-weight: 700; /* bold */ padding: .025rem 0; text-align: center; width: 1.25rem; } /* Calc screen */ & tr:first-child td { text-align: center; font-size: 1.5rem; & div { display: inline-block; padding: .25rem; } & > div { background-color: #282828; & div { background-color: #000; border: .25rem solid #222; color: var(--lowEmphasisNew); transition: color .25s; &:not(:first-child) { border-left-width: 0; } } } } /* Calc form */ & tr:not(:first-child) { & td { vertical-align: top; width: 1%; white-space: nowrap; &:first-child { font-weight: 700; /* bold */ padding-left: 1rem; text-align: right; } &:not(:first-child) { text-align:left; } & > label, > span { /* Align calc labels to be vertically centered with number inputs, and keep that spacing consistent for elements under number inputs (in spans) */ display: inline-block; padding-top: .4rem; } & select { margin-left: .5rem; margin-right: 1rem; } &.info { vertical-align: middle; width: 98%; & > div { margin-left: .5rem; margin-top: .6rem; } } } } } /* Labels for radio buttons */ table.calc input[type="radio"]+label { padding-left: .2rem; padding-right: 1rem; } /* Labels for checkboxes */ table.calc span+label { padding-left: .5rem; } /********* * IMAGES * **********/ div.imgGroup { /* AI, Art, Proto */ --imgCardWidth: calc((var(--widthMax) - (var(--spacing1) * 2) - (var(--spacing2) * 2)) / 3); display: flex; flex-wrap: wrap; gap: calc(var(--spacing2)); justify-content: center; margin-left: auto; margin-right: auto; max-width: calc((var(--imgCardWidth) * 3) + (var(--spacing2) * 2)); /* Up to 3 images per row */ & > div.imgWrapper { flex: 0 0 auto; margin-left: 0; margin-right: 0; width: fit-content; } } div.imgWrapper { /* Home, AI, Art */ border-radius: 1rem; /* Prevent mouse in corner of a.img below from zooming */ line-height: normal; /* Remove undesired bottom spacing */ margin-left: auto; margin-right: auto; position: relative; /* For nested 'position: absolute' elements */ width: fit-content; & a.img { display: inline-flex; /* Turn on bg col above to see effect of removal) */ } & div.imgBtns { color: var(--highEmphasisNew); position: absolute; right: var(--spacing2Half); top: var(--spacing2Half); & > div { background-color: #000; border: 1px solid var(--highEmphasisNew); border-radius: 1rem; cursor: pointer; opacity: 0.75; padding: 0 .5rem; & + div { margin-top: var(--spacing2Half); } } } } a.img:not(.noWrapper) { /* Home, AI, Art */ border: 1px solid var(--colBorderSection); border-radius: 1rem; box-shadow: var(--shadowPageTitle); overflow: hidden; transition: border-color var(--trnLight); } div.blogImg a.img { border: none; } a.img section { /* Home, AI */ aspect-ratio: 1 / 1; /* Ensure height matches width */ background-color: var(--colBgSection); /*border: 1px solid #888888;*/ /*border-radius: 1rem;*/ /*box-shadow: 0px 0px 2px #ff0000;*/ display: inline-block; /*overflow: hidden;*/ position: relative; width: calc(100vw - (var(--hSpaceMin) * 2)); /* Mobile-first, substract page margins */ max-width: calc(var(--widthMax) / 3); transition: background-color var(--trnLight); } /* Overwrite max-width above for multiple images on same line */ div.imgGroup a.img section { /* AI */ max-width: var(--imgCardWidth); width: min(var(--imgCardWidth), calc(100vw - (var(--hSpaceMin) * 2))); } div.imgGroup a.img { /* AI */ display: inline-flex; width: auto; } a.img figure { /* Home, AI */ background-position: center; background-repeat: no-repeat; background-size: contain; height: 100%; /*width: 100%;*/ transition: transform .5s ease-out; } a.img figcaption { /* AI, Art */ background-color: #000; border: 1px solid var(--highEmphasisNew); border-radius: 1rem; bottom: var(--spacing2Half); color: var(--highEmphasisNew); /*display: inline-block;*/ left: 50%; opacity: .75; padding: 0 .5rem; position: absolute; transform: translateX(-50%); transition: opacity .5s ease-out; } div.imgGroup.opaqueText a.img figcaption { /* Art */ opacity: .875; } /****************** * ELEMENT CLASSES * ******************/ /* Link pre-underlined */ a:not(.btn > a):not(.img):not(.neverLine):not(.noLine):not(.tag) { border-bottom-style: solid; border-bottom-width: 1px; padding-bottom: 2px; } /* Link underlined on hover */ a.noLine, a.tag { padding-bottom: 2px; } /* Blog */ a.tag { color: #6666ff; } /* Theme */ div[class^="elevation-"], div[class*=" elevation-"] { border-radius: 1em; } /* Theme */ div.article { display: inline-block; padding: var(--spacing1); } /* Theme */ div.articleMargin { margin: var(--spacing2); } div.txtLeft, /* Contact, Download, Login, Pastebin */ pre.txtLeft, /* Cron */ /* TO DO: Make Pastebin the same, and have both use a monospace font */ td.txtLeft, /* Blog menu, Discord menu, Session, Sobriety */ table.txtLeft :is(td, th) { text-align: left; } :not(div.table) > div.vAlignMid { /* Art Piece */ align-items: center; display: flex; margin-top: var(--spacing2); justify-content: center; } /* Pay */ img.qr { aspect-ratio: 1 / 1; /* Ensure height matches width */ margin-top: var(--spacing1); width: calc(100vw - (var(--hSpaceMin) * 2)); /* Mobile-first, substract page margins */ max-width: calc(var(--widthMax) / 6); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--colBorderSection); box-shadow: none; } /* GGG */ ol.liGray { margin-left: 2rem; max-width: calc(var(--widthMaxHalf) - 2rem); & li { color: #888888; padding-left: calc(var(--spacing2) / 2); & span { color: var(--highEmphasisNew); transition: color var(--trnLight); } } } section.txtLeft > p:not(.txtCenter) { text-align: left; } section.wide p { /* Legal */ max-width: revert; } section.wide li img, section.wide p img { /* Legal */ display: block; } section.wide li img[src*="1.png"], section.wide p img[src*="1.png"] { /* Legal */ padding-top: .5em; } section.wide li img[src*="2.png"], section.wide p img[src*="2.png"] { /* Legal */ padding-bottom: .5em; } table.center { /* Blog, Crypto, Disord, Farm Sim, Sobriety, Social, Session */ margin-left: auto; margin-right: auto; } table.headerCol th { /* Crypto, Farm Sim, Social */ text-align: right; vertical-align: top; } table.headerCol td { /* Crypto, Farm Sim, Social */ padding-left: 1rem; text-align: left; vertical-align: top; } table.responsive { /* Log */ overflow-wrap: break-word; table-layout: fixed; width: 100%; } table.stories span { /* Blog card */ display: inline-block; font-style: italic; margin-top: 0.5em; } table.vAlignTop td { /* Blog card */ vertical-align: top; } /****************** * GENERIC CLASSES * ******************/ .elevated { background-color: var(--colBgSectionHighlight); border: 1px solid var(--colBgSiteButton); /* Two shades lighter than bgcol */ border-radius: var(--borderRadius); box-shadow: var(--shadowButton); padding: .25rem .375rem; transition: background-color var(--trnLight), border-color var(--trnLight); } /* TO DO: EVERYTHING BELOW SHOULD BE ALPHABETIZED */ .txtCenter { text-align: center; } section.txtJustify p { text-align: justify; } .txtRight { text-align: right !important; } /* Blog menu, Discord menu, Sobriety, Session, "important" for Proto page */ .vAlignMid { vertical-align: middle; } /* Modal RTA */ .animatedBlink { animation: blink 1s linear infinite; } /* Modal */ .flipH { /* GGG */ display: inline-block; transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); } .bdrRed { border: 1px solid var(--colRedMost) } /* Modal */ .bdrRedThick { border: 2px solid var(--colRedMost) } /* Modal */ .bgRedFade { background-color: var(--colRedFade); } /* Modal */ .bgRedFadeMore { background-color: var(--colRedFadeMore); } /* Modal */ .elevation-00 { border: 2px solid var(--colDark02); } /* Theme... */ .elevation-01 { background-color: var(--colDark02); } .elevation-02 { background-color: var(--colDark03); } .elevation-03 { background-color: var(--colDark04); } .elevation-04 { background-color: var(--colDark05); } .elevation-06 { background-color: var(--colDark06); } .elevation-08 { background-color: var(--colDark07); } .elevation-12 { background-color: var(--colDark08); } .elevation-16 { background-color: var(--colDark09); } .elevation-24 { background-color: var(--colDark10); } .highEmphasis { color: var(--highEmphasisNew); } /* Theme... */ .mediumEmphasis { color: var(--mediumEmphasisNew); } .lowEmphasis { color: var(--lowEmphasisNew); } .highEmphasisNew { color: var(--highEmphasisNew); } .mediumEmphasisNew { color: var(--mediumEmphasisNew); } .lowEmphasisNew { color: var(--lowEmphasisNew); } .cursorPointer { cursor: pointer; } /* Panel */ .extraMarginTop { margin-top: var(--spacing1) } /* Home, Pay */ .marginBottom { margin-bottom: var(--spacing2); } /* Art (specific piece) */ .marginLeft { margin-left: 1rem; } /* Farm Sim, Modal, Panel */ .marginTopHalf, .marginTopHalf li { margin-top: calc(var(--spacing2) / 2); } /* Calc */ /* TO DO: Move to element classes */ .marginTop { margin-top: var(--spacing2); } /* Pervasive */ .marginTop td { padding-top: var(--spacing2); } /* Blog, Calc */ /* TO DO: Move to element classes */ .noMarginAuto { /* Modal */ margin-left: revert; margin-right: revert; } .noMarginTop { margin-top: 0 !important; } /* Contact, Farm Sim, Modal (!important for Contact "Continue" button) */ .noMaxWidth { max-width: revert; } /* Modal */ .paddingRight { padding-right: 1rem; } /* Modal */ .txtBlack { color: #000; } /* Modal */ .txtGray, .txtGrey { color: #888888; } /* GGG, Panel */ .txtGreen { color: var(--colGreen) } /* Mail, Panel */ .txtPink { color: #ffc0cb; } /* Panel */ .txtPurple { color: #a020f0; } /* Panel */ .txtRed { color: var(--colRed) } /* Contact, Mail, Panel */ .huge { /* Modal */ font-size: 2em; line-height: 2em; /* Match font-size */ /* Removed because weird that it's less than mobile-first LH */ } .hoverBtn { background-color: black; border: 1px solid #888888; border-radius: var(--borderRadius); bottom: 40px; color: white; cursor: pointer; font-weight: bold; padding: 20px; position: fixed; right: 40px; z-index: 2147483643; /* Always on top, except menu, modals, #pageDisable and reCAPTCHA */ } :not(.imgWrapper).large { /* Modal */ font-size: 1.5em; /* line-height: 1.5em; */ /* Match font-size */ /* Removed because weird that it's less than mobile-first LH */ } .tiny { /* Error */ font-size: .5em; /* line-height: .5em; */ /* Match font-size */ /* Removed because weird that it's less than mobile-first LH */ } .bold { font-weight: 700; } /* Pervasive */ .italic { font-style: italic; } /* Pervasive */ .noWrap { white-space: nowrap; } /* Home, Kingtree, Legendary menu */ .underline { text-decoration: underline; } /* Pervasive */ .wrap { overflow-wrap: break-word; } /* Panel, URL Encode */ .displayNone { display: none; } /* Contact */ .overflowHidden { overflow: hidden; } /* Modal */ .superscript { font-size: 0.75em; line-height: 0; vertical-align: super; } h1 .superscript { position: relative; font-size: .75em; top: -.25em; left: .1em; } /************* * HOVER MODE * *************/ /* TO DO: COMBINE THIS BLOCK WITH THE NEXT? */ body.hover { header { & section { & figure { &:first-child { &:hover a { background-color: var(--colBgSiteDropDownHover); /* Home button in header */ } } } } } } body.hover { & header figure:not(:first-child):hover { /* Flat/no-background buttons in header (i.e., all except home button) */ background-color: var(--colBgSiteButton); } & div.blogImg:hover > a > div > div { transform: scale(1.1); } } /* Popup menu */ body.hover #navPopup > div:hover { background-color: var(--colBgSiteDropDownHover); } /* Pre-underlined link */ body.hover a:not(.btn > a):not(.img):not(.neverLine):not(.noLine):not(.tag):hover { border-bottom-width: 2px; } /* Non-underlined link */ body.hover a.noLine:hover, body.hover a.tag:hover { border-bottom-style: solid; border-bottom-width: 1px; } /* Button */ body.hover div.btn { &.blue:hover { background-color: var(--colBlueHover); } &.orange:hover { background-color: var(--colOrangeHover); } } /* Input button/submit */ body.hover input:is([type="button"], [type="submit"]), /* Contact, Modal */ body.hover div.btns input { /* Login, Register */ &:not([disabled]) { /* Modal */ &:hover { background-color: rgb(208, 208, 215); /* From FF on 2026-04-10 */ } } } /* Images (image) */ body.hover .imgWrapper:hover figure, body.hover .imgWrapper:focus figure { transform: scale(1.1); } /* Images (text) */ body.hover .imgWrapper:hover figcaption, body.hover .imgWrapper:focus figcaption { opacity: 0; } /* Inputs */ body.hover input:hover, body.hover textarea:hover, body.hover select:hover { outline: 2px solid var(--colBorderSection); } body.hover div.imgWrapper { & div.imgBtns { & > div:hover { opacity: 1; } } } /* Modal buttons */ body.hover div#modal input:not([disabled]):hover { background-color: var(--colBgBtn); outline: 2px solid var(--colOutlineBtn); } body.hover .hoverBtn:hover { outline: 1px solid #fff; } /************* * LIGHT MODE * *************/ body.light { background-color: var(--colBgLight); color: var(--colFontLight); & a.img { border-color: var(--colBorderSectionLight); } & h2 { background-color: var(--colBgBodyHeaderLight); } & header { background-color: var(--colBgMainMenuLight); & figure:first-child a { background-color: var(--colBgSiteTitleLight); color: var(--colFontSiteTitleLight); } } & main { & > form > section, > section { &.elevated { border-color: var(--colBorderSectionLight); /* Same as section background color */ } & span.elevated { border-color: var(--colBorderSectionLight); /* Same as section background color */ } & div.blogImg { border-color: var(--colBorderSectionLight); /* TO DO: ADDS BORDER BETWEEN IMAGE AND SHADOW, BUT REMOVING BORDER MOVES UNDERLYING PAGE ELEMENTS UP/DOWN A FEW PX ON DARK MODE TOGGLE. MIGHT BE SOL */ & > span { background-color: var(--colBgSectionLight); } } } } input[type=password], input[type=text], select, textarea { color: var(--colFontLight); background-color: var(--colBgSectionHeaderLight); /* Same as h5.elevated etc. */ border-color: var(--colLight01); } } /* Popup menu button */ /*body.light #navPopupToggle figcaption > div { color: var(--colFontLight); }*/ /* Popup menu */ body.light #navPopup { background-color: var(--colBgSiteButtonLight); /*color: var(--colFontLight);*/ } /* Elevated sections */ body.light section.elevated { background-color: var(--colBgSectionLight); } /* Elevated section headers */ body.light section.elevated h5.elevated { background-color: var(--colBgSectionHeaderLight); } /* Elevated section highlights */ body.light section span.elevated { background-color: var(--colBgSectionHighlightLight); } /* Image */ body.light a.img section { background-color: var(--colBgSectionLight); } /* Legal */ body.light section.wide li img[src*="white"], body.light section.wide p img[src*="white"], body:not(.light) section.wide li img[src*="black"], body:not(.light) section.wide p img[src*="black"] { display: none; } /* GGG */ body.light ol.liGray { & li { & span { color: var(--colFontLight); } } } /********************* * HOVER + LIGHT MODE * *********************/ /* TO DO: COMBINE THIS BLOCK WITH THE NEXT? */ body.hover.light { header { & section { & figure { &:first-child { &:hover a { background-color: var(--colBgSiteDropDownHoverLight); /* Home button in header */ } } } } } } body.hover.light { & header figure:not(:first-child):hover { /* Flat/no-background buttons in header (i.e., all except home button) */ background-color: var(--colBgSiteButtonLight); } } /* Popup menu */ body.hover.light #navPopup > div:hover { background-color: var(--colBgSiteDropDownHoverLight); } body.hover.light input:hover, body.hover.light textarea:hover, body.hover.light select:hover { outline-color: var(--colLight01); } /**************** * MEDIA QUERIES * ****************/ @media (max-width: 400px) { /* Screen width warning */ header:after { visibility: initial; opacity: 1; } } /* Starting below, all same breakpoints as Bootstrap 5: https://getbootstrap.com/docs/5.0/layout/breakpoints */ /* X-Small: Width < 576px */ @media (max-width: 575px) {} /* Small: Height >= 576px */ @media (min-height: 576px) { /* Shorten modal and add top and bottom borders */ #modal > div > div { border-bottom-width: initial; border-top-width: initial; height: initial; } } /* Small: Width >= 576px */ @media (min-width: 576px) { /* Add margin-left to home button */ header { & section { & figure { &:first-child { margin-left: var(--spacing1); } } } } /* Add margin-right to popup menu button */ #navPopupToggle { margin-right: var(--spacing1); } /* Add margin-right to popup menu */ #navPopup { right: var(--spacing1); } main { padding: 0 var(--spacing1); & > form > section, > section { &:not(.noExpand) { min-width: 0; } & div.blogImg { /* Set blog image size to match increased page margins */ & > a > div { & > div { height: var(--blogImgHeight2NoPadding); max-height: var(--blogImgHeightMax); max-width: var(--blogImgWidthMax); width: var(--blogImgWidth2NoPadding); } } & > span { /* Same as div minus horizontal padding */ max-width: calc(var(--blogImgWidthMax) - (var(--spacing2))); width: calc(var(--blogImgWidth2NoPadding) - (var(--spacing2))); } } &.elevated.paddingExtra { /* Add horizontal padding to extra-padded elevated sections (e.g., Discord) */ padding-left: var(--spacing1); padding-right: var(--spacing1); } } } /* Add horizontal margin to footer */ footer { margin-left: var(--spacing1); margin-right: var(--spacing1); } /* Set fixed width on user input elements */ input[type=text], input[type=password], textarea { width: 20rem; } /* Double margin-left on bullets */ ol, ul { padding-left: 2rem; max-width: calc(var(--widthMax) - 2rem); } /* TO DO: APPEARS LIKE NO MARGIN (BULLETS FLUSH WITH PARAGRAPHS) AT AROUND 820 PX WINDOW SIZE */ section:not(.wide) ol, section:not(.wide) ul { max-width: calc(var(--widthMaxHalf) - 2rem); /* calc(var(--widthMaxHalf) - 4rem) TO DO: Why minus 4rem? */ } /* Set margin-top to balance other changes */ div.table { margin-top: var(--spacing2); } /* Allow table rows to have multiple table cells */ div.table > div { display: table-row; } /* Allow table rows to have multiple table cells (continued) */ div.table > div > div { display: table-cell; } /* If the table has form fields, add vertical space to cells after row 1 */ div.table.form > div:not(:first-child) > div { padding-top: var(--spacing2); } /* If the table has form fields, right-align and top-align cells in column 1 */ div.table.form > div > div:first-child { text-align: right; vertical-align: top; } /* If the table has form fields, left pad cells after column 1 */ div.table.form > div > div:not(:first-child) { padding-left: var(--spacing2); & > p { margin-top: 0; /* Log In */ } } div.table.form > div:nth-child(2) > div { padding-top: 0; /* Log In */ } div.imgWrapper { /* Home, AI, Art */ & a.img section { /* Match the wider page gutters used at this breakpoint */ width: calc(100vw - (var(--spacing1) * 2)); } &.large a.img section { max-width: min(800px, calc(100vw - (var(--spacing1) * 2))); } } /* Keep gallery rows at card widths (do not stretch to page width) */ div.imgGroup a.img section { width: min(var(--imgCardWidth), calc(100vw - (var(--spacing1) * 2))); } } /* Small: Height & width >= 576px */ @media (min-height: 576px) and (min-width: 576px) { /* Narrow modal and add left and right borders */ #modal > div > div { border-left-width: initial; border-radius: 1rem; border-right-width: initial; /* Match smallest page padding: Media width - 2x modal padding - 2x modal border - 2x page padding */ width: calc(100vw - (var(--hSpaceMin) * 2) - 4px - (var(--hSpaceMin) * 2)); } } /* Medium: Width >= 768px */ @media (min-width: 768px) { /* More horizontal space for modal */ #modal > div > div { /* Stop widening: Media min-width - 2x modal padding - 2x modal border - 2x page padding */ width: calc(768px - (var(--hSpaceMin) * 2) - 4px - (var(--hSpaceMin) * 2)); } /* TO DO: APPEARS LIKE NO MARGIN (BULLETS FLUSH WITH PARAGRAPHS) STARTING AROUND THIS WINDOW SIZE */ /* ol, ul { /* color: #ff0000; */ /*}*/ } /* Large: Height >= 992px */ @media (min-height: 992px) { /* Double vertical size of header */ header, header section { height: calc(var(--spacing1) * 2); } /* Adjust popup menu for double vertical size of header */ #navPopup { top: calc(var(--spacing1) * 2); } header:after { /* Screen width warning */ top: 81px; } /* Adjust page content for double vertical size of header */ main { margin-top: calc(var(--spacing1) * 2); } } /* Large: Width >= 992px */ @media (min-width: 992px) {} /* Large: Height & width >= 992px */ @media (min-height: 992px) and (min-width: 992px) { /* Larger size and more space for all buttons in header */ header { & section { & figure { &:first-child h1, &:nth-child(-n + 2) figcaption { font-size: 2rem; /* from 1rem */ line-height: 2rem; /* Match font-size */ } &:not(:nth-child(-n + 2)) { & a img { height: 1.5rem; width: 1.5rem; } & figcaption { font-size: 1.5rem; /* line-height: 1.5rem; */ /* Match font-size */ /* Removed because weird that it's less than mobile-first LH */ } } } } } /* Larger font for popup menu */ #navPopup { font-size: 1.5rem; /* line-height: 1.5rem; */ /* Match font-size */ /* Removed because weird that it's less than mobile-first LH */ } /* Larger font for

s / main { & > form > section, > section { & h2 { font-size: 2rem; / From 1.5rem / line-height: 2rem; / Match font-size / } } } } / Extra large: Width >= 1200px / @media (min-width: 1200px) {} / Extra extra large: Width >= 1400px / @media (min-width: 1400px) { div.imgGroup { margin-left: calc(var(--spacing1) -1); /* Inverse of spacing between [between what?] / width: 100vw; max-width: 1402px; / When at 1400px, third row of images does not appear */ } } /************* * ANIMATIONS * *************/ /* Modal / @keyframes blink { 50% { opacity: 0; } } / @keyframes shake-site-title { 0% { transform: translateX(0) } 25% { transform: translateX(calc((var(--spacing1) / 8))) } 50% { transform: translateX(calc(var(--spacing1) / 12) * -1) } 75% { transform: translateX(calc((var(--spacing1) / 16))) } 100% { transform: translateX(0) } } / / @keyframes shake-xy { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0eg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } */