Going to a dark theme

allmightyspiff · allmightyspiff · commit dd0a69a5f417 · 2024-06-17T17:56:47.000-05:00
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/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
@@ -11,7 +11,7 @@
         <div class="col-md-3">
                 {{ 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
@@ -18,7 +18,7 @@
         <div class="col-md-3">
                 {{ 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 zeroPad reference-main">
  
                 <h1 id="{{.Title}}"> {{.Title}} </h1>
 
diff --git a/layouts/reference/single.html b/layouts/reference/single.html
@@ -6,15 +6,15 @@
 <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
diff --git a/static/css/custom.css b/static/css/custom.css
@@ -1,5 +1,32 @@
+:root {
+  --Dark01: #161616;
+  --Dark02: #525252;
+  --Dark03: #333333;
+  --GrayDarkest: #586e75;
+  --GrayDark: #657b83;
+  --GrayMid: #839496;
+  --GrayLight: #93a1a1;
+  --Light01: #eee8d5;
+  --Light02: #bdbdc7;
+  --Red: #f77e7c;
+  --Orange: #cb4b16;
+  --Yellow: #b58900;
+  --Green: #859900;
+  --Teal: #2aa198;
+  --Blue: #268bd2;
+  --Purple: #6c71c4;
+  --Pink: #d33682;
+  --Black: #000000;
+  --White: #FFFFFF;
+}
+
+
 body {
     margin-top: 75px; /* 100px is double the height of the navbar - I made it a big larger for some more space - keep it at 50px at least if you want to use the fixed top nav */
+    background-color: var(--Dark01);
+    color: var(--Light02);
+    font-size: 18px;
+    font-family: "Lato";
 }
 
 footer {
@@ -10,22 +37,68 @@ div.example {
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
           border-radius: 5px;
+    background-color: var(--Dark02);
+    border-color: var(--Dark02);
+}
+
+
+.example-summary {
+    color: var(--Light01);
 }
 
 div.release-note h3 {
-	background-color: #e2e2e2;
+	background-color: var(--GrayDarkest);
+    
 	margin-top: -10px;
 	margin-right: -10px;
 	margin-left: -10px;
 	padding: 10px;
 }
 
+a {
+    color: var(--Red);
+}
+
+div.release-note {
+    background-color: var(--Dark02);
+    color: var(--Light01);
+    border-color: var(--Dark02);
+}
 div.article h3 {
     padding: 10px;
     background-color: #e2e2e2;
     color: #152935;
 }
 
+.panel {
+    background: var(--Dark02);
+    border-color: var(--Dark02);
+    color: var(--Light02);
+}
+
+.reference-title {
+    color: var(--Light01);
+}
+
+.reference-main {
+    background-color: var(--Dark02);
+}
+
+.footer {
+    color: var(--Light02);
+    background-color: var(--Dark01);
+}
+
+.panel-default > .panel-heading {
+    background: var(--GrayDarkest);
+    border-color: var(--Dark02);
+    color: var(--Light02);
+}
+
+
+.service-method-search {
+    background-color: var(--Black);
+}
 .article-title {
     background-color: #152935;
     color: grey;
@@ -38,10 +111,18 @@ div.article h3 {
 
 .article-title h1 {
     text-align: center;
-    color: #f2f4f8;
+    color: var(--Teal);
 }
 
+.article {
+    color: var(--Light02);
+    background-color: var(--Dark02);
+    border-color: var(--Dark02);
+}
 
+.main-top {
+    color: var(--Light01);
+}
 
 #custom-search-input{
     margin-top:2px;
@@ -77,19 +158,29 @@ div.article h3 {
 }
 
 .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
+    background-color: var(--Dark03);
+    border-bottom: 1px solid var(--Green);
+}
+
+.table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th  {
+    background-color: var(--Dark01);
+    border-bottom: 1px solid var(--Green);
 }
 
 table {
 	font-size: 15px;
+    background-color: var(--Black);
 }
-body {
-	font-size: 18px;
-	font-family: "Lato";
+
+table > thead {
+    border-bottom: 5px solid var(--Green);
 }
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-	font-family: "Lato"
+
+blockquote {
+    background-color: var(--Dark03);
 }
 
+
 h3 {
 	font-size: 18px;
     font-weight: bold;
@@ -110,6 +201,8 @@ h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .s
 code {
 	font-family: "Lucida Console", Monaco, monospace;
 	font-size: 15px !important;
+    color: var(--Pink);
+    background-color: var(--Dark03);
 }
 
 .prop-content > div.prop-row > hr {
@@ -124,7 +217,7 @@ code {
     font-size: 14px;
     line-height: 1.42857143;
     box-sizing: border-box;
-    color: #008cba;
+    color: var(--Light01);
     text-decoration: none;
     margin-bottom: 0px;
     /* needed to make anchor links work properly */
@@ -171,6 +264,12 @@ code {
 
 .highlight > div.chroma  {
     display: table;
+    
+}
+
+.highlight > pre {
+    border-color: var(--Dark02);
+    padding: 2px;
 }
 
 .service-content > div#method-div > div.method-row > p {
diff --git a/static/css/main.css b/static/css/main.css

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`- <div class="row">`
	`1`	`+ <div class="row reference-title">`
`2`	`2`
`3`	`3`	`<div class="col-md-12">`
`4`	`4`	`<div style="word-wrap: break-word;"> <!-- Post-specific stats -->`