:root { --content-width: 1000px; --breakpoint: 799px; --nav-height: 70px; --nav-background: #d0dad5; --nav-font-color: darkolivegreen; --link-hover-color: #e0dad5; } /* Links */ :link { color: #3344dd; text-decoration: underline; } :visited { color: #3344dd; } :link:hover, :visited:hover { color: #3344dd; } #brand :link, #brand :visited { color: inherit; } pre.literal-block { margin-left: 0; margin-right: 0; padding: 1rem 1.5rem; border-top: 1px solid black; border-bottom: 1px solid black; } pre.literal-block *:last-child { margin-bottom: 0; } .myfooter { overflow: auto; display: flex; flex-direction: row; } .myfooter div { height: 50px; } #footer { border-top: 1px solid #4F5151; clear: both; } #container { margin: 1em auto; max-width: 1200px; } .post { float: left; width: 68%; } div.sidebar { float: left; width: 27%; } .logotext { padding-top: 4px; } #toplogo { padding-top: 18px; } .comment { border-top: 1px solid #4F5151; margin-top: 1em; padding: .5em 0; } /* For flex layout */ .row { display: flex; flex-direction: column; padding: 0; width: 100%; } .row .column { display: block; flex: 1 1 auto; margin-left: 0; max-width: 100%; width: 100%; } @media (min-width: 40rem) { .row { flex-direction: row; margin-left: -1.0rem; width: calc(100% + 2.0rem); } .row .column { margin-bottom: inherit; padding: 0 1.0rem; } } @media screen and (max-width: 40rem) { .row .column { text-align: center; } div.sidebar { display: none; } #container { max-width: 100%; } div.post { width: 95%; } } .pb-4 { padding-bottom: 6rem; } .text-sm { font-size: 1rem; } .text-lg { font-size: 2rem; } /* For the responsive navbar, adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar */ @charset "UTF-8"; .navigation { height: 70px; background: var(--nav-background); } .brand { position: absolute; padding-left: 20px; float: left; line-height: 70px; text-transform: uppercase; font-size: 1.4em; } .brand a, .brand a:visited { color: var(--nav-font-color); text-decoration: none; } .content { margin: 0 auto; } .nav-container nav { float: right; background: var(--nav-background); } .nav-container th { padding: 0.5em; } .nav-container ul { list-style: none; margin: 0; padding: 0; } .nav-container ul li { float: left; position: relative; } .nav-container ul li a:link, .nav-container ul li a, .nav-container ul li a:visited { display: block; padding: 0 20px; line-height: 70px; background: var(--nav-background); color: var(--nav-font-color); text-decoration: none; } .nav-container ul li a:hover, .nav-container ul li a:link:hover, .nav-container ul li a:visited:hover { background: var(--link-hover-color); color: var(--nav-font-color); } .nav-container ul li a:not(:only-child):after, .nav-container ul li a:visited:not(:only-child):after { padding-left: 4px; content: ' ▾'; } .nav-container ul li ul li { min-width: 220px; } .nav-container ul li ul li a { padding: 15px; line-height: 20px; } .nav-dropdown { position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); } /* Mobile navigation */ .nav-mobile { display: none; position: absolute; top: 0; right: 0; background: var(--nav-background); height: 70px; width: 70px; } body { color: #383939; margin: 0; padding: 0; } @media only screen and (max-width: 798px) { #container { margin: 0; padding: 0; max-width: 100%; } #content { margin: 10px; padding: 0; } .nav-mobile { display: block; } nav { width: 100%; padding: 70px 0 15px; background: var(--nav-background); } nav ul { display: none; } nav ul li { float: none; } nav ul li a { padding: 15px; line-height: 20px; } nav ul li ul li a { padding-left: 30px; } .nav-dropdown { position: static; padding: 0 0 0 15px; } } @media screen and (min-width: 799px) { .nav-list { display: block !important; } } #nav-toggle { position: absolute; left: 18px; top: 22px; cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: black; position: absolute; display: block; content: ''; transition: all 300ms ease-in-out; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } #download { border: 2px solid darkolivegreen; border-radius: 5px; text-align: center; padding: 10px; font-size: 120%; font-weight: bold; display: block; text-shadow: 0px 0px 5px white; } #download img { width: 22px; height: 22px; } table { border-top: 2px solid darkolivegreen; border-bottom: 2px solid darkolivegreen; } table caption { text-align: left; } tbody tr:nth-child(odd) { background-color: #eeeeee; } .highlight pre, .code pre { white-space: pre; font-size: 15px; margin-left: 1px; margin-right: 1px; padding-top: 5px; padding-bottom: 10px; } /* Header permalinks */ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink { display: inline; } .headerlink { display: none; color: #ddd; margin-left: 0.2em; padding: 0 0.2em; } .headerlink:hover { opacity: 1; background: #ddd; color: #000; text-decoration: none; } code { background-color: #eeeeee; }