From c25cd81dad5546f472a2c41d0e05f5593c3df861 Mon Sep 17 00:00:00 2001 From: muli Date: Fri, 19 May 2023 17:56:18 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Mitglieder-Seite=20gestylt=20und=20Zahl?= =?UTF-8?q?en=20als=20Hintergrundbilder=20hinzugef=C3=BCgt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/style.css | 43 ++++++++++++++++++++++++++++++++- assets/images/numbers_one.svg | 7 ++++++ assets/images/numbers_three.svg | 7 ++++++ assets/images/numbers_two.svg | 7 ++++++ templates/flow_block_page.html | 11 +++------ 5 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 assets/images/numbers_one.svg create mode 100644 assets/images/numbers_three.svg create mode 100644 assets/images/numbers_two.svg diff --git a/assets/css/style.css b/assets/css/style.css index c49b1ae..0f5cb9c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -41,7 +41,8 @@ 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) } @@ -421,10 +422,12 @@ header { .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 { @@ -439,6 +442,13 @@ header { font-size: 2rem; } +/* + * TODO: Bullets positionieren + * + * list-style: none; dann Bullets als Grafiken vom text in
  • einfügen. + * Für das Icon dann position: relative; und ausrichten. + * Quelle: https://codepen.io/team/css-tricks/pen/MyxBrQ + */ .header__claim ul li { margin: 0; list-style: none; @@ -498,6 +508,7 @@ header { .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; @@ -563,6 +574,7 @@ h1.big_heading { h2 { font-family: 'Noto Serif'; + color: var(--wtf-orange); font-size: 2rem; line-height: 1.1em; margin: 1em 0 0.25em 0; @@ -646,6 +658,10 @@ strong{ font-weight: bold; } +em { + font-style: italic; +} + hr { color: var(--wtf-nearly-black); margin: 0.25rem 0; @@ -722,6 +738,10 @@ hr.-even { min-width: 300px; } +.indented_box { + padding-left: 1rem; +} + .flex_heading { margin-top: 0.5rem; z-index: 5; @@ -1058,6 +1078,27 @@ hr.-even { 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; 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/templates/flow_block_page.html b/templates/flow_block_page.html index f784421..d528ab8 100644 --- a/templates/flow_block_page.html +++ b/templates/flow_block_page.html @@ -12,15 +12,12 @@
    -

    {{ this.title }}

    +

    {{ this.title }}

    -
    -
    -
    - {{ this.teaser }} -
    -
    +
    +
    +
    {{ this.body }}