From 17fdb4f3be9428936aa92d9fec2ac77c7a9e1a04 Mon Sep 17 00:00:00 2001 From: Reto Bollinger Date: Tue, 19 Nov 2024 10:14:15 +0100 Subject: [PATCH 1/6] Converting termine from table to list as a basis for responsive quirks --- .../project/content/termine/contents.lr | 62 ++++++++++++++----- lektor/lektordata/scripts/calendar-fetcher.sh | 34 +++++++--- 2 files changed, 75 insertions(+), 21 deletions(-) diff --git a/lektor/lektordata/project/content/termine/contents.lr b/lektor/lektordata/project/content/termine/contents.lr index 0f4b9fd..dbdfe0c 100644 --- a/lektor/lektordata/project/content/termine/contents.lr +++ b/lektor/lektordata/project/content/termine/contents.lr @@ -4,18 +4,52 @@ title: Termine --- body: -| **Datum** | **Anlass** | **Zeit** | **Ort** | -|-------|--------|------|-----| -| So. 8. Dezember 2024 | Pistolen Gangfisch Schiessen | | Ermatingen | -| Sa. 14. Dezember 2024 | Pistolen Gangfisch Schiessen | | Ermatingen | -| So. 15. Dezember 2024 | Pistolen Gangfisch Schiessen | | Ermatingen | -| Do. 2. Januar 2025 | 40. Appenzeller Luftpistolenmeisterschaft 2025 | | | -| Do. 9. Januar 2025 | 40. Appenzeller Luftpistolenmeisterschaft 2025 | | | -| So. 12. Januar 2025 | Appenzeller Lupi Meisterschaft | | | -| Sa. 20. September 2025 | Schwaderlohschiessen | 13:00 | | -| Di. 23. September 2025 | Schwaderlohschiessen | 17:00 | | -| Sa. 27. September 2025 | Schwaderlohschiessen | | | -| So. 28. September 2025 | Schwaderlohschiessen | | | -| Do. 23. August 2029 | Bezirkssommerschiessen | 18:00 | | -| Do. 30. August 2029 | Bezirkssommerschiessen | 18:00 | | +*
Pistolen Gangfisch Schiessen
  + *
So. 8. Dezember 2024
  + *
 
  + *
Ermatingen
  +*
Pistolen Gangfisch Schiessen
  + *
Sa. 14. Dezember 2024
  + *
 
  + *
Ermatingen
  +*
Pistolen Gangfisch Schiessen
  + *
So. 15. Dezember 2024
  + *
 
  + *
Ermatingen
  +*
40. Appenzeller Luftpistolenmeisterschaft 2025
  + *
Do. 2. Januar 2025
  + *
 
  + *
 
  +*
40. Appenzeller Luftpistolenmeisterschaft 2025
  + *
Do. 9. Januar 2025
  + *
 
  + *
 
  +*
Appenzeller Lupi Meisterschaft
  + *
So. 12. Januar 2025
  + *
 
  + *
 
  +*
Schwaderlohschiessen
  + *
Sa. 20. September 2025
  + *
13:00
  + *
 
  +*
Schwaderlohschiessen
  + *
Di. 23. September 2025
  + *
17:00
  + *
 
  +*
Schwaderlohschiessen
  + *
Sa. 27. September 2025
  + *
 
  + *
 
  +*
Schwaderlohschiessen
  + *
So. 28. September 2025
  + *
 
  + *
 
  +*
Bezirkssommerschiessen
  + *
Do. 23. August 2029
  + *
18:00
  + *
 
  +*
Bezirkssommerschiessen
  + *
Do. 30. August 2029
  + *
