1 files changed, 339 insertions, 0 deletions

diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..d5ead8e
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,339 @@
+@import "variables";
+
+html {
+  font-kerning: normal;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+}
+
+body {
+  margin:$baseline 0;
+  font-size:$font-size;
+  font-family:$font-family;
+  line-height: $line-height;
+  background:$background;
+  color:$color;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+a {
+  &:link {
+    color:$links;
+    text-decoration: none;
+  }
+
+  &:hover {
+    color:$hover-links;
+  }
+
+  &:visited {
+    color:$visited-links;
+  }
+}
+
+h2,
+h3,
+h4 {
+  .anchor {
+    visibility: hidden;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: 1;
+    color:$color;
+  }
+
+  &:hover {
+    .anchor {
+      visibility: visible;
+      animation: fade-in 0.3s ease-in-out;
+      font-family: 'FabricMDL2Icons';
+    }
+  }
+}
+
+pre {
+  margin:$baseline 0;
+  border-radius: 4px;
+  padding:$baseline;
+  overflow: auto;
+  position: relative;
+
+  code {
+  background:transparent;
+  
+  &::after {
+    content: attr(data-lang);
+    font-style: italic;
+    line-height: 1;
+    opacity:0.3;
+    position:absolute;
+    bottom:$baseline;
+    right:$baseline;
+    z-index:1;
+  }
+  }
+}
+
+ code {
+    font: $code_font;
+    background: #eff1f5;
+  }
+
+  .copy-code-button {
+    font-family: 'FabricMDL2Icons';
+    display:none;
+    background:$background;
+    border-radius: 4px;
+    border:none;
+    cursor: pointer;
+    animation: fade-in 0.3s ease-in-out;
+    font-size: $baseline;
+    color:$color;
+    z-index: 10;
+    position:absolute;
+    top:$baseline;
+    right:$baseline;
+  }
+
+  pre:hover .copy-code-button {
+    display: block;
+  }
+
+nav {
+  position: sticky;
+  height: 92vh;
+  top:$baseline;
+  left:$baseline;
+  bottom: $baseline; 
+  padding-right: $baseline;
+  width: 20rem;
+
+  img {
+    width:128px;
+  }
+
+  h1 {
+    margin:0;
+    line-height: 1;
+  }
+}
+
+#toc {
+  margin-left:calc(#{$baseline} + #{$font-size});
+  padding:0;
+  margin:0 0 0 $baseline;
+  font-size: 80%;
+
+  li {
+    color:$color;
+    margin-left: $font-size;
+  
+  &::before {
+    display: inline-block;
+    content:""; 
+  }
+
+  ul {
+    padding:0;
+  }
+
+}
+
+}
+
+main {
+  display: flex;
+  flex-flow: row nowrap;
+  animation: fade-in 0.4s ease-in-out;
+}
+
+#release {
+  text-align: left;
+  margin:$baseline 0;
+
+&::before {
+  display: inline-block;
+  content: "\EE2E";
+  font-family: 'FabricMDL2Icons';
+  margin-right:calc(#{$baseline} / 8);
+}
+}
+
+@keyframes slideIn {
+  0% {
+   max-height:0;
+   opacity:0
+  }
+  100% {
+   max-height:999px;
+   opacity:1
+  }
+ }
+ @keyframes slideOut {
+  0% {
+   height:auto;
+   opacity:1
+  }
+  100% {
+   height:0;
+   opacity:0
+  }
+ }
+
+ nav label {
+  display:block;
+ }
+
+ #trees {
+  overflow-y: auto;
+  height: 80%;
+ }
+
+ .subtree {
+  overflow:hidden;
+  margin:calc(#{$baseline} / 8) 0;
+  transition: overflow 0.2s ease-in-out;
+  padding: 0;
+ }
+
+ .tree-toggle-label {
+  user-select:none;
+  cursor:pointer; 
+ }
+
+ .tree-toggle-label::before {
+  display:inline-block;
+  content:"\E970";
+  font-family:'FabricMDL2Icons';
+  font-size:.75rem;
+  transform:rotate(0deg);
+  transform-origin:50% 50% 0px;
+  transition:transform 0.1s linear 0s;
+  margin-right: 2px;
+ }
+
+
+ .tree-toggle {
+  position:absolute;
+  opacity:0;
+  z-index:-1;
+ }
+
+ .tree-toggle:checked+.tree-toggle-label::before {
+  content:"\E970";
+  font-family:'FabricMDL2Icons';
+  font-size:.75rem;
+  transform:rotate(90deg);
+  transform-origin:50% 50% 0px;
+  transition:transform 0.1s linear 0s;
+  margin-right: 2px;
+ }
+
+ .tree-toggle:checked+.tree-toggle-label {
+  font-weight:bold;
+ }
+
+ .tree-toggle+.tree-toggle-label+.subtree {
+  animation-name:slideOut;
+  animation-duration:0.25s;
+  animation-fill-mode:both;
+ }
+
+ .tree-toggle:checked+.tree-toggle-label+.subtree {
+  animation-name:slideIn;
+  animation-duration:0.25s;
+  animation-fill-mode:both;
+ }
+ 
+
+ .subtree li {
+  list-style-type: none;
+  margin-left: $baseline;
+ 
+
+  a {
+    color:$color;
+  }
+
+  &::before {
+    content: "\E7C3";
+    font-family:'FabricMDL2Icons';
+    font-size:0.75rem;
+  }
+
+}
+
+.active a {
+  font-weight: bold;
+}
+
+
+article {
+ width: calc(100% - (#{$baseline} * 4 + 20rem));
+ margin-left:calc(#{$baseline} * 2);
+
+ img {
+   max-width:100%;
+ }
+
+}
+
+#mobile {
+  display: none;
+}
+
+
+@media screen and (max-width: 1023px) { 
+
+  main {
+    flex-flow: column nowrap;
+    width: 100%;
+  }
+
+  nav {
+    position: inherit;
+    height:auto;
+    margin:$baseline $baseline 0 $baseline;
+  }
+
+  article {
+    width: calc(100% - (#{$baseline} * 2));
+    margin:0 $baseline;
+    z-index:1;
+  }
+
+  #mobile {
+    font-family: 'FabricMDL2Icons';
+    cursor: pointer;
+    font-size: $baseline;
+    margin:0 $baseline 0 0;
+    display: block;
+    color:$color;
+  }
+
+  #trees {
+    display: none;
+    position:absolute;
+    background: $background;
+    height:auto;
+    width:100vw;
+    z-index:10;
+    box-shadow: 0 2px 0 rgba(0,0,0,.1);
+  }
+}
+
+@import "fabric-icons-inline";
+@import "search";
\ No newline at end of file