/* Variable declarations which are available to all styles. */ :root { --black-coffee: #352d39; --floral-white: #fef9ef; --charcoal: #2c4251; --charcoal-light: #2c425130; --red-violet: #943246; --lavender-blush: #ffedef; --honey-yellow: #ffb000; --sunglow: #ffcc00; --phosphor-brown: #282828; /* --shadow: 0 0 3px #ffb00066, 0 0 5px #ffcc0033; */ /* The background of the page backdrop. */ --bg-color: var(--floral-white); /* The color of text on the backdrop. */ --fg-color: black; /* The color used for borders and highlights. */ --offset-border-color: var(--charcoal); /* The background used to encapsulate off-set text areas of the page. */ --offset-bg-color: var(--floral-white); /* The color used for cards and callouts. */ --callout-bg-color: var(--floral-white); --callout-fg-color: var(--fg-color); --callout-dropshadow-color: var(--charcoal-light); /* The color used to set links apart from non-interactable text. */ --link-color: inherit; } html{ background-color: var(--black-coffee); } /* Applied to the whole visible content of the page. */ body { max-width: 55em; margin: 1.5em auto 1.5em auto; /* provides nice soft padding for text on narrow screens. */ padding: 1em 2.5em 1em 2.5em; box-shadow: 0 0 0 1em var(--bg-color); color: var(--fg-color); text-shadow: var(--shadow); background-color: var(--bg-color); border-left: 11.7px var(--black-coffee) dotted; border-right: 11.7px var(--black-coffee) dotted; } /* Applied to the textual content of the page. */ main { hyphens: auto; /* "Let it breathe." Text does not need to be jammed as close together as possible. */ line-height: 1.4; /* Slightly higher font size means it's easier to read. */ /* Setting a pt value here means other adjustments are made in scale. */ } main header { text-align: center; } main h1 { font-size: 1.8rem; } main h2 { font-size: 1.5rem; } main h3 { } /* The main content for the index page, standing out on purpose. */ .hero { display: flex; flex-flow: row nowrap; align-items: center; } /* Let the hero portrait image be above the hero intro text on small devices. */ @media only screen and (max-width: 600px) { } /* Reduces margin just enough to accomodate the shadow (see below) */ /* (shadows gets cut off otherwise, since it breaches the borders of ) */ .hero .portrait { margin-left: 2px; } /* Adds a soft border-like shadow under the image to make it stand out but not too much */ .hero img { filter: drop-shadow(0 0 2px var(--callout-dropshadow-color)); } /* Text block in the hero for displaying larger introductory text. */ .intro { min-width: 200px; } /* Make section into cards. */ section { margin: 0px; padding: 0px 8px 0px; color: var(--callout-fg-color); background-color: var(--bg-color); } /* Remove the disclosure triangle, per * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary */ summary { display: block; } /* Makes the content cascade downwards nicely. * Details summary is flush, but details content is one em right. */ details { padding: 0 0em; } details > :not(summary) { margin-left: 1em; margin-right: 0em; } /* Show a textual prompt for opening details (shown after the summary) */ summary:after { color: var(--link-color); font-weight: bold; content: "Show more..."; } /* Show a textual prompt for closing details (shown after the summary) */ details[open] summary:after { content: "Show less..."; } /* Basic shape and alignment of the navigational header and informational footer. */ header, footer { text-align: center; } /* Place the title on the left and the navigation on the right. */ body>header { display: flex; /* spreads the elements of a flex-displayed container as far apart as possible */ justify-content: space-between; /* aligns the elements of a flex-displayed container vertically, along the center line */ align-items: center; margin-bottom: 1em; padding: 0.25rem 0.5rem; background-color: var(--fg-color); color: var(--bg-color); } /* Let the header text be above the navigation links in the header on small devices. */ @media only screen and (max-width: 600px) { header { display: flex; flex-flow: column nowrap; align-items: center; margin-bottom: 1em; } .hero { display: flex; flex-flow: column nowrap; align-items: center; } body{ margin: 1rem; padding: 1rem; } } nav.div { display: block; float: right; } nav a + a { margin-left: 0.33em; } /* Link styling. All links get the same color. When hovering, they get an underline. */ a, a:visited, a:hover { color: var(--link-color) } a { text-decoration: underline; } a:hover { text-decoration: none; } a[href*="://"]:after { content: "↗"; display: inline-block; font-weight: bold; } /* List styling */ li + li { margin-top: 0.5ex; } /* Turn off bullets and spacing on list pages */ .list ul { padding-left: 0px; } .list li { list-style-type: none; } /* Applied to the Hugo-generated Table of Contents. * To get a TOC, the following is added to the YAML. output: blogdown::html_page: toc: true */ /* Images, tables, etc are centrally aligned. */ img:not(.inline), iframe, video { max-width: 100%; display: block; margin-left: auto; margin-right: auto; } /* Generated tables. */ #goat { max-width: 100%; display: block; margin-left: auto; margin-right: auto; } /* For images with caption, placed in-line with text */ figure { margin: 20px; max-width: 300px; background-color: white; padding: 2.5%; border-radius: 0.5rem; filter: drop-shadow(3px 3px 4px black); } figure.right { float: right; transform: rotate(0.5deg); } figure.left { float: left; transform: rotate(-0.75deg); } figure.center { max-width: 100%; width: auto; margin: auto; text-align: center; } figure img { max-width: 200px; border-radius: 0.5rem; filter: grayscale(0.5); } figure.center img { max-width: 100%; } figure.portrait { margin: initial; background-color: white; padding: 0; margin: 2.5%; border-radius: 50%; filter: none; } figure.portrait img { max-width: 200px; border-radius: 100%; } /* Block quotes and code quotes have some emphasis added. */ blockquote, pre { /* A bar to the left of each quote. */ border: 1px solid var(--offset-border-color); border-left: 5px solid var(--offset-border-color); /* Tastefully rounded corners. */ border-radius: 3px; /* An offset background. Important to override pygments. */ background-color: var(--offset-bg-color) !important; /* Basic outstanding layout. */ margin: 1rem 0.75rem 0.5rem 0.75rem; padding: 0.5rem 1rem; } /* Code boxes scroll instead of wrapping. */ pre { overflow-x: auto; } /* pagination */ .pagination li { display: inline; list-style: none; } ul.pagination { padding: none; } /* Pretty styling for tables. */ table { border-collapse: collapse; } thead th, tfoot th { margin: auto; padding: 2px; font-weight: heavy; } td { padding: 0.5rem 0.5rem; border: 1px solid var(--fg-color); } /* table { margin: auto; border-top: 1px solid var(--fg-color); border-bottom: 1px solid var(--fg-color); } table thead th { border-bottom: 1px solid var(--fg-color); } th, td { padding: 5px; } */ /* Turn off unused elements in print layouts */ @media print { header, footer { display: none !important; } code { font-size: 45%; } a.footnote-return { display: none !important; } } /* From https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ */ a.skip-main { position: absolute; left: -9999px; background-color: #000; color: #fff; padding: 0.25em 1em; border-radius: 16px; border: 4px solid yellow; text-align: center; font-size: 1.25em; } a.skip-main:focus, a.skip-main:active { left: auto; }