Styling

12 files changed, 172 insertions, 62 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index c9fe046..3340bd3 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,6 +8,10 @@
     margin: 0;
 }
 
+ul, ol {
+    list-style: none;
+}
+
 html {
 	scroll-behavior: smooth;
 }
@@ -54,6 +58,29 @@ body.dark-theme main {
 }
 
 /*******************************************************************************
+ * Inner Flexbox
+ ******************************************************************************/
+
+.innerContainer {
+    display: flex;
+	flex-direction: row;
+    flex-wrap: nowrap;
+    margin-bottom: 2rem;
+}
+
+.innerLeft {
+    flex: 0 0 160px;
+}
+
+.innerRight {
+    flex: 1 1 auto;
+}
+
+.innerRight p {
+    margin: 0 0 0.6rem;
+}
+
+/*******************************************************************************
  * Desktop
  ******************************************************************************/
 
@@ -72,7 +99,7 @@ body.dark-theme main {
     
     .sidebar {
         order: 1;
-        flex: 1;
+        flex: 1.4;
     }
 }
 
@@ -84,14 +111,33 @@ h1 {
     color: #2E74B5;
     text-transform: uppercase;
     font-size: 4rem;
+    letter-spacing: 1.4px;
+}
+
+.subtitle {
+    color: #c0c0c0;
+    font-style: italic;
+    font-weight: 600;
+    letter-spacing: 2px;
+}
+
+body.dark-theme .subtitle {
+    color: #121212;
 }
 
 h2 {
     border-bottom: 1px solid #2E74B5;
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
+    margin-top: 1.6rem;
+    margin-bottom: 0.8rem;
     color: #2E74B5;
     text-transform: uppercase;
+    letter-spacing: 1.2px;
+}
+
+h3 {
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 0.8rem;
 }
 
 a, a:link, a:active {
@@ -117,6 +163,45 @@ footer {
     margin-top: 2rem;
 }
 
+section {
+    margin-left: 40px;
+}
+section h2 {
+    margin-left: -40px;
+}
+
+.listspecial li {
+    margin: 0 0 0.6rem;
+}
+
+.listspecial li strong {
+    font-weight: 600;
+    display: inline-block;
+    width: 160px;
+}
+
+.listsimple li {
+    margin: 0 0 0.6rem;
+    list-style: disc;
+    list-style-position: inside;
+}
+
+.listsimple ::marker {
+    color: #2E74B5;
+}
+
+.list-inline-item {
+    display: inline-block;
+}
+
+.tag {
+    border-radius: 8px;
+    text-align: center;
+    background-color: #2E74B5;
+    color: #ffffff;
+    padding: 2px 8px;
+}
+
 /*******************************************************************************
  * Navigaton
  ******************************************************************************/
@@ -128,7 +213,6 @@ nav {
 }
 
 nav ul {
-    list-style: none;
     margin: 0;
     padding: 0;
 }
diff --git a/assets/js/main.js b/assets/js/main.js
index a03a9c7..4730c1e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -30,9 +30,13 @@ window.addEventListener('DOMContentLoaded', () => {
 		entries.forEach(entry => {
 			const id = entry.target.getAttribute('id');
 			if (entry.intersectionRatio > 0) {
-				document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
+				if(document.querySelector(`nav ul li a[href="#${id}"]`) != null) {
+					document.querySelector(`nav ul li a[href="#${id}"]`).parentElement.classList.add('active');
+				}
 			} else {
-				document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
+				if(document.querySelector(`nav ul li a[href="#${id}"]`) != null) {
+					document.querySelector(`nav ul li a[href="#${id}"]`).parentElement.classList.remove('active');
+				}
 			}
 		});
 	});
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index ab7b10f..893cfab 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -11,6 +11,9 @@ enableInlineShortcodes = true
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
 ignoreErrors = ["error-remote-getjson"]
 
+# Scroll Spy has problems with german umlauts and other non ascii characters
+removePathAccents = true
+
 # Theme specific examples
 author = "Sebastian Pech"
 copyright = "Sebastian Pech"
diff --git a/exampleSite/data/de/content.yaml b/exampleSite/data/de/content.yaml
index 3b07816..75edf0c 100644
--- a/exampleSite/data/de/content.yaml
+++ b/exampleSite/data/de/content.yaml
@@ -26,7 +26,7 @@ PersonalData:
 
 BriefProfile:
   Title: Kurzprofil
-  Icon: fas fa-user
+  Icon: fas fa-th-list
   Sections:
     - Name: Stärken
       Items:
@@ -49,8 +49,8 @@ Experience:
     - Name: Rettungshund
       Empolyer: ACME Polizei
       Website: https://www.example.org
-      StartDate: 01.01.2018
-      EndDate:
+      StartDate: 01/2018
+      EndDate: Heute
       Details:
         - Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.
         - De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia.
@@ -59,8 +59,8 @@ Experience:
     - Name: Rettungshund
       Empolyer: ABCD Polizei
       Website: https://www.example.com
-      StartDate: 01.06.2014
-      EndDate: 31.12.2017
+      StartDate: 06/2014
+      EndDate: 12/2017
       Details:
         - Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
         - The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.
@@ -69,8 +69,8 @@ Experience:
     - Name: Rettungshund
       Empolyer: XYZ Schutzhundestaffel
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Details:
         - Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens.
         - Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams.
@@ -87,8 +87,8 @@ AcademicEducation:
     - Name: Hunde Universität
       Organisation: Hundeschule A
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: Master of Arts
 
 ProfessionalTraining:
@@ -98,8 +98,8 @@ ProfessionalTraining:
     - Name: Hunde Berusausbildung
       Organisation: Hundeschule B
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: Rettungshund
 
 SchoolEducation:
@@ -109,8 +109,8 @@ SchoolEducation:
     - Name: Realschule
       Organisation: ACME Realschule
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: Fachoberschulreife
 
 FurtherEducation:
@@ -120,8 +120,8 @@ FurtherEducation:
     - Name: PersonalTrainer
       Organisation: ACME Schule
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: PersonalTrainer A-Lizenz
 
 Diplomas:
diff --git a/exampleSite/data/en/content.yaml b/exampleSite/data/en/content.yaml
index 54060cd..1df67f6 100644
--- a/exampleSite/data/en/content.yaml
+++ b/exampleSite/data/en/content.yaml
@@ -26,7 +26,7 @@ PersonalData:
 
 BriefProfile:
   Title: Brief Profile
-  Icon: fas fa-user
+  Icon: fas fa-th-list
   Sections:
     - Name: Strengths
       Items:
@@ -49,8 +49,8 @@ Experience:
     - Name: Rescue dog
       Empolyer: ACME Police
       Website: https://www.example.org
-      StartDate: 01.01.2018
-      EndDate:
+      StartDate: 01/2018
+      EndDate: Today
       Details:
         - Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.
         - De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia.
@@ -59,8 +59,8 @@ Experience:
     - Name: Rescue dog
       Empolyer: ABCD Police
       Website: https://www.example.com
-      StartDate: 01.06.2014
-      EndDate: 31.12.2017
+      StartDate: 06/2014
+      EndDate: 12/2017
       Details:
         - Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
         - The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.
@@ -69,8 +69,8 @@ Experience:
     - Name: Guard dog
       Empolyer: XYZ Guard dogs
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Details:
         - Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens.
         - Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams.
@@ -87,8 +87,8 @@ AcademicEducation:
     - Name: Dog University
       Organisation: Dog school A
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: Master of Arts
 
 ProfessionalTraining:
@@ -98,8 +98,8 @@ ProfessionalTraining:
     - Name: Dog Professional Training
       Organisation: Dog school B
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: Guard dog
 
 SchoolEducation:
@@ -109,8 +109,8 @@ SchoolEducation:
     - Name: Secondary school
       Organisation: ACME Secondary School
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: Advanced technical college certificate
 
 FurtherEducation:
@@ -120,8 +120,8 @@ FurtherEducation:
     - Name: PersonalTrainer
       Organisation: ACME University
       Website: https://www.example.com
-      StartDate: 01.01.2010
-      EndDate: 30.05.2014
+      StartDate: 01/2010
+      EndDate: 05/2014
       Qualification: PersonalTrainer A-License
 
 Diplomas:
diff --git a/layouts/partials/_briefprofile.html b/layouts/partials/_briefprofile.html
index 1b13c26..f8fa6f4 100644
--- a/layouts/partials/_briefprofile.html
+++ b/layouts/partials/_briefprofile.html
@@ -3,10 +3,14 @@
 <section id="section-{{ .Title | urlize }}">
     <h2><i class="{{ .Icon }}"></i> {{ .Title }}</h2>
     {{ range $data.Sections }}
-        <h3>{{ .Name }}</h3>
-        {{ range .Items }}
-            <p>{{ . }}</p>
-        {{ end }}
+        <div class="innerContainer">
+            <h3 class="innerLeft">{{ .Name }}</h3>
+            <div class="innerRight">
+                {{ range .Items }}
+                    <p>{{ . }}</p>
+                {{ end }}
+            </div>
+        </div>
     {{ end }}
 </section>
 {{ end }}
diff --git a/layouts/partials/_contacts.html b/layouts/partials/_contacts.html
index db39296..472f240 100644
--- a/layouts/partials/_contacts.html
+++ b/layouts/partials/_contacts.html
@@ -2,9 +2,11 @@
 {{ with $data }}
 <section id="section-{{ .Title | urlize }}">
     <h2><i class="{{ .Icon }}"></i> {{ .Title }}</h2>
-    {{ range $data.Contacts }}
-        <p><i class="{{ .Icon }}"></i> {{ .Name }}: {{ .Value }}</p>
-    {{ end }}
+    <ul class="listspecial">
+        {{ range $data.Contacts }}
+            <li><strong><i class="{{ .Icon }}"></i> {{ .Name }}</strong>{{ .Value }}</p>
+        {{ end }}
+    </ul>
     <ul>
         {{- partial "social.html" $ -}}
     </ul>
diff --git a/layouts/partials/_education.html b/layouts/partials/_education.html
index 8eecec7..b4bc1b3 100644
--- a/layouts/partials/_education.html
+++ b/layouts/partials/_education.html
@@ -4,9 +4,14 @@
     <section id="section-{{ .Title | urlize }}">
         <h2><i class="{{ .Icon }}"></i> {{ .Title }}</h2>
         {{ range .Sections }}
-            <h3>{{ .Name }}</h3>
-            {{ .Organisation }} {{ .Website }} {{ .StartDate }} {{ .EndDate }}
-            {{ .Qualification }}
+            <div class="innerContainer">
+                <h3 class="innerLeft">{{ .StartDate }}<br />-<br/> {{ .EndDate }}</h3>
+                <div class="innerRight">
+                    <h3>{{ .Name }}</h3>
+                    <p><a href="{{ .Website }}" target="_blank" rel="noopener noreferrer">{{ .Organisation }}</a></p>
+                    <p>{{ .Qualification }}</p>
+                </div>
+            </div>
         {{ end }}
     </section>
     {{ end }}
diff --git a/layouts/partials/_experience.html b/layouts/partials/_experience.html
index 23a39af..4a60ba7 100644
--- a/layouts/partials/_experience.html
+++ b/layouts/partials/_experience.html
@@ -3,14 +3,21 @@
 <section id="section-{{ .Title | urlize }}">
     <h2><i class="{{ .Icon }}"></i> {{ .Title }}</h2>
     {{ range $data.Sections }}
-        <h3>{{ .Name }}</h3>
-        {{ .Empolyer }} {{ .Website }} {{ .StartDate }} {{ .EndDate }}
-        {{ range .Details }}
-            <p>{{ . }}</p>
-        {{ end }}
-        {{ range .Skills }}
-            <p>{{ . }}</p>
-        {{ end }}
+        <div class="innerContainer">
+            <h3 class="innerLeft">{{ .StartDate }}<br />-<br/> {{ .EndDate }}</h3>
+            <div class="innerRight">
+                <h3>{{ .Name }}</h3>
+                <p><a href="{{ .Website }}" target="_blank" rel="noopener noreferrer">{{ .Empolyer }}</a></p>
+                {{ range .Details }}
+                    <p>{{ . }}</p>
+                {{ end }}
+                <p>
+                    {{ range .Skills }}
+                        <span class="tag">{{ . }}</span>
+                    {{ end }}
+                </p>
+            </div>
+        </div>
     {{ end }}
 </section>
 {{ end }}
diff --git a/layouts/partials/_header.html b/layouts/partials/_header.html
index f06d05e..9a06d57 100644
--- a/layouts/partials/_header.html
+++ b/layouts/partials/_header.html
@@ -2,5 +2,4 @@
 {{ with $data }}
 <h1>{{ .Name }} {{ .Suffix }}</h1>
 <div class="subtitle">{{ .CurrentWorkplace }}</div>
-<hr />
 {{ end }}
diff --git a/layouts/partials/_lists.html b/layouts/partials/_lists.html
index ef84ed7..fe65d2e 100644
--- a/layouts/partials/_lists.html
+++ b/layouts/partials/_lists.html
@@ -3,10 +3,10 @@
     {{ with . }}
     <section id="section-{{ .Title | urlize }}">
         <h2><i class="{{ .Icon }}"></i> {{ .Title }}</h2>
-        <ul>
-        {{ range .Items }}
-            <li>{{ . }}</li>
-        {{ end }}
+        <ul class="listsimple">
+            {{ range .Items }}
+                <li>{{ . }}</li>
+            {{ end }}
         </ul>
     </section>
     {{ end }}
diff --git a/layouts/partials/_personaldata.html b/layouts/partials/_personaldata.html
index d4e0f78..45ce50e 100644
--- a/layouts/partials/_personaldata.html
+++ b/layouts/partials/_personaldata.html
@@ -2,8 +2,10 @@
 {{ with $data }}
 <section id="section-{{ .Title | urlize }}">
     <h2><i class="{{ .Icon }}"></i> {{ .Title }}</h2>
-    {{ range $data.Contacts }}
-        <p><i class="{{ .Icon }}"></i> {{ .Name }}: {{ .Value }}</p>
-    {{ end }}
+    <ul class="listspecial">
+        {{ range $data.Contacts }}
+            <li><strong><i class="{{ .Icon }}"></i> {{ .Name }}</strong>{{ .Value }}</p>
+        {{ end }}
+    </ul>
 </section>
 {{ end }}