18:00
  + *
 
  diff --git a/lektor/lektordata/scripts/calendar-fetcher.sh b/lektor/lektordata/scripts/calendar-fetcher.sh index 111f93a..faf036f 100755 --- a/lektor/lektordata/scripts/calendar-fetcher.sh +++ b/lektor/lektordata/scripts/calendar-fetcher.sh @@ -17,13 +17,33 @@ echo "title: Termine" echo "---" echo "body:" echo "" -echo "| **Datum** | **Anlass** | **Zeit** | **Ort** |" -echo "|-------|--------|------|-----|" #original statement: #awk 'BEGIN{FS=":"}/^DTSTART/{dtstart=$2}/^SUMMARY/{summary=$2}/^END:VEVENT/{print substr(dtstart,7,2)"/"substr(dtstart,5,2)"/"substr(dtstart,1,4),sprintf("%02d",substr(dtstart,10,2)+3)":"substr(dtstart,12,2),summary}' file.txt #from here: https://stackoverflow.com/questions/74111401/parse-ics-and-create-output +#OK what the heck are we doing here? TBH I even do not know exactly myself +# First we iterate over the ICS items looking for DTSTART, SUMMARY, LOCATION and END:VEVENT +# as soon as we found an END:VEVENT we consider that an event and start processing it +# if we havent found DTSTART, SUMMARY OR LOCATION for that event (actually rather just since last itartion step, that's why at the end we empty those variables) +# we insert "19700101T000000" for dtstart and " " for the other variables. +# As whole day events have a starting time of exactly 00:00 we consider this starting time equivalent to a whole day event. +# Yes, that' means we can't have all those midnight parties as those turn into whole day events. +# Once we have this all collected we print that into the markdown representation of a list item with a sublist for the subsequent fields +# We wrap each string into a div as Summaries like "40. Appenzeller Luftpistolenmeisterschaft 2025" would be rendered int a numbered list representation in markdown +# turning it into "1. Appenzeller Luftpistolenmeisterschaft 2025" which gives it a completely different meaning +# But! Beware: we are for one not printing the newlines (except for one at the end of eac event) and for the other our lines start with a YYYYMMDD representation of the date +# So we have for each event a line starting with YYYYMMDD followed by the markdown representation of a list item containing a sublist with all fields terminated with a newline +# Thats the first awk command +# Second awk command filters all lines which are in the past (yes, most probably this could have been done in the first awk call as well) +# Now we sort those remaining lines as they come in absolute random order (that's the reason for having an event squeezed on one line, and starting the line with YYYYMMDD representation of te event date) +# Now we no longer need the leading timestamp so we cut it off +# Last thing to do is to expand the list items into separate lines so they are actually markdown +# I chose a very simple approach: As each field is wrapped in a div I just use closing div tag as indication (this breaks if a calendar-entry contains HTML with a div element) +# Additionally after the closing tag I add an additional  . +# This is due to a limitation of the list rendered which does not render the sub-list if the last sub-list item terminates with a closing div tag +# and finally I trim excessive linefeeds (aboave approach leads to double linefeeds after an event as the event was already a seperate line and adding linefeeds adds then one too much) + echo "$ICS_DATA" | awk 'BEGIN{FS=":"} /^DTSTART/{dtstart=$2} /^SUMMARY/{summary=$2} @@ -32,8 +52,8 @@ echo "$ICS_DATA" | awk 'BEGIN{FS=":"} gsub(/\r/, "", summary) gsub(/\r/, "", location) if (dtstart == "") dtstart = "19700101T000000" - if (summary == "") summary = " " - if (location == "") location = " " + if (summary == "") summary = " " + if (location == "") location = " " date_str = substr(dtstart, 1, 4) "-" substr(dtstart, 5, 2) "-" substr(dtstart, 7, 2) cmd = "LC_ALL=de_DE.UTF-8 date -d \"" date_str "\" +%a" @@ -49,12 +69,12 @@ echo "$ICS_DATA" | awk 'BEGIN{FS=":"} starttime=sprintf("%02d:%02d", substr(dtstart,10,2), substr(dtstart,12,2)) summarystring=sprintf("%s", summary) locationstring=sprintf("%s", location) - wholeline=sprintf("%s | %s | %s | %s | %s |", orderstartdate, realstartdate, summarystring, starttime, location) - gsub(/\| 00:00 \|/, "| |", wholeline) + wholeline=sprintf("%s *
