first commit

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