More style cleanup. (#3230)

config.toml

@@ -12,6 +12,7 @@ enableGitInfo = true
 enableEmoji = true
 buildFuture = true
 ignoreFiles = [ "OWNERS" ]
+staticDir = ["static", "generated"]
 
 # MARKDOWN
 ## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday

layouts/_default/baseof.html

@@ -132,7 +132,7 @@
         {{ block "main" . }}{{ end }}
         {{ partial "footer.html" . }}
 
-        <div class="d-xl-none d-print-none">
+        <div id="scroll-to-top-container">
             <button id="scroll-to-top" aria-hidden="true" onclick="scrollToTop()" title='{{ i18n "button_top"}}'>
                 {{ partial "icon.html" "top" }}
             </button>

layouts/partials/primary-top.html

@@ -19,11 +19,9 @@
 
     <div class="article-container">
         {{ if or $section.Params.sidebar_singlecard $section.Params.sidebar_multicard }}
-            <p class="d-md-none">
-                <label class="sidebar-toggler" id="sidebar-toggler" title='{{ i18n "button_sidenav" }}'>
-                    {{ partial "icon.html" "pull" }}
-                </label>
-            </p>
+            <label class="sidebar-toggler" id="sidebar-toggler" title='{{ i18n "button_sidenav" }}'>
+                {{ partial "icon.html" "pull" }}
+            </label>
         {{ end }}
 
         <div class="pagenav">

layouts/partials/sidebar-level.html

@@ -12,9 +12,9 @@
 
                     <label class='tree-toggle'>
                         {{- if $collapse -}}
-                            <i class="chevron">{{- partial "icon.html" "right-chevron" -}}</i><i class="chevron d-none">{{- partial "icon.html" "down-chevron" -}}</i>
+                            <i class="chevron show">{{- partial "icon.html" "right-chevron" -}}</i><i class="chevron">{{- partial "icon.html" "down-chevron" -}}</i>
                         {{- else -}}
-                            <i class="chevron d-none">{{- partial "icon.html" "right-chevron" -}}</i><i class="chevron">{{- partial "icon.html" "down-chevron" -}}</i>
+                            <i class="chevron">{{- partial "icon.html" "right-chevron" -}}</i><i class="chevron show">{{- partial "icon.html" "down-chevron" -}}</i>
                         {{- end -}}
                         <a {{ if eq $current.Permalink .Permalink }}class="current"{{ end }} title="{{ .Description }}" href="{{ .Permalink }}">{{ .LinkTitle}}</a>
                     </label>

layouts/partials/sidebar-multicard.html

@@ -1,4 +1,4 @@
-<nav class="sidebar d-print-none">
+<nav class="sidebar">
     <div class="spacer"></div>
     <div class="directory" role="tablist">
         {{ $section := .Site.GetPage "section" .Section }}
@@ -32,7 +32,7 @@
 
         {{ if not .Site.Data.args.archive }}
             {{ if strings.HasSuffix $section.Dir "blog/" }}
-                <div class="text-center subscribe" >
+                <div class="subscribe" >
                     <a href="/feed.xml" target="_blank">
                         {{ partial "large_icon.html" "rss" }}{{ i18n "subscribe" }}
                     </a>

layouts/partials/sidebar-singlecard.html

@@ -1,4 +1,4 @@
-<nav class="sidebar d-print-none">
+<nav class="sidebar">
     <div class="spacer"></div>
     <div class="directory" role="tablist">
         {{ $section := .Site.GetPage "section" .Section }}

scripts/build_site.sh

@@ -9,8 +9,8 @@ npx sass src/sass/light_theme_preliminary.scss light_theme_preliminary.css -s co
 npx sass src/sass/dark_theme_archive.scss dark_theme_archive.css -s compressed
 npx sass src/sass/dark_theme_normal.scss dark_theme_normal.css -s compressed
 npx sass src/sass/dark_theme_preliminary.scss dark_theme_preliminary.css -s compressed
-mv light_theme* static/css
-mv dark_theme* static/css
-npx uglifyjs src/js/misc.js src/js/utils.js src/js/prism.js --mangle --compress -o static/js/all.min.js --source-map
-npx uglifyjs src/js/styleSwitcher.js --mangle --compress -o static/js/styleSwitcher.min.js --source-map
-npx svgstore -o static/img/icons.svg src/icons/**/*.svg
+mv light_theme* generated/css
+mv dark_theme* generated/css
+npx uglifyjs src/js/misc.js src/js/utils.js src/js/prism.js --mangle --compress -o generated/js/all.min.js --source-map
+npx uglifyjs src/js/styleSwitcher.js --mangle --compress -o generated/js/styleSwitcher.min.js --source-map
+npx svgstore -o generated/img/icons.svg src/icons/**/*.svg

src/js/misc.js

@@ -96,7 +96,7 @@ $(function ($) {
 
         // toggle category tree in sidebar
         $(document).on('click', '.tree-toggle', function () {
-            $(this).children('i.chevron').toggleClass('d-none');
+            $(this).children('i.chevron').toggleClass('show');
             $(this).parent().children('ul.tree').toggle(200);
         });
 

src/sass/base/_base.scss

@@ -359,13 +359,6 @@ h6 {
     font-size: 0.6em;
 }
 
-.subtitle {
-    margin-top: .15rem;
-    margin-bottom: 0;
-    padding: 0 0 0 0;
-    font-size: 125%;
-}
-
 h2:hover .header-link,
 h3:hover .header-link,
 h4:hover .header-link,
@@ -428,6 +421,17 @@ blockquote {
     border-bottom-color: $dividerBarColor;
 }
 
+#scroll-to-top-container {
+    @media print {
+        display: none;
+    }
+
+    // don't display the scroll-to-top button if the TOC is being displayed
+    @media (min-width: $bp-xl) {
+        display: none;
+    }
+}
+
 #scroll-to-top {
     display: none;
     position: fixed;
@@ -455,12 +459,6 @@ blockquote {
     }
 }
 
-@media screen {
-    .endnote-ref {
-        display: none;
-    }
-}
-
 @media print {
     h1, h2, h3 {
         color: #000;
@@ -503,6 +501,13 @@ blockquote {
     transform: scaleX(-1);
 }
 
+.subtitle {
+    margin-top: .15rem;
+    margin-bottom: 0;
+    padding: 0 0 0 0;
+    font-size: 125%;
+}
+
 .byline {
     margin-top: .15rem;
     margin-bottom: 2rem;

src/sass/misc/_blog.scss

@@ -2,6 +2,7 @@
     padding: 1em;
     font-size: 1.2em;
     background-color: $backgroundColor;
+    text-align: center;
 
     svg {
         margin-right: .5em;

src/sass/misc/_callout.scss

@@ -11,12 +11,10 @@
     .type {
         position: relative;
         display: table-cell;
-        width: 3em;
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
+        top: -1.25em;
+        left: -.75em;
         min-height: 100%;
         text-align: center;
-        vertical-align: middle;
     }
 
     .content {
@@ -39,7 +37,6 @@
     &:hover {
         svg {
             animation: shake 2.82s cubic-bezier(.36, .07, .19, .97) both;
-            animation-iteration-count: infinite;
             transform: translate3d(0, 0, 0);
             backface-visibility: hidden;
             perspective: 1000px;

src/sass/misc/_link-endnotes.scss

@@ -5,3 +5,9 @@
         display: block;
     }
 }
+
+@media screen {
+    .endnote-ref {
+        display: none;
+    }
+}

src/sass/misc/_sidebar.scss

@@ -119,15 +119,20 @@
         }
     }
 
-    .chevron {
-        svg {
-            margin-right: 0.3em;
-        }
-    }
-
     .tree-toggle {
         cursor: pointer;
         margin-bottom: 0;
+
+        .chevron {
+            svg {
+                margin-right: 0.3em;
+            }
+
+            display: none;
+            &.show {
+                display: inline;
+            }
+        }
     }
 }
 
@@ -150,6 +155,10 @@
         color: $textBrandHighlightColor;
     }
 
+    @media (min-width: $bp-md) {
+        display: none;
+    }
+
     @media print {
         display: none;
     }