Kleinere Anpassungen des letzten Commits

zum Commit vorgemerkte Änderungen:
	geändert:       Makefile
	geändert:       css/cwsvJudo-2018-wkKalender.css
	gelöscht:       md/indexTest.md
	geändert:       phpLib/cwsvJudo/wkKalender.php

homepage/redesign2018/markdownExperiment/Makefile

@@ -45,8 +45,8 @@ ampTest: $(ampFiles)
 
 build/css/cwsvJudo.css: $(cssFiles)
 	mkdir -p $(dir $@)
-#	cat $(cssFiles) > $@
+	cat $(cssFiles) > $@
-	cat $^ | csso -o $@
+#	cat $^ | csso -o $@
 #	cat $(cssFiles) | cleancss -o $@
 
 build/%.php: md/%.md build/yaml/%.yaml pandocTemplate/cwsvJudo.html5.pandocTemplate

homepage/redesign2018/markdownExperiment/css/cwsvJudo-2018-wkKalender.css

@@ -47,6 +47,35 @@
 	color: #757575;
 }
 
+.kalenderDatum{
+	display: flex;
+	justify-content: flex-end;
+}
+.kalenderDatum > span:nth-child(4)::after{
+	content: ", d. ";
+	white-space: pre;
+}
+.kalenderDatum > span:nth-child(4){
+	order: 1;
+}
+.kalenderDatum > span:nth-child(3)::after{
+	content: ". ";
+	white-space: pre;
+}
+.kalenderDatum > span:nth-child(3){
+	order: 2;
+}
+.kalenderDatum > span:nth-child(2)::after{
+	content: " ";
+	white-space: pre;
+}
+.kalenderDatum > span:nth-child(2){
+	order: 3;
+}
+.kalenderDatum > span:nth-child(1){
+	order: 4;
+}
+
 
 @media screen and (min-width: 1280px){
 	.wkKalender > thead{
@@ -94,6 +123,208 @@
 	.wkKalender th {
 		display: table-cell;
 	}
+	
+	.kalenderDatum{
+		flex-direction: column;
+		align-items: center;
+	}
+	.kalenderDatum > span:nth-child(4)::after{
+		content: initial;
+		white-space: initial;
+	}
+	.kalenderDatum > span:nth-child(4){
+		display: none;
+	}
+	.kalenderDatum > span:nth-child(3)::after{
+		content: ".";
+		white-space: pre;
+	}
+	.kalenderDatum > span:nth-child(2)::after{
+		content: initial;
+		white-space: initial;
+	}
+
+
+
+/* https://codepen.io/denilsonsa/pen/Etrba */
+
+	/****************************************/
+	/* Styling rules, such as font and colors */
+	.date-as-calendar {
+	  font-variant: normal;
+	  font-style: normal;
+	  font-weight: normal;
+	  font-family: "Helvetica", "Arial", sans-serif;
+
+	  /* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
+	  vertical-align: top;
+
+	  /* margin: 1ex; */
+
+	  color: black;
+	  background: white;
+	  background : linear-gradient(to bottom right, #FFF 0%, #EEE 100%);
+
+	  border: 1px solid #888;
+	  border-radius: 3px;
+	  overflow: hidden;
+
+	  box-shadow: 2px 2px 2px -2px black;
+	}
+	.date-as-calendar .weekday,
+	.date-as-calendar .day,
+	.date-as-calendar .month,
+	.date-as-calendar .year {
+	  text-align: center;
+	  line-height: 1.0;
+	}
+	.date-as-calendar .month {
+	  font-family: "Oswald", sans-serif;
+	  text-transform: uppercase;
+	  background: #B11;
+	  background : linear-gradient(to bottom right, #D66 0%, #A00 100%);
+	  color: white;
+	}
+
+	/****************************************/
+	/* Layout rules using position: absolute and pixels. */
+	.position-pixels.date-as-calendar {
+	  display: inline-block;
+	  position: relative;
+	  width: 64px;
+	  height: 64px;
+	}
+	.position-pixels.date-as-calendar .weekday,
+	.position-pixels.date-as-calendar .day,
+	.position-pixels.date-as-calendar .month,
+	.position-pixels.date-as-calendar .year {
+	  display: block;
+	  position: absolute;
+	  left: 0;
+	  right: 0;
+	  width: 100%;
+	  height: 1em;
+	}
+	.position-pixels.date-as-calendar .month {
+	  top: 0px;
+	  font-size: 12px;
+	  padding: 2px 0;
+	}
+	.position-pixels.date-as-calendar .weekday {
+	  top: 16px;
+	  font-size: 10px;
+	}
+	.position-pixels.date-as-calendar .day {
+	  top: 26px;
+	  font-size: 24px;
+	}
+	.position-pixels.date-as-calendar .year {
+	  top: 50px;
+	  font-size: 14px;
+	}
+
+	/****************************************/
+	/* Layout rules using position: absolute and relative dimensions using em. */
+	.position-em.date-as-calendar {
+	  display: inline-block;
+	  position: relative;
+	  
+	  width: 4em; 
+	  height: 4em; 
+	}
+	.position-em.date-as-calendar .weekday,
+	.position-em.date-as-calendar .day,
+	.position-em.date-as-calendar .month,
+	.position-em.date-as-calendar .year {
+	  display: block;
+	  position: absolute;
+	  left: 0;
+	  right: 0;
+	  width: 100%;
+	  height: 1em;
+	}
+	.position-em.date-as-calendar .month {
+	  top: 0px;
+	  font-size: 0.75em;
+	  padding: 0.1em 0;
+	}
+	.position-em.date-as-calendar .weekday {
+	  top: 1.6em;
+	  font-size: 0.6125em;
+	}
+	.position-em.date-as-calendar .day {
+	  top: 1.1em;
+	  font-size: 1.5em
+	}
+	.position-em.date-as-calendar .year {
+	  bottom: 0px;
+	  font-size: 0.87750em;
+	}
+
+	/****************************************/
+	/* Layout rules using display: inline-flex and relative dimensions using em. */
+	.inline-flex.date-as-calendar {
+	  display: inline-flex;
+	  flex-direction: column;
+	  flex-wrap: nowrap;
+	  justify-content: space-between;
+	  
+	  width: 4em; 
+	  height: 4em; 
+	}
+	.inline-flex.date-as-calendar .weekday,
+	.inline-flex.date-as-calendar .day,
+	.inline-flex.date-as-calendar .month,
+	.inline-flex.date-as-calendar .year {
+	  display: block;
+	  flex: 1 1 auto;
+	}
+	.inline-flex.date-as-calendar .month {
+	  order: 1;
+	  font-size: 0.75em;
+	  padding: 0.1em 0;
+	}
+	.inline-flex.date-as-calendar .weekday {
+	  order: 2;
+	  font-size: 0.6125em;
+	}
+	.inline-flex.date-as-calendar .day {
+	  order: 3;
+	  font-size: 1.5em;
+	}
+	.inline-flex.date-as-calendar .year {
+	  order: 4;
+	  font-size: 0.87750em;
+	}
+
+	/****************************************/
+	/* Multiple sizes. */
+	.date-as-calendar.size0_5x {
+	  font-size: 8px;
+	}
+	.date-as-calendar.size0_75x {
+	  font-size: 12px;
+	}
+	.date-as-calendar.size1x {
+	  font-size: 16px;
+	}
+	.date-as-calendar.size1_25x {
+	  font-size: 20px;
+	}
+	.date-as-calendar.size1_5x {
+	  font-size: 24px;
+	}
+	.date-as-calendar.size1_75x {
+	  font-size: 28px;
+	}
+	.date-as-calendar.size2x {
+	  font-size: 32px;
+	}
+	.date-as-calendar.size3x {
+	  font-size: 48px;
+	}
+
+
 }
 
 .displayNone{

homepage/redesign2018/markdownExperiment/md/indexTest.md

@@ -1,36 +0,0 @@
----
-home: &home
-	- {caption: "Home", url: "/", icon: "http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvJudoLogoWappen.x256.png"}
-verein: &verein
-	- {caption: "Verein", url: "/verein", icon: "http://cwsvjudo.bplaced.net/ressourcen/graphiken/logos/cwsvLogoWappen.x250.png"}
-galerien: &galerien
-	- {caption: "Galerien", url: "/galerien", icon: "http://cwsvjudo.bplaced.net/ressourcen/graphiken/icons/gallery.svg"}
-title: Homepage der Judoka des Chemnitzer Freizeit- und Wohngebietssportvereines e. V.
-author: marko
-keywords:
-	- Judo
-	- Chemnitzer Freizeit- und Wohngebietssportverein
-subNav:
-	- *home
-	- *verein
-	- *galerien
-...
-
-# Willkommen
-
-auf der Website des Judo-Teams des [Chem­nitzer Frei­zeit- und Wohng­ebiets­sport­vereines e. V][cwsvHomepage]
-Hier findet ihr Informationen zu unseren [Trainingszeiten][cwsvJudoTraining] 
-und [Wettkampfterminen][cwsvJudoWettkampfKalender].
-
-Ein kleines Wiki bietet [Wissenswertes über Judo][cwsvJudoWiki], wie 
-zum Beispiel das [Programm für die Gürtelprüfungen][cwsvJudoWikiKyu].
-
-# Die letzten Neuigkeiten
-
-<?php $options['limit']=6; echoNewsTableHtml( $options );?>
-
-[cwsvHomepage]: http://www.cwsv-sport.de "Homepage des Chemnitzer Freizeit- und Wohngebietssportvereines"
-[cwsvJudoTraining]: http://cwsvjudo.bplaced.net/training "Trainingszeiten der Judoka des Chemnitzer Freizeit- und Wohngebietssportvereines
-[cwsvJudoWettkampfKalender]: http://cwsvjudo.bplaced.net/wkKalender "Wettkampfkalender der Judoka des CWSV"
-[cwsvJudoWiki]: http://cwsvjudo.bplaced.net/JudoWiki "Ein kleines Wiki über Judo"
-[cwsvJudoWikiKyu]: http://cwsvjudo.bplaced.net/JudoWiki/Kyu/Kyu "Kyuprüfungsprogramme im Judo"

homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php

@@ -128,23 +128,32 @@ $htmlWkTableString = "";
 		
 		if($lastMonthName != strftime("%B %Y", strtotime($wk['Datum']) )){
 			$lastMonthName = strftime("%B %Y", strtotime($wk['Datum']) );
-			$htmlWkTableString .= "<tr><th colspan=\"5\" >".$lastMonthName."</th></tr><tr class=\"displayNone\" ><th colspan=\"5\"></th></tr>";
+			$htmlWkTableString .= "<tr><th colspan=\"5\" >".$lastMonthName."</th></tr><tr style=\"display:none;\" ><th colspan=\"5\"></th></tr>";
 		}
 		
+// schlechter Hack solange die Browser nicht von selbst ordentlich trennen
+			$wk['Veranstaltung'] = 
+				str_replace("meisterschaft", "&shy;meisterschaft", $wk['Veranstaltung']);
+			$wk['Veranstaltung'] = 
+				str_replace("turnier", "&shy;turnier", $wk['Veranstaltung']);
+			$wk['Veranstaltung'] = 
+				str_replace("pokal", "&shy;pokal", $wk['Veranstaltung']);
+			$wk['Veranstaltung'] = 
+				str_replace("randori", "&shy;randori", $wk['Veranstaltung']);
+		
 		$htmlWkTableString .=
 				"<tr>".
 					"<script type=\"application/ld+json\">".wkArray2jsonSdEvent($wk)."</script>".
 					"<td data-title=\"Datum\" class=\"noWrap\">".
-						"<time datetime=\"".$wk['Datum']."\">".strftime("%Y-%m-%d (%a)", strtotime($wk['Datum']) )."</time>".
+						"<time class=\"kalenderDatum\" datetime=".$wk['Datum'].">".
-//						"<time class=\"date-as-calendar position-pixels\" datetime=".$wk['Datum'].">".
+							"<span>".strftime("%Y", strtotime($wk['Datum']))."</span>".
-//							"<span class=\"weekday\">".strftime("%A", strtotime($wk['Datum']))."</span>".
+							"<span>".strftime("%B", strtotime($wk['Datum']))."</span>".
-//							"<span class=\"day\">".strftime("%d", strtotime($wk['Datum']))."</span>".
+							"<span>".strftime("%d", strtotime($wk['Datum']))."</span>".
-//							"<span class=\"month\">".strftime("%B", strtotime($wk['Datum']))."</span>".
+							"<span>".strftime("%A", strtotime($wk['Datum']))."</span>".
-//							"<span class=\"year\">".strftime("%Y", strtotime($wk['Datum']))."</span>".
+						"</time>".
-//						"</time>".
 					"</td>".
 					"<td data-title=\"Ausschreibung\" class=\"hyphenate\">".
-						"<a title=\"Ausschreibung ".$wk['Veranstaltung']."\" href=\"http://cwsvjudo.bplaced.net".$wk['Ausschreibung']."\"><span property=\"name\">".$wk['Veranstaltung']."</span></a>".
+						"<a title=\"Ausschreibung ".$wk['Veranstaltung']."\" href=\"".$wk['Ausschreibung']."\"><span property=\"name\">".$wk['Veranstaltung']."</span></a>".
 					"</td>".
 					"<td data-title=\"Wegbeschreibung\">".
 						"<a title=\"Wegbeschreibung ".$wk['Veranstaltung']."\" href=\"".$wk['Routenplaner']."\"><span>".$wk['Ort']."</span></a>".
@@ -153,7 +162,7 @@ $htmlWkTableString = "";
 						$wk['Altersklassen'].
 					"</td>".
 					"<td data-title=\"iCal\">".
-						"<a title=\"Termin für ".$wk['Veranstaltung']." in Kalender übernehmen\" href=\"http://cwsvjudo.bplaced.net/ressourcen/phpLib/calendar.php?wkID=".$wk['lfdeNr']."\">iCal</a>".
+						"<a title=\"Termin für ".$wk['Veranstaltung']." in Kalender übernehmen\" href=\"/ressourcen/phpLib/calendar.php?wkID=".$wk['lfdeNr']."\">iCal</a>".
 					"</td>".
 				"</tr>\n";
 	}
@@ -293,8 +302,8 @@ function wkTableHtml(){
 		$siteData['mainContent'] .= wkList2htmlWkTable($ergebnis);
 		
 		$siteData['mainContent'] .= 
-			"<div class=\"fontSizeXxSmall\">Alle Angaben ohne Gewähr! Fehler und Ergänzungen dürfen gerne gemeldet werden.</div>".
+			"<div style=\"font-size:xx-small\">Alle Angaben ohne Gewähr! Fehler und Ergänzungen dürfen gerne gemeldet werden.</div>".
-			"<a href=\"http://cwsvjudo.bplaced.net/downloads/Ausschreibungen/\">Link zum Archiv mit allen Ausschreibungen</a>.";
+			"<a href=\"/downloads/Ausschreibungen/\">Link zum Archiv mit allen Ausschreibungen</a>.";
 /* @todo: Wettkampfselektor wieder ergänzen
 			<hr />
 			<div  class="wkSelektor">