initial commit

4 files changed, 453 insertions, 0 deletions

diff --git a/sass/_search.scss b/sass/_search.scss
new file mode 100644
index 0000000..4012e96
--- /dev/null
+++ b/sass/_search.scss
@@ -0,0 +1,61 @@
+.search-container {
+  display: none;
+
+  &--is-visible {
+    display: block;
+    width: 100%;
+  }
+
+  #search {
+    width: 100%;
+    display: block;
+    border:none;
+    border-left: 1px solid $color;
+    padding:1px 0;
+    text-align: left;
+    line-height: $baseline;
+    font-size: $font-size;
+    font-family:$font-family;
+    color:$color;
+    background:transparent;
+  }
+
+  #search:focus {
+    outline:none;
+    border:none;
+  }
+
+  .search-results {
+    &__header {
+      font-weight: bold;
+      padding: 1rem 0rem;
+    }
+
+    &__items {
+      margin: 0 2vw;
+      padding: 0;
+      list-style: circle;
+    }
+
+    &__item {
+      margin-bottom: 1rem;
+    }
+
+    &__teaser {
+     
+    }
+  }
+}
+
+#on_right {
+  display: block;
+  text-align: right;
+  margin-bottom: $baseline;
+}
+
+#search-ico {
+  font-family: 'FabricMDL2Icons';
+  cursor: pointer;
+  font-size: $baseline;
+  line-height: 1;
+}
\ No newline at end of file
diff --git a/sass/_variables.scss b/sass/_variables.scss
new file mode 100644
index 0000000..2e0529e
--- /dev/null
+++ b/sass/_variables.scss
@@ -0,0 +1,13 @@
+$baseline: 1.5rem;
+
+$background:#f9f9f9;
+$color:#222;
+
+$links: #00f;
+$hover-links:#c00;
+$visited-links:#009;
+
+$font-size: 1.125rem;
+$font-family: Segoe UI,system-ui,-apple-system,sans-serif;
+$line-height: 1.75;
+$code_font: 400 1.125rem/1.75 SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
\ No newline at end of file
diff --git a/sass/fabric-icons-inline.scss b/sass/fabric-icons-inline.scss
new file mode 100644
index 0000000..df09918
--- /dev/null
+++ b/sass/fabric-icons-inline.scss
@@ -0,0 +1,40 @@
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+*/
+@font-face {
+  font-family: 'FabricMDL2Icons';
+  src: url('data:application/octet-stream;base64,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') format('truetype');
+}
+
+.ms-Icon {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-family: 'FabricMDL2Icons';
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+}
+
+// Mixins
+@mixin ms-Icon--ChevronRightSmall { content: "\E970"; }
+@mixin ms-Icon--ChromeClose { content: "\E8BB"; }
+@mixin ms-Icon--Copy { content: "\E8C8"; }
+@mixin ms-Icon--GlobalNavButton { content: "\E700"; }
+@mixin ms-Icon--MiniLink { content: "\E732"; }
+@mixin ms-Icon--Page { content: "\E7C3"; }
+@mixin ms-Icon--ProductRelease { content: "\EE2E"; }
+@mixin ms-Icon--Save { content: "\E74E"; }
+@mixin ms-Icon--Search { content: "\E721"; }
+
+
+// Classes
+.ms-Icon--ChevronRightSmall:before { @include ms-Icon--ChevronRightSmall }
+.ms-Icon--ChromeClose:before { @include ms-Icon--ChromeClose }
+.ms-Icon--Copy:before { @include ms-Icon--Copy }
+.ms-Icon--GlobalNavButton:before { @include ms-Icon--GlobalNavButton }
+.ms-Icon--MiniLink:before { @include ms-Icon--MiniLink }
+.ms-Icon--Page:before { @include ms-Icon--Page }
+.ms-Icon--ProductRelease:before { @include ms-Icon--ProductRelease }
+.ms-Icon--Save:before { @include ms-Icon--Save }
+.ms-Icon--Search:before { @include ms-Icon--Search }
\ No newline at end of file
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