css changes and blog supportHEADmaster

11 files changed, 262 insertions, 24 deletions

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..5008ddf
--- /dev/null
+++ b/.DS_Store
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 315f30e..eda12e4 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -14,9 +14,10 @@ twitter = "wiley_baba"
 instagram = "wileybaba"
 fork = "github.com/wileybaba/Robotico_hugo_theme"
 progressively = true
-
 defaultContentLanguage = 'en'
 
+# Menus
+
 [languages]
   [languages.en]
   languageCode = "en-us"
@@ -82,17 +83,17 @@ defaultContentLanguage = 'en'
     url = "https://www.buymeacoffee.com/gokmen"
     weight = 120
 
-# Gallery
+# Gallery 
 
-    [[params.portfolio]]
-    link = "https://picsum.photos/1200/768.jpg?image=251"
-    [[params.portfolio]]
-    link = "https://picsum.photos/1200/768.jpg?image=252"
-    [[params.portfolio]]
-    link = "https://picsum.photos/1200/768.jpg?image=253"
-    [[params.portfolio]]
-    link = "https://picsum.photos/1200/768.jpg?image=254"
-    [[params.portfolio]]
-    link = "https://picsum.photos/1200/768.jpg?image=255"
-    [[params.portfolio]]
-    link = "https://picsum.photos/1200/768.jpg?image=256"
+  [[params.portfolio]]
+  link = "https://picsum.photos/1200/768.jpg?image=251"
+  [[params.portfolio]]
+  link = "https://picsum.photos/1200/768.jpg?image=252"
+  [[params.portfolio]]
+  link = "https://picsum.photos/1200/768.jpg?image=253"
+  [[params.portfolio]]
+  link = "https://picsum.photos/1200/768.jpg?image=254"
+  [[params.portfolio]]
+  link = "https://picsum.photos/1200/768.jpg?image=255"
+  [[params.portfolio]]
+  link = "https://picsum.photos/1200/768.jpg?image=256"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 547c29f..7cede5d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -31,8 +31,11 @@
 
     <link rel="stylesheet" href="{{ "css/main.css" | absURL }}"/>
 
