From 691c456a44077daff135ca2d218c038104f05913 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sat, 20 Feb 2021 16:34:03 +0100 Subject: [PATCH 1/7] WIP: Fixed color of top triangle. Fixed z-index of nav. --- assets/css/style.css | 1 + assets/images/header_top_triangles.svg | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/style.css b/assets/css/style.css index 9495505..35cbaf8 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -52,6 +52,7 @@ body { justify-content: flex-end; background-color: var(--wtf-light-grey); + z-index: 20; } .primary_nav__toggle { diff --git a/assets/images/header_top_triangles.svg b/assets/images/header_top_triangles.svg index 1dc89cd..9b1bb86 100644 --- a/assets/images/header_top_triangles.svg +++ b/assets/images/header_top_triangles.svg @@ -8,7 +8,7 @@ - + From 2807e7e582cd9c7e5c99fee0faff45812b721dde Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 11:37:22 +0100 Subject: [PATCH 2/7] Slim header and pixel header now in full working condition. --- assets/css/style.css | 105 ++++++----- .../images/header_top_triangles_dark_blue.svg | 12 ++ templates/header_slim.html | 132 ++++++------- templates/header_with_logo.html | 178 +++++++++--------- templates/homepage.html | 2 +- 5 files changed, 229 insertions(+), 200 deletions(-) create mode 100644 assets/images/header_top_triangles_dark_blue.svg diff --git a/assets/css/style.css b/assets/css/style.css index 35cbaf8..5cfa1c3 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -249,19 +249,19 @@ header { margin-top: -0.75rem; display: grid; - grid-template-rows: 46px 18px 0rem 1rem 55px 18px auto; + grid-template-rows: 46px 18px; grid-template-columns: 15% 82px auto 96px 22.5%; z-index: 0; } -.bg_box__top_bar_left { +.bg_box__top_bar_left, .slim_box__top_bar_left { grid-row: 2 / span 1; grid-column: 1 / span 3; background-color: var(--wtf-light-blue); z-index: 5; } -.bg_box__top_bar_middle { +.bg_box__top_bar_middle, .slim_box__top_bar_middle { grid-row: 1 / span 2; grid-column: 4 / span 1; background-image: url("../images/header_top_triangles.svg"); @@ -269,13 +269,21 @@ header { z-index: 5; } -.bg_box__top_bar_right { +.slim_box__top_bar_middle { + background-image: url("../images/header_top_triangles_dark_blue.svg"); +} + +.bg_box__top_bar_right, .slim_box__top_bar_right { grid-row: 1 / span 2; grid-column: 5 / span 1; - /* background-color: var(--wtf-light-orange); */ + background-color: transparent; z-index: 5; } +.slim_box__top_bar_right { + background-color: var(--wtf-dark-blue); +} + .bg_box__unicorns { grid-row: 2 / span 6; grid-column: 1 / span 5; @@ -289,14 +297,12 @@ header { .bg_box__big_bg { grid-row: 3 / span 2; grid-column: 1 / span 5; - /* background-color: var(--wtf-light-orange); */ z-index: 5; } .bg_box__bottom_bar_left { grid-row: 5 / span 1; grid-column: 1 / span 3; - /* background-color: var(--wtf-light-orange); */ z-index: 5; } @@ -362,7 +368,6 @@ header { .header__sub_claim { grid-row: 4 / span 4; grid-column: 3 / span 3; - /*margin: 0 2rem 1.5rem 1.5rem;*/ margin: 1rem 2rem -3rem 1.5rem; padding: 0.5rem 1.5rem 0 1.5rem; background-color: var(--wtf-orange); @@ -415,7 +420,7 @@ header { /* main - Start */ main { - margin: 0.75rem 0 0 0; + margin: 0; display: flex; flex-direction: column; justify-content: center; @@ -523,8 +528,12 @@ li { padding: 0; } +.content__inner_box.-logo_header { + margin: 3.5rem 1.5rem 0 1.5rem; +} + .content__inner_box { - margin: 2.5rem 1.5rem 0 1.5rem; + margin: -0.5rem 1.5rem 0 1.5rem; } .nav__wrapper, .header__wrapper, .content__box, .footer__wrapper { @@ -583,12 +592,6 @@ footer { /* footer - Ende */ @media screen and (min-width: 1200px) { - /* - .header__bg_box { - grid-template-columns: 15% 82px auto 96px 22.5%; - } - */ - .primary_nav__members, .primary_nav__lang_switch { display: none; } @@ -600,6 +603,10 @@ footer { .primary_nav__navlist { display: flex !important; } + + .content__inner_box { + margin: -0.5rem 1.5rem 0 1.5rem; + } } @media screen and (min-width: 1100px) and (max-width: 1200px) { @@ -622,6 +629,10 @@ footer { .primary_nav__navlist { display: flex !important; } + + .content__inner_box { + margin: -0.5rem 1.5rem 0 1.5rem; + } } @media screen and (max-width: 1099px) and (min-width: 910px) { @@ -654,7 +665,7 @@ footer { } .content__inner_box { - margin-top: 2.5rem; + margin: -0.5rem 1.5rem 0 1.5rem; } } @@ -688,6 +699,10 @@ footer { .secondary_nav__navlist { margin-right: 0.5rem; } + + .content__inner_box { + margin: -0.5rem 1.5rem 0 1.5rem; + } } @media screen and (max-width: 959px) and (min-width: 790px) { @@ -710,18 +725,9 @@ footer { .header__sub_claim { grid-column: 1 / span 5; padding: 0; - /*margin: 0 1.5rem;*/ margin: 2rem 1.5rem -3rem 1.5rem; } - .content__inner_box { - margin-top: 2.5rem; - } - - main { - margin-top: 0.75rem; - } - .header__top_box .header__button { display: auto; } @@ -741,6 +747,10 @@ footer { .secondary_nav__navlist { margin-right: 0.5rem; } + + .content__inner_box { + margin: -0.5rem 1.5rem 0 1.5rem; + } } @media screen and (max-width: 850px) and (min-width: 790px) { @@ -775,10 +785,6 @@ footer { .secondary_nav__navlist { margin-right: 0.5rem; } - - .content__inner_box { - margin: 2.5rem 1.5rem 0 1.5rem; - } } @media screen and (max-width: 789px) and (min-width: 596px) { @@ -786,7 +792,7 @@ footer { --column-count: 2 } - header, .header__bg_box { + header, .header__bg_box, .header__slim_box { display: flex; flex-direction: column; justify-content: center; @@ -796,10 +802,6 @@ footer { background-image: none; } - main { - margin: 0; - } - .bg_box__top_bar_left, .bg_box__top_bar_middle, .bg_box__top_bar_right, @@ -812,6 +814,15 @@ footer { display: none; } + .slim_box__top_bar_left { + margin-top: 1rem; + height: 1.125rem; + } + + .slim_box__top_bar_middle, .slim_box__top_bar_right { + display: none; + } + .header__claim { margin: 1.2rem 1.5rem 0 1.5rem; grid-row: 3 / span 1; @@ -862,7 +873,7 @@ footer { display: flex !important; } - .content__inner_box { + .content__inner_box.-logo_header { margin: -0.5rem 1.5rem 0 1.5rem; } } @@ -884,7 +895,7 @@ footer { display: block; } - header, .header__bg_box { + header, .header__bg_box, .header__slim_box { display: flex; flex-direction: column; justify-content: center; @@ -894,6 +905,10 @@ footer { background-image: none; } + .header__slim_box { + margin-top: -3rem; + } + .header__claim { margin: 0.5rem 0.5rem 0 0.5rem; grid-row: 3 / span 1; @@ -921,10 +936,6 @@ footer { font-size: 2rem; } - main { - margin-top: 0.75rem; - } - .bg_box__top_bar_left, .bg_box__top_bar_middle, .bg_box__top_bar_right, @@ -937,8 +948,14 @@ footer { display: none; } - main { - margin-top: 0; + .slim_box__top_bar_left { + grid-column: 1 / span 5; + margin-top: 3rem; + height: 1.125rem; + } + + .slim_box__top_bar_middle, .slim_box__top_bar_right { + display: none; } .sub_claim__box { @@ -1014,7 +1031,7 @@ footer { } /* mobile nav - Ende */ - .content__inner_box { + .content__inner_box.-logo_header { margin: -0.5rem 1.5rem 0 1.5rem; } } diff --git a/assets/images/header_top_triangles_dark_blue.svg b/assets/images/header_top_triangles_dark_blue.svg new file mode 100644 index 0000000..a08cad2 --- /dev/null +++ b/assets/images/header_top_triangles_dark_blue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/templates/header_slim.html b/templates/header_slim.html index 78cea5d..6f25de3 100644 --- a/templates/header_slim.html +++ b/templates/header_slim.html @@ -1,72 +1,72 @@ {% extends "layout.html" %} {% block header %}
-
- - {% if '/images/wtf_logo.svg'|asseturl is defined -%} - - {%- endif %} - -
- +
+ + {% if '/images/wtf_logo.svg'|asseturl is defined -%} + + {%- endif %} +
-
-
+
+ - -
-
-
+
    + {% for title, mapping in bag("navigation").items() %} + {% if mapping.visible|default(true) %} +
  • + + {{ title }} + + {% if mapping.list_childs %} +
      + {% set sub_menu = mapping['items'].items() %} + {% for sub_title, href in sub_menu %} +
    • + + {{ sub_title }} + +
      • + {% endfor %} +
    + {% endif %} +
    • + {% endif %} + {% endfor %} +
+ +
+
+
+
{% endblock %} diff --git a/templates/header_with_logo.html b/templates/header_with_logo.html index 06d758a..dee2f93 100644 --- a/templates/header_with_logo.html +++ b/templates/header_with_logo.html @@ -1,95 +1,95 @@ {% extends "layout.html" %} {% block header %}
-
- - {% if '/images/wtf_logo.svg'|asseturl is defined -%} - - {%- endif %} - +
+ + {% if '/images/wtf_logo.svg'|asseturl is defined -%} + + {%- endif %} + +
+ +
+
+
-
- - -
-
-
-
-
-
-
-
-
- -
- - {{ this.claim_heading }} - {{ this.claim_content }} -
-
-
- {{ this.subclaim_heading }} - {{ this.subclaim_content }} -
- - -
-
+
    + {% for title, mapping in bag("navigation").items() %} + {% if mapping.visible|default(true) %} +
  • + + {{ title }} + + {% if mapping.list_childs %} +
      + {% set sub_menu = mapping['items'].items() %} + {% for sub_title, href in sub_menu %} +
    • + + {{ sub_title }} + +
      • + {% endfor %} +
    + {% endif %} +
    • + {% endif %} + {% endfor %} +
+ + +
+
+
+
+
+
+
+
+
+ +
+ + {{ this.claim_heading }} + {{ this.claim_content }} +
+
+
+ {{ this.subclaim_heading }} + {{ this.subclaim_content }} +
+ + +
+
{% endblock %} diff --git a/templates/homepage.html b/templates/homepage.html index 95dbc48..0909236 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -1,7 +1,7 @@ {% extends "header_with_logo.html" %} {% block body %}
-
+

{{ this.title }}

From 65405f3352b96376a741f900493685097fd73465 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 14:47:31 +0100 Subject: [PATCH 3/7] Whitespace. --- templates/homepage.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/templates/homepage.html b/templates/homepage.html index 0909236..ebccd96 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -7,15 +7,15 @@
{% for blk in this.section.blocks %} -
- {% if blk.title %} -
-
-

{{ blk.title }}

-
+
+ {% if blk.title %} +
+
+

{{ blk.title }}

- {% endif %} - {{ blk }} -
+
+ {% endif %} + {{ blk }} +
{% endfor %} {% endblock %} From d526ca08f870090e8ab9e3b3afa34a1374a79601 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 17:01:13 +0100 Subject: [PATCH 4/7] Rearrangeing style.css. --- assets/css/style.css | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 5cfa1c3..e7c6844 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -475,22 +475,6 @@ p { margin-bottom: 0.5rem; } -.content__box p, .content__box li { - hyphens: auto; -} - -.content__box a { - color: var(--wtf-orange); -} - -.content__box a:hover { - color: var(--wtf-light-blue); -} - -.content__box a:visited { - color: var(--wtf-dark-blue); -} - ul { list-style: disc; } @@ -528,6 +512,22 @@ li { padding: 0; } +.content__box p, .content__box li { + hyphens: auto; +} + +.content__box a, .pagination__anchor { + color: var(--wtf-orange); +} + +.content__box a:hover, .pagination__anchor:hover { + color: var(--wtf-light-blue); +} + +.content__box a:visited, .pagination__anchor:visited { + color: var(--wtf-dark-blue); +} + .content__inner_box.-logo_header { margin: 3.5rem 1.5rem 0 1.5rem; } From 3339bed649fcc3fc6906f1f1e5e1cd14e0405735 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 17:01:40 +0100 Subject: [PATCH 5/7] Adding very light blue color. --- assets/css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/style.css b/assets/css/style.css index e7c6844..c615c9b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -19,6 +19,7 @@ /* WTF Farben gemäß https://git.vebit.xyz/vebit/swag/src/branch/master/README.markdown */ --wtf-orange: #f60; --wtf-light-orange: #ffcba9; + --wtf-very-light-blue: #cfe2ff; --wtf-light-blue: #2a7fff; --wtf-dark-blue: #003380; --wtf-night-blue: #00173B; From 4811b9d517443bac11e24f9f5079c30ef59808fc Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 17:02:36 +0100 Subject: [PATCH 6/7] Removed unnecessary stuff from templates. --- templates/homepage.html | 2 +- templates/page.html | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/homepage.html b/templates/homepage.html index ebccd96..bcfbd7b 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -7,7 +7,7 @@
{% for blk in this.section.blocks %} -
+
{% if blk.title %}
diff --git a/templates/page.html b/templates/page.html index 1ba223e..80b4280 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,12 +1,12 @@ {% extends "header_slim.html" %} {% block title %}{{ this.title }}{% endblock %} {% block body %} -
-
-
-

{{ this.title }}

-
+
+
+

{{ this.title }}

+
+
{{ this.body }} From 13fe7f5f62f86f1c97d69aaadb8621c22647fd18 Mon Sep 17 00:00:00 2001 From: Stephan Date: Sun, 21 Feb 2021 17:03:49 +0100 Subject: [PATCH 7/7] Added a blog to the site. --- assets/css/style.css | 46 ++++++++++++++++++++++++++++++++ content/blog/contents.lr | 3 +++ databags/navigation.json | 4 +-- models/blog-post.ini | 23 ++++++++++++++++ models/blog.ini | 16 +++++++++++ templates/blog-post.html | 10 +++++++ templates/blog.html | 17 ++++++++++++ templates/macros/blog.html | 22 +++++++++++++++ templates/macros/pagination.html | 23 ++++++++++++++++ 9 files changed, 162 insertions(+), 2 deletions(-) create mode 100644 content/blog/contents.lr create mode 100644 models/blog-post.ini create mode 100644 models/blog.ini create mode 100644 templates/blog-post.html create mode 100644 templates/blog.html create mode 100644 templates/macros/blog.html create mode 100644 templates/macros/pagination.html diff --git a/assets/css/style.css b/assets/css/style.css index c615c9b..3845aab 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -500,6 +500,19 @@ li { margin-left: 1rem; } +i { + font-family: 'Lato Italic', sans-serif; +} + +hr { + color: var(--nearly-black); + margin: 0.25rem 0; +} + +hr.-even { + color: var(--wtf-light-grey); +} + .content { padding: 1.5rem 0; width: 100%; @@ -508,6 +521,18 @@ li { justify-content: center; } +.content__blog_link.-odd { + color: var(--nearly-black) !important; +} + +.content__blog_link.-even { + color: var(--wtf-very-light-blue) !important; +} + +.content__blog_link:hover { + color: var(--wtf-mid-grey) !important; +} + .content__box { margin: 0 auto; padding: 0; @@ -529,6 +554,10 @@ li { color: var(--wtf-dark-blue); } +.pagination__anchor.-even:visited { + color: var(--wtf-light-blue); +} + .content__inner_box.-logo_header { margin: 3.5rem 1.5rem 0 1.5rem; } @@ -537,6 +566,19 @@ li { margin: -0.5rem 1.5rem 0 1.5rem; } +.content__pagination { + text-align: center; +} + + +.content__pagination.-even { + color: var(--wtf-light-grey); +} + +.pagination__anchor.-even { + +} + .nav__wrapper, .header__wrapper, .content__box, .footer__wrapper { width: 100%; max-width: 1200px; @@ -544,6 +586,10 @@ li { widows: 2; } +.content__box.-heading { + margin-bottom: 1.5rem; +} + .content__box.-columns { -webkit-column-count: var(--column-count); -moz-column-count: var(--column-count); diff --git a/content/blog/contents.lr b/content/blog/contents.lr new file mode 100644 index 0000000..b49311a --- /dev/null +++ b/content/blog/contents.lr @@ -0,0 +1,3 @@ +_model: blog +--- +title: Aktuelles diff --git a/databags/navigation.json b/databags/navigation.json index 9be06ce..e2a05b2 100644 --- a/databags/navigation.json +++ b/databags/navigation.json @@ -17,8 +17,8 @@ }, "Aktuelles": { "href": "/blog", - "visible": false, - "list_childs": true, + "visible": true, + "list_childs": false, "items": {} }, "Kontakt": { diff --git a/models/blog-post.ini b/models/blog-post.ini new file mode 100644 index 0000000..e097be3 --- /dev/null +++ b/models/blog-post.ini @@ -0,0 +1,23 @@ +[model] +name = Blog Post +label = {{ this.title }} +hidden = yes + +[fields.title] +label = Title +type = string +size = large + +[fields.author] +label = Author +type = string +width = 1/2 + +[fields.pub_date] +label = Publication date +type = date +width = 1/2 + +[fields.body] +label = Body +type = markdown diff --git a/models/blog.ini b/models/blog.ini new file mode 100644 index 0000000..0a3a3ca --- /dev/null +++ b/models/blog.ini @@ -0,0 +1,16 @@ +[model] +name = Blog +label = Blog +hidden = yes + +[fields.title] +label = Title +type = string + +[children] +model = blog-post +order_by = -pub_date, title + +[pagination] +enabled = yes +per_page = 10 diff --git a/templates/blog-post.html b/templates/blog-post.html new file mode 100644 index 0000000..33dc66c --- /dev/null +++ b/templates/blog-post.html @@ -0,0 +1,10 @@ +{% extends "header_slim.html" %} +{% from "macros/blog.html" import render_blog_post %} +
+
+

{{ this.title }}

+
+
+{% block body %} + {{ render_blog_post(this) }} +{% endblock %} diff --git a/templates/blog.html b/templates/blog.html new file mode 100644 index 0000000..154cd32 --- /dev/null +++ b/templates/blog.html @@ -0,0 +1,17 @@ +{% extends "header_slim.html" %} +{% from "macros/blog.html" import render_blog_post %} +{% from "macros/pagination.html" import render_pagination %} + +{% block body %} +
+
+

{{ this.title }}

+
+
+ {% for blog_post in this.pagination.items %} + {{ render_blog_post(blog_post, from_index=true, section_class=loop.cycle('-odd', '-even')) }} + {% if loop.index == loop.length %} + {{ render_pagination(this.pagination, loop.length is odd) }} + {% endif %} + {% endfor %} +{% endblock %} diff --git a/templates/macros/blog.html b/templates/macros/blog.html new file mode 100644 index 0000000..062a57f --- /dev/null +++ b/templates/macros/blog.html @@ -0,0 +1,22 @@ +{% macro render_blog_post(post, from_index=false, section_class='-odd') %} +
+
+
+ {% if from_index %} +

{{ post.title }}

+ {% else %} +

{{ post.title }}

+ {% endif %} +
+

+ geschrieben von {{ post.author }} am {{ post.pub_date }} +

+
+
+
+
+ {{ post.body }} +
+
+
+{% endmacro %} diff --git a/templates/macros/pagination.html b/templates/macros/pagination.html new file mode 100644 index 0000000..f733c2c --- /dev/null +++ b/templates/macros/pagination.html @@ -0,0 +1,23 @@ +{% macro render_pagination(pagination, odd) %} + {% if pagination.has_next or pagination.has_prev %} +
+
+
+
+ {% if pagination.has_prev %} + « Previous + {% else %} + « Previous + {% endif %} + | {{ pagination.page }} | + {% if pagination.has_next %} + Next » + {% else %} + Next » + {% endif %} +
+
+
+
+ {% endif %} +{% endmacro %}