// Variables ////////////////////////////////////////////////////////////////// $switch-small-screen: "only screen and (max-width: 600px)"; $switch-smaller-screen: "only screen and (max-width: 400px)"; $navbar-height: 70px; $postamble-height: 55px; // Style ////////////////////////////////////////////////////////////////////// * { outline: none; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: "Lato", "proxima-nova", Arial, sans-serif; font-size: 1.2em; transition: background 500ms ease-in-out, color 1s ease-in-out; header, .navbar { transition: background 500ms ease-in-out, color 1s ease-in-out; ul { list-style-type: none; margin: 0; padding: 0; } } } a { color: currentColor; text-decoration: none; } .navbar { position: fixed; top: 0; z-index: 4; height: $navbar-height; width: 100%; } .navbar-nav { display: flex; align-items: center; justify-content: space-evenly; height: 100%; } header { padding: 1em; margin-top: $navbar-height; margin-bottom: 1em; padding-bottom: 6em; text-align: center; clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0); transition: background 500ms ease-in-out; .title { font-size: 5em; margin: 0; @media #{$switch-small-screen} { font-size: 3em; } } .subtitle { font-size: 1.2em; } } .dropdown { position: absolute; opacity: 0; z-index: -1; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; display: flex; align-items: center; justify-content: space-around; min-height: 3rem; padding: 0.5rem; top: 0; box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em; transform: translateX(-40%); transition: opacity 500ms ease-in-out, top 500ms ease-in-out, height 500ms ease-in-out; } .has-dropdown { &:focus-within { .dropdown { opacity: 1; top: $navbar-height; z-index: 5; pointer-events: auto; } #table-of-contents, #drop-page { top: $navbar-height; opacity: 1; z-index: 5; height: 80vh; pointer-events: auto; } } } #theme-dropdown { width: 250px; flex-direction: row; transform: translateX(-75%); } .themeBtn { content: ' '; border: 2px solid white; border-radius: 50%; width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; margin-right: 10px; } #drop-page, #table-of-contents { flex-direction: column; transform: translateX(-45%); top: -40px; height: 0; min-width: 300px; overflow-y: auto; font-size: 0.9em; } @media #{$switch-small-screen} { #drop-page { transform: translateX(-27.5%); } } #drop-share { li { padding: 10px; } } .dropdown-item { cursor: pointer; a { width: 100%; height: 100%; padding-left: 10px; padding-right: 10px; font-weight: bold; } } #table-of-contents { padding: 20px; float: right; width: 75%; transition: height 500ms ease-in-out, opacity 500ms ease-in-out, top 500ms ease-in-out; li { padding: 5px 0; } h2 { font-size: 1.2em; } #text-table-of-contents { height: 100%; } } #content { padding: 50px; padding-top: 0; max-width: 1000px; margin: 0 auto; text-align: justify; @media #{$switch-small-screen} { padding: 50px 20px; } a { font-style: italic; } } #postamble { display: grid; grid-template-areas: 'author email date'; @media #{$switch-small-screen} { grid-template-areas: 'author date' 'email email'; } @media #{$switch-smaller-screen} { grid-template-areas: 'author' 'date' 'email'; } font-size: 0.8em; align-content: space-evenly; text-align: center; p { margin: 10px 0; } .author { grid-area: author; } .email { grid-area: email; } .date { grid-area: date; } } h1, h2, h3, h4, h5, h6 { text-align: center; } h2 { font-size: 2.5em; @media #{$switch-small-screen} { font-size: 1.75em; } } h3 { font-size: 2em; @media #{$switch-small-screen} { font-size: 1.5em; } } h4 { font-size: 1.5em; @media #{$switch-small-screen} { font-size: 1.3em; } } h5 { font-size: 1.25em; @media #{$switch-small-screen} { font-size: 1.2em; } } .tooltip { position: relative; display: inline-block; .tooltiptext { visibility: hidden; margin-left: -20px; bottom: 100%; left: 10%; padding: 5px 10px; text-align: center; border-radius: 6px; position: absolute; z-index: 5; &::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; } } &:hover { .tooltiptext { visibility: visible; } } } blockquote { padding: 0; margin: 20px; font-style: italic; } .largetable { overflow-y: auto; margin-top:20px; margin-bottom: 20px; } table { margin: 0 auto; } th, td { white-space: nowrap; padding: 10px; } img { max-height: 600px; max-width: 100%; } header > img { width: 150px; height: 150px; border-radius: 75px; } .nav-icon { max-width: 20px; max-height: 20px; } .figure { padding: 0; } ul { padding-inline-start: 20px; } pre.src, pre.example { overflow-y: auto; }