+    <link rel="stylesheet" href="{{ "css/toggle.css" | absURL }}"/>
+
+
     {{ if .Site.Params.highlightjs }}
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs.min.css" integrity="sha256-w6kCMnFvhY2tI1OnsYR/rb5DG9yFGodJknvFZOkp51E=" crossorigin="anonymous" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/dracula.min.css" crossorigin="anonymous" />
     {{ end }}
 
     {{ if .Site.Params.progressively }}
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
new file mode 100644
index 0000000..9d19f41
--- /dev/null
+++ b/layouts/_default/section.html
@@ -0,0 +1,28 @@
+{{ define "main" }}
+    {{ partial "header" . }}
+
+    <div class="content">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-sm-12 col-md-10">
+                    <div class="markdown">
+                        {{ partial "content" . }}
+                    </div>
+
+                    <div class="mx-0 mx-md-4 posts">
+                        <h1>{{ i18n "sections" }}</h1>
+                        <ul>
+                            {{ range sort .Pages "Title" "asc" }}
+                                <li>
+                                    <a href="{{ .Permalink }}"><span>{{ .Title }}</span></a>
+                                </li>
+                            {{ end }}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{ partial "footer" . }}
+{{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 774cb38..9dae847 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -21,7 +21,7 @@
                         {{ end }}
 
                         <span class="reading-time middot">
-                            {{ .ReadingTime }} minute read
+                            ⏱️ {{ .ReadingTime }} minute read
                         </span>
 
                         <div class="d-none d-md-inline tags">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 4751017..1afd117 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -45,13 +45,13 @@
                     {{ end }}
 
                     {{ if .Site.Params.email }}
-                        <a href="mailto:{{ .Site.Params.email }}">
+                        <a href="mailto:{{ .Site.Params.email }}" target="_blank">
                             <img class="icon" src="{{ .Site.BaseURL }}img/email.svg" alt="email" title="email me" />
                         </a>
                     {{ end }}
 
                     {{ if .Site.Params.fork}}
-                        <a href="{{ .Site.Params.fork }}">
+                        <a href="{{ .Site.Params.fork }}" target="_blank">
                             <img class="icon" src="{{ .Site.BaseURL }}img/git.svg" alt="fork this page" title="fork this theme" />
                         </a>
                     {{ end }}
@@ -65,6 +65,11 @@
                         {{ end }}
                     {{ end }}
                 </div>
+                <!-- dark mode toggle example -->
+                <!-- <div class="toggle toggle--daynight">
+                  <input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
+                  <label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
+                </div> -->
             </div>
         </div>
     </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 1b982ea..39d0056 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,7 +12,6 @@
                 <a href="{{ .Site.BaseURL }}">
                     <h1 class="font-weight-bold name">{{ .Site.Title }}</h1>
                 </a>
-
                 <ul class="nav nav-primary">
                     {{ range .Site.Menus.primary.ByWeight }}
                         <li class="nav-item">
@@ -24,7 +23,7 @@
                     {{ end }}
 
                     {{ if .IsTranslated }}
-                        <li class="ml-4">
+                        <li class="ml-4 langToggle">
                             <ul class="nav nav-languages">
                                 {{ range .Translations }}
                                     <li>
@@ -35,7 +34,15 @@
                                 {{ end }}
                             </ul>
                         </li>
+
+
+
                     {{ end }}
+
+                    <!-- {{ if .Site.Params.darkMode }} -->
+
+                    <!-- {{ end }} -->
+
                 </ul>
 
                 <ul class="nav nav-secondary">
@@ -47,6 +54,7 @@
                             </a>
                         </li>
                     {{ end }}
+
                 </ul>
             </div>
         </div>
diff --git a/layouts/partials/list.html b/layouts/partials/list.html
new file mode 100644
index 0000000..142130c
--- /dev/null
+++ b/layouts/partials/list.html
@@ -0,0 +1,4 @@
+<li class="pl-3 post-item">
+    <span class="meta">{{ .Date.Format  "Jan 02, 2006" }}</span>
+    <a href="{{ .Permalink }}"><span>{{ .Title }}</span></a>
+</li>
diff --git a/static/css/main.css b/static/css/main.css
index 79e95bb..f7d4a8e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,6 +1,7 @@
 /* Global styles */
 body {
     font-family: "Raleway";
+    /* background-color: #3a3d3c; */
 }
 
 a {
@@ -29,6 +30,10 @@ a:hover {
     color: #5188ef !important;
 }
 
+.text-bmc:hover {
+    color: #5179ea !important;
+}
+
 /* Partial: Header */
 .header a:hover {
     text-decoration: none;
@@ -55,6 +60,10 @@ a:hover {
     color: #f4b642;
   }
 
+.langToggle a:hover {
+  color: #51ef7e !important;
+}
+
 .header ul.nav li:first-child a {
     padding-left: 2px;
 }
@@ -138,14 +147,39 @@ a:hover {
 .content .markdown pre {
     font-family: "Menlo", monospace;
     font-size: 0.98rem;
-    background-color: #f7f7f7;
+    border-radius: 1rem;
 }
 
 .content .markdown code {
     /* enclosed by single backtick (`) */
     padding: 0.15em 0.5em;
     border-radius: 2px;
-    color: #7adbbc;
+    background-color: #000645;
+}
+
+.content .markdown .js code {
+  color: #FFFF33 !important;
+  background-color: #cccaca !important;
+}
+
+.content .markdown .go code {
+  color: #426ab9 !important;
+  background-color: #cccaca !important;
+}
+
+.content .markdown .python code {
+  color: #54aabd !important;
+  background-color: #cccaca !important;
+}
+
+.content .markdown .ruby code {
+  color: #9c1e1f !important;
+  background-color: #cccaca !important;
+}
+
+.content .markdown .php code {
+  color: #5566aa !important;
+  background-color: #cccaca !important;
 }
 
 .content .markdown pre {
diff --git a/static/css/toggle.css b/static/css/toggle.css
new file mode 100644
index 0000000..c91cf43
--- /dev/null
+++ b/static/css/toggle.css
@@ -0,0 +1,157 @@
+.toggle {
+  display: block;
+  text-align: center;
+  margin-top: 40px;
+  user-select: none;
+}
+
+.toggle--checkbox {
+  display: none;
+}
+
+.toggle--btn {
+  display: block;
+  margin: 0 auto;
+  font-size: 1.4em;
+  transition: all 350ms ease-in;
+}
+.toggle--btn:hover {
+  cursor: pointer;
+}
+
+.toggle--btn, .toggle--btn:before, .toggle--btn:after,
+.toggle--checkbox,
+.toggle--checkbox:before,
+.toggle--checkbox:after,
+.toggle--feature,
+.toggle--feature:before,
+.toggle--feature:after {
+  transition: all 250ms ease-in;
+}
+.toggle--btn:before, .toggle--btn:after,
+.toggle--checkbox:before,
+.toggle--checkbox:after,
+.toggle--feature:before,
+.toggle--feature:after {
+  content: '';
+  display: block;
+}
+
+/* ===================================================
+   Day/Night and Gender toggle buttons
+   =================================================== */
+.toggle--daynight .toggle--btn,
+.toggle--like .toggle--btn {
+  position: relative;
+  height: 70px;
+  width: 125px;
+  border-radius: 70px;
+}
+.toggle--daynight .toggle--btn:before,
+.toggle--like .toggle--btn:before {
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+}
+
+.toggle--daynight .toggle--btn {
+  border: 5px solid #1c1c1c;
+  background-color: #3c4145;
+}
+.toggle--daynight .toggle--btn:before {
+  background-color: #fff;
+  border: 5px solid #e3e3c7;
+}
+.toggle--daynight .toggle--btn:after {
+  position: absolute;
+  top: 62%;
+  left: 39px;
+  z-index: 10;
+  width: 11.2px;
+  height: 11.2px;
+  opacity: 0;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
+  transition: opacity 100ms ease-in;
+}
+@keyframes starry_star {
+  50% {
+    background-color: rgba(255, 255, 255, 0.1);
+    box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
+  }
+}
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 100;
+    transform: scale(1.1);
+  }
+  55% {
+    transform: scale(1.1);
+  }
+  75% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 100;
+    transform: scale(1);
+  }
+}
+.toggle--daynight .toggle--feature {
+  display: block;
+  position: absolute;
+  top: 9px;
+  left: 52.5%;
+  z-index: 20;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
+  animation: starry_star 5s ease-in-out infinite;
+}
+.toggle--daynight .toggle--feature:before {
+  position: absolute;
+  top: -2px;
+  left: -25px;
+  width: 18px;
+  height: 18px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 5px solid #e3e3c7;
+  box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
+  transform-origin: -6px 130%;
+}
+.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
+  background-color: #9ee3fb;
+  border: 5px solid #86c3d7;
+}
+.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
+  left: 55px;
+  background-color: #ffdf6d;
+  border: 5px solid #e1c348;
+}
+.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
+  opacity: 100;
+  animation-name: bounceIn;
+  animation-duration: 0.60s;
+  animation-delay: 0.10s;
+  animation-fill-mode: backwards;
+  animation-timing-function: ease-in-out;
+}
+.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
+  opacity: 0;
+  box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
+  animation: none;
+}
+.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
+  left: 25px;
+  transform: rotate(70deg);
+}
diff --git a/theme.toml b/theme.toml
index 2817f82..d9c1ca8 100644
--- a/theme.toml
+++ b/theme.toml
@@ -1,11 +1,9 @@
 name = "Robotico"
 license = "MIT"
-licenselink = "https://github.com/wileybaba/hugo-theme-robotico/blob/master/LICENSE.md"
 description = "A lightweight and blazing fast personal website theme"
 homepage = "https://github.com/wileybaba/hugo-theme-robotico"
 features = ["responsive", "gallery", "multilingual"]
 tags = ["fast", "responsive", "bootstrap", "personal"]
-min_version = "0.41"
 
 [author]
   name = "Wiley McKay Conte"