Merge pull request #673 from softlayer/darkTheme

Dark theme!
softlayer · Jun 24, 2024 · 9cec980 · 9cec980
2 parents 4146fef + 0d84ccf
commit 9cec980
Show file tree

Hide file tree

Showing 19 changed files with 535 additions and 386 deletions.
diff --git a/layouts/article/section.html b/layouts/article/section.html
@@ -2,7 +2,7 @@
 <body>
 {{ partial "navbar.html" . }}
 <div class="container">
-    <div class="row">
+    <div class="row main-top">
         <h1> Articles </h1>
         <div class="row">
             <div class="col-sm-9">

diff --git a/layouts/article/single.html b/layouts/article/single.html
@@ -2,7 +2,7 @@
 <body>
 {{ partial "navbar.html" . }}
 <div class="container">
-    <div class="row">
+    <div class="row main-top">
     <!-- Sidebar -->
         <div class="col-md-3">
             <div style="word-wrap: break-word;"> <!-- Post-specific stats -->

diff --git a/layouts/article/summary.html b/layouts/article/summary.html
@@ -1,7 +1,7 @@
 <div class="well well-sm example">
     <h4>
         <a href="{{ .Permalink }}"><i class="fas fa-terminal"></i> {{ .Title }} </a> <small class="pull-right">{{ .Date.Format "Jan 2, 2006" }}</small><br>
-        <small>{{ .Description }}</small>
     </h4>
+    <div class = "example-summary"> {{ .Description }}</div>
     <a class="btn btn-primary btn-xs" href="{{ .Permalink }}"><i class="fas fa-file"></i> Read Me </a>
 </div>
diff --git a/layouts/index.html b/layouts/index.html
@@ -5,7 +5,7 @@
 
 
     <div class="container">
-    <div class="row">
+    <div class="row main-top">
         <h1>Release Notes</h1>
 		<div class="col-md-9">
 			{{ range $paginator.Pages }}

diff --git a/layouts/partials/feedback-menu.html b/layouts/partials/feedback-menu.html
@@ -1,5 +1,5 @@
 <div class="col-md-6">
-    <div class="well well-sm" style="word-wrap: break-word;"> <!-- Post-specific stats -->
+    <div class="well well-sm footer" style="word-wrap: break-word;"> <!-- Post-specific stats -->
         <strong>Feedback? <span class="fas fa-comment"/></strong>
             <p>
                 If this article contains any error, or leaves any of your questions unanswered, please help us out by 

diff --git a/layouts/partials/footer.copyright.html b/layouts/partials/footer.copyright.html
@@ -1,6 +1,6 @@
 <footer>
     <div class="row">
-        <div class="col-sm-12">
+        <div class="col-sm-12 footer">
             <p>&copy; SoftLayer {{ dateFormat "2006" now }}<br>
             Built with <a href="https://github.com/spf13/hugo">Hugo</a></p>
         </div>

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -12,6 +12,7 @@
 	<script>
 		$(document).ready(function() {
 			$('table').addClass("table table-hover table-striped")
+            setThemeMode(localStorage.getItem("dark-mode-theme") || "dark");
 		})
 	</script>
     {{ template "_internal/google_analytics.html" . }}

diff --git a/layouts/partials/header.includes.html b/layouts/partials/header.includes.html
@@ -3,6 +3,7 @@
     <link href="/css/custom.css" rel="stylesheet">
     <link href="/css/monokai.css" rel="stylesheet">
     <link href="/css/highlight/solarized_dark.css" rel="stylesheet">
+
 
     <script src="/js/highlight.pack.js"></script>
 
@@ -22,3 +23,17 @@
     <script defer src="/fontawesome/js/solid.min.js"></script>
     <script defer src="/fontawesome/js/brands.min.js"></script>
     <script defer src="/fontawesome/js/fontawesome.min.js"></script>
+
+    <script>
+        var head = document.getElementsByTagName('head')[0]
+        var style = document.createElement('link')
+        style.type = 'text/css'
+        style.rel = 'stylesheet'
+        style.id = "dark-theme"
+        if (localStorage.getItem("dark-mode-theme") == "dark") {
+            style.href = '/css/dark.css'
+        } else {
+            style.href = '/css/light.css'
+        }
+        head.append(style)
+    </script>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -1,6 +1,6 @@
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-        <div class="container">
-            <div class="navbar-header">
+        <div class="nav-container">
+            <div class="navbar-header" style="width: 150px">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                     <span class="sr-only">Toggle Navigation</span>
                     <span class="icon-bar"></span>
@@ -9,30 +9,62 @@
                 </button>
                 <a class="navbar-brand" href="{{ .Site.BaseURL}}">{{ .Site.Title }}</a>
             </div>
-            <div class="collapse navbar-collapse navbar-ex1-collapse">
-                <ul class="nav navbar-nav">
+
+            <div class="navbar-header" style="width: calc(100% - 400px)">
+                <ul class="nav navbar-nav" style="width: 100%">
                     {{ range .Site.Menus.main }}
                         <li><a href="{{.URL}}">{{ .Name }}</a></li>
                     {{ end }}
