From 0fa1fab78ee385d3756617e9d3ca2767404e9e13 Mon Sep 17 00:00:00 2001 From: Sebastian Pech Date: Sun, 8 Nov 2020 13:44:30 +0100 Subject: Styling --- assets/css/main.css | 92 +++++++++++++++++++++++++++++++++++-- assets/js/main.js | 8 +++- exampleSite/config.toml | 3 ++ exampleSite/data/de/content.yaml | 30 ++++++------ exampleSite/data/en/content.yaml | 30 ++++++------ layouts/partials/_briefprofile.html | 12 +++-- layouts/partials/_contacts.html | 8 ++-- layouts/partials/_education.html | 11 +++-- layouts/partials/_experience.html | 23 ++++++---- layouts/partials/_header.html | 1 - layouts/partials/_lists.html | 8 ++-- layouts/partials/_personaldata.html | 8 ++-- 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; } @@ -53,6 +57,29 @@ body.dark-theme main { background: #444444; } +/******************************************************************************* + * 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 @@

{{ .Title }}

{{ range $data.Sections }} -

{{ .Name }}

- {{ range .Items }} -

{{ . }}

- {{ end }} +
+

{{ .Name }}

+
+ {{ range .Items }} +

{{ . }}

+ {{ end }} +
+
{{ end }}
{{ 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 }}

{{ .Title }}

- {{ range $data.Contacts }} -

{{ .Name }}: {{ .Value }}

- {{ end }} + 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 @@

{{ .Title }}

{{ range .Sections }} -

{{ .Name }}

- {{ .Organisation }} {{ .Website }} {{ .StartDate }} {{ .EndDate }} - {{ .Qualification }} +
+

{{ .StartDate }}
-
{{ .EndDate }}

+
+

{{ .Name }}

+

{{ .Organisation }}

+

{{ .Qualification }}

+
+
{{ end }}
{{ 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 @@

{{ .Title }}

{{ range $data.Sections }} -

{{ .Name }}

- {{ .Empolyer }} {{ .Website }} {{ .StartDate }} {{ .EndDate }} - {{ range .Details }} -

{{ . }}

- {{ end }} - {{ range .Skills }} -

{{ . }}

- {{ end }} +
+

{{ .StartDate }}
-
{{ .EndDate }}

+
+

{{ .Name }}

+

{{ .Empolyer }}

+ {{ range .Details }} +

{{ . }}

+ {{ end }} +

+ {{ range .Skills }} + {{ . }} + {{ end }} +

+
+
{{ end }}
{{ 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 }}

{{ .Name }} {{ .Suffix }}

{{ .CurrentWorkplace }}
-
{{ 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 . }}

{{ .Title }}

-
    - {{ range .Items }} -
  • {{ . }}
    • - {{ end }} +
      + {{ range .Items }} +
    • {{ . }}
      • + {{ end }}
{{ 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 }}

{{ .Title }}

- {{ range $data.Contacts }} -

{{ .Name }}: {{ .Value }}

- {{ end }} +
    + {{ range $data.Contacts }} +
  • {{ .Name }}{{ .Value }}

    + {{ end }} +
{{ end }} -- cgit v1.2.3