Base layout, color switch, cute dog

15 files changed, 144 insertions, 14 deletions

diff --git a/README.md b/README.md
index 5db1465..b86fb41 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ Other themes by Sebastian Pech: [Bootstrap-BP](https://github.com/spech66/bootst
   - [Schema.org support](#schemaorg-support)
   - [Social Icons](#social-icons)
   - [Custom CSS/JS](#custom-cssjs)
+  - [Misc](#misc)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -166,3 +167,8 @@ csscdn:
     - https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900
 ---
 ```
+
+## Misc
+
+- Dog Photo - Image by [Nikki Luijpers](https://pixabay.com/users/lovechicco-14817111/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=5692796) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=5692796).
+- [CSS Tricks - A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)
diff --git a/assets/css/main.css b/assets/css/main.css
index e69de29..786b258 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -0,0 +1,84 @@
+/*******************************************************************************
+ * Reset
+ ******************************************************************************/
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+/*******************************************************************************
+ * Flexbox and base colors
+ ******************************************************************************/
+
+body {
+    display: flex;
+    justify-content: center;
+
+    min-height: 100vh;        
+
+    color: #222;
+    background: #c0c0c0;
+}
+
+body.dark-theme {
+    color: #eee;
+    background: #121212;
+}
+
+.container {
+    display: flex;
+	flex-direction: column;
+}
+
+.sidebar {
+    background: green;
+}
+
+body.dark-theme .sidebar {
+    background: red;
+}
+
+main {
+    background: green;
+}
+
+body.dark-theme main {
+    background: red;
+}
+
+/*******************************************************************************
+ * Desktop
+ ******************************************************************************/
+
+@media (min-width: 768px) {
+    .container {
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 80vw;
+    }
+
+    main {
+        order: 2;
+        flex: 5;
+        min-height: 100vh;
+    }
+    
+    .sidebar {
+        order: 1;
+        flex: 1;
+    }
+}
+
+/*******************************************************************************
+ * Elements
+ ******************************************************************************/
+
+a {
+    color: #ff0000;
+}
+
+body.dark-theme a {
+    color: #ff0000;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index e69de29..1f1cda5 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1,5 @@
+const btn = document.querySelector('.btn-toggle');
+
+btn.addEventListener('click', function() {
+  document.body.classList.toggle('dark-theme');  
+})
diff --git a/exampleSite/assets/css/custom.css b/exampleSite/assets/css/custom.css
index e69de29..4c4ca0c 100644
--- a/exampleSite/assets/css/custom.css
+++ b/exampleSite/assets/css/custom.css
@@ -0,0 +1,21 @@
+/* roboto-regular - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local('Roboto'), local('Roboto-Regular'),
+         url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+  
+body {
+    font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Roboto', sans-serif;
+}
diff --git a/exampleSite/assets/photo.jpg b/exampleSite/assets/photo.jpg
new file mode 100644
index 0000000..d4a3139
--- /dev/null
+++ b/exampleSite/assets/photo.jpg
diff --git a/exampleSite/resources/_gen/images/photo_hu8d4b12ac63a57ef95674746282b3441d_107028_320x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/photo_hu8d4b12ac63a57ef95674746282b3441d_107028_320x0_resize_q75_box.jpg
new file mode 100644
index 0000000..76d848c
--- /dev/null
+++ b/exampleSite/resources/_gen/images/photo_hu8d4b12ac63a57ef95674746282b3441d_107028_320x0_resize_q75_box.jpg
diff --git a/layouts/404.html b/layouts/404.html
index 02b06da..51f816a 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -7,12 +7,9 @@
     {{- partial "head.html" . -}}
 </head>
 <body>
-    {{- partial "header.html" . -}}
-
     <h1>{{ i18n "error404" }}</h1>
     <a href="{{ "/" | relLangURL }}" class="card-link">{{ i18n "gotohome" }}</a>
 
-    {{- partial "footer.html" . -}}
     {{- partial "js.html" . -}}
 </body>
 </html>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index eaf6438..4115174 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,11 +5,7 @@
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
     {{- partial "head.html" . -}}
     <body>
-        {{- partial "header.html" . -}}
-        <main role="main">
         {{- block "main" . }}{{- end }}
-        </main>
-        {{- partial "footer.html" . -}}
         {{- partial "js.html" . -}}
     </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index 8b62289..2c1c119 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,8 +1,14 @@
 {{ define "main" }}
 
-<h1>test</h1>
-cntnt
-    left
-    right
+<div class="container">
+    <main>
+        {{- partial "_header.html" . -}}
+        Content
+        {{- partial "_footer.html" . -}}
+    </main>
+    <aside class="sidebar">
+        {{- partial "sidebar.html" . -}}
+    </aside>
+</div>
 
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/_footer.html
index e36f7f7..e36f7f7 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/_footer.html
diff --git a/layouts/partials/_header.html b/layouts/partials/_header.html
new file mode 100644
index 0000000..2599b3c
--- /dev/null
+++ b/layouts/partials/_header.html
@@ -0,0 +1,5 @@
+<button class="btn-toggle">Toggle Dark Mode</button>
+
+Header
+
+<a href="/">Somewhere</a>
diff --git a/layouts/partials/head_custom.html b/layouts/partials/head_custom.html
index 6ed20a7..60319b4 100644
--- a/layouts/partials/head_custom.html
+++ b/layouts/partials/head_custom.html
@@ -1 +1 @@
-<!-- customizations here -->
\ No newline at end of file
+<!-- customizations here -->
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
deleted file mode 100644
index 74fcd1a..0000000
--- a/layouts/partials/header.html
+++ /dev/null
@@ -1 +0,0 @@
-Header
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
new file mode 100644
index 0000000..25f1eb8
--- /dev/null
+++ b/layouts/partials/sidebar.html
@@ -0,0 +1,11 @@
+{{ $photoimg := resources.Get "photo.jpg" }}
+{{ $alt := "Photo" }}
+
+{{ if gt $photoimg.Width 320 }}
+    {{ $image := $photoimg.Resize "320x" }}
+    <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $alt }}" />
+{{ else }}
+    <img src="{{ $photoimg.RelPermalink }}" width="{{ $photoimg.Width }}" height="{{ $photoimg.Height }}" alt="{{ $alt }}" />
+{{ end }}
+
+Sidebar
diff --git a/theme.toml b/theme.toml
index db11c6c..3a95911 100644
--- a/theme.toml
+++ b/theme.toml
@@ -6,7 +6,7 @@ license = "MIT"
 licenselink = "https://github.com/spech66/flex-bp-hugo-cv/blob/master/LICENSE"
 description = "Flexbox based Hugo CV theme which provides out of the box best practices."
 homepage = "https://github.com/spech66/flex-bp-hugo-cv/"
-tags = ["minimalist", "minimal", "cv", "clean", "simple", "responsive", "google analytics", "light", "fast", "dark", "pages", "font awesome", "fontawesome", "multilingual", "customizable", "mobile"]
+tags = ["minimalist", "minimal", "cv", "resume", "clean", "simple", "responsive", "google analytics", "light", "fast", "dark", "pages", "font awesome", "fontawesome", "multilingual", "customizable", "mobile"]
 features = ["responsive", "google analytics", "open graph", "twitter cards"]
 min_version = "0.57.0"