Upgrade to nick_site commit f981fa57, adds alerts and inactive sidebar option

[ndcode_site.git] / css / bootstrap / _custom.scss

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 6de27a1..14ab5de 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -18,9 +18,8 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   }
 }
 
-// place a container div around entire page, and then use this
-// to make the background on navbar or footer appear full-width
-.extend-background {
+// use within a container to extend the background to left/right
+.container-background {
   margin-left: calc(-.5 * (100vw - 100%));
   margin-right: calc(-.5 * (100vw - 100%));
   padding-left: calc(.5 * (100vw - 100%));
@@ -35,13 +34,117 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-right: .5 * $grid-gutter-width;
 }
 
-.sidebar {
-  position: sticky;
-  top: 0;
-  max-height: 100vh;
-  overflow-y: auto;
+// similar to bootstrap's navbar class, but appears to the side
+// responsive in a fairly sophisticated way, with 5 different modes:
+// >= xs: appears above content, toggleable, animates vertically
+// >= md: appears to left of content, toggleable, animates horizontally
+// >= xl: appears to left of content, always visible
+// >= 2xl: same as xl but has a right margin half the width of the sidebar
+// >= 3xl: same as xl but has a right margin the same width as the sidebar
+// (the last way gives a balanced look, as the content is along the middle)
+// note: flex item cannot be smaller than its contents with overflow visible,
+// so to be safe (when screen so small that a word cannot fit) make it hidden
+.sidebar-outer {
+  // note: the following properties are set via javascript using inline style:
+  // height: 0px if hidden and animation is vertical, otherwise content height
+  // flex-basis: 0px if hidden and animation is horizontal, otherwise 350px
+  // transition-property: flex-basis / height during animation, otherwise none
+  flex-grow: 0;
+  flex-shrink: 0;
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  @include media-breakpoint-up(md) {
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+    overflow-y: auto;
+  }
+  transition: none .35s ease;
   background-color: $gray-200;
 }
+.sidebar-inner {
+  padding-left: $grid-gutter-width * .5;
+  padding-right: $grid-gutter-width * .5;
+  @include media-breakpoint-up(md) {
+    width: 350px;
+    min-height: 100vh;
+  }
+}
+.sidebar-toggle {
+  @include media-breakpoint-up(xl) {
+    display: none;
+  }
+}
+.sidebar-content {
+  overflow: hidden;
+  // the following gives an effect more like .container, as the text wrap
+  // becomes predictable after a certain screen size, but text is biased
+  // to the left on larger screens, I prefer to have it wider and centred
+  //max-width: 1280px;
+}
+.sidebar-dummy {
+  flex: 0 0 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  overflow: hidden;
+  @include media-breakpoint-up(2xl) {
+    flex-basis: 175px;
+  }
+  @include media-breakpoint-up(3xl) {
+    flex-basis: 350px;
+  }
+}
+
+// used in blog posts for a responsive N-column layout
+.rowN {
+  display: flex;
+  flex-wrap: wrap;
+  //margin-left: $grid-gutter-width * -.5;
+  //margin-right: $grid-gutter-width * -.5;
+}
+.rowN-header {
+  display: none;
+  @include media-breakpoint-up(2xl) {
+    display: flex;
+  }
+}
+.col7 {
+  padding-left: $grid-gutter-width * .5;
+  padding-right: $grid-gutter-width * .5;
+  flex: 1 0 100%;
+  @include media-breakpoint-up(2xl) {
+    flex-basis: 14.285714%;
+    max-width: 14.285714%;
+  }
+  border: 2px solid white;
+  hyphens: auto;
+}
+.col7-2 {
+  padding-left: $grid-gutter-width * .5;
+  padding-right: $grid-gutter-width * .5;
+  flex: 1 0 100%;
+  @include media-breakpoint-up(2xl) {
+    flex-basis: 28.571429%;
+    max-width: 28.571429%;
+  }
+  border: 2px solid white;
+  hyphens: auto;
+}
+.colN-data {
+  background-color: theme-color-level("primary", $alert-bg-level);
+}
+.colN-header {
+  background-color: theme-color-level("success", $alert-bg-level);
+}
+
+// use after .img-fluid
+.img-fluid-1-3 {
+  max-width: 33.333333%
+}
+.img-fluid-2-3 {
+  max-width: 66.666667%
+}
 
 // needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
@@ -76,16 +179,26 @@ $icon-sizes: (
   font-family: $font-family-serif;
 }
 
-// apply this to table to get an icon with vertically centred text next to it
-.icon-and-text {
-  vertical-align: middle;
-  td {
-    padding: .25em .5em;
-  }
+// use this with bootstrap's grid system to make an icon with text beside it
+// the icon can take up to 1/2 of the width, but not more than its N-px width
+// note: flex item cannot be smaller than its contents with overflow visible,
+// so to be safe (when screen so small that a word cannot fit) make it hidden
+// note: col has position: relative, and I believe this is so that stretched
+// links will fill the column, but we want them to fill the row in this case
+.col-icon128 {
+  flex: 0 1 calc(128px + $grid-gutter-width);
+  overflow: hidden;
+  position: static;
 }
-
-.search-results li {
-  margin-bottom: .5em;
+.col-icon256 {
+  flex: 0 1 calc(256px + $grid-gutter-width);
+  overflow: hidden;
+  position: static;
+}
+.col-text {
+  flex: 1 0 50%;
+  overflow: hidden;
+  position: static;
 }
 
 .page-header {