From 9cc0ad75040ce6c3e4e2041d3cdc742e26d88a0a Mon Sep 17 00:00:00 2001 From: L3D Date: Thu, 20 Jan 2022 23:51:09 +0100 Subject: [PATCH] create menu, add some templates --- assets/scss/_header.scss | 291 ++++++++++++++++++++++++------- assets/scss/_start.scss | 2 +- assets/scss/_variables.scss | 3 + models/blog-post.ini | 27 +++ models/blog.ini | 16 ++ models/page.ini | 11 ++ models/start.ini | 17 ++ templates/blocks/navigation.html | 56 ++++++ templates/blog-post.html | 12 ++ templates/blog.html | 17 ++ templates/layout.html | 55 ++++++ templates/macros/blog.html | 21 +++ templates/macros/pagination.html | 29 +++ templates/page.html | 14 ++ templates/sitemap.xml | 9 + templates/start.html | 19 ++ 16 files changed, 535 insertions(+), 64 deletions(-) create mode 100644 models/blog-post.ini create mode 100644 models/blog.ini create mode 100644 models/page.ini create mode 100644 models/start.ini create mode 100644 templates/blocks/navigation.html create mode 100644 templates/blog-post.html create mode 100644 templates/blog.html create mode 100644 templates/layout.html create mode 100644 templates/macros/blog.html create mode 100644 templates/macros/pagination.html create mode 100644 templates/page.html create mode 100644 templates/sitemap.xml create mode 100644 templates/start.html diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index a51d472..34e0501 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -1,8 +1,9 @@ +$transition: 280ms all 120ms ease-out; + header { - margin: -25px -25px 0px -25px; background: $background_accent_1; - padding: 20px 30px; - box-shadow: 5px 5px 5px 10px $background_accent_1; + top: 0; + box-shadow: 0px -10000px 0px 10000px $background_accent_1; h1 a, h1 a:hover, h1 a:link, h1 a:visited { font-family: $headline_font, sans-serif; color: $font_accent_1; @@ -11,76 +12,240 @@ header { font-size: $font_size_h1; text-decoration: none; } - nav ul { - font-size: $font_size_default; - list-style: none; - margin: 0; - padding: 0; - a, a:link, a:visited { - color: $font_accent_2; - text-decoration: none; - background: $shadow_accent_1; - padding: 8px 24px; - border-radius: 5px; - text-transform: $menu_text_transform; + nav { + grid-template-rows: auto 1fr auto; + padding: 0 1rem; + position: sticky; + display: grid; + place-items: flex-start; + margin-left: -25px; + .title_dropdown { + background-color: transparent; + border: none; + font-family: inherit; } - a:hover, a:active { - color: $font_accent_2_hover; - box-shadow: 0px 0px 1px 1px $shadow_accent_1; + > ul { + grid-auto-flow: column; + > li { + margin: 0 0.5rem; + + a, .title_dropdown { + text-decoration: none; + text-align: center; + display: inline-block; + color: #fff; + font-size: 1.125rem; + + &:focus { + outline: none; + } + } + + > a, .title_dropdown { + padding: 1rem 0.5rem; + border-top: 3px solid transparent; + transition: $transition; + + &:hover, &:focus { + border-top-color: $menu_accent_hover; + color: $menu_accent_hover; + } + } + } } - li { - display: inline; - margin: 0 8px 0 0; + + ul { + list-style: none; + margin: 0; padding: 0; - } - } -} + display: grid; -@media (min-width: $large_view) { - header { - max-width: $large_min_width; - margin: auto; - box-shadow: 0px -10000px 0px 10000px $background_accent_1; - h1 a, h1 a:hover, h1 a:link { - font-size: $font_size_h1_large; - } - nav ul { - font-size: $font_size_default_large; - } - } -} - -@media (max-width: $mobile_view) { - header { - h1 a, h1 a:hover, h1 a:link { - font-size: $font_size_h1_mobile; - } - nav ul { - font-size: $font_size_default_mobile; - a, a:link, a:visited { - display: block; - padding: 5px 8px; - margin: -6px 0px; + li { + padding: 0; } } } -} -@media (max-width: $tiny_view) { - header { - h1 a, h1 a:hover, h1 a:link { - font-size: $font_size_h1_tiny; + .dropdown { + position: relative; + + .title_dropdown { + display: inline-flex; + align-items: center; + + &:after { + content: ""; + border: 0.35rem solid transparent; + border-top-color: rgba(#fff, 0.45); + margin-left: 0.25em; + transform: translateY(0.15em); + } } - nav ul { - font-size: $font_size_default_tiny; + + .dropdown__menu { + position: absolute; + min-width: 15ch; + left: 50%; + top: calc(100% - 0.25rem); + transition: $transition; + transform: rotateX(-90deg) translateX(-50%); + transform-origin: top center; + visibility: hidden; + opacity: 0.3; + padding: 0.5em 0; + background-color: $menu_background_dropdown_color; + border-radius: 4px; + box-shadow: 0 0.15em 0.25em rgba(black, 0.25); + + a { + color: $font_menu; + display: block; + padding: 0.5em; + opacity: 0; + transition: $transition; + + &:hover { + background-color: $background_accent_1; + } + + &:focus { + outline: none; + background-color: $background_accent_1; + } + } + } + + &:after { + content: ""; + border: 0.5rem solid transparent; + border-bottom-color: $menu_background_dropdown_color; + position: absolute; + top: calc(100% - 1.25rem); + left: 50%; + transform: translateX(-50%); + transition: $transition; + opacity: 0; + will-change: opacity; + } + + &:hover, &:focus-within { + .title_dropdown { + border-top-color: $menu_accent_hover; + } + + .dropdown__menu { + opacity: 1; + transform: rotateX(0) translateX(-50%); + visibility: visible; + + a { + opacity: 1; + } + } + + &:after { + opacity: 1; + } + } + + + p { + font-size: 1.125rem; + line-height: 1.5; } } } -@media (max-width: $pico_view) { - header { - h1 a, h1 a:hover, h1 a:link { - font-size: $font_size_h1_pico; - } - } -} + +// header { +// margin: -25px -25px 0px -25px; +// background: $background_accent_1; +// padding: 20px 30px; +// box-shadow: 5px 5px 5px 10px $background_accent_1; +// h1 a, h1 a:hover, h1 a:link, h1 a:visited { +// font-family: $headline_font, sans-serif; +// color: $font_accent_1; +// margin: 0; +// font-weight: bold; +// font-size: $font_size_h1; +// text-decoration: none; +// } +// nav ul { +// list-style: none; +// margin: 0; +// padding: 0; +// display: inline; +// position: relative; +// li { +// margin: 0 8px 0 0; +// padding: 0; +// a, a:link, a:visited { +// font-size: $font_size_default; +// color: $font_accent_2; +// text-decoration: none; +// background: $shadow_accent_1; +// padding: 8px 24px; +// border-radius: 5px; +// text-transform: $menu_text_transform; +// } +// a:hover, a:active { +// color: $font_accent_2_hover; +// box-shadow: 0px 0px 1px 1px $shadow_accent_1; +// } +// ul li { +// display: none; +// position: absolute; +// background: green; +// } +// } +// } +// } + +// @media (min-width: $large_view) { +// header { +// max-width: $large_min_width; +// margin: auto; +// box-shadow: 0px -10000px 0px 10000px $background_accent_1; +// h1 a, h1 a:hover, h1 a:link { +// font-size: $font_size_h1_large; +// } +// nav ul { +// font-size: $font_size_default_large; +// } +// } +// } +// +// @media (max-width: $mobile_view) { +// header { +// h1 a, h1 a:hover, h1 a:link { +// font-size: $font_size_h1_mobile; +// } +// nav ul { +// font-size: $font_size_default_mobile; +// a, a:link, a:visited { +// display: block; +// padding: 5px 8px; +// margin: -6px 0px; +// } +// } +// } +// } +// +// @media (max-width: $tiny_view) { +// header { +// h1 a, h1 a:hover, h1 a:link { +// font-size: $font_size_h1_tiny; +// } +// nav ul { +// font-size: $font_size_default_tiny; +// } +// } +// } +// +// @media (max-width: $pico_view) { +// header { +// h1 a, h1 a:hover, h1 a:link { +// font-size: $font_size_h1_pico; +// } +// } +// } diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index 39ba0dc..b8a5e19 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -5,7 +5,7 @@ div.start { display: flex; .left { flex: 45%; - text-align: center; + text-align: left; background: rgba(128,128,128,0.15); padding: 12px; box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1); diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 2bf9df3..888c4f1 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,11 +1,14 @@ $background_accent_1: rgb(247, 196, 24 ); $background_accent_2: black; +$menu_background_dropdown_color: white; +$menu_accent_hover: red; $font_accent_1: red; $font_accent_2: maroon; $font_accent_2_hover: orangered; $font_accent_3: orangered; $font_accent_4: rgb(247, 196, 24); +$font_menu: black; $font_default: white; $shadow_accent_1: rgba(255, 190, 14, 0.5); diff --git a/models/blog-post.ini b/models/blog-post.ini new file mode 100644 index 0000000..11b8490 --- /dev/null +++ b/models/blog-post.ini @@ -0,0 +1,27 @@ +[model] +name = Blog Post +label = {{ this.title }} +hidden = yes + +[fields.title] +label = Event Name +type = string +size = large + +[fields.event_start_date] +label = event start +type = date +width = 1/2 + +[fields.event_end_date] +label = event end +type = date +width = 1/2 + +[fields.preview] +label = Preview +type = markdown + +[fields.body] +label = Body +type = markdown diff --git a/models/blog.ini b/models/blog.ini new file mode 100644 index 0000000..fd707e9 --- /dev/null +++ b/models/blog.ini @@ -0,0 +1,16 @@ +[model] +name = Blog +label = Blog +hidden = true + +[fields.title] +label = Title +type = string + +[children] +model = blog-post +order_by = -event_start_date,title + +[pagination] +enabled = true +per_page = 7 diff --git a/models/page.ini b/models/page.ini new file mode 100644 index 0000000..dcddfe8 --- /dev/null +++ b/models/page.ini @@ -0,0 +1,11 @@ +[model] +name = Page +label = {{ this.title }} + +[fields.title] +label = Title +type = string + +[fields.body] +label = Body +type = markdown diff --git a/models/start.ini b/models/start.ini new file mode 100644 index 0000000..6eb5824 --- /dev/null +++ b/models/start.ini @@ -0,0 +1,17 @@ +[model] +name = Start +label = {{ this.title }} +hidden = true + +[fields.title] +label = Title +type = string + +[fields.image] +label = Image +description = Image URL Path +type = string + +[fields.body] +label = Body +type = markdown diff --git a/templates/blocks/navigation.html b/templates/blocks/navigation.html new file mode 100644 index 0000000..08c1500 --- /dev/null +++ b/templates/blocks/navigation.html @@ -0,0 +1,56 @@ +{% block navigation %} + +{% endblock %} diff --git a/templates/blog-post.html b/templates/blog-post.html new file mode 100644 index 0000000..382ca6f --- /dev/null +++ b/templates/blog-post.html @@ -0,0 +1,12 @@ +{% extends "layout.html" %} +{% from "macros/blog.html" import render_blog_post %} +{% block title %}{{ this.title }}{% endblock %} +{% block body %} + {{ render_blog_post(this) }} +{% endblock %} +{%- block class -%} + events +{%- endblock -%} +{%- block scss -%} + css/events.min.css +{%- endblock -%} diff --git a/templates/blog.html b/templates/blog.html new file mode 100644 index 0000000..619d1af --- /dev/null +++ b/templates/blog.html @@ -0,0 +1,17 @@ +{% extends "layout.html" %} +{% from "macros/blog.html" import render_blog_post %} +{% from "macros/pagination.html" import render_pagination %} +{% block title %}{{ this.title }}{% endblock %} +{% block body %} + {% for child in this.pagination.items %} + {{ render_blog_post(child, from_index=true) }} + {% endfor %} + + {{ render_pagination(this.pagination) }} +{% endblock %} +{%- block class -%} + events +{%- endblock -%} +{%- block scss -%} + css/events.min.css +{%- endblock -%} diff --git a/templates/layout.html b/templates/layout.html new file mode 100644 index 0000000..ee08778 --- /dev/null +++ b/templates/layout.html @@ -0,0 +1,55 @@ + +{%- macro titlestring() -%} + {%- block title -%} + Welcome + {%- endblock -%} + {{ ' — chaoswest.tv' }} +{%- endmacro -%} +{%- macro descriptionstring() -%} + {%- block description -%} + Winkekatze Video Operation Center + {%- endblock -%} + {{ ' — chaoswest.tv' }} +{%- endmacro -%} +{%- macro cssfile() -%} + {%- block scss -%} + css/main.min.css + {%- endblock -%} +{%- endmacro -%} + + + + + {{- titlestring() -}} + + + + + + + + + + + + +
+

+ {%- block sitetitle -%} + chaoswest.tv + {%- endblock -%} +

+ {%- include "blocks/navigation.html" -%} +
+
+ {%- block body -%} +

Hello World

+ {%- endblock %} +
+ + diff --git a/templates/macros/blog.html b/templates/macros/blog.html new file mode 100644 index 0000000..47bc21b --- /dev/null +++ b/templates/macros/blog.html @@ -0,0 +1,21 @@ +{%- macro render_blog_post(post, from_index=false) %} +
+ {% if from_index -%} +

{{ post.title }}

+ {% else -%} +

{{ post.title }}

+ {% endif -%} +

+ {% if post.event_start_date != post.event_end_date -%} + Vom {{ post.event_start_date | dateformat('long', locale=post.alt ) }} bis {{ post.event_end_date | dateformat('long', locale=post.alt) }}. + {%- else -%} + Am {{ post.event_start_date | dateformat('long', locale=post.alt) }}. + {%- endif %} +

+ {% if from_index -%} + {{ post.preview }} + {% else -%} + {{ post.body }} + {% endif -%} +
+{% endmacro -%} diff --git a/templates/macros/pagination.html b/templates/macros/pagination.html new file mode 100644 index 0000000..4fa1f42 --- /dev/null +++ b/templates/macros/pagination.html @@ -0,0 +1,29 @@ +{%- macro render_pagination(pagination) %} + +{% endmacro -%} diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..68ea9d7 --- /dev/null +++ b/templates/page.html @@ -0,0 +1,14 @@ +{%- extends "layout.html" -%} +{%- block title -%} + {{- this.title -}} +{%- endblock -%} +{%- block body -%} +

{{ this.title }}

+ {{ this.body }} +{%- endblock -%} +{%- block class -%} + page +{%- endblock -%} +{%- block scss -%} + css/main.min.css +{%- endblock -%} diff --git a/templates/sitemap.xml b/templates/sitemap.xml new file mode 100644 index 0000000..8c832fe --- /dev/null +++ b/templates/sitemap.xml @@ -0,0 +1,9 @@ + + + {%- for page in [site.root] if page != this recursive %} + {%- if not page.hide_from_global_index %} + {{ page|url(external=true) }} + {{- loop(page.children) }} + {%- endif %} + {%- endfor %} + diff --git a/templates/start.html b/templates/start.html new file mode 100644 index 0000000..291d3e2 --- /dev/null +++ b/templates/start.html @@ -0,0 +1,19 @@ +{%- extends "layout.html" -%} +{%- block title -%} + {{- this.title -}} +{%- endblock -%} +{%- block body %} +
+

{{ this.title }}

+ {{ this.body }} +
+
+ +
+{% endblock -%} +{%- block class -%} + start +{%- endblock -%} +{%- block scss -%} + css/start.min.css +{%- endblock -%}