diff --git a/assets/css/style.css b/assets/css/style.css index ffba294..e91228d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -105,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. @@ -175,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; } @@ -236,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; @@ -260,11 +224,6 @@ header { max-width: 20rem; } -.content__button { - width: 70%; - margin-top: 0; -} - .header__bg_box { margin-top: -0.75rem; @@ -501,18 +460,12 @@ 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; @@ -536,23 +489,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; } @@ -588,13 +536,6 @@ h2 { 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; @@ -609,20 +550,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; } @@ -679,13 +606,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%; @@ -713,64 +633,24 @@ hr.-even { .content__box, .contact__box, -.content__half_box, -.content__third_box, -.content__aggregate_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; -} - .indented_box { padding-left: 1rem; } -.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; -} - .card { margin: 3rem 1.5rem 0 1.5rem; max-width: 300px; @@ -799,26 +679,7 @@ 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; } @@ -832,12 +693,7 @@ 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%; } @@ -1087,7 +943,7 @@ 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; } @@ -1117,11 +973,6 @@ hr.-even { height: 1rem; } -.content__rss_logo_heading, -.content__podcast_logo_heading { - height: 1.75rem; -} - .content__pagination { text-align: center; @@ -1135,14 +986,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; @@ -1184,8 +1032,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; @@ -1195,10 +1042,6 @@ hr.-even { margin: 0; } -.content__inner_box.-card_box_head { - margin-bottom: -5rem; -} - .content__box.-columns { column-count: var(--column-count); } @@ -1223,15 +1066,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 { @@ -1297,10 +1135,6 @@ footer { background-color: var(--wtf-footer-grey); } -.footer__content_box { - -} - .footer__nav { display: flex; flex-direction: row; @@ -1329,9 +1163,6 @@ footer { /* footer - Ende */ @media screen and (min-width: 1200px) { - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } .primary_nav__toggle { display: none; @@ -1347,18 +1178,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; } @@ -1381,14 +1205,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; } @@ -1404,14 +1220,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) { @@ -1429,14 +1237,6 @@ footer { background-position: top -100px right -580px; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } @@ -1453,18 +1253,6 @@ 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; @@ -1498,14 +1286,6 @@ footer { margin: 2rem 1.5rem -3rem 1.5rem; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } @@ -1522,19 +1302,6 @@ 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; @@ -1554,14 +1321,6 @@ footer { display: none; } - .header__top_box .header__button { - display: auto; - } - - .primary_nav__members, .primary_nav__lang_switch { - display: none; - } - .primary_nav__toggle { display: none; } @@ -1574,18 +1333,6 @@ footer { margin-right: 0.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; @@ -1671,10 +1418,6 @@ footer { padding-bottom: 2.5rem; } - .header__top_box .header__button { - display: auto; - } - .header__primary_nav { height: 2.5rem; } @@ -1688,14 +1431,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; } @@ -1709,35 +1444,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; @@ -1751,11 +1468,6 @@ footer { .pod_ctrl_box { margin-top: 1.5rem; } - - .content__inner_aggregate_box { - margin: 1.5rem 1rem; - flex-grow: 1; - } } @media screen and (max-width: 595px) { @@ -1780,10 +1492,6 @@ footer { font-size: 1.1rem; } - h5 { - font-size: 1.05rem; - } - /* global styles - start */ .header__secondary_nav { @@ -1794,10 +1502,6 @@ footer { background-color: transparent; } - .primary_nav__members, .primary_nav__lang_switch { - display: block; - } - header { margin-bottom: 0; } @@ -1848,10 +1552,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, @@ -1922,36 +1622,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) } @@ -1961,9 +1632,6 @@ footer { /* mobile nav - Ende */ /* homepage - start */ - .body__separator { - margin: 0; - } .content__inner_box.-logo_header { margin: -0.5rem 1.5rem 0 1.5rem; @@ -1973,35 +1641,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; @@ -2021,11 +1671,6 @@ footer { .pod_ctrl_box { margin-top: 1.5rem; } - - .content__inner_aggregate_box { - margin: 1.5; - flex-grow: 1; - } /* content - end */ /* footer - start */