Add files via upload

2 files changed, 293 insertions, 0 deletions

diff --git a/sass/_search.scss b/sass/_search.scss
new file mode 100644
index 0000000..4f253df
--- /dev/null
+++ b/sass/_search.scss
@@ -0,0 +1,33 @@
+  #search {
+    width: 100%;
+    padding: 1vw 0;
+    @include color(background, --bg-color,  $theme-light-bg-color);
+    @include color(color, --first-text-color, $theme-light-first-text-color);
+    text-align: left;
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
+    font-size: 1.625rem;
+    border:none;
+    border-bottom:2px solid #000;
+  }
+
+  .search-results {
+    &__header {
+      font-style: italic;
+      margin:1rem 0 0;
+    }
+
+    &__items {
+      list-style: decimal-leading-zero;
+    }
+
+    &__item {
+   margin:1rem 0;
+    }
+
+    &__teaser {
+      font-size: 1rem;
+    }
+  }
+
+
+
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..88d2c83
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,260 @@
+@charset "utf-8";
+
+* {
+  padding:0;
+  margin: 0;
+  }
+  
+  ::selection {
+    background: blue;
+    color: #fafafa;
+  }
+
+  html {
+    font-kerning: normal;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+    
+      &.theme-change-active{
+        animation: fade-in ease-out 0.6s;
+      }
+    }
+
+    $theme-light-first-text-color: #444;
+    $theme-dark-first-text-color: #888;
+    $theme-light-second-text-color: #999;
+    $theme-dark-second-text-color: #666;
+    $theme-light-bg-color:#fafafa;
+    $theme-dark-bg-color:#262626;
+  
+    @mixin color($property, $var, $fallback){
+      #{$property}: $fallback; 
+      #{$property}: var($var, $fallback);
+    }
+  
+    .theme-dark {
+      --first-text-color: #{$theme-dark-first-text-color};
+      --second-text-color:#{$theme-dark-second-text-color};
+      --bg-color: #{$theme-dark-bg-color};
+    }
+
+
+body {
+  text-rendering: optimizeLegibility;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
+  font-size: 1.25rem;
+  line-height:1.5;
+  display: flex;
+  flex-flow: row wrap;
+  hyphens: auto;
+  @include color(background, --bg-color,  $theme-light-bg-color);
+  @include color(color, --first-text-color, $theme-light-first-text-color);
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  
+  50% {
+    opacity:0.8;
+  }
+  
+  100% {
+    opacity: 1;
+  }
+  }
+
+ 
+.theme-button{
+  display: none;
+  padding:0;
+  border:none;
+  background: transparent;
+  color: royalblue;
+  cursor: pointer;
+  margin-right:1rem;
+
+  &:not(:hover){
+    border-bottom-color: transparent;
+  }
+}
+
+.theme-button.enabled{
+  display: inline;
+}
+
+pre {
+  overflow: auto;
+  font:1rem Consolas, monospace;
+  padding:1rem;
+  margin:0 0 1rem 0;
+  border-radius: 4px;
+}
+
+a:link {
+  text-decoration: none;
+  color:royalblue;
+}
+
+a:hover {
+  @include color(color, --second-text-color, $theme-light-second-text-color);
+}
+
+a:visited {
+  color:royalblue;
+}
+
+h1, h2, h3, h4, h5 {
+  .anchor {
+    visibility: hidden;
+    text-decoration: none;
+    border-bottom-color: transparent;
+    cursor: pointer;
+    padding-left:1rem;
+    @include color(color, --second-text-color, $theme-light-second-text-color);
+  }
+
+  &:hover {
+    .anchor {
+      visibility: visible;
+    }
+  }
+}
+
+
+h2, h3 {
+  font-weight: 400;
+}
+
+h1 {
+  font-size:2rem;
+  line-height:1;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin:1rem 0;
+}
+
+nav {
+  width:34vw;
+  max-width:40rem;
+  padding:4vw;
+  display: flex;
+  flex-flow: column nowrap;
+
+  #subnav {
+    display: flex;
+    flex-flow: row wrap;
+    margin:0 0 1rem 0;
+    font-size: 1.625rem;
+  }
+  
+  button {
+    font-size: 1.625rem;
+  }
+
+  #breadcrumbs {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  ul {
+    list-style-type: none;
+    text-align: left;
+    @include color(color, --second-text-color, $theme-light-second-text-color);
+  }
+
+  em {
+    font-size:1.625rem;
+    line-height: 1.2;
+  }
+}
+
+main {
+  width:48vw;
+  padding:4vw;
+  max-width:55rem;
+  display: flex;
+  flex-flow: column nowrap;
+  margin-top:2.375rem;
+
+  p {
+    margin:0 0 1rem 0;
+  }
+
+  article {
+    margin:1rem 0 0;
+
+    ul, ol {
+      list-style-position: inside;
+      margin-bottom: 1rem;
+    }
+  
+    a:visited {
+      color:blueviolet;
+    }
+  }
+
+  img {
+    max-width:100%;
+  }
+}
+
+#taxonomies {
+  display: flex;
+  flex-flow: row wrap;
+  font-size: 1rem;
+
+
+  date {
+    @include color(color, --second-text-color, $theme-light-second-text-color);
+  }
+
+  ul {
+    display: flex;
+    flex-flow: column;
+    list-style: none;
+    margin:0 1rem;
+  }
+}
+
+#toc {
+  list-style: none;
+  @include color(color, --second-text-color, $theme-light-second-text-color);
+  font-size: 1rem;
+  margin-top: 1rem;
+ 
+  ul {
+    margin-left:1rem;
+    font-size:1rem;
+    list-style: none;
+  }
+  }
+
+#mobile {
+  display: none;
+}
+
+#tax_list {
+  list-style: circle;
+  @include color(color, --second-text-color, $theme-light-second-text-color);
+}
+
+@media screen and (max-width: 1023px) {
+ 
+  nav, main {
+    width:92vw;
+    margin:0 4vw;
+  }
+
+  #mobile {
+    display: block;
+  }
+
+  #bger, #tax_list {
+    display: none;
+  }
+}
+
+@import "search";
+