From e6011b6201e47d5630859153b5d753557142f5b4 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 16 Oct 2024 01:54:02 +0200 Subject: [PATCH] =?UTF-8?q?refactor(card.css):=20CSS=20des=20Kopfbereichs?= =?UTF-8?q?=20f=C3=BCr=20Reaktionsf=C3=A4higkeit=20bearbeitet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- EnvelopeGenerator.Web/wwwroot/css/card.css | 71 ++++++++++--------- .../wwwroot/css/card.min.css | 2 +- EnvelopeGenerator.Web/wwwroot/css/logo.css | 1 + .../wwwroot/css/logo.min.css | 2 +- 4 files changed, 39 insertions(+), 37 deletions(-) diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.css b/EnvelopeGenerator.Web/wwwroot/css/card.css index 1317e2c1..f5e4df96 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/card.css +++ b/EnvelopeGenerator.Web/wwwroot/css/card.css @@ -22,21 +22,23 @@ width: 100%; } -.dd-card h6 { - opacity: 0.6; - margin: 0; - letter-spacing: 0.0625rem; -} + .dd-card h6 { + opacity: 0.6; + margin: 0; + letter-spacing: 0.0625rem; + font-size: clamp(0.6rem, 1.33vw, 0.8rem); + } + + .dd-card h2 { + letter-spacing: 0.0625rem; + margin: 0; + font-size: clamp(1rem, 2.67vw, 1.67rem); + } .uppercase { text-transform: uppercase; } -.dd-card h2 { - letter-spacing: 0.0625rem; - margin: 0; -} - .dd-card-preview { background-color: #2A265F; color: #fff; @@ -48,14 +50,10 @@ align-items: center; } -.dd-card-preview a { - color: #fff; - display: inline-block; - font-size: 0.75rem; - opacity: 0.6; - margin-top: 1.875rem; - text-decoration: none; -} + .dd-card-preview a { + color: #fff; + opacity: 0.6; + } .dd-card-preview button { border-width: 0; @@ -75,35 +73,37 @@ } .dd-card-info { - padding: 1rem 0 0 1.875rem; + padding: clamp(0.55rem, 2vw, .875rem) 0 0 clamp(0.55rem, 2.5vw, 1.7rem); + margin: 0; position: relative; width: 100%; } - .dd-card-info p { - opacity: 0.6; - font-size: 0.75rem; - opacity: 0.6; - margin-top: .875rem; + .dd-card-info p, .dd-card-info a, .dd-card-info small, .dd-card-info span { + opacity: 0.65; + font-size: clamp(0.55rem, 1.23vw, 0.75rem); + margin: clamp(0.55rem, 2vw, .875rem) 0 clamp(0.55rem, 2vw, .875rem) 0; text-decoration: none; + padding: 0; } -.progress-container { - text-align: right; - width: 100%; +.app-logo { + width: clamp(4rem, 10vw, 5rem); margin: 1rem 0 0 0; } -.app-logo { - width: 5rem; - margin: 1rem 0 0 0; +.progress-container { + text-align: right; + width: 100%; + margin: clamp(0.8rem, 2vw, 1rem) 0 0 0; } .progress { background-color: #ddd; border-radius: 0.1875rem; - height: 0.3125rem; - width: 10rem; + height: clamp(0.25rem, 1vw, 0.3125rem); + width: clamp(6rem, 20vw, 10rem); + position: relative; } .progress::after { @@ -112,14 +112,15 @@ position: absolute; top: 0; left: 0; - height: 0.3125rem; + height: clamp(0.25rem, 1vw, 0.3125rem); width: var(--progress-width, 1%); transition: width 1s ease; + opacity: 0.85; } .progress-text { - font-size: 0.625rem; + font-size: clamp(0.5rem, 1.5vw, 0.625rem); opacity: 0.6; - letter-spacing: 0.0625rem; + letter-spacing: clamp(0.05rem, 0.5vw, 0.0625rem); text-align: left; } \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.min.css b/EnvelopeGenerator.Web/wwwroot/css/card.min.css index f46262a9..184fde7f 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/card.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/card.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:100%;margin:1rem 0 0 0}.app-logo{width:5rem;margin:1rem 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left} \ No newline at end of file +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem;font-size:clamp(.6rem,1.33vw,.8rem)}.dd-card h2{letter-spacing:.0625rem;margin:0;font-size:clamp(1rem,2.67vw,1.67rem)}.uppercase{text-transform:uppercase}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;opacity:.6}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:clamp(.55rem,2vw,.875rem) 0 0 clamp(.55rem,2.5vw,1.7rem);margin:0;position:relative;width:100%}.dd-card-info p,.dd-card-info a,.dd-card-info small,.dd-card-info span{opacity:.65;font-size:clamp(.55rem,1.23vw,.75rem);margin:clamp(.55rem,2vw,.875rem) 0 clamp(.55rem,2vw,.875rem) 0;text-decoration:none;padding:0}.app-logo{width:clamp(4rem,10vw,5rem);margin:1rem 0 0 0}.progress-container{text-align:right;width:100%;margin:clamp(.8rem,2vw,1rem) 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:clamp(.25rem,1vw,.3125rem);width:clamp(6rem,20vw,10rem);position:relative}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:clamp(.25rem,1vw,.3125rem);width:var(--progress-width,1%);transition:width 1s ease;opacity:.85}.progress-text{font-size:clamp(.5rem,1.5vw,.625rem);opacity:.6;letter-spacing:clamp(.05rem,.5vw,.0625rem);text-align:left} \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/css/logo.css b/EnvelopeGenerator.Web/wwwroot/css/logo.css index 5cd9526e..86ce775a 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/logo.css +++ b/EnvelopeGenerator.Web/wwwroot/css/logo.css @@ -24,6 +24,7 @@ @media (max-width: 767px) { .dd-show-logo { width: 5rem; + margin-right: 0rem; } .cursor-show-logo { diff --git a/EnvelopeGenerator.Web/wwwroot/css/logo.min.css b/EnvelopeGenerator.Web/wwwroot/css/logo.min.css index 3b0dcc86..a1da6147 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/logo.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/logo.min.css @@ -1 +1 @@ -.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}} \ No newline at end of file +.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem;margin-right:0}.cursor-show-logo{width:3rem}} \ No newline at end of file