-
-                    <!--
-                    And here is where you'd add more links to sections, or anywhere you like.
-                    <li><a href="#">About Me</a></li>
-                    -->
+                    <li class="nav-item">
+                        <a id="dark-toggle" class="dark-mode-toggle" aria-label="dark-mode-toggle" style="color: var(--Red); font-size: 20px">
+                            <i class="fas fa-sun"></i>
+                        </a>
+                    </li>
                 </ul>
-                <div id="custom-search-input" class="pull-right">
-                  <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
-                    <div class="input-group col-md-12">
-                      <input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
-                      <input type="hidden" name="q1" value="site:sldn.softlayer.com" />
-                      <div class="input-group-btn">
-                        <button class="btn btn-info" type="submit">
-                          <i class="glyphicon glyphicon-search"></i>
-                        </button>
-                      </div>
-                    </div>
-                  </form>
+            </div>
+
+            <div id="custom-search-input" class="pull-right" style="width: 250px">
+              <form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
+                <div class="input-group col-md-12">
+                  <input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
+                  <input type="hidden" name="q1" value="site:sldn.softlayer.com" />
+                  <div class="input-group-btn">
+                    <button class="btn btn-info" type="submit">
+                      <i class="glyphicon glyphicon-search"></i>
+                    </button>
+                  </div>
                 </div>
+              </form>
             </div>
+
         </div>
     </nav>
+
+<script type="text/javascript">
+const darkIconClass = 'fas fa-moon'
+const lightIconClass = 'fas fa-sun'
+var darkCSS = $("#dark-theme");
+var darkToggleIcon = $("#dark-toggle i");
+
+// Set theme with the given mode and toggle the theme icon button
+// The button won't actually change for some reason on page load, will
+// change when its pressed though.
+function setThemeMode(mode) {
+    localStorage.setItem("dark-mode-theme", mode);
+    if (mode === "dark") {
+        darkToggleIcon.attr('class', darkIconClass)
+    } else  {
+        darkToggleIcon.attr('class', lightIconClass)
+    }
+}
+
+// Toggle dark mode when user click on the icon button
+$("#dark-toggle").click(function () {
+  if (darkToggleIcon.attr("class") == lightIconClass) {
+    setThemeMode("dark")
+  } else if (darkToggleIcon.attr("class") == darkIconClass) {
+    setThemeMode("light")
+  }
+  location.reload();
+});
+</script>
diff --git a/layouts/partials/title.html b/layouts/partials/title.html
@@ -1,4 +1,4 @@
-    <div class="row">
+    <div class="row reference-title">
 
         <div class="col-md-12">
             <div style="word-wrap: break-word;"> <!-- Post-specific stats -->

diff --git a/layouts/reference/datatype.html b/layouts/reference/datatype.html
@@ -8,10 +8,10 @@
     <hr>
 
     <div class="row">
-        <div class="col-md-3">
+        <div class="col-md-3 zeroPad">
                 {{ partial "datatype-bar.html" . }}
         </div>
-        <div class="col-md-9">
+        <div class="col-md-9 reference-main">
 
             <h1 id="{{.Title}}"> {{.Title}} </h1>
             {{ partial "service_datatype_links.html" $thisPage}}

diff --git a/layouts/reference/method.html b/layouts/reference/method.html
@@ -15,10 +15,10 @@
     <hr>
 
     <div class="row">
-        <div class="col-md-3">
+        <div class="col-md-3 zeroPad">
                 {{ partial "service-bar.html" . }}
         </div>
-        <div class="col-md-9">
+        <div class="col-md-9 reference-main">
 
             <h1 id="{{.Title}}"> 
                 <a href="/reference/services/{{$.Params.MainService}}">{{$.Params.MainService}}</a>::{{.Title}} 

diff --git a/layouts/reference/service.html b/layouts/reference/service.html
@@ -12,7 +12,7 @@
         <div class="col-md-3 zeroPad">
                 {{ partial "service-bar.html" . }}
         </div>
-        <div class="col-md-9 zeroPad">
+        <div class="col-md-9 reference-main">
 
                 <h1 id="{{.Title}}"> {{.Title}} </h1>
 

diff --git a/layouts/reference/single.html b/layouts/reference/single.html
@@ -1,20 +1,19 @@
 {{ partial "header.html" . }}
-
 <body>
 {{ partial "navbar.html" . }}
 <!-- REFERENCE PAGE -->
 <div class="container">
     <div class="row">
         <div class="col-md-12 ">
-            <div class="well well-lg">
+            <div class="well well-lg panel">
                 <h3>SoftLayer Reference<br> <small>This is a collection of automatically generated documentation regarding the SoftLayer API. </small></h3>
                 <hr>
                 {{ .Content }}
             </div>
 <!-- Service Filer BEGIN -->
                         <div class="view-filters">
 
-                                <div class="clearfix">
+                                <div class="clearfix panel">
                                     <div class="search-input-box">
                                         <input placeholder="Filter" onkeyup="titleSearch(inputId='list-input', divId='sidebar-list', elementClass='list-row')" 
                                             type="text" id="list-input" value="" size="30" maxlength="128" class="form-text">

diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css