diff --git a/homepage/cwsvJudo/Makefile.heliohost b/homepage/cwsvJudo/Makefile.heliohost index ef0773b..8d59df5 100644 --- a/homepage/cwsvJudo/Makefile.heliohost +++ b/homepage/cwsvJudo/Makefile.heliohost @@ -20,14 +20,9 @@ all: build/css/cwsvJudo.css images make -j graphiken make build/css/cwsvJudo.css -# minimizing wallpaper sizes -build/graphiken/wallpapers/%.jpg: graphiken/wallpapers/%.jpg - mkdir -p build/graphiken/wallpapers - # guetzli $^ $@ - $(LN) $^ $@ -build/graphiken/wallpapers/%.svg: graphiken/wallpapers/%.svg - mkdir -p build/graphiken/wallpapers - $(LN) $^ $@ +.PHONY: wallpapers +wallpapers: + find graphiken/wallpapers/ -name *.jpg -exec ./scripts/mk-wallpaper {} \; .PHONY: images images: $(wallpapers) @@ -148,7 +143,7 @@ dist: all find ./build/graphiken/cwsvJudoLogoWappen -type f -exec $(LN) {} $(distDir)/httpdocs/ressourcen/graphiken/logos \; # - wallpapers mkdir -p $(distDir)/httpdocs/ressourcen/graphiken/wallpapers - find ./build/graphiken/wallpapers -type f -exec $(LN) {} $(distDir)/httpdocs/ressourcen/graphiken/wallpapers \; + find ./build/graphics/wallpapers -type d -exec cp -r {} $(distDir)/httpdocs/ressourcen/graphiken/wallpapers \; # - icons mkdir -p $(distDir)/httpdocs/ressourcen/graphiken/icons find ./graphiken/icons -type f -exec $(LN) {} $(distDir)/httpdocs/ressourcen/graphiken/icons \; @@ -180,7 +175,7 @@ dist: all $(LN) ./src/htaccess/heliohost/pages/responsive/.htaccess $(distDir)/httpdocs/pages/responsive/.htaccess # config files - $(LN) ./configs/heliohost/pages.config.inc.php $(distDir)/httpdocs/pages/responsive/config.php + $(LN) ./configs/localDocker/pages.config.inc.php $(distDir)/httpdocs/pages/responsive/config.php mkdir -p $(distDir)/.local $(LN) configs/heliohost/config.json $(distDir)/.local/config.json diff --git a/homepage/cwsvJudo/PHP.dockerfile b/homepage/cwsvJudo/PHP.dockerfile index 7c72276..fed6cd6 100644 --- a/homepage/cwsvJudo/PHP.dockerfile +++ b/homepage/cwsvJudo/PHP.dockerfile @@ -4,6 +4,12 @@ FROM php:8.2-apache # startup scripts for the image # - docker-php-ext-install -- install helper script from PHP RUN docker-php-ext-install pdo pdo_mysql +# install aditional php extensions +# - international time +RUN apt-get -y update \ + && apt-get install -y libicu-dev \ + && docker-php-ext-configure intl \ + && docker-php-ext-install intl # install and add xdebug extension # @todo What is pecl? diff --git a/homepage/cwsvJudo/configs/localDocker/pages.config.inc.php b/homepage/cwsvJudo/configs/localDocker/pages.config.inc.php new file mode 100644 index 0000000..631af40 --- /dev/null +++ b/homepage/cwsvJudo/configs/localDocker/pages.config.inc.php @@ -0,0 +1,25 @@ + diff --git a/homepage/cwsvJudo/docker-compose.yaml b/homepage/cwsvJudo/docker-compose.yaml index 82115f0..8b839b3 100644 --- a/homepage/cwsvJudo/docker-compose.yaml +++ b/homepage/cwsvJudo/docker-compose.yaml @@ -6,6 +6,7 @@ services: build: context: . dockerfile: PHP.dockerfile + network: host ports: # this line maps your pc port to the container port - "8080:80" diff --git a/homepage/cwsvJudo/scripts/upload-heliohost b/homepage/cwsvJudo/scripts/upload-heliohost index 0a2b787..818049f 100644 --- a/homepage/cwsvJudo/scripts/upload-heliohost +++ b/homepage/cwsvJudo/scripts/upload-heliohost @@ -8,4 +8,5 @@ set ftp:ssl-allow off # upload: mirror --verbose --continue --parallel=8 --reverse ./build/dist/heliohost / put configs/heliohost/db.config.php -o /.local/db.config.php +put configs/heliohost/pages.config.inc.php -o httpdocs/pages/responsive/config.php # exit diff --git a/homepage/cwsvJudo/src/css/cwsvJudo-2018-wkKalender.css b/homepage/cwsvJudo/src/css/cwsvJudo-2018-wkKalender.css deleted file mode 100644 index 70ced6d..0000000 --- a/homepage/cwsvJudo/src/css/cwsvJudo-2018-wkKalender.css +++ /dev/null @@ -1,1145 +0,0 @@ -.wkKalender{ - width: 100%; - max-width: 100%; - background-color: #FFAE00; - margin-bottom: 0; -} - -.wkKalender > thead, -.wkKalender > tfoot { - display: none; -} - -.wkKalender > tbody { - display: block; -} - -.wkKalender > tbody > tr:empty, -.wkKalender > tbody > tr > th:empty{ - display: none; -} -.wkKalender > tbody > tr{ - display: block; - border: 1px solid #e0e0e0; - border-radius: 2px; - margin-bottom: 1.6rem; -} - -.wkKalender th { - display: block; - background-color: #666; - color: #fff; -} - -.wkKalender > tbody > tr > td { - display: block; - vertical-align: middle; - text-align: right; -} -.wkKalender > tbody > tr > td:nth-child(odd) { - background-color: #FF8100; -} -.wkKalender > tbody > tr > td[data-title]:before { - content: attr(data-title); - float: left; - font-size: inherit; - font-weight: 400; - 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{ - display: table-header-group; - width: 100%; - } - .wkKalender > tbody > tr{ - display: table-row; - width: 100%; - } - .wkKalender > tbody > tr > td { - display: table-cell; - } - .wkKalender > tbody > tr > td[data-title]:before { - display: none; - content: ""; - } - .wkKalender > tbody{ - display: table-row-group; - } - .wkKalender > tfoot{ - display: table-footer-group; - } - .wkKalender > tbody > tr { - border: 1px solid #e0e0e0; - border-radius: 2px; - margin-bottom: 1.6rem; - } - .wkKalender > tbody > tr > td { - vertical-align: middle; - text-align: initial; - } - .wkKalender > tbody > tr:nth-child(odd) { - background-color: #FF8100; - } - .wkKalender > tbody > tr > td:nth-child(odd) { - background-color: inherit; - } - .wkKalender > tbody > tr > td[data-title]:before { - content: initial; - } - .wkKalender tr, th, td { - border: 1px solid black; - } - .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; - } - - -} - -/*abgeschaut*/ -.shadow-z-1 { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); -} - - -/* -- Material Design Table style -------------- */ -/* -.wkKalender > thead > tr, -.wkKalender > tbody > tr, -.wkKalender > tfoot > tr { - transition: all 0.3s ease; -} - -.wkKalender > thead > tr > th, -.wkKalender > tbody > tr > th, -.wkKalender > tfoot > tr > th, -.wkKalender > thead > tr > td, -.wkKalender > tbody > tr > td, -.wkKalender > tfoot > tr > td { - text-align: left; - padding: 1.6rem; - vertical-align: top; - border-top: 0; - transition: all 0.3s ease; -} -.wkKalender > thead > tr > th { - font-weight: 400; - color: #757575; - vertical-align: bottom; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); -} -.wkKalender > caption + thead > tr:first-child > th, -.wkKalender > colgroup + thead > tr:first-child > th, -.wkKalender > thead:first-child > tr:first-child > th, -.wkKalender > caption + thead > tr:first-child > td, -.wkKalender > colgroup + thead > tr:first-child > td, -.wkKalender > thead:first-child > tr:first-child > td { - border-top: 0; -} -.wkKalender > tbody + tbody { - border-top: 1px solid rgba(0, 0, 0, 0.12); -} -.wkKalender .table { - background-color: #fff; -} -.wkKalender .no-border { - border: 0; -} -@media screen and (max-width: 640px){ - .table-responsive-vertical.shadow-z-1 > .table > tbody > tr { - border: none; - -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); - -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); - } - .wkKalender-bordered { - border: 0; - } - .wkKalender-bordered > tbody > tr > td { - border: 0; - border-bottom: 1px solid #e0e0e0; - } - .wkKalender-bordered > tbody > tr > td:last-child { - border-bottom: 0; - } - .wkKalender-striped > tbody > tr > td, - .wkKalender-striped > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .wkKalender-striped > tbody > tr > td:nth-child(odd) { - background-color: #f5f5f5; - } - .wkKalender-hover > tbody > tr:hover > td, - .wkKalender-hover > tbody > tr:hover { - background-color: #fff; - } - .wkKalender-hover > tbody > tr > td:hover { - background-color: rgba(0, 0, 0, 0.12); - } -} - -.wkKalender-striped.table-mc-red > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-red > tbody > tr:nth-child(odd) > th { - background-color: #fde0dc; -} -.wkKalender-hover.table-mc-red > tbody > tr:hover > td, -.wkKalender-hover.table-mc-red > tbody > tr:hover > th { - background-color: #f9bdbb; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) { - background-color: #fde0dc; - } - .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover { - background-color: #f9bdbb; - } -} -.wkKalender-striped.table-mc-pink > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-pink > tbody > tr:nth-child(odd) > th { - background-color: #fce4ec; -} -.wkKalender-hover.table-mc-pink > tbody > tr:hover > td, -.wkKalender-hover.table-mc-pink > tbody > tr:hover > th { - background-color: #f8bbd0; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) { - background-color: #fce4ec; - } - .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover { - background-color: #f8bbd0; - } -} -.wkKalender-striped.table-mc-purple > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-purple > tbody > tr:nth-child(odd) > th { - background-color: #f3e5f5; -} -.wkKalender-hover.table-mc-purple > tbody > tr:hover > td, -.wkKalender-hover.table-mc-purple > tbody > tr:hover > th { - background-color: #e1bee7; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) { - background-color: #f3e5f5; - } - .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover { - background-color: #e1bee7; - } -} -.wkKalender-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th { - background-color: #ede7f6; -} -.wkKalender-hover.table-mc-deep-purple > tbody > tr:hover > td, -.wkKalender-hover.table-mc-deep-purple > tbody > tr:hover > th { - background-color: #d1c4e9; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) { - background-color: #ede7f6; - } - .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover { - background-color: #d1c4e9; - } -} -.wkKalender-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th { - background-color: #e8eaf6; -} -.wkKalender-hover.table-mc-indigo > tbody > tr:hover > td, -.wkKalender-hover.table-mc-indigo > tbody > tr:hover > th { - background-color: #c5cae9; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) { - background-color: #e8eaf6; - } - .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover { - background-color: #c5cae9; - } -} -.wkKalender-striped.table-mc-blue > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-blue > tbody > tr:nth-child(odd) > th { - background-color: #e7e9fd; -} -.wkKalender-hover.table-mc-blue > tbody > tr:hover > td, -.wkKalender-hover.table-mc-blue > tbody > tr:hover > th { - background-color: #d0d9ff; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) { - background-color: #e7e9fd; - } - .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover { - background-color: #d0d9ff; - } -} -.wkKalender-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th { - background-color: #e1f5fe; -} -.wkKalender-hover.table-mc-light-blue > tbody > tr:hover > td, -.wkKalender-hover.table-mc-light-blue > tbody > tr:hover > th { - background-color: #b3e5fc; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) { - background-color: #e1f5fe; - } - .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover { - background-color: #b3e5fc; - } -} -.wkKalender-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th { - background-color: #e0f7fa; -} -.wkKalender-hover.table-mc-cyan > tbody > tr:hover > td, -.wkKalender-hover.table-mc-cyan > tbody > tr:hover > th { - background-color: #b2ebf2; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) { - background-color: #e0f7fa; - } - .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover { - background-color: #b2ebf2; - } -} -.wkKalender-striped.table-mc-teal > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-teal > tbody > tr:nth-child(odd) > th { - background-color: #e0f2f1; -} -.wkKalender-hover.table-mc-teal > tbody > tr:hover > td, -.wkKalender-hover.table-mc-teal > tbody > tr:hover > th { - background-color: #b2dfdb; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) { - background-color: #e0f2f1; - } - .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover { - background-color: #b2dfdb; - } -} -.wkKalender-striped.table-mc-green > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-green > tbody > tr:nth-child(odd) > th { - background-color: #d0f8ce; -} -.wkKalender-hover.table-mc-green > tbody > tr:hover > td, -.wkKalender-hover.table-mc-green > tbody > tr:hover > th { - background-color: #a3e9a4; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) { - background-color: #d0f8ce; - } - .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover { - background-color: #a3e9a4; - } -} -.wkKalender-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th { - background-color: #f1f8e9; -} -.wkKalender-hover.table-mc-light-green > tbody > tr:hover > td, -.wkKalender-hover.table-mc-light-green > tbody > tr:hover > th { - background-color: #dcedc8; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) { - background-color: #f1f8e9; - } - .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover { - background-color: #dcedc8; - } -} -.wkKalender-striped.table-mc-lime > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-lime > tbody > tr:nth-child(odd) > th { - background-color: #f9fbe7; -} -.wkKalender-hover.table-mc-lime > tbody > tr:hover > td, -.wkKalender-hover.table-mc-lime > tbody > tr:hover > th { - background-color: #f0f4c3; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) { - background-color: #f9fbe7; - } - .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover { - background-color: #f0f4c3; - } -} -.wkKalender-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th { - background-color: #fffde7; -} -.wkKalender-hover.table-mc-yellow > tbody > tr:hover > td, -.wkKalender-hover.table-mc-yellow > tbody > tr:hover > th { - background-color: #fff9c4; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) { - background-color: #fffde7; - } - .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover { - background-color: #fff9c4; - } -} -.wkKalender-striped.table-mc-amber > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-amber > tbody > tr:nth-child(odd) > th { - background-color: #fff8e1; -} -.wkKalender-hover.table-mc-amber > tbody > tr:hover > td, -.wkKalender-hover.table-mc-amber > tbody > tr:hover > th { - background-color: #ffecb3; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) { - background-color: #fff8e1; - } - .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover { - background-color: #ffecb3; - } -} -.wkKalender-striped.table-mc-orange > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-orange > tbody > tr:nth-child(odd) > th { - background-color: #fff3e0; -} -.wkKalender-hover.table-mc-orange > tbody > tr:hover > td, -.wkKalender-hover.table-mc-orange > tbody > tr:hover > th { - background-color: #ffe0b2; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) { - background-color: #fff3e0; - } - .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover { - background-color: #ffe0b2; - } -} -.wkKalender-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td, -.wkKalender-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th { - background-color: #fbe9e7; -} -.wkKalender-hover.table-mc-deep-orange > tbody > tr:hover > td, -.wkKalender-hover.table-mc-deep-orange > tbody > tr:hover > th { - background-color: #ffccbc; -} -@media screen and (max-width: 767px) { - .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td, - .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) { - background-color: #fff; - } - .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) { - background-color: #fbe9e7; - } - .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td, - .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover { - background-color: #fff; - } - .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover { - background-color: #ffccbc; - } -} -*/ - -/* - * Mit Text overlay-tes Bild -*/ - -.textoverlayedImage{ - position: relative; - display: table; -} -.textoverlayedImage > img { - width: 100%; - height: auto; -} -.textoverlayedImage > div { - z-index: 99; - width: fit-content; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); -} -.textoverlayedImage > div > p{ - text-align: center; - color: white; - font-weight: lighter; - line-height: 2; - padding: 0 10%; -} - -/* - * Die Galerie der Galerien in der wkInfoBox -*/ -.wkBoxMediaGallery{ - display: flex; - flex-flow: row wrap; - justify-content: space-around; - align-items: center; -} -.wkBoxMediaGallery > *{ - flex-basis:50%; - padding: 5%; -} - - -/* - * Tooltipps - */ - -/* Tooltip container */ -.tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ -} - -/* Tooltip text */ -.tooltip .tooltiptext { - visibility: hidden; - width: 120px; - background-color: black; - color: #fff; - text-align: center; - padding: 5px 0; - border-radius: 6px; - - /* Position the tooltip text - see examples below! */ - position: absolute; - z-index: 1; -} - - -/* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext { - visibility: visible; -} - -.wkMonthBar{ - display:flex; - flex-flow:wrap; - justify-content:space-evenly; -} - -.wkMonthBar > a { - text-align: center; - width:30%; - display: inline-block; - padding: 0.25em 0.25em 0.25em 0.25em; - margin: 0.25em 0.25em 0.25em 0.25em; - box-shadow: .1em .1em .05em grey; - background-color: #FF8100; - border-radius: .5em; -} - -@media print{ - .wkMonthBar - { - display: none; - } - .wkKalender > thead{ - display: table-header-group; - width: 100%; - } - .wkKalender > tbody > tr{ - display: table-row; - width: 100%; - } - .wkKalender > tbody > tr > td { - display: table-cell; - } - /*qrCode*/ - .wkKalender > tbody > tr > td > img{ - width: 1cm; - } - .wkKalender > tbody > tr > td:nth-of-type(5) > a{ - display: none; - } - .wkKalender > tbody > tr > td[data-title]:before { - display: none; - content: ""; - } - .wkKalender > tbody{ - display: table-row-group; - } - .wkKalender > tfoot{ - display: table-footer-group; - } - .wkKalender > tbody > tr { - border: 1px solid #e0e0e0; - border-radius: 2px; - margin-bottom: 1.6rem; - } - .wkKalender > tbody > tr > td { - vertical-align: middle; - text-align: initial; - } - .wkKalender > tbody > tr:nth-child(odd) { - background-color: #FF8100; - } - .wkKalender > tbody > tr > td:nth-child(odd) { - background-color: inherit; - } - .wkKalender > tbody > tr > td[data-title]:before { - content: initial; - } - .wkKalender tr, th, td { - border: 1px solid black; - } - .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; - } -} diff --git a/homepage/cwsvJudo/src/css/materialize/fonts.css b/homepage/cwsvJudo/src/css/materialize/fonts.css index cdee46f..9121ecf 100644 --- a/homepage/cwsvJudo/src/css/materialize/fonts.css +++ b/homepage/cwsvJudo/src/css/materialize/fonts.css @@ -5,14 +5,14 @@ } @font-face { - font-family: 'Material Icons'; + font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url(/ressourcen/fonts/MaterialIcons-Regular.ttf); } .material-icons { - font-family: 'Material Icons'; + font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 1em; @@ -23,7 +23,31 @@ white-space: nowrap; word-wrap: normal; direction: ltr; - font-feature-settings: 'liga'; + font-feature-settings: "liga"; +} + +/* fallback */ +@font-face { + font-family: "Material Symbols Outlined"; + font-style: normal; + font-weight: 400; + src: url(ressourcen/fonts/MaterialIconsOutlined-Regular.otf); +} + +.material-symbols-outlined { + font-family: "Material Symbols Outlined"; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -moz-font-feature-settings: "liga"; + -moz-osx-font-smoothing: grayscale; } /* responsive font sizes */ diff --git a/homepage/cwsvJudo/src/css/materialize/shiai-calendar.css b/homepage/cwsvJudo/src/css/materialize/shiai-calendar.css new file mode 100644 index 0000000..6e3e5c4 --- /dev/null +++ b/homepage/cwsvJudo/src/css/materialize/shiai-calendar.css @@ -0,0 +1,680 @@ +.wkKalender { + width: 100%; + max-width: 100%; + /* background-color: #FFAE00; */ + margin-bottom: 0; +} + +.wkKalender > thead, +.wkKalender > tfoot { + display: none; +} + +.wkKalender > tbody { + display: block; +} + +.wkKalender > tbody > tr:empty, +.wkKalender > tbody > tr > th:empty { + display: none; +} +.wkKalender > tbody > tr { + display: block; + border: 1px solid #e0e0e0; + border-radius: 2px; + margin-bottom: 1.6rem; +} + +.wkKalender th { + display: block; + background-color: #666; + color: #fff; +} + +.wkKalender > tbody > tr > td { + display: block; + vertical-align: middle; + text-align: right; +} +.wkKalender > tbody > tr > td:nth-child(odd) { + /* background-color: #FF8100; */ +} +.wkKalender > tbody > tr > td[data-title]:before { + content: attr(data-title); + float: left; + font-size: inherit; + font-weight: 400; + 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 { + display: table-header-group; + width: 100%; + } + .wkKalender > tbody > tr { + display: table-row; + width: 100%; + } + .wkKalender > tbody > tr > td { + display: table-cell; + } + .wkKalender > tbody > tr > td[data-title]:before { + display: none; + content: ""; + } + .wkKalender > tbody { + display: table-row-group; + } + .wkKalender > tfoot { + display: table-footer-group; + } + .wkKalender > tbody > tr { + border: 1px solid #e0e0e0; + border-radius: 2px; + margin-bottom: 1.6rem; + } + .wkKalender > tbody > tr > td { + vertical-align: middle; + text-align: initial; + } + .wkKalender > tbody > tr:nth-child(odd) { + /* background-color: #FF8100; */ + } + .wkKalender > tbody > tr > td:nth-child(odd) { + background-color: inherit; + } + .wkKalender > tbody > tr > td[data-title]:before { + content: initial; + } + .wkKalender tr, + th, + td { + border: 1px solid black; + } + .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; + } + .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.8775em; + } + + /****************************************/ + /* 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.8775em; + } + + /****************************************/ + /* 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; + } +} + +/*abgeschaut*/ +.shadow-z-1 { + box-shadow: + 0 1px 3px 0 rgba(0, 0, 0, 0.12), + 0 1px 2px 0 rgba(0, 0, 0, 0.24); +} + +/* + * Mit Text overlay-tes Bild +*/ + +.textoverlayedImage { + position: relative; + display: table; +} +.textoverlayedImage > img { + width: 100%; + height: auto; +} +.textoverlayedImage > div { + z-index: 99; + width: fit-content; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.textoverlayedImage > div > p { + text-align: center; + color: white; + font-weight: lighter; + line-height: 2; + padding: 0 10%; +} + +/* + * Die Galerie der Galerien in der wkInfoBox +*/ +.wkBoxMediaGallery { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + align-items: center; +} +.wkBoxMediaGallery > * { + flex-basis: 50%; + padding: 5%; +} + +/* + * Tooltipps + */ + +/* Tooltip container */ +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* Position the tooltip text - see examples below! */ + position: absolute; + z-index: 1; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tooltip:hover .tooltiptext { + visibility: visible; +} + +.wkMonthBar { + display: flex; + flex-flow: wrap; + justify-content: space-evenly; +} + +.wkMonthBar > a { + text-align: center; + width: 30%; + display: inline-block; + padding: 0.25em 0.25em 0.25em 0.25em; + margin: 0.25em 0.25em 0.25em 0.25em; + box-shadow: 0.1em 0.1em 0.05em grey; + /* background-color: #FF8100; */ + border-radius: 0.5em; +} + +@media print { + .wkMonthBar { + display: none; + } + .wkKalender > thead { + display: table-header-group; + width: 100%; + } + .wkKalender > tbody > tr { + display: table-row; + width: 100%; + } + .wkKalender > tbody > tr > td { + display: table-cell; + } + /*qrCode*/ + .wkKalender > tbody > tr > td > img { + width: 1cm; + } + .wkKalender > tbody > tr > td:nth-of-type(5) > a { + display: none; + } + .wkKalender > tbody > tr > td[data-title]:before { + display: none; + content: ""; + } + .wkKalender > tbody { + display: table-row-group; + } + .wkKalender > tfoot { + display: table-footer-group; + } + .wkKalender > tbody > tr { + border: 1px solid #e0e0e0; + border-radius: 2px; + margin-bottom: 1.6rem; + } + .wkKalender > tbody > tr > td { + vertical-align: middle; + text-align: initial; + } + .wkKalender > tbody > tr:nth-child(odd) { + /* background-color: #FF8100; */ + } + .wkKalender > tbody > tr > td:nth-child(odd) { + background-color: inherit; + } + .wkKalender > tbody > tr > td[data-title]:before { + content: initial; + } + .wkKalender tr, + th, + td { + border: 1px solid black; + } + .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; + } + .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.8775em; + } + + /****************************************/ + /* 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.8775em; + } + + /****************************************/ + /* 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; + } +} diff --git a/homepage/cwsvJudo/src/favIcons/android-chrome-512x512.png b/homepage/cwsvJudo/src/favIcons/android-chrome-512x512.png new file mode 100644 index 0000000..32c0c6d Binary files /dev/null and b/homepage/cwsvJudo/src/favIcons/android-chrome-512x512.png differ diff --git a/homepage/cwsvJudo/src/htaccess/heliohost/.htaccess b/homepage/cwsvJudo/src/htaccess/heliohost/.htaccess index e230fc4..6b7ecbe 100644 --- a/homepage/cwsvJudo/src/htaccess/heliohost/.htaccess +++ b/homepage/cwsvJudo/src/htaccess/heliohost/.htaccess @@ -1,3 +1,19 @@ +## EXPIRES CACHING ## + +ExpiresActive On +ExpiresByType image/jpg "access 1 year" +ExpiresByType image/jpeg "access 1 year" +ExpiresByType image/gif "access 1 year" +ExpiresByType image/png "access 1 year" +ExpiresByType text/css "access 1 month" +ExpiresByType text/html "access 1 month" +ExpiresByType application/pdf "access 1 month" +ExpiresByType text/x-javascript "access 1 month" +ExpiresByType image/x-icon "access 1 year" +ExpiresDefault "access 1 month" + +## EXPIRES CACHING ## + # Auf die Fontdatei wird von der Subdomain aus zugegriffen # - das gesamte ressourcenVerzeichnis wird auf die Maindomain umgeleitet # - die mainDomain erlaubt aber anscheinend nicht, das fremde domains bei ihr anfragen startet @@ -12,6 +28,10 @@ # Url-Rewriting aktivieren RewriteEngine on +# consequently using the non-www version +RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] +RewriteRule ^(.*)$ http://%1/$1 [R=301,L] + # if the requested resource doesn't exist as ... # - file or ... RewriteCond %{REQUEST_FILENAME} !-f @@ -26,7 +46,7 @@ RewriteCond %{REQUEST_URI} !^/pages/responsive/ # Die angeforderte Ressource (als Datei) ist nicht im Rootverzeichnis RewriteCond %{REQUEST_FILENAME} !-f -# Die angeforderte Ressource (als Verzeichnis) ist nicht im +# Die angeforderte Ressource (als Verzeichnis) ist nicht im # Rootverzeichnis RewriteCond %{REQUEST_FILENAME} !-d diff --git a/homepage/cwsvJudo/src/page_data/404/404.md b/homepage/cwsvJudo/src/page_data/404/404.md new file mode 100644 index 0000000..59e3954 --- /dev/null +++ b/homepage/cwsvJudo/src/page_data/404/404.md @@ -0,0 +1,7 @@ +# 404 + +Die gesuchte Seite wurde nicht gefunden! + +Vielleicht kann die [Startseite][startseite] weiterhelfen. + +[startseite]: / diff --git a/homepage/cwsvJudo/src/page_data/404/meta.json b/homepage/cwsvJudo/src/page_data/404/meta.json new file mode 100644 index 0000000..41befbd --- /dev/null +++ b/homepage/cwsvJudo/src/page_data/404/meta.json @@ -0,0 +1,24 @@ +{ + "head": { + "meta": { + "title": "404", + "description": "Fehlerseite" + }, + "navTargets": [ + { + "url": "training", + "caption": "Training", + "title": "Trainingszeiten und -orte der Judoka des Chemnitzer WSV" + } + ] + }, + "main": { + "wallpapers": { + "root_path": "/ressourcen/graphiken/wallpapers", + "images": ["osae-komi", "nage", "kata"] + }, + + "sections": [["404.md"]] + }, + "footer": {} +} diff --git a/homepage/cwsvJudo/src/page_data/index/promos.php b/homepage/cwsvJudo/src/page_data/index/promos.php index 777ac14..53ea21c 100644 --- a/homepage/cwsvJudo/src/page_data/index/promos.php +++ b/homepage/cwsvJudo/src/page_data/index/promos.php @@ -10,6 +10,12 @@ $promos = [ "caption"=> "Dojo", "target"=> "/training#karten-der-trainingsstätten", "text"=> "Wegbeschreibung zu unserem Dojo" + ], + [ + "icon"=> "calendar_today", + "caption"=> "Kalender", + "target"=> "/kalender", + "text"=> "Kalender mit anstehenden Wettkämpfen" ] ]; return CwsvJudo\Promo\promos_html($promos); diff --git a/homepage/cwsvJudo/src/page_data/kalender/meta.json b/homepage/cwsvJudo/src/page_data/kalender/meta.json index c7c9e32..46c6212 100644 --- a/homepage/cwsvJudo/src/page_data/kalender/meta.json +++ b/homepage/cwsvJudo/src/page_data/kalender/meta.json @@ -1,5 +1,9 @@ { "head": { + "meta": { + "title": "Wettkampfkalender der Judoka des Chemnitzer Freizeit- und Wohngebiets­sportvereines e. V.", + "description": "Ein Kalender mit Judo-Wettkampfterminen zur Übersicht" + }, "navTargets": [ { "url": "training", diff --git a/homepage/cwsvJudo/src/pages/responsive/config.php b/homepage/cwsvJudo/src/pages/responsive/config.php deleted file mode 100644 index 8fb4fc5..0000000 --- a/homepage/cwsvJudo/src/pages/responsive/config.php +++ /dev/null @@ -1,6 +0,0 @@ - Section::create( + file_names: $file, + root_directory: $root_path + ), array: $data["sections"] ), - wallpapers: array_map(function ($name) use ( - $wallpaper_root_path - ): Wallpaper { - return Wallpaper::create($name, $wallpaper_root_path); - }, array: $data["wallpapers"]["images"]) + wallpapers: array_map( + fn($name) => Wallpaper::create($name, $wallpaper_root_path), + array: $data["wallpapers"]["images"] + ) ); } } class Wallpaper { - private string $src; - private string $data_src; + private string $src_dir; - public function __construct(string $src, string $data_src) + public function __construct(string $src_dir) { - $this->src = $src; - $this->data_src = $data_src; + $this->src_dir = $src_dir; } public function get_html() { - return ""; + $format = "avif"; //"webp"; + $widths = [1200, 600, 992, 1200, 2400]; + $src_sets = implode( + ", ", + array_map(fn($w) => "{$this->src_dir}/1200.{$format}", $widths) + ); + // return "src}\" data-src=\"{$this->data_src}\" alt=\"Wallpaper\">"; + return "src_dir}/mosaic.svg\" data-src=\"{$this->src_dir}/1200.{$format}\" data-srcset=\"{$src_sets}\" class=\"lazyload\" alt=\"Wallpaper\">"; } public static function create(string $name, string $root_path) { - return new Wallpaper( - src: $root_path . "/" . $name . ".svg", - data_src: $root_path . "/" . $name . ".jpg" - ); + return new Wallpaper(src_dir: "{$root_path}/{$name}"); } } @@ -184,7 +178,7 @@ class Newsboard "outCharset" => Newsboard::$config["outCharset"], ] ); - if (!is_null($entries)) { + if ($entries !== null) { foreach ($entries as $entryData) { $entry = new \CwsvJudo\News\Entry($entryData); $html .= @@ -237,6 +231,7 @@ function mainNavTargets($mainNav) echo ""; } ?> + @@ -244,12 +239,17 @@ function mainNavTargets($mainNav) + + - Judo im Chemnitzer WSV - Kinder- und Erwachsenentraining + <?php echo $meta["head"]["meta"]["title"]; ?> setPattern($format); + return $formatter->format($time); +} + +setlocale(LC_ALL, "de_DE@euro", "de_DE", "de", "ge"); +function toAscii($str, $replace = [], $delimiter = "-") +{ + if (!empty($replace)) { + $str = str_replace((array) $replace, " ", $str); + } + + $clean = iconv("UTF-8", "ASCII//TRANSLIT", $str); + $clean = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", "", $clean); + $clean = strtolower(trim($clean, "-")); + $clean = preg_replace("/[\/_|+ -]+/", $delimiter, $clean); + + return $clean; +} + class Kalender { private static array $config; @@ -17,6 +43,205 @@ class Kalender password: $password ); } + + /// Aus einer Liste von Wettkämpfen den htmlCode der Wettkampftabelle bereit stellen + private static function wkList2htmlWkTable( + $aWkList, + array $someOptions = [] + ) { + setlocale(LC_ALL, "de_DE.utf8"); + + // @todo bring back + // require_once $GLOBALS["basePath"] . + // "/ressourcen/phpLib/phpqrcode/qrlib.php"; + + if (empty($aWkList)) { + return ""; + } + + $htmlWkTableString = ""; + + $htmlWkTableString .= + "" . + "" . + "" . + "" . + "" . + "" . + "" . + // "" . + "" . + "" . + ""; + + $lastMonthName = ""; + + foreach ($aWkList as $wk) { + // Zeichensatzkonvertierung + array_walk($wk, function (&$value, $key) { + $value = iconv("ISO-8859-1", "UTF-8", $value); + }); + + if ( + $lastMonthName != + new_strftime("MMMM yyyy", strtotime($wk["Datum"])) + ) { + $lastMonthName = new_strftime( + "MMMM yyyy", + strtotime($wk["Datum"]) + ); + $htmlWkTableString .= + ""; + } + + // @todo reactivate strctured data + // $wkJsonSd = wkArray2jsonSdEvent($wk); + + // 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"] + ); + $wk["Veranstaltung"] = str_replace( + "spiele", + "­spiele", + $wk["Veranstaltung"] + ); + $wk["Veranstaltung"] = str_replace( + "mannschaft", + "mann­schaft", + $wk["Veranstaltung"] + ); + + $htmlWkTableString .= + // "". + "" . + // "" . + "" . + "" . + "" . + "" . + // "" . + "\n"; + } + $htmlWkTableString .= + "" . + "" . + "" . + "" . + "" . + "" . + "" . + // "" . + "" . + "" . + "
DatumVeranstaltungOrtAltersklasse(n)iCal
" . + $lastMonthName . + "
" . + "" . + "" . + "" . + "" . + "" . + $wk["Veranstaltung"] . + "" . + "" . + "" . + $wk["Ort"] . + "" . + "" . + $wk["Altersklassen"] . + // @todo reactivate + // "" . + // json_encode(akListString2jgArray($wk["Altersklassen"])) . + // "" . + "" . + // "iCal" . + // "\"http://cwsvjudo.bplaced.net/wkKalender/"" . + "
DatumVeranstaltungOrtAltersklasse(n)iCal
"; + + // @todo evaluate if it should be reactivate + // Für den Fall einer ampSeite müssen die imgTags angepasst werden + // if (check_for_amp_site()) { + // $htmlWkTableString = str_replace( + // "", + // ">", + // $htmlWkTableString + // ); + // } + + return $htmlWkTableString; + } + public static function get_html() { $db_connection = Kalender::$dbHandle->getDbConnection(); @@ -71,7 +296,7 @@ class Kalender "
  • Datum:
    • " . "
  • Altersklassen: " . $wk["Altersklassen"] . @@ -193,11 +418,11 @@ class Kalender $siteData["mainContent"] .= htmlWkMonthBar($ergebnis); $ergebnis = $db_connection->query($query); - $siteData["mainContent"] .= wkList2htmlWkTable($ergebnis); + $siteData["mainContent"] .= Kalender::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!
    "; + // "Link zum Archiv mit allen Ausschreibungen."; /* @todo: Wettkampfselektor wieder ergänzen
    @@ -230,9 +455,7 @@ class Kalender // die(); } - //var_dump( $siteData['errors'] ); - echo $siteData["mainContent"]; - return; + return $siteData["mainContent"]; } } @@ -246,10 +469,12 @@ function htmlWkMonthBar($aWkList) $lastMonthName = ""; foreach ($aWkList as $wk) { - if ($lastMonthName != strftime("%b %Y", strtotime($wk["Datum"]))) { - $lastMonthName = strftime("%b %Y", strtotime($wk["Datum"])); + if ( + $lastMonthName != new_strftime("MMM yyyy", strtotime($wk["Datum"])) + ) { + $lastMonthName = new_strftime("MMM yyyy", strtotime($wk["Datum"])); $wkMonthBar .= - "" . $lastMonthName . diff --git a/homepage/cwsvJudo/src/shared/favicon.html.inc b/homepage/cwsvJudo/src/shared/favicon.html.inc index 45568e6..52b8eb5 100644 --- a/homepage/cwsvJudo/src/shared/favicon.html.inc +++ b/homepage/cwsvJudo/src/shared/favicon.html.inc @@ -2,35 +2,35 @@ rel="apple-touch-icon" sizes="180x180" href="/ressourcen/graphiken/logos/favIcons/apple-touch-icon.png" -/> +> +> +> +> +> +> - +> +