%s
*
%s
*
%s
*
%s
", orderstartdate, summarystring, realstartdate, starttime, location) + gsub(/
00:00<\/div>/, "
\ 
", wholeline) print wholeline dtstart="" summary="" location="" -}' | awk -v today="$TODAY" 'substr($1,1,8) >= today' | sort | awk '{$1=""}1' | awk '{$1=$1}1' +}' | awk -v today="$TODAY" 'substr($1,1,8) >= today' | sort | cut -d " " -f 2- | sed 's@
@\ \n@g' | sed '/^$/d' echo "" From 4a6b860432923bc96adfaade41c71826d674382f Mon Sep 17 00:00:00 2001 From: Reto Bollinger Date: Tue, 19 Nov 2024 12:16:08 +0100 Subject: [PATCH 2/6] Wooohaaa! Look! I did magic: I converted a list into a table. How beautiful ist that? --- .../project/assets/static/style.css | 78 +++++++++++++++++-- .../project/content/about/contents.lr | 2 + .../project/content/termine/contents.lr | 3 + .../project/content/vorstand/contents.lr | 2 + lektor/lektordata/project/templates/page.html | 2 +- .../project/templates/termine_page.html | 8 ++ .../project/templates/title_page.html | 2 +- lektor/lektordata/scripts/calendar-fetcher.sh | 3 + 8 files changed, 92 insertions(+), 8 deletions(-) create mode 100644 lektor/lektordata/project/templates/termine_page.html diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css index 62ecdcc..f194a5a 100644 --- a/lektor/lektordata/project/assets/static/style.css +++ b/lektor/lektordata/project/assets/static/style.css @@ -39,21 +39,31 @@ div.page,footer,header { } div.page { - color: #6c7d8c + color: #6c7d8c; } div.page>div.inner_page,footer>div.inner_footer,header>div.inner_header { - padding: 20px 30px + padding: 20px 30px; } -div.inner_page>* { - margin: 0 +div.inner_page > * { + margin: 0; + padding:0 ; } -body,div.page h1,div.page h2,div.page h3,div.page h4,div.page h5,div.page h6 { - color: #5d5d5d + +body,div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6 { + color: #5d5d5d; + padding: 20px 30px; + margin: 0; } +body,div.inner_page h1, div.inner_page h2, div.inner_page h3, div.inner_page h4, div.inner_page h5, div.inner_page h6 { + color: #5d5d5d; + padding: 0; +} + + div.inner_page { position: relative; top: 0; @@ -109,6 +119,62 @@ div.page { width: 283.66px } + + +.termine *{ + box-sizing: border-box; +} + + +.termine ul { + list-style: none; + padding: 0; + margin: 0; +} + +.termine li { + display: flex; + margin-bottom: 10px; +} + + +.termine ul > li { + font-weight: bold; + width: 1000px; +} +.termine ul > li > div { + width: 500px; + font-size: 0.75vw; +} + + +.termine ul > li > ul > li { + width: 175px; +} + +.termine ul > li > ul > li:nth-child(1){ + width: 250px; +} + +.termine ul > li > ul > li:nth-child(2){ + width: 75px; +} + +.termine ul > li > ul { + display: flex; + padding-left: 0; + margin-left: 0; +} + +.termine ul > li > ul > li { + margin-right: 0; +} + +.termine ul > li > ul > li > div{ + font-size: 0.75vw; +} + + @media (max-width:768px) { header h1 { font-size: 3.15vw diff --git a/lektor/lektordata/project/content/about/contents.lr b/lektor/lektordata/project/content/about/contents.lr index d8d96a8..e9c08b8 100644 --- a/lektor/lektordata/project/content/about/contents.lr +++ b/lektor/lektordata/project/content/about/contents.lr @@ -34,3 +34,5 @@ Ob im Training oder an Schützenfesten, überall sind Mitglieder des Pistolenclu | **2010** | | Einbau künstliche Kugelfänge System Leu + Helfenstein.
Umbau 50m Zugscheibenanlage von System Schmalz Uster auf System Leu + Helfenstein.
Einbau neuer Motoren und Steuerung. | | | | | | **2015** | | Einbau Schallschutzwände standseitig und Verkleidung der Hochblende mit Schalldämmplatten. | +--- +_template: page.html diff --git a/lektor/lektordata/project/content/termine/contents.lr b/lektor/lektordata/project/content/termine/contents.lr index dbdfe0c..c077d7c 100644 --- a/lektor/lektordata/project/content/termine/contents.lr +++ b/lektor/lektordata/project/content/termine/contents.lr @@ -53,3 +53,6 @@ body: *
18:00
  *
 
  +--- +_template: termine_page.html + diff --git a/lektor/lektordata/project/content/vorstand/contents.lr b/lektor/lektordata/project/content/vorstand/contents.lr index 050136e..ae422d5 100644 --- a/lektor/lektordata/project/content/vorstand/contents.lr +++ b/lektor/lektordata/project/content/vorstand/contents.lr @@ -12,3 +12,5 @@ body: | **Müller Konrad** | 1. Schützenmeister | schiesswesen@pc-stammertal.ch | | **Bollinger Reto** | Schützenmeister, Beisitz | beisitz@pc-stammertal.ch | | **Horvath Richard** | Schützenmeister, Fähnrich, Standwart | infrastruktur@pc-stammertal.ch | +--- +_template: page.html diff --git a/lektor/lektordata/project/templates/page.html b/lektor/lektordata/project/templates/page.html index 7cf77ef..8b861a2 100644 --- a/lektor/lektordata/project/templates/page.html +++ b/lektor/lektordata/project/templates/page.html @@ -1,8 +1,8 @@ {% extends "layout.html" %} {% block title %}{{ this.title }}{% endblock %} {% block body %} +

