diff --git a/homepage/redesign2018/markdownExperiment/Makefile b/homepage/redesign2018/markdownExperiment/Makefile index f276b8f..7ca2e8c 100644 --- a/homepage/redesign2018/markdownExperiment/Makefile +++ b/homepage/redesign2018/markdownExperiment/Makefile @@ -45,8 +45,8 @@ ampTest: $(ampFiles) build/css/cwsvJudo.css: $(cssFiles) mkdir -p $(dir $@) -# cat $(cssFiles) > $@ - cat $^ | csso -o $@ + cat $(cssFiles) > $@ +# cat $^ | csso -o $@ # cat $(cssFiles) | cleancss -o $@ build/%.php: md/%.md build/yaml/%.yaml pandocTemplate/cwsvJudo.html5.pandocTemplate diff --git a/homepage/redesign2018/markdownExperiment/css/cwsvJudo-2018-wkKalender.css b/homepage/redesign2018/markdownExperiment/css/cwsvJudo-2018-wkKalender.css index 93aa5d9..9f88d8c 100644 --- a/homepage/redesign2018/markdownExperiment/css/cwsvJudo-2018-wkKalender.css +++ b/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{ diff --git a/homepage/redesign2018/markdownExperiment/md/indexTest.md b/homepage/redesign2018/markdownExperiment/md/indexTest.md deleted file mode 100644 index 2333807..0000000 --- a/homepage/redesign2018/markdownExperiment/md/indexTest.md +++ /dev/null @@ -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 - - - -[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" diff --git a/homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php b/homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php index dce1e86..f9a4ba9 100644 --- a/homepage/redesign2018/markdownExperiment/phpLib/cwsvJudo/wkKalender.php +++ b/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 .= "".$lastMonthName.""; + $htmlWkTableString .= "".$lastMonthName.""; } +// schlechter Hack solange die Browser nicht von selbst ordentlich trennen + $wk['Veranstaltung'] = + str_replace("meisterschaft", "­meisterschaft", $wk['Veranstaltung']); + $wk['Veranstaltung'] = + str_replace("turnier", "­turnier", $wk['Veranstaltung']); + $wk['Veranstaltung'] = + str_replace("pokal", "­pokal", $wk['Veranstaltung']); + $wk['Veranstaltung'] = + str_replace("randori", "­randori", $wk['Veranstaltung']); + $htmlWkTableString .= "". "". "". - "". -// "". + "". "". "". - "".$wk['Veranstaltung']."". + "".$wk['Veranstaltung']."". "". "". "".$wk['Ort']."". @@ -153,7 +162,7 @@ $htmlWkTableString = ""; $wk['Altersklassen']. "". "". - "iCal". + "iCal". "". "\n"; } @@ -293,8 +302,8 @@ function wkTableHtml(){ $siteData['mainContent'] .= wkList2htmlWkTable($ergebnis); $siteData['mainContent'] .= - "
Alle Angaben ohne Gewähr! Fehler und Ergänzungen dürfen gerne gemeldet werden.
". - "Link zum Archiv mit allen Ausschreibungen."; + "
Alle Angaben ohne Gewähr! Fehler und Ergänzungen dürfen gerne gemeldet werden.
". + "Link zum Archiv mit allen Ausschreibungen."; /* @todo: Wettkampfselektor wieder ergänzen