IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #218 from IBCornelsen/UMBE

Browse Source 
updateUpdate
This commit is contained in:
UMBENOMENA
2024-12-14 02:59:05 +01:00
committed by GitHub
parent 3397e04570 0c8ade7443
commit cb100ab6df
2 changed files with 98 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/design/sidebars/cards/cardVApromo.svelte
View File

@@ -2,9 +2,9 @@
import { PRICES } from "#lib/constants"; import { PRICES } from "#lib/constants";
</script> </script>
<div id ="cardVApromo" class=" box card">
<div id="card-VA-promo" class=" box card bg-white px-6 py-4 mb-5">
<div id="card-VA-promo" class="box card">
<div class="grid"> <div class="grid">
<h2>Verbrauchsausweis Wohngebäude</h2> <h2>Verbrauchsausweis Wohngebäude</h2>
<hr class="mb-4" /> <hr class="mb-4" />
@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
</div>
<style lang="scss"> <style lang="scss">
</style> </style>

238
src/style/global.css
View File

@@ -1,26 +1,29 @@
/*@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');*/
@font-face { @font-face {
font-family: "Heron"; font-family: 'Heron';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display:swap;
src: url("/fonts/HeronSans-Light.woff2") format("woff2"); src: url("/fonts/HeronSans-Light.woff2") format('woff2');
} }
@font-face { @font-face {
font-family: "Heron"; font-family: 'Heron';
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display:swap;
src: url("/fonts/HeronSans-Regular.woff2") format("woff2"); src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
} }
@font-face { @font-face {
font-family: "Antique Olive Compact bold"; font-family: 'Antique Olive Compact bold';
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display:swap;
src: url("/fonts/Antique Olive Std Compact.woff2") format("woff2"); src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
} }
* { * {
font-weight: 400; font-weight: 400;
@@ -28,70 +31,51 @@
font-family: "Heron"; font-family: "Heron";
} }
.promo1 {
.promo1{
font-weight: 700; font-weight: 700;
box-sizing: border-box; box-sizing: border-box;
font-family: "Antique Olive Compact bold"; font-family: "Antique Olive Compact bold";
text-shadow: 2px 2px 8px #222; text-shadow: 2px 2px 8px #222;
} }
.promo { .promo{
font-weight: 700; font-weight: 700;
box-sizing: border-box; box-sizing: border-box;
font-family: "Antique Olive Compact bold"; font-family: "Antique Olive Compact bold";
}
.promo{
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
} }
body{ body{
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px] @apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
} }
.button { .button {
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap @apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary; hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
} }
input[type="text"], input[type="text"], input[type="number"], input[type="password"], select{
input[type="number"], @apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
input[type="password"], input[type="checkbox"]{@apply inline-block}
select { radio{@apply accent-primary}
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm;
}
input[type="checkbox"] {
@apply inline-block;
}
radio {
@apply accent-primary;
}
/*ARTICLE*/ /*ARTICLE*/
article { article {
@apply w-full relative bg-white px-0 py-0; @apply w-full relative bg-white px-0 py-0;
hr { hr {@apply mb-4 mt-4;}
@apply mb-4 mt-4;
}
h1 { h1 {@apply text-4xl font-normal mb-2;}
@apply text-4xl font-normal mb-2; h2 {@apply text-2xl font-normal mb-2;}
} h3 {@apply text-xl font-normal mb-2;}
h2 {
@apply text-2xl font-normal mb-2; a {@apply text-blue-700 font-medium text-lg;}
}
h3 {
@apply text-xl font-normal mb-2;
}
a {
@apply text-blue-700 font-medium text-lg;
}
} }
/*SIDEBARS*/ /*SIDEBARS*/
@@ -99,23 +83,20 @@ article {
/*BOXES*/ /*BOXES*/
.box{ .box{
@apply rounded-lg @apply rounded-lg
lg:shadow-box lg:ring-1 lg:ring-gray-300 lg:shadow-box lg:ring-1 lg:ring-gray-300
xl:rounded-xl; xl:rounded-xl
} }
.card { .card:not(:last-child){@apply mb-5}
h2 { .card{@apply bg-white px-6 py-4;
@apply text-lg font-bold text-box-heading leading-6;
} h2 {@apply text-lg font-bold text-box-heading leading-6}
hr { hr {@apply my-0}
@apply my-2; p {@apply text-lg}
} a {@apply text-lg}
p {
@apply text-lg;
}
a {
@apply text-lg;
}
} }
@@ -123,106 +104,77 @@ article {
/*NAVIGATION*/ /*NAVIGATION*/
.nav-element { .nav-element{@apply relative block cursor-pointer}
@apply relative block cursor-pointer;
.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}
.no-dropdown, .no-dropdown:hover{@apply text-black no-underline}
.nav-element:hover > .nav-element-child{
@apply !bg-primary !text-white cursor-pointer
} }
.nav-element:not(:first-child) { .nav-element:hover > .nav-element-child .no-dropdown{
@apply border-gray-200 border-t-[1px]; @apply !bg-primary !text-white cursor-pointer
} }
.no-dropdown,
.no-dropdown:hover { .nav-element:hover > .dropdown-content{
@apply text-black no-underline; @apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
} }
.nav-element:hover > .nav-element-child { .nav-element:hover:first-child > .nav-element-child{
@apply !bg-primary !text-white cursor-pointer; @apply !rounded-none
lg:!rounded-tl-xl lg:!rounded-tr-none
} }
.nav-element:hover > .nav-element-child .no-dropdown { .nav-element:hover:last-child > .nav-element-child{
@apply !bg-primary !text-white cursor-pointer; @apply !rounded-none
xl:!rounded-b-xl
} }
.nav-element:hover > .dropdown-content { .nav-element-child{
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]; @apply px-4 py-2 w-full justify-start text-sm bg-white flex !no-underline text-black
xl:text-lg
} }
.nav-element:hover:first-child > .nav-element-child { .dropdown-content{
@apply !rounded-none @apply !relative z-[1] !p-0 !scale-100 hidden
lg:!rounded-tl-xl lg:!rounded-tr-none;
}
.nav-element:hover:last-child > .nav-element-child {
@apply !rounded-none
xl:!rounded-b-xl;
}
.nav-element-child {
@apply px-4 py-2 w-full justify-start text-sm bg-white flex !no-underline text-black
xl:text-lg;
}
.dropdown-content {
@apply !relative z-[1] !p-0 !scale-100 hidden
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1; lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
li {@apply text-sm bg-white flex
xl:text-lg}
li { li a {@apply w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
@apply text-sm bg-white flex lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
xl:text-lg; xl:text-lg}
}
li a { li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
@apply w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
xl:text-lg;
}
li:not(:first-child) {
@apply !border-gray-200 !border-t-[1px];
}
} }
.verbrauchsausweis li:nth-child(5), .verbrauchsausweis li:nth-child(5), .bedarfsausweis li:nth-child(5){
.bedarfsausweis li:nth-child(5) { @apply !border-primary !border-t-[1px]
@apply !border-primary !border-t-[1px];
} }
#hamburger { #hamburger{
@apply my-1; @apply my-1;
span { span {@apply block h-[3px] w-6 bg-white !transition-all}
@apply block h-[3px] w-6 bg-white !transition-all; span:nth-child(2) {@apply my-1}
}
span:nth-child(2) {
@apply my-1;
}
} }
.hamburger-swing-0 { .hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500; .hamburger-swing-1{@apply origin-center opacity-0 !transition-all}
} .hamburger-swing-2{@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500}
.hamburger-swing-1 {
@apply origin-center opacity-0 !transition-all; .show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
} .dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
.hamburger-swing-2 { .dd-symbol-clone{ @apply absolute right-[20px] lg:text-primary}
@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500; .rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
}
.show-dropdown-content {
@apply block !visible !opacity-100 lg:!invisible;
}
.dd-symbol {
@apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none;
}
.dd-symbol-clone {
@apply absolute right-[20px] lg:text-primary;
}
.rotate-symbol {
@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none;
}
/*NAVIGATION-ANIMATION*/ /*NAVIGATION-ANIMATION*/
/*SIDEBAR-RIGHT*/ /*SIDEBAR-RIGHT*/
/*FOOTER*/ /*FOOTER*/