{{ this.title }}

-

{{ this.title }}

{{ this.body }}
{% endblock %} diff --git a/lektor/lektordata/project/templates/termine_page.html b/lektor/lektordata/project/templates/termine_page.html new file mode 100644 index 0000000..b6e8581 --- /dev/null +++ b/lektor/lektordata/project/templates/termine_page.html @@ -0,0 +1,8 @@ +{% extends "layout.html" %} +{% block title %}{{ this.title }}{% endblock %} +{% block body %} +

{{ this.title }}

+
+ {{ this.body }} +
+{% endblock %} diff --git a/lektor/lektordata/project/templates/title_page.html b/lektor/lektordata/project/templates/title_page.html index 7d27714..f088bb7 100644 --- a/lektor/lektordata/project/templates/title_page.html +++ b/lektor/lektordata/project/templates/title_page.html @@ -4,5 +4,5 @@

{{ this.title }}

{{ this.body }} -
+ {% endblock %} diff --git a/lektor/lektordata/scripts/calendar-fetcher.sh b/lektor/lektordata/scripts/calendar-fetcher.sh index faf036f..6ab2f41 100755 --- a/lektor/lektordata/scripts/calendar-fetcher.sh +++ b/lektor/lektordata/scripts/calendar-fetcher.sh @@ -78,3 +78,6 @@ echo "$ICS_DATA" | awk 'BEGIN{FS=":"} }' | awk -v today="$TODAY" 'substr($1,1,8) >= today' | sort | cut -d " " -f 2- | sed 's@@\ \n@g' | sed '/^$/d' echo "" +echo "---" +echo "_template: termine_page.html" +echo "" From e4c4875fa03aaa3bd4a6b6d55e94a2f7e592c376 Mon Sep 17 00:00:00 2001 From: Reto Bollinger Date: Tue, 19 Nov 2024 13:35:08 +0100 Subject: [PATCH 3/6] Constant font sizes above viewport width of 1540px and tried to reduce jumpiness between 1530p and 1540px --- .../project/assets/static/style.css | 39 +++++++++++++++---- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css index f194a5a..b946c7b 100644 --- a/lektor/lektordata/project/assets/static/style.css +++ b/lektor/lektordata/project/assets/static/style.css @@ -8,7 +8,7 @@ } body { - font-size: 1vw; + font-size: 23px; font-family: "Roboto-Light","Arial",sans-serif; margin: 50px 25px } @@ -86,17 +86,17 @@ footer,header,header h1 { } header { - font-size: 1vw + font-size: 20px; } footer { - font-size: .75vw + font-size: 16px; } header h1 { margin: 0; font-weight: 700; - font-size: 1.9vw + font-size: 38px; } header nav ul { @@ -144,7 +144,7 @@ div.page { } .termine ul > li > div { width: 500px; - font-size: 0.75vw; + font-size: 20px; } @@ -171,7 +171,7 @@ div.page { } .termine ul > li > ul > li > div{ - font-size: 0.75vw; + font-size: 20px; } @@ -236,6 +236,31 @@ div.page { footer { font-size: 1vw } + + + .termine ul > li { + width: 65vw; + } + .termine ul > li > div { + width: 35vw; + } + + .termine ul > li > ul > li { + width: 11vw; + } + + .termine ul > li > ul > li:nth-child(1){ + width: 16vw; + } + + .termine ul > li > ul > li:nth-child(2){ + width: 5vw; + } + + .termine ul > li > div, .termine ul > li > ul > li > div { + font-size: 1.25vw; + } + } @media (min-width:769px) and (max-width:1024px) { @@ -271,7 +296,7 @@ div.page { font-size: 1.75vw } - .inner_page.bgimage .image img { + .inner_page.bgimage .image img{ width: 150px } } \ No newline at end of file From 835da7ccb8a8a2d9f50e869ef19db1cc0fbc4b3c Mon Sep 17 00:00:00 2001 From: Reto Bollinger Date: Tue, 19 Nov 2024 15:10:21 +0100 Subject: [PATCH 4/6] Responsive table on termine page! Woohoo! --- .../project/assets/static/style.css | 103 +++++++++++++++++- 1 file changed, 102 insertions(+), 1 deletion(-) diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css index b946c7b..c9b6cc9 100644 --- a/lektor/lektordata/project/assets/static/style.css +++ b/lektor/lektordata/project/assets/static/style.css @@ -134,7 +134,7 @@ div.page { .termine li { display: flex; - margin-bottom: 10px; + margin-bottom: 3px; } @@ -214,6 +214,56 @@ div.page { .inner_page.bgimage .image img { width: 80% } + + .termine ul { + display: table; + border-collapse: collapse; + padding: 0; + margin: 0; + } + + .termine ul li{ + display: table-row; + width: 75vw; + padding: 0; + margin: 0; + } + + .termine ul li div{ + width: 70vw; + text-align: left; + padding: 0; + margin: 0; + display: inline-block; + white-space: nowrap; + } + + .termine ul li ul { + display: table-row; + } + + .termine ul li ul div{ + font-weight: normal; + padding: 0; + margin: 0; + text-align: left; + } + + .termine ul li ul li { + display: table-cell; + } + + .termine li ul li:nth-child(1) { width: 40.5vw; } + .termine li ul li:nth-child(2) { width: 1.5vw; } + .termine li ul li:nth-child(3) { width: 33vw; } + + .termine li ul li:nth-child(1) div{ width: 40.5vw; } + .termine li ul li:nth-child(2) div{ width: 1.5vw; } + .termine li ul li:nth-child(3) div{ width: 33vw; } + + .termine ul > li > div, .termine ul > li > ul > li > div { + font-size: 4vw; + } } @media (min-width:1025px) and (max-width:1540px) { @@ -299,4 +349,55 @@ div.page { .inner_page.bgimage .image img{ width: 150px } + + + .termine ul { + display: table; + border-collapse: collapse; + padding: 0; + margin: 0; + } + + .termine ul li{ + display: table-row; + width: 75vw; + padding: 0; + margin: 0; + } + + .termine ul li div{ + width: 70vw; + text-align: left; + padding: 0; + margin: 0; + display: inline-block; + white-space: nowrap; + } + + .termine ul li ul { + display: table-row; + } + + .termine ul li ul div{ + font-weight: normal; + padding: 0; + margin: 0; + text-align: left; + } + + .termine ul li ul li { + display: table-cell; + } + + .termine li ul li:nth-child(1) { width: 40.5vw; } + .termine li ul li:nth-child(2) { width: 1.5vw; } + .termine li ul li:nth-child(3) { width: 33vw; } + + .termine li ul li:nth-child(1) div{ width: 40.5vw; } + .termine li ul li:nth-child(2) div{ width: 1.5vw; } + .termine li ul li:nth-child(3) div{ width: 33vw; } + + .termine ul > li > div, .termine ul > li > ul > li > div { + font-size: 2.5vw; + } } \ No newline at end of file From 3a37becc51a5686c1428df26261e433f3a86c8d1 Mon Sep 17 00:00:00 2001 From: Reto Bollinger Date: Tue, 19 Nov 2024 18:49:17 +0100 Subject: [PATCH 5/6] Some more CSS adjustments --- .../project/assets/static/style.css | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css index c9b6cc9..45dbf62 100644 --- a/lektor/lektordata/project/assets/static/style.css +++ b/lektor/lektordata/project/assets/static/style.css @@ -63,6 +63,9 @@ body,div.inner_page h1, div.inner_page h2, div.inner_page h3, div.inner_page h4, padding: 0; } +body,div.inner_page p + h3{ + padding: 1.5em 0 0 0; +} div.inner_page { position: relative; @@ -172,6 +175,7 @@ div.page { .termine ul > li > ul > li > div{ font-size: 20px; + font-weight: normal; } @@ -222,44 +226,44 @@ div.page { margin: 0; } - .termine ul li{ + .termine ul > li{ display: table-row; width: 75vw; padding: 0; margin: 0; } - .termine ul li div{ + .termine ul > li > div{ width: 70vw; text-align: left; padding: 0; margin: 0; display: inline-block; - white-space: nowrap; + /*white-space: nowrap;*/ } - .termine ul li ul { + .termine ul > li > ul { display: table-row; } - .termine ul li ul div{ + .termine ul > li > ul > div{ font-weight: normal; padding: 0; margin: 0; text-align: left; } - .termine ul li ul li { + .termine ul > li > ul > li { display: table-cell; } - .termine li ul li:nth-child(1) { width: 40.5vw; } - .termine li ul li:nth-child(2) { width: 1.5vw; } - .termine li ul li:nth-child(3) { width: 33vw; } - - .termine li ul li:nth-child(1) div{ width: 40.5vw; } - .termine li ul li:nth-child(2) div{ width: 1.5vw; } - .termine li ul li:nth-child(3) div{ width: 33vw; } + .termine li > ul > li:nth-child(1) { width: 42.5vw; } + .termine li > ul > li:nth-child(2) { width: 1.5vw; } + .termine li > ul > li:nth-child(3) { width: 31vw; } + + .termine li > ul > li:nth-child(1) > div{ width: 42.5vw; } + .termine li > ul > li:nth-child(2) > div{ width: 1.5vw; } + .termine li > ul > li:nth-child(3) > div{ width: 31vw; } .termine ul > li > div, .termine ul > li > ul > li > div { font-size: 4vw; @@ -358,14 +362,14 @@ div.page { margin: 0; } - .termine ul li{ + .termine ul > li{ display: table-row; width: 75vw; padding: 0; margin: 0; } - .termine ul li div{ + .termine ul > li > div{ width: 70vw; text-align: left; padding: 0; @@ -374,28 +378,28 @@ div.page { white-space: nowrap; } - .termine ul li ul { + .termine ul > li > ul { display: table-row; } - .termine ul li ul div{ + .termine ul > li > ul > div{ font-weight: normal; padding: 0; margin: 0; text-align: left; } - .termine ul li ul li { + .termine ul > li > ul > li { display: table-cell; } - .termine li ul li:nth-child(1) { width: 40.5vw; } - .termine li ul li:nth-child(2) { width: 1.5vw; } - .termine li ul li:nth-child(3) { width: 33vw; } + .termine li > ul > li:nth-child(1) { width: 27vw; } + .termine li > ul > li:nth-child(2) { width: 1.5vw; } + .termine li > ul > li:nth-child(3) { width: 46.5vw; } - .termine li ul li:nth-child(1) div{ width: 40.5vw; } - .termine li ul li:nth-child(2) div{ width: 1.5vw; } - .termine li ul li:nth-child(3) div{ width: 33vw; } + .termine li > ul > li:nth-child(1) > div{ width: 27vw; } + .termine li > ul > li:nth-child(2) > div{ width: 1.5vw; } + .termine li > ul > li:nth-child(3) > div{ width: 46.5vw; } .termine ul > li > div, .termine ul > li > ul > li > div { font-size: 2.5vw; From a7f46a11a49b2a422b58f72acad6d50ddaa96be8 Mon Sep 17 00:00:00 2001 From: Reto Bollinger Date: Tue, 19 Nov 2024 20:08:56 +0100 Subject: [PATCH 6/6] Even more CSS tweaking --- .../project/assets/static/style.css | 57 +++++++++++++------ 1 file changed, 41 insertions(+), 16 deletions(-) diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css index 45dbf62..0059fba 100644 --- a/lektor/lektordata/project/assets/static/style.css +++ b/lektor/lektordata/project/assets/static/style.css @@ -143,13 +143,21 @@ div.page { .termine ul > li { font-weight: bold; - width: 1000px; + width: 76vw; + max-width: 1140px; } .termine ul > li > div { width: 500px; font-size: 20px; } +.termine > ul > li:nth-child(odd) { + background: #fff; +} + +.termine > ul > li:nth-child(even) { + background: #ececec; +} .termine ul > li > ul > li { width: 175px; @@ -228,7 +236,7 @@ div.page { .termine ul > li{ display: table-row; - width: 75vw; + width: 80vw; padding: 0; margin: 0; } @@ -243,7 +251,13 @@ div.page { } .termine ul > li > ul { - display: table-row; + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; /* Zwei Spalten für die ersten beiden Einträge */ + grid-template-rows: auto auto; /* Drei Zeilen: Eine für die ersten beiden, zwei für die restlichen */ + grid-gap: 10px; /* Optional: Abstand zwischen den Zellen */ } .termine ul > li > ul > div{ @@ -257,13 +271,23 @@ div.page { display: table-cell; } - .termine li > ul > li:nth-child(1) { width: 42.5vw; } - .termine li > ul > li:nth-child(2) { width: 1.5vw; } - .termine li > ul > li:nth-child(3) { width: 31vw; } + .termine ul > li > ul > li:nth-child(1) { + width: 42.5vw; + grid-column: span 1; + } + .termine ul > li > ul > li:nth-child(2) { + width: 1.5vw; + grid-column: span 1; + } + .termine ul > li > ul > li:nth-child(3) { + width: 31vw; + grid-column: span 2; + } - .termine li > ul > li:nth-child(1) > div{ width: 42.5vw; } - .termine li > ul > li:nth-child(2) > div{ width: 1.5vw; } - .termine li > ul > li:nth-child(3) > div{ width: 31vw; } + + .termine ul > li > ul > li:nth-child(1) > div{ width: 45.5vw; } + .termine ul > li > ul > li:nth-child(2) > div{ width: 1.5vw; } + .termine ul > li > ul > li:nth-child(3) > div{ width: 31vw; } .termine ul > li > div, .termine ul > li > ul > li > div { font-size: 4vw; @@ -293,7 +317,8 @@ div.page { .termine ul > li { - width: 65vw; + width: 76vw; + } .termine ul > li > div { width: 35vw; @@ -393,13 +418,13 @@ div.page { display: table-cell; } - .termine li > ul > li:nth-child(1) { width: 27vw; } - .termine li > ul > li:nth-child(2) { width: 1.5vw; } - .termine li > ul > li:nth-child(3) { width: 46.5vw; } + .termine ul > li > ul > li:nth-child(1) { width: 27vw; } + .termine ul > li > ul > li:nth-child(2) { width: 1.5vw; } + .termine ul > li > ul > li:nth-child(3) { width: 46.5vw; } - .termine li > ul > li:nth-child(1) > div{ width: 27vw; } - .termine li > ul > li:nth-child(2) > div{ width: 1.5vw; } - .termine li > ul > li:nth-child(3) > div{ width: 46.5vw; } + .termine ul > li > ul > li:nth-child(1) > div{ width: 27vw; } + .termine ul > li > ul > li:nth-child(2) > div{ width: 1.5vw; } + .termine ul > li > ul > li:nth-child(3) > div{ width: 46.5vw; } .termine ul > li > div, .termine ul > li > ul > li > div { font-size: 2.5vw;