diff --git a/.gitignore b/.gitignore index b9e885a..59ad1e3 100644 --- a/.gitignore +++ b/.gitignore @@ -96,3 +96,9 @@ $RECYCLE.BIN/ .venv env venv + +# Lockfies and package management +poetry.lock +pyproject.toml +package-lock.json +package.json diff --git a/assets/css/style.css b/assets/css/style.css index bce2245..20b8fd1 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -35,13 +35,14 @@ --dark-red: #dc0000; --dark-green: #007000; - --column-count: 3; + --column-count: 2; } body { font-family: 'Lato', sans-serif; font-weight: normal; - line-height: 1.5rem; + font-size: 1.25rem; + line-height: 1.5em; color: var(--wtf-nearly-black); background-color: var(--wtf-light-grey) } @@ -80,10 +81,10 @@ body { } .primary_nav__toggle p { - margin: 0.5rem 0 0 0; - padding: 0; + margin: 0; + padding: 0 0 0 0; position: relative; - left: -0.2rem; + right: 0.5rem; bottom: 0.65rem; color: var(--wtf-nearly-black); } @@ -104,47 +105,20 @@ body { font-size: 1.25rem; } -.primary_nav__navlink.-active, -.primary_nav__sub_navlink.-active { +.primary_nav__navlink.-active { color: var(--wtf-orange); text-decoration: underline; } -.primary_nav__navitem.-last, .primary_nav__navitem.-last a { - margin-right: 0; - padding-right: 0; -} - .primary_nav__navlink { color: var(--wtf-nearly-black); } -.primary_nav__sub_navlink { - color: var(--wtf-nearly-white); -} - .primary_nav__navlink:hover { color: var(--wtf-mid-grey); text-decoration: underline; } -.primary_nav__sub_navlist { - display: none; - z-index: 20; -} - -.primary_nav__navlist > li:hover > .primary_nav__sub_navlist { - display: block; - margin: 2.6rem 0 0 -0.5rem; - padding: 0; - position: absolute; - background-color: var(--wtf-dark-blue); - border-left: 2px solid var(--wtf-mid-grey); - border-right: 2px solid var(--wtf-mid-grey); - border-bottom: 2px solid var(--wtf-mid-grey); - box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.35); -} - /* * Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch * Submenümarker aus. @@ -174,13 +148,6 @@ body { border-right: 3px solid var(--wtf-nearly-black); } -.primary_nav__sub_navitem { - margin: 0; - padding: 0.5rem 0.5rem; - list-style: none; - text-align: left; -} - .header__secondary_nav { margin: 4.5rem 0.5rem 0 0; } @@ -235,9 +202,7 @@ header { z-index: 1; } -.header__button, -.content__button, -.claim__button, + .pod_ctrl_box__button { height: 3rem; margin: 1.5rem 1rem 0rem 0; @@ -259,11 +224,6 @@ header { max-width: 20rem; } -.content__button { - width: 70%; - margin-top: 0; -} - .header__bg_box { margin-top: -0.75rem; @@ -279,13 +239,12 @@ header { .header__slim_box { margin-top: -0.75rem; - padding-bottom: 6em; background-image: url("../images/wtf-header-bg.jpg"); background-repeat: no-repeat; background-size: cover; display: grid; - grid-template-rows: 46px 18px; + grid-template-rows: 46px auto auto; grid-template-columns: 15% 82px auto 96px 22.5%; z-index: 0; } @@ -297,6 +256,10 @@ header { z-index: 5; } +.slim_box__top_bar_left { + margin-bottom: 6rem; +} + .bg_box__top_bar_middle, .slim_box__top_bar_middle { grid-row: 1 / span 2; grid-column: 4 / span 1; @@ -334,7 +297,39 @@ header { background-size: auto 115%; background-repeat: no-repeat; z-index: 10; - margin-bottom: -6em; + padding: 5rem; +} + +.slim_box__submenu { + grid-row: 3 / span 1; + grid-column: 1 / span 5; + background-color: var(--wtf-nearly-white); + height: 3.5rem; + text-align: right; + color: var(--wtf-nearly-black); + padding-right: 1rem; + font-size: 3rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; +} + +.slim_box__submenu a { + font-family: "Noto Serif"; + font-size: 2.5rem; + color: black; + margin: 0 0 0.75rem 2rem; +} + +.slim_box__submenu a:hover { + text-decoration: underline; +} + +.slim_box__submenu a img { + height: 2.25rem; + position: relative; + top: 0.25rem; } .bg_box__big_bg { @@ -378,7 +373,7 @@ header { z-index: 15; } -.header__claim h2 { +.header__claim h2, .header__claim ul { font-family: 'Noto Serif', serif; font-weight: 700; font-weight: normal; @@ -387,8 +382,14 @@ header { margin-top: 0.5em; } +.header__claim h2 { + margin-left: 7rem; + color: var(--wtf-nearly-black); +} + .header__claim h2 em { color: var(--wtf-orange); + font-style: normal; } .header__claim h2 span { @@ -398,7 +399,39 @@ header { padding: 0 1rem; } -.header__claim p, .header__sub_claim p { +.header__claim ul { + margin: 0; + font-size: 2rem; +} + +.header__claim ul li { + margin: 0; + list-style: none; + list-style-position: inside; +} + +.header__claim ul li::before { + content: url('../images/frontpage_tirangle_bullet.svg'); + margin-right: 0.75rem; +} + +.header__claim ul li.-first { + margin-left: 4.5rem; +} + +.header__claim ul li.-second{ + margin-left: 2.5rem; +} + +.header__claim ul li.-third{ + margin-left: 0.5rem; +} + +.header__claim ul li::marker { + font-size: 4.5rem; +} + +.header__sub_claim p { font-family: 'Lato', sans-serif; font-weight: normal; line-height: 1.4rem; @@ -420,21 +453,16 @@ header { background-color: transparent; } -.sub_claim__box, .claim__background_box { +.sub_claim__box { padding: 0.5rem 1.5rem 3.5rem 1.5rem; background-color: var(--wtf-orange); z-index: 5; } -.sub_claim__button, .claim__button { - align-self: flex-end; - margin-top: -1.5rem; - z-index: 5; -} - .header__sub_claim h2 { font-family: 'Noto Serif', serif; font-weight: 700; + color: var(--wtf-nearly-black); font-weight: normal; font-size: 1.75rem; line-height: 1.3em; @@ -454,23 +482,18 @@ header { text-decoration: none; } -.content__inner_third_button_link, -.claim__button_link, + .pod_ctrl_box__button_link { color: var(--wtf-nearly-white) !important; font-family: 'Lato Bold' !important; } -.header__button_link, -.content__inner_third_button_link, -.claim__button_link, + .pod_ctrl_box__button_link { text-decoration: none !important; } -.header__button_link:hover, -.content__inner_third_button_link:hover, -.claim__button_link:hover, + .pod_ctrl_box__button_link:hover { text-decoration: underline !important; } @@ -494,20 +517,18 @@ h1 { line-height: 1.3em; } +h1.big_heading { + font-size: 7.5rem; +} + h2 { font-family: 'Noto Serif'; + color: var(--wtf-orange); font-size: 2rem; line-height: 1.1em; margin: 1em 0 0.25em 0; } -.content__inner_third_heading { - font-family: 'Lato'; - font-size: 1.5rem; - color: var(--wtf-orange); - margin-bottom: 1.5rem; -} - h3 { font-family: 'Noto Serif'; font-size: 1.75rem; @@ -522,20 +543,6 @@ h4 { margin-top: 0.5em; } -h5 { - font-family: 'Noto Serif'; - font-size: 1.25rem; - line-height: 1.2em; - margin-top: 0.5em; -} - -h6 { - font-family: 'Noto Serif'; - font-size: 1rem; - line-height: 1.2em; - margin-top: 0.5em; -} - p { margin-bottom: 1rem; } @@ -579,6 +586,10 @@ strong{ font-weight: bold; } +em { + font-style: italic; +} + hr { color: var(--wtf-nearly-black); margin: 0.25rem 0; @@ -588,13 +599,6 @@ hr.-even { color: var(--wtf-light-grey); } -.body__separator { - max-width: 1080px; - width: 90%; - margin: 3rem 0 0 0; - color: var(--wtf-orange); -} - .content { padding: 1.5rem 0; width: 100%; @@ -621,58 +625,23 @@ hr.-even { } .content__box, -.content__half_box, -.content__third_box, -.content__aggregate_box { +.contact__box, +.content__half_box { margin: 0 auto; padding: 0; } -.content__half_box, -.content__third_box, -.content__aggregate_box { +.content__half_box { display: flex; flex-direction: row; } -.content__aggregate_box { - flex-wrap: wrap; - justify-content: space-between; -} - .content__inner_half_box { width: 50%; } -.content__inner_third_box { - flex-basis: 33%; -} - -.content__inner_aggregate_box { - margin: 1.5rem 1.5rem; - flex-basis: 40%; - min-width: 300px; -} - -.flex_heading { - margin-top: 0.5rem; - z-index: 5; -} - -.claim { - display: flex; - flex-direction: column; -} - -.claim__text { - color: var(--wtf-nearly-white); - font-size: 1.2rem; - line-height: 1.4em; - margin: 0.5rem 0 1.5rem 0; -} - -.claim__button { - z-index: 5; +.indented_box { + padding-left: 1rem; } .card { @@ -703,30 +672,6 @@ hr.-even { text-align: center; } -.content__inner_third_image { - margin-bottom: 1.5rem; -} - -.content__inner_third_heading_link, -.content__aggregate_heading_link { - color: var(--wtf-light-blue); - text-decoration: underline; -} - -.content__inner_third_heading_link:hover, -.content__aggregate_heading_link:hover { - color: var(--wtf-dark-grey); -} - -.content__button_box { - width: 100%; -} - -.content__button, { - display: block; - margin: 0 auto 0 auto; -} - .content__teaser { color: var(--wtf-orange); font-size: 1.15rem; @@ -736,35 +681,267 @@ hr.-even { text-align: right; } -.content__inline_image { - height: 1.25rem; - vertical-align: middle; -} - -.content__half_box_image, .content__inner_third_image { +.content__half_box_image { width: 100%; } +.content__video { + width: 100%; + aspect-ratio: 16/9; +} + +.content__faq { + margin-top: 0.75rem; +} + +.content__faq div { + border-top: 1px solid var(--wtf-nearly-black); + margin: 0.5rem auto auto 1rem; + max-width: 75ch; +} + +/* Contact form - start */ +.contact__box { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; +} + +.contact__box h1 { + grid-area: 1 / 1 / 2 / 3; + + font-size: 0.25rem; + color: transparent; + background-image: url("../images/headings/kontakt.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: top 1.5rem left; + transform-origin: top right; + transform: translateX(-90%) rotate(-80deg); + padding: 0; + max-width: 50%; + z-index: 0; +} + +.contact__box .contact_info__box { + grid-area: 1 / 1 / 2 / 2; + margin-left: 38%; + z-index: 1; +} + +.contact__box .contact_form_box { + grid-area: 1 / 2 / 3 / 2; + z-index: 1; +} + +.contact_info__box { + align-self: end; +} +/* Contact form - end */ + +/* card_grid - start */ +.card_grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + row-gap: 1.5rem; + column-gap: 1.5rem; +} + +.card_grid__card { + /* RESET VALUES FROM OTHER CARD CLASS - START */ + margin: 0; + max-width: max-content; + display: block; + /* RESET VALUES FROM OTHER CARD CLASS - END */ + display: flex; + flex-direction: column; +} + +.card__header { + background-color: #0990A9; + background-image: url("../images/rss_logo.svg"); + background-repeat: no-repeat; + background-position: top 1rem right 1rem; + background-size: 2.25rem; + color: var(--wtf-nearly-white); + padding: 1rem; +} + +.card__header--podcast { + background-color: #176f9d; + background-image: url("../images/podcast_logo.svg"); +} + +.card__header img { + position: relative; + top: 0.15rem; + height: 1rem; +} + +.card__heading { + font-family: "Noto Serif"; + font-size: 1.75rem; + line-height: 2rem; + color: var(--wtf-nearly-white); + margin: 0.5rem 2.5rem 1rem 0; + +} + +.card__info { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.card__info p { + margin-bottom: 0; +} + +.card__body { + background-color: var(--wtf-nearly-white); + padding: 1rem; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + box-shadow: 0px -0.25rem 0.5rem -0.25rem var(--wtf-nearly-black); +} + +.pod_ctrl_box audio { + width: 100%; + height: auto; + margin-bottom: 1rem; +} + +.card__link p { + text-align: right; + margin: 0; +} +/* card_grid - end */ + +/* services- start */ +.services_box { + display: grid; + grid-template-columns: 3fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: "cards heading"; + + margin-bottom: 3rem; +} + +.services_box h1 { + margin-right: 1.5rem; + color: transparent; + background-image: url("../images/headings/services.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: right; + grid-area: heading; +} + +.services_card_box { + grid-area: cards; + margin-left: 1.5rem; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.services_card { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; + padding: 2rem; + background-color: var(--wtf-nearly-white); + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); +} + +.services_card.-even { + flex-direction: row-reverse; +} + +.services_card__image_box img { + height: 8rem; +} + +.services_card__text_box { + font-size: 1.25rem; + line-height: 1.5em; +} + +.services_card__text_box h2 { + font-family: "Lato"; + font-size: 1.5rem; + color: var(--wtf-orange); + margin-bottom: 0.5rem; +} +/* services_cards - end */ + +/* bubble_gird - start */ +.bubble_grid { + margin: 0 1.5rem 0 1.5rem; + + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(4, 10rem); + +} + +.bubble_grid__bubble { + align-self: center; + background-color: var(--wtf-nearly-white); + width: 8rem; + height: 8rem; + border-radius: 50%; + justify-self: center; + + display: flex; + justify-content: center; + align-items: center; +} + +.bubble_grid__bubble img { + max-width: 5rem; + max-height: 5rem; +} + +.bubble_grid__card { + grid-column: 1 / span 3; + grid-row: 2 / span 3; + + font-size: 1.25rem; + line-height: 1.5em; + background-color: var(--wtf-nearly-white); + padding: 3rem; + margin: 1.5rem +} +/* bubble_gird - end */ + .content__box p, .content__box li { hyphens: auto; } .content__box a, .pagination__anchor, -.content__half_box a { +.content__half_box a, +.card__link p a { color: var(--wtf-orange); } .content__box a:hover, .pagination__anchor:hover, -.content__half_box a:hover { +.content__half_box a:hover, +.card__link p a:hover { color: var(--wtf-light-blue); } .content__box a:visited, .pagination__anchor:visited, .content__half_box a:visited, -.pagination__anchor.-even:visited { +.pagination__anchor.-even:visited, +.card__link p a:visited { color: var(--wtf-light-blue); } @@ -772,20 +949,36 @@ hr.-even { margin: 3.5rem 1.5rem 0 1.5rem; } -.content__inner_box, .content__inner_half_box, .content__inner_third_box { +.content__inner_box, .content__inner_half_box { margin: -0.5rem 1.5rem 0 1.5rem; } +.content__box.-membership { + background-image: url("../images/numbers_one.svg"); + background-repeat: no-repeat; + background-position: top 20% left; + background-size: 20% auto; +} + +.content__inner_box.-membership { + background-image: url("../images/numbers_two.svg"); + background-repeat: no-repeat; + background-position: center right; + background-size: 28% auto; +} + +.content__body.-membership { + background-image: url("../images/numbers_three.svg"); + background-repeat: no-repeat; + background-position: bottom 12% left; + background-size: 22% auto; +} + .content__rss_logo { display: inline; height: 1rem; } -.content__rss_logo_heading, -.content__podcast_logo_heading { - height: 1.75rem; -} - .content__pagination { text-align: center; @@ -799,13 +992,11 @@ hr.-even { } -.nav__wrapper, -.header__wrapper, .content__box, +.contact__box, .content__half_box, .footer__wrapper, -.content__third_box, -.content__aggregate_box { +.card_grid { width: 100%; max-width: 1200px; orphans: 3; @@ -846,8 +1037,7 @@ hr.-even { z-index: 0; } -.content__inner_box.-card_box, -.content__inner_box.-card_box_head { +.content__inner_box.-card_box { display: flex; justify-content: space-around; flex-direction: row; @@ -857,13 +1047,7 @@ hr.-even { margin: 0; } -.content__inner_box.-card_box_head { - margin-bottom: -5rem; -} - .content__box.-columns { - -webkit-column-count: var(--column-count); - -moz-column-count: var(--column-count); column-count: var(--column-count); } @@ -887,15 +1071,10 @@ hr.-even { justify-content: flex-start; } -.contact_form--required, -.--error { +.contact_form--required { color: var(--dark-red) } -.--success { - color: var(--dark-green); -} - .contact_form__textarea, .contact_form__text_input, .contact_form__captcha { @@ -918,12 +1097,11 @@ hr.-even { } .contact_form__submit_button { - font-size: 1rem; - padding: 0 0.25rem; + font-size: 1rem; + padding: 0 0.25rem; } -/* Hide captcha field as part of spam protection. - We got no real captcha. */ +/* Hide captcha field as part of spam protection. We got no real captcha. */ .contact_form__captcha { display: none; } @@ -962,15 +1140,13 @@ footer { background-color: var(--wtf-footer-grey); } -.footer__content_box { - -} - .footer__nav { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; + font-size: 1rem; + line-height: 1.5rem; } .footer__social_logo { max-width: 30px; @@ -994,9 +1170,6 @@ footer { /* footer - Ende */ @media screen and (min-width: 1200px) { - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } .primary_nav__toggle { display: none; @@ -1012,18 +1185,11 @@ footer { } @media screen and (min-width: 1100px) and (max-width: 1200px) { - .header__top_box .header__button { - display: auto; - } .header__bg_box { grid-template-columns: 15% 82px auto 96px 22.5%; } - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } @@ -1046,14 +1212,6 @@ footer { margin-left: 0.5rem; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } @@ -1069,14 +1227,6 @@ footer { .content__inner_box { margin: -0.5rem 1.5rem 0 1.5rem; } - - .content__button { - width: 100%; - } - - .content__inner_box.-card_box_head { - margin-bottom: 0; - } } @media screen and (max-width: 1044px) and (min-width: 960px) { @@ -1094,12 +1244,8 @@ footer { background-position: top -100px right -580px; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; + .sub_claim__box { + padding: 0 1.5rem 2rem 1.5rem; } .primary_nav__toggle { @@ -1118,27 +1264,44 @@ footer { margin: -0.5rem 1.5rem 0 1.5rem; } - .content__button { - width: 100%; - } - - .content__inner_box.-card_box_head { - flex-direction: column-reverse; - } - - .flex_heading { - margin: 1.5rem 0 -1.5rem 1.5rem; - } - .content__box.-card_box.-homepage { margin-top: 0; padding-top: 0; } + + .contact__box { + display: flex !important; + flex-direction: column; + } + + .contact__box h1 { + transform: translateX(0) rotate(0); + color: var(--wtf-orange); + background-image: none; + font-size: 7.5rem; + margin: 0 0 0 1.5rem; + order: 1; + } + + .contact__box .contact_info__box { + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 100%; + max-width: 75ch; + + display: flex; + justify-content: space-between; + } + + .contact__box .contact_form_box { + order: 2; + } } @media screen and (max-width: 959px) and (min-width: 790px) { header { - margin-bottom: 1rem; + margin-bottom: 2.5rem; } .header__bg_box { @@ -1160,15 +1323,11 @@ footer { .header__sub_claim { grid-column: 1 / span 5; padding: 0; - margin: 2rem 1.5rem -3rem 1.5rem; + margin: 5.5rem 1.5rem 0 1.5rem; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; + .sub_claim__box { + padding: 0 1.5rem 2rem 1.5rem; } .primary_nav__toggle { @@ -1187,28 +1346,48 @@ footer { margin: -0.5rem 1.5rem 0 1.5rem; } - .content__button { - width: 100%; - } - - .content__inner_box.-card_box_head { - flex-direction: column-reverse; - margin-bottom: 0; - } - - .flex_heading { - margin: 1.5rem 0 -1.5rem 1.5rem; - } - .content__box.-card_box.-homepage { margin-top: 0; padding-top: 0; } + + .contact__box { + display: flex !important; + flex-direction: column; + } + + .contact__box h1 { + transform: translateX(0) rotate(0); + color: var(--wtf-orange); + background-image: none; + font-size: 7.5rem; + margin: 0 0 0 1.5rem; + order: 1; + } + + .contact__box .contact_info__box { + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 90%; + max-width: 75ch; + + display: flex; + justify-content: space-between; + } + + .contact__box .contact_form_box { + order: 2; + } } @media screen and (max-width: 850px) and (min-width: 790px) { :root { - --column-count: 2 + --column-count: 1 + } + + header { + margin-bottom: 1rem; } .header__bg_box { @@ -1219,47 +1398,77 @@ footer { display: none; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } .primary_nav__navlist { - display: flex !important; + width: 100%; + justify-content: space-evenly; + } + + .primary_nav__navitem, + .primary_nav__navlink { + padding-right: 0; + } + + .primary_nav__navitem { + margin: 0; + padding: 0.25rem 0 0 0; + list-style: none; + display: block; } .secondary_nav__navlist { margin-right: 0.5rem; } - .content__button { - width: 100%; + .header__claim { + margin-top: 0.5rem; } - .content__inner_box.-card_box_head { - flex-direction: column-reverse; - } - - .flex_heading { - margin: 1.5rem 0 -1.5rem 1.5rem; + .header__sub_claim { + margin-top: 3rem; } .content__box.-card_box.-homepage { margin-top: 0; padding-top: 0; } + + .services_box { + display: block; + margin: 0 1.5rem 3rem 1.5rem; + } + + .services_box h1 { + color: var(--wtf-orange); + background-image: unset; + margin-bottom: 1rem; + } + + .services_card_box { + margin: 0; + } + + .bubble_grid { + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 10rem); + } + + h1.big_heading, + .contact__box h1 { + font-size: 3.5rem; + } + + .card_grid { + grid-template-columns: 1fr; + } } @media screen and (max-width: 789px) and (min-width: 596px) { :root { - --column-count: 2 + --column-count: 1 } header { @@ -1292,6 +1501,7 @@ footer { .header__slim_box { background-image: none; padding-bottom: 0; + margin-bottom: 1.5rem; } .slim_box__top_bar_left { @@ -1307,6 +1517,10 @@ footer { .slim_box__top_bar_right { display: none; } + + .slim_box__submenu { + margin-right: 2.25rem; + } /* slim header - end */ .header__claim { @@ -1316,6 +1530,10 @@ footer { background: var(--wtf-dark-blue); } + .header__claim h2 { + margin-left: 1.5rem; + } + .header__claim h2 span { padding: 0 1.5rem; } @@ -1323,7 +1541,21 @@ footer { .header__claim p { margin: 0; padding: 1.5rem; + color: var(--wtf-nearly-black); + } + + .header__claim ul { + display: flex; + justify-content: space-between; + margin: 1.5rem; + } + + .header__claim ul li.-first, + .header__claim ul li.-second, + .header__claim ul li.-third { color: var(--wtf-nearly-white); + margin: 0; + font-size: 1.75rem; } .header__sub_claim { @@ -1336,10 +1568,6 @@ footer { padding-bottom: 2.5rem; } - .header__top_box .header__button { - display: auto; - } - .header__primary_nav { height: 2.5rem; } @@ -1353,14 +1581,6 @@ footer { margin-right: 1.5rem; } - .primary_nav__navlist > li:hover > .primary_nav__sub_navlist { - margin: 2.2rem 0 0 -0.5rem; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } @@ -1374,35 +1594,17 @@ footer { margin-bottom: 1rem; } - .content__half_box, .content__third_box { + .content__half_box { flex-direction: column; padding: 0; width: auto; } - .content__inner_half_box, .content__inner_third_box { + .content__inner_half_box { width: auto; margin: 0 1.5rem; } - .content__button { - width: 40%; - margin: 0 0 0 auto; - } - - .content__inner_third_heading { - margin-top: 3rem; - } - - .content__inner_box.-card_box_head { - flex-direction: column-reverse; - margin-bottom: 0; - } - - .flex_heading { - margin: 1.5rem 0 -1.5rem 1.5rem; - } - .content__box.-card_box.-homepage { margin-top: 0; padding-top: 0; @@ -1411,15 +1613,72 @@ footer { .card { max-width: 250px; } + + .contact__box { + display: flex !important; + flex-direction: column; + } + + .contact__box h1 { + transform: translateX(0) rotate(0); + color: var(--wtf-orange); + background-image: none; + font-size: 3.5rem; + margin: 0 0 0 1.5rem; + order: 1; + } + + .contact__box .contact_info__box { + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 90%; + max-width: 75ch; + + display: flex; + justify-content: space-between; + } + + .contact__box .contact_form_box { + order: 2; + } /* homepage - end */ .pod_ctrl_box { margin-top: 1.5rem; } - .content__inner_aggregate_box { - margin: 1.5rem 1rem; - flex-grow: 1; + .content__box.-card_box.-homepage { + margin-top: 0; + padding-top: 0; + } + + .services_box { + display: block; + margin: 0 1.5rem 3rem 1.5rem; + } + + .services_box h1 { + color: var(--wtf-orange); + background-image: unset; + margin-bottom: 1rem; + } + + .services_card_box { + margin: 0; + } + + .bubble_grid { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(6, 10rem); + } + + h1.big_heading { + font-size: 3.5rem; + } + + .card_grid { + grid-template-columns: 1fr; } } @@ -1430,23 +1689,19 @@ footer { /* global styles - start */ h1 { - font-size: 2rem; + font-size: 2.5rem; } h2 { - font-size: 1.25rem; + font-size: 1.75rem; } h3 { - font-size: 1.15rem; + font-size: 1.5rem; } h4 { - font-size: 1.1rem; - } - - h5 { - font-size: 1.05rem; + font-size: 1.25rem; } /* global styles - start */ @@ -1459,10 +1714,6 @@ footer { background-color: transparent; } - .primary_nav__members, .primary_nav__lang_switch { - display: block; - } - header { margin-bottom: 0; } @@ -1473,12 +1724,12 @@ footer { justify-content: center; } - .header__bg_box { - background-image: none; + .header__logo_box { + z-index: 41; } - .header__slim_box { - margin-top: -3rem; + .header__bg_box { + background-image: none; } .header__claim { @@ -1499,6 +1750,38 @@ footer { color: var(--wtf-nearly-white); } + .header__claim h2 { + margin-left: 0.5rem; + } + + .header__claim h2 span { + padding: 0 0.5rem; + } + + .header__claim p { + margin: 0; + padding: 1.5rem; + color: var(--wtf-nearly-black); + } + + .header__claim ul { + display: flex; + justify-content: space-between; + margin: 1rem; + } + + .header__claim ul li.-first, + .header__claim ul li.-second, + .header__claim ul li.-third { + color: var(--wtf-nearly-white); + margin: 0; + font-size: 1.25rem; + } + + .header__claim ul li::before { + content: unset; + } + .header__sub_claim { grid-column: 1 / span 5; padding: 0; @@ -1513,10 +1796,6 @@ footer { font-size: 1.25rem; } - .header__button, .content__button, .claim__button { - font-size: 1em; - } - .bg_box__top_bar_left, .bg_box__top_bar_middle, .bg_box__top_bar_right, @@ -1532,7 +1811,7 @@ footer { /* slim header - start */ .header__slim_box { background-image: none; - margin: 0; + margin: 0 0 1.5rem 0; padding: 0; z-index: 40; } @@ -1550,10 +1829,26 @@ footer { .slim_box__unicorns { display: none; } + + .slim_box__submenu { + height: 2rem; + padding-top: 0.5rem; + margin-right: 2.25rem; + padding-right: 0.5rem; + } + + .slim_box__submenu a { + font-size: 1.25rem; + margin: 0 0 0.75rem 1rem; + } + + .slim_box__submenu a img { + height: 1.5rem; + } /* slim header - end */ .sub_claim__box { - padding-bottom: 2.5rem; + padding: 0 1rem 1rem 1rem; } /* mobile nav - Start */ @@ -1587,36 +1882,7 @@ footer { display: block; } - .primary_nav__sub_navlist { - display: block; - background-color: transparent; - border: none; - box-shadow: none; - margin: 0 0 0 1rem; - } - - .primary_nav__navlist > li:hover > .primary_nav__sub_navlist { - margin: 0 0 0 1rem; - position: static; - background-color: transparent; - border: none; - box-shadow: none; - } - - .primary_nav__sub_navitem { - margin: 0; - padding: 0.5rem 0.5rem; - list-style: none; - text-align: left; - border-top: 1px solid var(--wtf-mid-grey); - } - - .primary_nav__sub_navitem { - border-top: none; - } - - .primary_nav__navlink, - .primary_nav__sub_navlink { + .primary_nav__navlink { color: var(--wtf-nearly-black) } @@ -1626,9 +1892,6 @@ footer { /* mobile nav - Ende */ /* homepage - start */ - .body__separator { - margin: 0; - } .content__inner_box.-logo_header { margin: -0.5rem 1.5rem 0 1.5rem; @@ -1638,35 +1901,17 @@ footer { margin-bottom: 1rem; } - .content__half_box, .content__third_box { + .content__half_box { flex-direction: column; padding: 0; width: auto; } - .content__inner_half_box, .content__inner_third_box { + .content__inner_half_box { width: auto; margin: 0 1.5rem; } - .content__button { - width: auto; - margin: -0.5rem 0 0 auto; - } - - .content__inner_third_heading { - margin-top: 1.5rem; - } - - .content__inner_box.-card_box_head { - flex-direction: column-reverse; - margin-bottom: 0; - } - - .flex_heading { - margin: 1.5rem 0 -1.5rem 1.5rem; - } - .content__box.-card_box.-homepage { margin-top: 0; padding-top: 0; @@ -1676,6 +1921,44 @@ footer { margin-top: 1.5rem; max-width: 450px; } + + .contact__box { + display: block; + } + + .contact__box { + display: flex !important; + flex-direction: column; + } + + .contact__box h1 { + transform: translateX(0) rotate(0); + color: var(--wtf-orange); + background-image: none; + font-size: 3.5rem; + margin: 0 0 0 1.5rem; + order: 1; + } + + .contact__box .contact_info__box { + margin: 0.5rem 0 0 1.5rem; + align-self: start; + order: 3; + width: 90%; + max-width: 75ch; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .contact__box .contact_info__box p { + margin-right: 0.5rem; + } + + .contact__box .contact_form_box { + order: 2; + } /* homepage - end */ /* content - start */ @@ -1687,9 +1970,47 @@ footer { margin-top: 1.5rem; } - .content__inner_aggregate_box { - margin: 1.5; - flex-grow: 1; + .services_box { + display: block; + margin: 0 1.5rem 3rem 1.5rem; + } + + .services_box h1 { + color: var(--wtf-orange); + background-image: unset; + margin-bottom: 1rem; + } + + .services_card_box { + margin: 0; + } + + .services_card, + .services_card.-even { + flex-direction: column; + } + + .services_card__text_box h2 { + margin-top: 0; + } + + h1.big_heading { + font-size: 2.5rem; + } + + .bubble_grid { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(11, 10rem); + } + + .bubble_grid__card { + padding: 2rem; + grid-column: 1 / span 2; + grid-row: 2 / span 3; + } + + .card_grid { + grid-template-columns: 1fr; } /* content - end */ diff --git a/assets/images/frontpage_tirangle_bullet.svg b/assets/images/frontpage_tirangle_bullet.svg new file mode 100644 index 0000000..a8c7783 --- /dev/null +++ b/assets/images/frontpage_tirangle_bullet.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/headings/kontakt.svg b/assets/images/headings/kontakt.svg new file mode 100644 index 0000000..59725a9 --- /dev/null +++ b/assets/images/headings/kontakt.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/headings/services.svg b/assets/images/headings/services.svg new file mode 100644 index 0000000..5bb14a3 --- /dev/null +++ b/assets/images/headings/services.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/merch_logo_rounded_square.svg b/assets/images/merch_logo_rounded_square.svg new file mode 100644 index 0000000..23ed6cb --- /dev/null +++ b/assets/images/merch_logo_rounded_square.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/microphone.svg b/assets/images/microphone.svg new file mode 100644 index 0000000..a0b290b --- /dev/null +++ b/assets/images/microphone.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/numbers_one.svg b/assets/images/numbers_one.svg new file mode 100644 index 0000000..8b3b132 --- /dev/null +++ b/assets/images/numbers_one.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/numbers_three.svg b/assets/images/numbers_three.svg new file mode 100644 index 0000000..bc3370d --- /dev/null +++ b/assets/images/numbers_three.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/numbers_two.svg b/assets/images/numbers_two.svg new file mode 100644 index 0000000..e4df7b0 --- /dev/null +++ b/assets/images/numbers_two.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/pencil_square.svg b/assets/images/pencil_square.svg new file mode 100644 index 0000000..022b632 --- /dev/null +++ b/assets/images/pencil_square.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/podcast_logo_rounded_square.svg b/assets/images/podcast_logo_rounded_square.svg new file mode 100644 index 0000000..b1664e8 --- /dev/null +++ b/assets/images/podcast_logo_rounded_square.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/rss_logo_rounded_square.svg b/assets/images/rss_logo_rounded_square.svg new file mode 100644 index 0000000..9769ae2 --- /dev/null +++ b/assets/images/rss_logo_rounded_square.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/js/contact_form_toggle.js b/assets/js/contact_form_toggle.js index 00ca58c..a73b63b 100644 --- a/assets/js/contact_form_toggle.js +++ b/assets/js/contact_form_toggle.js @@ -1,7 +1,7 @@ /* Unhide contact form if JS is enabled */ window.addEventListener('DOMContentLoaded', (event) => { - const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0]; + const contact_form_wrapper = document.getElementsByClassName('contact__box')[0]; if (contact_form_wrapper) { - contact_form_wrapper.style.setProperty('display', 'block'); + contact_form_wrapper.style.setProperty('display', 'grid'); } }); diff --git a/content/about/Ansible_logo.svg b/content/about/Ansible_logo.svg new file mode 100644 index 0000000..07a76db --- /dev/null +++ b/content/about/Ansible_logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/content/about/CSS3_logo_and_wordmark.svg b/content/about/CSS3_logo_and_wordmark.svg new file mode 100644 index 0000000..a23ac04 --- /dev/null +++ b/content/about/CSS3_logo_and_wordmark.svg @@ -0,0 +1,101 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/content/about/C_Programming_Language.svg b/content/about/C_Programming_Language.svg new file mode 100644 index 0000000..28c30fc --- /dev/null +++ b/content/about/C_Programming_Language.svg @@ -0,0 +1,82 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/content/about/Debian-OpenLogo.svg b/content/about/Debian-OpenLogo.svg new file mode 100644 index 0000000..02a2384 --- /dev/null +++ b/content/about/Debian-OpenLogo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/content/about/ISO_C++_Logo.svg b/content/about/ISO_C++_Logo.svg new file mode 100644 index 0000000..4c4b964 --- /dev/null +++ b/content/about/ISO_C++_Logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + diff --git a/content/about/Java-Logo.svg b/content/about/Java-Logo.svg new file mode 100644 index 0000000..1af6b37 --- /dev/null +++ b/content/about/Java-Logo.svg @@ -0,0 +1,78 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/content/about/LaTeX_logo.svg b/content/about/LaTeX_logo.svg new file mode 100644 index 0000000..d02e869 --- /dev/null +++ b/content/about/LaTeX_logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/content/about/MySQL_textlogo.svg b/content/about/MySQL_textlogo.svg new file mode 100644 index 0000000..4457eb9 --- /dev/null +++ b/content/about/MySQL_textlogo.svg @@ -0,0 +1,7 @@ + + +MySQL textlogo + + + + diff --git a/content/about/PHP-logo.svg b/content/about/PHP-logo.svg new file mode 100644 index 0000000..e4f137c --- /dev/null +++ b/content/about/PHP-logo.svg @@ -0,0 +1,96 @@ + + + Official PHP Logo + + + + image/svg+xml + + Official PHP Logo + + + Colin Viebrock + + + + + + + + + + + + Copyright Colin Viebrock 1997 - All rights reserved. + + + 1997 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/content/about/Postgresql_elephant.svg b/content/about/Postgresql_elephant.svg new file mode 100644 index 0000000..d98e365 --- /dev/null +++ b/content/about/Postgresql_elephant.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/content/about/Python_logo_and_wordmark.svg b/content/about/Python_logo_and_wordmark.svg new file mode 100644 index 0000000..1c7fd6b --- /dev/null +++ b/content/about/Python_logo_and_wordmark.svg @@ -0,0 +1,35 @@ + + +Python programming language logo + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/about/Rust_programming_language_black_logo.svg b/content/about/Rust_programming_language_black_logo.svg new file mode 100644 index 0000000..dd830c2 --- /dev/null +++ b/content/about/Rust_programming_language_black_logo.svg @@ -0,0 +1,57 @@ + + + \ No newline at end of file diff --git a/content/about/Tux.svg b/content/about/Tux.svg new file mode 100644 index 0000000..6b558e7 --- /dev/null +++ b/content/about/Tux.svg @@ -0,0 +1,438 @@ + + + Tux + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/about/Unofficial_JavaScript_logo_2.svg b/content/about/Unofficial_JavaScript_logo_2.svg new file mode 100644 index 0000000..9650ca7 --- /dev/null +++ b/content/about/Unofficial_JavaScript_logo_2.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/content/about/Vue.js_Logo_2.svg b/content/about/Vue.js_Logo_2.svg new file mode 100644 index 0000000..a1d285e --- /dev/null +++ b/content/about/Vue.js_Logo_2.svg @@ -0,0 +1,2 @@ + + diff --git a/content/about/contents+en.lr b/content/about/contents+en.lr new file mode 100644 index 0000000..a40c13d --- /dev/null +++ b/content/about/contents+en.lr @@ -0,0 +1,122 @@ +_model: about_page +--- +title: Services +--- +meta_description: The WTF cooperative offers a lot of experience and know-how in information technology. Contact us! +--- +intro: + +The Werkskooperative der Technikfreundinnen was founded to serve people in the environment of the Chaos Computer Club as a means of bureaucracy bundling and is currently developing in the direction of job placement, project management and freelance agency. + +Our goal is the economic promotion and support of our members. The object of the company is services and trade related to information technologies. Through their joint, cooperative marketing and processing of relevant commercial services for the members, the members' economy is promoted through synergy effects. +--- +section: + +#### flow_services_cards #### +card_title: Consulting +---- +card_image: icon_gears_bubble.svg +---- +card_text: Benefit from the broad IT know-how, the exchange of experience and the networking of our members and experts in the cooperative. The WTF cooperative is your competent contact. +#### flow_services_cards #### +card_title: Development +---- +card_image: icon_processor.svg +---- +card_text: We realise your projects - whether web application, mobile app or hardware-related programming. We can also advise you on suitable business development programmes if required. +#### flow_services_cards #### +card_title: Operations +---- +card_image: icon_connected_servers.svg +---- +card_text: After the project, we do not leave you out in the cold with the result, but offer you services for the operation of the completed project and the administration of the infrastructure beyond the project. +#### flow_icon_bubbles #### +icon_path: Python_logo_and_wordmark.svg +---- +icon_alt: Logo of the Python programming language +#### flow_icon_bubbles #### +icon_path: ISO_C++_Logo.svg +---- +icon_alt: Logo of the C++ programming language +#### flow_icon_bubbles #### +icon_path: Tux.svg +---- +icon_alt: Tux the penguin mascott of Linux +#### flow_icon_bubbles #### +icon_path: Unofficial_JavaScript_logo_2.svg +---- +icon_alt: Logo of the JavaScript programming language +#### flow_icon_bubbles #### +icon_path: PHP-logo.svg +---- +icon_alt: Logo of the PHP programming language +#### flow_icon_bubbles #### +icon_path: C_Programming_Language.svg +---- +icon_alt: Logo of the C programming language +#### flow_icon_bubbles #### +icon_path: Ansible_logo.svg +---- +icon_alt: Logo of the Ansible project +#### flow_icon_bubbles #### +icon_path: Postgresql_elephant.svg +---- +icon_alt: Logo of the Postgres database +#### flow_icon_bubbles #### +icon_path: Java-Logo.svg +---- +icon_alt: Logo of the Java programming language +#### flow_icon_bubbles #### +icon_path: Rust_programming_language_black_logo.svg +---- +icon_alt: Logo of the Rust programming language +#### flow_icon_bubbles #### +icon_path: CSS3_logo_and_wordmark.svg +---- +icon_alt: Logo of CSS3 +#### flow_icon_bubbles #### +icon_path: Debian-OpenLogo.svg +---- +icon_alt: Logo of the Debian operating system +#### flow_icon_bubbles #### +icon_path: MySQL_textlogo.svg +---- +icon_alt: Logo of the MySQL database +#### flow_icon_bubbles #### +icon_path: Vue.js_Logo_2.svg +---- +icon_alt: Logo of the Vue.js framework +#### flow_icon_bubbles #### +icon_path: LaTeX_logo.svg +---- +icon_alt: Logo of the LaTeX typesetting language +--- +kompetenzen_body: + +- Agile project management +- Accessibility +- Operations +- Software Audits +- Software Development +- Project Management +- User Experience +- Translation & Internationalisation (i18n/l10n) +--- +kompetenzen_heading: Expertise +--- +contact_form_button: Send message +--- +contact_form_email: Email address +--- +contact_form_heading: Contact +--- +contact_form_info: + +Your email address will not be published.
+