From 45073a59f99f9223c1ded0ab6b1043431545b4b8 Mon Sep 17 00:00:00 2001 From: Gerrit Linnemann Date: Fri, 7 May 2021 21:07:36 +0200 Subject: [PATCH] Neue Streams und CSS-Optimierungen --- kitchenradio/config.json | 6 +- kitchenradio/public/stylesheets/style.css | 110 +++++++----------- kitchenradio/public/stylesheets/style.less | 128 +++++++++------------ 3 files changed, 98 insertions(+), 146 deletions(-) diff --git a/kitchenradio/config.json b/kitchenradio/config.json index ebc4760..bd884cf 100644 --- a/kitchenradio/config.json +++ b/kitchenradio/config.json @@ -2,9 +2,9 @@ "channels": [ { "type": "radiostream", - "title": "NDR2", - "stream": "http://www.ndr.de/resources/metadaten/audio/m3u/ndr2_hh.m3u", - "icon": "https://upload.wikimedia.org/wikipedia/commons/9/9e/NDR_2_Logo.svg" + "title": "WDR2", + "stream": "http://wdr-wdr2-ostwestfalenlippe.icecast.wdr.de/wdr/wdr2/ostwestfalenlippe/mp3/128/stream.mp3", + "icon": "https://upload.wikimedia.org/wikipedia/commons/b/bb/WDR_2_logo_2012.svg" }, { "type": "radiostream", diff --git a/kitchenradio/public/stylesheets/style.css b/kitchenradio/public/stylesheets/style.css index 027451c..e8fb618 100644 --- a/kitchenradio/public/stylesheets/style.css +++ b/kitchenradio/public/stylesheets/style.css @@ -126,15 +126,15 @@ table { /* RESET END */ html, body { - height: 98.5%; + height: 100%; } body { font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; background-color: rgba(0, 0, 0, 0.38); - background-image: url('/images/gl_formentera_seil.jpg'); - background-size: auto 100%; + background-image: url('/images/gl_formentera_kueste.jpg'); + background-size: cover; background-repeat: no-repeat; - background-position: left top; + background-position: center; overflow: hidden; } .clearboth { @@ -142,6 +142,7 @@ body { } a { color: #00B7FF; + transition: background-color 1s; } .hidden { display: none !important; @@ -149,87 +150,62 @@ a { #navigation { height: 70%; display: flex; + flex-direction: row; flex-wrap: nowrap; - justify-content: center; + justify-content: space-between; align-items: stretch; - align-content: center; + align-content: stretch; + margin: 1% 1% 1% 1%; } -#navigation .tile { - background-color: rgba(255, 255, 255, 0.25); - margin: 2px; +#navigation > a { + width: 33%; + margin: 1%; flex-grow: 1; - flex-basis: auto; - align-self: flex-start; + align-self: stretch; + background-color: rgba(255, 255, 255, 0.25); +} +#navigation > a > .content { height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; } -#navigation .tile .content { - height: inherit; - text-align: center; - padding: 2px; +#navigation > a > .content > .icon { + width: 80%; } -#navigation .tile .content .icon { - display: block; - margin: auto; - height: 50%; -} -#navigation .tile .content .title { - display: block; - margin-top: 20px; - font-size: 2.2em; -} -#navigation .tile:hover { +#navigation > a:hover { background-color: rgba(255, 255, 255, 0.5); } -@media screen and (max-width: 320px) { - #navigation { - display: block; - text-align: center; - } - #navigation .tile { - display: inline-block; - width: 32%; - } - #navigation .tile .content .icon { - height: auto; - width: 88%; - } -} #controls { - background-color: rgba(255, 255, 255, 0.25); height: 30%; - margin: 2px; - margin-top: 4px; display: flex; + flex-direction: row; flex-wrap: nowrap; - justify-content: center; + justify-content: space-between; align-items: stretch; - align-content: center; + align-content: stretch; + margin: 1% 1% 1% 1%; } -#controls .control { - display: block; - margin: 2px; - flex-grow: 1; - flex-basis: auto; - align-self: flex-start; +#controls > a { + width: 33%; height: auto; + margin: 0 1% 4% 1%; + flex-grow: 1; + align-self: stretch; text-align: center; + background-color: rgba(255, 255, 255, 0.25); + font-size: 3rem; text-decoration: none; - font-size: 50px; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; } -#controls .control:hover { +#controls > a.empty { + display: none; +} +#controls > a:hover { background-color: rgba(255, 255, 255, 0.5); -} -#controls .control.empty { - visibility: hidden; -} -@media screen and (max-width: 320px) { - #controls { - display: block; - text-align: center; - } - #controls .control { - display: inline-block; - width: 25%; - margin: 0; - } + transition: all 2s; } diff --git a/kitchenradio/public/stylesheets/style.less b/kitchenradio/public/stylesheets/style.less index 0934301..a0cc0f8 100644 --- a/kitchenradio/public/stylesheets/style.less +++ b/kitchenradio/public/stylesheets/style.less @@ -1,7 +1,11 @@ +@margin_element: 2px; @backgroundcolor: rgba(0,0,0,0.38); @backgroundcolor_element: rgba(255,255,255,0.25); @backgroundcolor_element_hover: rgba(255,255,255,0.50); -@margin_element: 2px; +@linkcolor: #00B7FF; +@fontsize_controls: 3rem; +@height_navigation: 70%; +@height_controls: (100% - @height_navigation); @@ -56,16 +60,16 @@ table { html, body { - height: 98.5%; + height: 100%; } body { font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; background-color: @backgroundcolor; - background-image: url('/images/gl_formentera_seil.jpg'); - background-size: auto 100%; + background-image: url('/images/gl_formentera_kueste.jpg'); + background-size: cover; background-repeat: no-repeat; - background-position: left top; + background-position: center; overflow: hidden; } @@ -74,7 +78,8 @@ body { } a { - color: #00B7FF; + color: @linkcolor; + transition: background-color 1s; } .hidden { @@ -82,36 +87,31 @@ a { } #navigation { - height: 70%; + height: @height_navigation; display: flex; + flex-direction: row; flex-wrap: nowrap; - justify-content: center; + justify-content: space-between; align-items: stretch; - align-content: center; + align-content: stretch; + margin: 1% 1% 1% 1%; - .tile { - background-color: @backgroundcolor_element; - margin: @margin_element; + > a { + width: 33%; + margin: 1%; flex-grow: 1; - flex-basis: auto; - align-self: flex-start; - height: 100%; + align-self: stretch; + background-color: @backgroundcolor_element; - .content { - height: inherit; - text-align: center; - padding: @margin_element; + > .content { + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; - .icon { - display: block; - margin: auto; - height: 50%; - } - - .title { - display: block; - margin-top: 20px; - font-size: 2.2em; + > .icon { + width: 80%; } } @@ -119,65 +119,41 @@ a { background-color: @backgroundcolor_element_hover; } } - - @media screen and (max-width: 320px) { - display: block; - text-align: center; - - .tile { - display: inline-block; - width: 32%; - - .content { - - .icon { - height: auto; - width: 88%; - } - } - } - } } #controls { - background-color: @backgroundcolor_element; - height: 30%; - margin: @margin_element; - margin-top: (@margin_element * 2); + height: @height_controls; display: flex; + flex-direction: row; flex-wrap: nowrap; - justify-content: center; + justify-content: space-between; align-items: stretch; - align-content: center; + align-content: stretch; + margin: 1% 1% 1% 1%; - .control { - display: block; - margin: @margin_element; - flex-grow: 1; - flex-basis: auto; - align-self: flex-start; + > a { + width: 33%; height: auto; + margin: 0 1% 4% 1%; + flex-grow: 1; + align-self: stretch; text-align: center; + background-color: @backgroundcolor_element; + font-size: @fontsize_controls; text-decoration: none; - font-size: 50px; + + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + &.empty { + display: none; + } &:hover { background-color: @backgroundcolor_element_hover; - } - - &.empty { - visibility: hidden; + transition: all 2s; } } - - @media screen and (max-width: 320px) { - display: block; - text-align: center; - - .control { - display: inline-block; - width: 25%; - margin: 0; - } - } -} \ No newline at end of file +}