diff options
Diffstat (limited to 'data/static/oldStyle.css')
| -rw-r--r-- | data/static/oldStyle.css | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/data/static/oldStyle.css b/data/static/oldStyle.css new file mode 100644 index 0000000..73a4838 --- /dev/null +++ b/data/static/oldStyle.css @@ -0,0 +1,348 @@ +/*@import url('https://fonts.googleapis.com/css?family=Roboto');*/ + + +/* Standard elements */ +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +/* Header */ + +header { + padding: 30px; + text-align: center; + background: rgba(0,0,0,0.1); +} + +.header.sticky { + padding-bottom: 99px; +} + +#name { + font-weight: bold; + font-size: 250%; +} + +/* Navigation */ + +.nav.sticky { + display: inline-block; + position: fixed; + min-width: 100%; + top: 0; + left: 0; +} + +.action { + margin: 0; + padding: 0; + background-color: #333; +} + +.action ul { + display: flex; + justify-content: space-around; + list-style: none; + margin: 0; + padding: 0; +} + +.action ul li a { + margin: 0; + padding: 20px; + color: white; + text-decoration: none; + display: inline-block; +} + +.action ul li { + margin: 5px; + border-radius: 15px; +} + +.action ul li:hover { + background-color: #ddd; +} + +.action ul li a:hover { + color: #333; +} + +.action span { + display: none; +} + +#side-navigation { + padding: 20px; + flex: 25%; +} + +#side-nav-scroll-box { + margin: 10px 0; + padding: 5px; + border: 2px #333 solid; + border-radius: 6px; + background-color: rgba(0,0,0,0.1); +} + +::-webkit-scrollbar-track { + background: rgba(0,0,0,0.1); +} + +#outline-navigation { + max-height: 50vh; + overflow: auto; + margin: 0; + padding: 0 0 0 25px; +} + +#outline-navigation li { + margin: 10px; +} + +/* Main content containers */ + +#root-article { + flex: 75%; +} + +#main-wo-aside { + padding: 20px 20%; +} + +#main-w-aside { + display: flex; + flex-wrap: wrap; + padding: 20px 0; + padding-right: 20%; +} + +/* Body and standard tags */ + +body { + /*font-family: 'Roboto', sans-serif; + font-size: 100%;*/ + font-family: Arial, Helvetica, sans-serif; + margin: 0px; +} + +main h1 { + text-align: center; +} + +/* main h1, h2, h3, h4, h5, h6 { + font-family: 'Arial'; +} */ + +main p { + text-align: justify; +} + +main p a { + text-decoration: underline; +} + +main a { + color: black; + text-decoration: none; +} + +main ul { + padding-left: 20px; +} + +main img { + border-radius: 6px; + max-width: 100%; +} + +main figure { + margin: auto; + /*margin: 10px;*/ + border: 2px #333 solid; + border-radius: 6px; + padding: 20px 20px 5px 20px; + max-width: 50%; +} + +blockquote { + font-style: italic; +} + +/* Special classes */ + +.head-bar { + border: 2px black solid; +} + +.framed-article { + margin: 25px; + padding: 5px 25px; + border: 2px #333 solid; + border-radius: 6px; + max-width: 100%; +} + +.framed-article-half { + flex: 50%; + padding: 5px 25px; + border: 2px #333 solid; + border-radius: 6px; + max-width: 100%; +} + +.tile { + display: flex; + flex-wrap: wrap; + padding: 25px; +} + +.tile article { + flex: 40%; + max-width: auto; + padding: 0px 15px 0px 15px; + border: 2px gray solid; + border-radius: 6px; + margin: 5px; +} + +.tile figure { + flex: 40%; + max-width: auto; + padding: 15px; + border: 2px gray solid; + border-radius: 6px; + margin: 5px; +} + +/* Footer */ + +footer { + margin: 0; + padding: 5px; + text-align: center; + color: white; + background-color: #333; +} + +footer a { + color: rgb(189, 212, 255); + padding: 0; +} + +/* Figure resize at 1500px */ + +@media screen and +(max-width: 1500px) { + figure { + max-width: 60%; + } + .tile figure { + max-width: auto; + } +} + +/* Flex side nav to top of screen and resize figure */ + +@media screen and +(max-width: 1200px) { + header, #main-w-aside{ + flex-direction: column; + } + #main-w-aside, #main-wo-aside { + padding-left: 10%; + padding-right: 10%; + } + figure { + max-width: 70%; + } + .tile figure { + max-width: auto; + } +} + +/* Mobile View */ + +@media only screen +and (max-width: 510px) { + main figure { + max-width: 100%; + } + .tile { + flex-direction: column; + } + .tile article { + max-width: 100%; + } + .tile figure { + max-width: 100%; + } + #side-navigation { + padding: 20px 10%; + } + + main a { + text-decoration: none; + } + + .action { + position: fixed; + bottom: 25px; + left: 25px; + width: 50px; + height: 50px; + cursor: pointer; + background: #333; + border-radius: 50%; + box-shadow: 0 5px 5px rgba(0,0,0,0.1); + } + .action span { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 2em; + transition: 0.3s ease-in-out + } + .action.active span { + transform: rotate(135deg); + } + .action ul { + position: absolute; + bottom: 25px; + background: #333; + min-width: 150px; + padding: 0; + border-radius: 20px; + opacity: 0; + display: inline; + visibility: hidden; + transition: 0.3s; + } + .action.active ul { + bottom: 70px; + opacity: 1; + visibility: visible; + transition: 0.3s; + } + .action ul li { + list-style: none; + display: flex; + justify-content: center; + align-items: center; + border-radius: 15px; + padding: 0; + margin: 5px; + } + + #outline-navigation { + max-height: 25vh; + } +}
\ No newline at end of file |