jekyll-theme-cs50 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c9d80cd19a3fbc5c20099e4231b250d9aa74472ef90877613ebf71ee4272dd3
-  data.tar.gz: 5050634e1df113f6f367be177e6eeff30cbd1c51e848be80c45ad90b3bbef81f
+  metadata.gz: 0a8c9a686a6e28101db3936a867dc4aa25112f01ff6e7f85cccefd9d954090c1
+  data.tar.gz: bb2eb4e5c7451b00f1678a27dc81759728bdd111499afcc897070cb09009da74
 SHA512:
-  metadata.gz: f3c80561c628609fed9a49ce2f458d2e78911bdb05837777f8387a167599faeef31f4852b8fdfa83f505881250fad90a19856dd1faaecebd98a22d8b32af607a
-  data.tar.gz: 99107a22c3a107bf52d64d086f1c85627abd4b50461118f0c7f2421a9fcb19a2c2ed714c1dce5e4ff50eec6b87d43c78d234f117c957470a40fee33ca3d6c4ca
+  metadata.gz: 4799a0ef990502326bcfd03199b499cb8bea2efe8004097284cda90703a86adc180341592af3920fe5eb1b6b4939f79e2d297ebcf7d264e995f6d093ea109a55
+  data.tar.gz: 87bc23a460616f5c299c8bf36cfbebd49aee8935b1293b06ba53c78706095094718279c4729572e8cb19e550ad72344433da4af3df34f45c6a02fdbf28452dbb

data/_includes/header.md

@@ -0,0 +1 @@
+# [{{ site.title }}]({{ "/" | relative_url }})

data/_layouts/page.html

@@ -29,30 +29,20 @@
 
         <link href="{{ '/favicon.ico' | relative_url }}?{{ site.time | date: '%s' }}" rel="icon">
 
-        <!-- https://useiconic.com/open -->
-        <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" rel="stylesheet">
+        <!-- https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use -->
+        <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" rel="stylesheet">
 
         <link href="{{ '/assets/css/style.css' | relative_url }}?{{ site.time | date: '%s' }}" rel="stylesheet">
 
-        <!-- http://getbootstrap.com/docs/4.2/getting-started/introduction/ -->
-        <script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-        <script crossorigin="anonymous" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
-        <script crossorigin="anonymous" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
+        <!-- http://getbootstrap.com/docs/4.3/getting-started/introduction/ -->
+        <script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+        <script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+        <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
         <script>
 
             $(document).on('DOMContentLoaded', function() {
 
-                // Add toggler
-                let nav = $('aside nav.collapse');
-                let button = $('<button aria-expanded="false" class="btn collapsed" data-toggle="collapse" type="button"><span class="oi oi-menu"></span></button>');
-                nav.before(button);
-                button.click(function() {
-                    nav.collapse('toggle');
-                    $(this).toggleClass('collapsed');
-                    $(this).attr('aria-expanded', ($(this).attr('aria-expanded') === 'false') ? 'true' : 'false');
-                });
-
                 // Get headings
                 let $headings = $([
                     'main.markdown-body h2',
@@ -64,13 +54,18 @@
                 // Add anchors to headings
                 $headings.each(function(index, element) {
                     if ($(element).attr('id') && $(element).has('a').length === 0) {
-                        $(element).wrapInner($('<a href="#' + $(element).attr('id') + '"></a>'));
+                        $(element).wrapInner($('<a data-id href="#' + $(element).attr('id') + '"></a>'));
                     }
                 });
 
                 // For each iframe
                 $('iframe').each(function(index, element) {
 
+                    // Ensure responsive in Safari on iOS (for, e.g., Google Calendars), per https://stackoverflow.com/a/23083463/5156190
+                    if (!$(this).attr('scrolling')) {
+                        $(this).attr('scrolling', 'no');
+                    }
+
                     // If an embedded YouTube video
                     let matches = $(this).attr('src').match(/^https:\/\/www.youtube.com\/embed\/([A-Za-z0-9_-]+)/);
                     if (matches) {
@@ -127,9 +122,46 @@
 
     <body>
 
-        {%- include aside.html -%}
+        <div class="container-fluid">
+
+            <div class="row">
+
+                <aside class="col-md">
+ 
+                    <header>
+
+                        {%- capture header -%}{%- include header.md -%}{%- endcapture -%}
+                        {{- header | markdownify | replace: " id=", " data-id=" | strip -}}
+
+                    </header>
+
+                    <button aria-controls="nav" aria-expanded="false" class="btn btn-sm collapsed d-md-none" data-target="aside > nav" data-toggle="collapse">Menu</button>
+
+                    <nav class="collapse d-md-block">
+
+                        {%- capture nav -%}{%- include nav.md -%}{%- endcapture -%}
+                        {{- nav | markdownify | replace: " id=", " data-id=" | strip -}}
+
+                    </nav>
+
+                    <footer>
+
+                        {%- capture footer -%}{%- include footer.md -%}{%- endcapture -%}
+                        {{- footer | markdownify | replace: " id=", " data-id=" | strip -}}
+
+                    </footer>
+
+                </aside>
+
+                <main class="col-md markdown-body">
+
+                    {{ content }}
+
+                </main>
+
+            </div>
 
-        {%- include main.html -%}
+        </div>
 
     </body>
 

data/_sass/jekyll-theme-cs50.scss

@@ -17,14 +17,20 @@ $link-hover-color: $link-color !default;
 
 // Root em
 html {
-    font-size: 20px;
+    font-size: 18px;
 }
 
 // Defaults for iframes
 iframe {
     border: 0;
     height: 480px;
-    width: 100%;
+}
+
+// Ensure responsive in Safari on iOS (for, e.g., Google Calendars), per 
+// https://stackoverflow.com/a/23083463/5156190
+iframe {
+    min-width: 100%;
+    width: 1px;
 }
 
 // Confine images to parent
@@ -32,19 +38,40 @@ img {
     max-width: 100%;
 }
 
-// Crimson aside, transparent text
+// Confine borders to images
+.img-thumbnail {
+    width: fit-content;
+}
+
+// Crimson background, transparent text
 aside {
     background-color: $link-color;
-    bottom: 0;
     color: rgba(255, 255, 255, 0.5);
     font-size: 1.125rem;
-    left: 0;
+}
+
+// Override column's padding
+aside.col-md {
     padding: 2rem 2rem;
-    overflow: auto;
-    position: fixed;
-    text-align: left;
-    top: 0;
-    width: 20rem;
+}
+
+// Fixed width, scroll on larger devices
+@include media-breakpoint-up(md) {
+    aside.col-md {
+        flex: 0 1 20rem;
+        @supports (position: sticky) {
+            height: 100vh;
+            overflow-y: auto;
+            position: sticky;
+            top: 0;
+            z-index: $zindex-sticky;
+        }
+    }
+}
+
+// Align badges
+aside .badge {
+    vertical-align: middle;
 }
 
 // Bold headings
@@ -60,11 +87,27 @@ aside h6 {
 // Opaque text
 aside a,
 aside a:hover,
-aside .btn,
-aside .btn:hover {
+aside button[data-toggle=collapse],
+aside button[data-toggle=collapse]:hover {
     background-color: inherit;
+    border-color: rgba(255, 255, 255, .5);
     color: rgba(255, 255, 255, 1);
-    opacity: 1;
+}
+
+// Opaque border
+aside button[data-toggle=collapse]:hover {
+    border-color: rgba(255, 255, 255, 1);
+}
+
+// Invert colors when not collapsed
+aside button[data-toggle=collapse]:not(.collapsed) {
+    background-color: rgba(255, 255, 255, 1);
+    color: $link-color;
+}
+
+// Compact small paragraphs
+aside p.small {
+    line-height: 1.25;
 }
 
 // Separate nav button (or header) and footer, applying margins to children to avoid flicker when uncollapsing
@@ -84,20 +127,28 @@ aside button[data-toggle=collapse] {
     margin-top: 1rem;
 }
 
-// Remove padding above and below icon
-aside button[data-toggle=collapse] {
-    padding-bottom: 0;
-    padding-top: 0;
+// Truncate list items
+nav ol li, nav ul li {
+    @include text-truncate;
 }
 
-// No bullets for nav
-nav dl,
-nav ol,
+// Left-align unordered lists, without bullets
 nav ul {
     list-style: none;
     padding-left: 0;
 }
 
+// Preserve bullets for nested unordered lists
+nav ul ul {
+    list-style: inside;
+}
+
+// Left-align ordered lists
+nav ol {
+    list-style-position: inside;
+    padding-left: 0;
+}
+
 // Separate footer from nav unless empty
 footer {
     margin-top: 1rem;
@@ -106,16 +157,17 @@ footer:empty {
     margin-top: 0;
 }
 
-// Padding around main
-main {
-    margin-left: 20rem;
+// Override column's padding, width
+main.col-md {
+    max-width: 80rem;
+    overflow: auto; /* https://stackoverflow.com/a/26523355 */
     padding: 4rem 2rem;
 }
 
 // Override Primer's family and size for fonts
 .markdown-body {
-    font-family: unset; /* Use our family */
-    font-size: unset; /* Use our size */
+    font-family: inherit; /* Use our family */
+    font-size: inherit; /* Use our size */
 }
 
 // Add padding above headings to match Primer's padding below headings,
@@ -130,12 +182,24 @@ main {
     padding-top: 16px;
 }
 
+// Mute emphasized text in headings
+.markdown-body h1 > em,
+.markdown-body h2 > em,
+.markdown-body h3 > em,
+.markdown-body h4 > em,
+.markdown-body h5 > em,
+.markdown-body h6 > em {
+    @extend .font-weight-normal;
+    @extend .text-muted;
+    font-style: normal;
+}
+
 // Subtle anchors in headings 
-.markdown-body h2 a,
-.markdown-body h3 a,
-.markdown-body h4 a,
-.markdown-body h5 a,
-.markdown-body h6 a {
+.markdown-body h2 a[data-id],
+.markdown-body h3 a[data-id],
+.markdown-body h4 a[data-id],
+.markdown-body h5 a[data-id],
+.markdown-body h6 a[data-id] {
     color: inherit;
     text-decoration: none;
 }
@@ -180,21 +244,6 @@ main {
     margin-top: 0;
 }
 
-// On large devices
-// https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints
-@media (min-width: 768px) {
-
-    // Hide button above nav
-    aside button[data-toggle=collapse] {
-        display: none;
-    }
-
-    // Show nav
-    nav.collapse:not(.show) {
-        display: block;
-    }
-}
-
 // On small devices and printers
 // https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints
 @media (max-width: 767.98px), print {
@@ -204,21 +253,9 @@ main {
         font-size: 16px;
     }
 
-    // Static aside
-    aside {
-        bottom: auto;
-        left: auto;
-        overflow: visible;
-        position: static;
-        right: auto;
-        text-align: center;
-        top: auto;
-        width: auto;
-    }
-
-    // Don't offset main
-    main {
-        margin-left: auto;
+    // Don't shrink fonts as much
+    small, .small {
+        font-size: 90%;
     }
 }
 

data/_sass/node_modules/bootstrap/LICENSE

@@ -1,22 +1,22 @@
-The MIT License (MIT)
-
-Copyright (c) 2011-2018 Twitter, Inc.
-Copyright (c) 2011-2018 The Bootstrap Authors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2011-2019 Twitter, Inc.
+Copyright (c) 2011-2019 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/_sass/node_modules/bootstrap/scss/_badge.scss

@@ -6,13 +6,14 @@
 .badge {
   display: inline-block;
   padding: $badge-padding-y $badge-padding-x;
-  font-size: $badge-font-size;
+  @include font-size($badge-font-size);
   font-weight: $badge-font-weight;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
 
   @at-root a#{&} {
     @include hover-focus {

data/_sass/node_modules/bootstrap/scss/_buttons.scss

@@ -6,6 +6,7 @@
 
 .btn {
   display: inline-block;
+  font-family: $btn-font-family;
   font-weight: $btn-font-weight;
   color: $body-color;
   text-align: center;
@@ -34,11 +35,6 @@
     @include box-shadow(none);
   }
 
-  // Opinionated: add "hand" cursor to non-disabled .btn elements
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
-
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     @include box-shadow($btn-active-box-shadow);
@@ -81,6 +77,7 @@ fieldset:disabled a.btn {
 .btn-link {
   font-weight: $font-weight-normal;
   color: $link-color;
+  text-decoration: $link-decoration;
 
   @include hover {
     color: $link-hover-color;

data/_sass/node_modules/bootstrap/scss/_card.scss

@@ -6,7 +6,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   word-wrap: break-word;
   background-color: $card-bg;
   background-clip: border-box;
@@ -36,6 +36,7 @@
   // as much space as possible, ensuring footers are aligned to the bottom.
   flex: 1 1 auto;
   padding: $card-spacer-x;
+  color: $card-color;
 }
 
 .card-title {
@@ -195,55 +196,35 @@
 
       // Handle rounded corners
       @if $enable-rounded {
-        &:first-child {
+        &:not(:last-child) {
           @include border-right-radius(0);
 
           .card-img-top,
           .card-header {
+            // stylelint-disable-next-line property-blacklist
             border-top-right-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
+            // stylelint-disable-next-line property-blacklist
             border-bottom-right-radius: 0;
           }
         }
 
-        &:last-child {
+        &:not(:first-child) {
           @include border-left-radius(0);
 
           .card-img-top,
           .card-header {
+            // stylelint-disable-next-line property-blacklist
             border-top-left-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
+            // stylelint-disable-next-line property-blacklist
             border-bottom-left-radius: 0;
           }
         }
-
-        &:only-child {
-          @include border-radius($card-border-radius);
-
-          .card-img-top,
-          .card-header {
-            @include border-top-radius($card-border-radius);
-          }
-          .card-img-bottom,
-          .card-footer {
-            @include border-bottom-radius($card-border-radius);
-          }
-        }
-
-        &:not(:first-child):not(:last-child):not(:only-child) {
-          @include border-radius(0);
-
-          .card-img-top,
-          .card-img-bottom,
-          .card-header,
-          .card-footer {
-            @include border-radius(0);
-          }
-        }
       }
     }
   }
@@ -278,29 +259,27 @@
 //
 
 .accordion {
-  .card {
+  > .card {
     overflow: hidden;
 
     &:not(:first-of-type) {
       .card-header:first-child {
-        border-radius: 0;
+        @include border-radius(0);
       }
 
       &:not(:last-of-type) {
         border-bottom: 0;
-        border-radius: 0;
+        @include border-radius(0);
       }
     }
 
     &:first-of-type {
       border-bottom: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @include border-bottom-radius(0);
     }
 
     &:last-of-type {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      @include border-top-radius(0);
     }
 
     .card-header {