bennot/church-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: colors

Browse source
This commit is contained in:
Benno Tielen 2026-03-05 09:47:34 +01:00
parent 4db90f57df
commit 0e767bb155
16 changed files with 52 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_template.scss
View file

@ -6,3 +6,12 @@ $contrast-color: #7D1224;
$contrast-shade1: #C14953; $contrast-shade1: #C14953;
$text-color: #000000; $text-color: #000000;
$border-radius: 13px; $border-radius: 13px;
$white: #ffffff;
$light-grey: #f3f3f3;
$border-color-light: #e1e1e1;
$dark-text: #2c2c2c;
$placeholder-bg: #c2c2c2;
$highlight-color: #fff318;
$shadow: 3px 7px 26px -5px rgba(0, 0, 0, 0.15);
$overlay: rgba(63, 63, 63, 0.82);

4
src/app/(home)/pfarrei/immobilienentwicklung/styles.module.scss
View file

@ -7,7 +7,7 @@
} }
.prayer { .prayer {
background-color: #efefef; background-color: $light-grey;
width: 320px; width: 320px;
padding: 20px; padding: 20px;
flex-shrink: 0; flex-shrink: 0;
@ -37,7 +37,7 @@
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 50%; border-radius: 50%;
background-color: #c7d2d1; background-color: $shade2;
opacity: 0.3; opacity: 0.3;
z-index: -1; z-index: -1;
} }

4
src/app/(home)/schutzkonzept/styles.module.scss
View file

@ -1,7 +1,9 @@
@import 'template.scss';
.action { .action {
text-align: center; text-align: center;
padding: 80px 0; padding: 80px 0;
background-color: #eeeeee; background-color: $light-grey;
} }
.button { .button {

6
src/components/AdminMenu/styles.module.scss
View file

@ -1,10 +1,12 @@
@import 'template.scss';
.menu { .menu {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
left: 0; left: 0;
background-color: rgba(238, 238, 238, 0.60); background-color: rgba($light-grey, 0.60);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
display: flex; display: flex;
gap: 20px; gap: 20px;
@ -15,5 +17,5 @@
.menu a { .menu a {
padding: 10px 0; padding: 10px 0;
font-size: 14px; font-size: 14px;
color: #23362c; color: $base-color;
} }

6
src/components/Banner/styles.module.scss
View file

@ -1,7 +1,9 @@
@import 'template.scss';
.banner { .banner {
position: relative; position: relative;
height: 634px; height: 634px;
background-color: #728f8d; background-color: $shade1;
background-image: url("banner2.jpg"); background-image: url("banner2.jpg");
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@ -16,7 +18,7 @@
.nameContainer { .nameContainer {
opacity: 1; opacity: 1;
color: #ececec; color: $white;
position: absolute; position: absolute;
bottom: 50px; bottom: 50px;
right: 0; right: 0;

2
src/components/Button/styles.module.scss
View file

@ -2,7 +2,7 @@
.button { .button {
font-family: inherit; font-family: inherit;
color: #ffffff; color: $white;
border-radius: $border-radius; border-radius: $border-radius;
text-align: center; text-align: center;
border: 0; border: 0;

6
src/components/Classifieds/styles.module.scss
View file

@ -13,14 +13,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
background-color: #fff; background-color: $white;
border: 1px solid $shade1; border: 1px solid $shade1;
padding: 1rem; padding: 1rem;
transition: 200ms background-color; transition: 200ms background-color;
} }
.ad:hover { .ad:hover {
background-color: #f3f3f3; background-color: $light-grey;
} }
.adText { .adText {
@ -55,7 +55,7 @@
.moreInfo { .moreInfo {
display: block; display: block;
padding: 10px; padding: 10px;
color: #ffffff; color: $white;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
width: 110px; width: 110px;

4
src/components/Gallery/fullscreen.module.scss
View file

@ -7,7 +7,7 @@
z-index: 99; z-index: 99;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(63, 63, 63, 0.82); background-color: $overlay;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -22,7 +22,7 @@
} }
.close { .close {
color: #ffffff; color: $white;
font-weight: bold; font-weight: bold;
position: fixed; position: fixed;
top: 35px; top: 35px;

6
src/components/ImageCard/styles.module.scss
View file

@ -2,10 +2,10 @@
.container { .container {
aspect-ratio: 1/1; aspect-ratio: 1/1;
background-color: #c2c2c2; background-color: $placeholder-bg;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
box-shadow: 3px 7px 26px -5px rgba(0, 0, 0, 0.15); box-shadow: $shadow;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
border-top-left-radius: $border-radius; border-top-left-radius: $border-radius;
@ -14,7 +14,7 @@
} }
.title { .title {
background-color: rgba(255, 255, 255, 0.91); background-color: rgba($white, 0.91);
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
position: absolute; position: absolute;

6
src/components/MegaMenu/styles.module.scss
View file

@ -28,7 +28,7 @@
flex-shrink: 0; flex-shrink: 0;
border-radius: 13px; border-radius: 13px;
border: 1px solid $base-color; border: 1px solid $base-color;
box-shadow: 3px 7px 26px -5px rgba(0, 0, 0, 0.15); box-shadow: $shadow;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
@ -84,7 +84,7 @@
.groupTitle { .groupTitle {
margin: 0; margin: 0;
color: #2c2c2c; color: $dark-text;
} }
.itemGroupContent { .itemGroupContent {
@ -94,7 +94,7 @@
} }
.itemDescription { .itemDescription {
color: #2c2c2c; color: $dark-text;
} }
.item { .item {

8
src/components/Menu/styles.module.scss
View file

@ -5,7 +5,7 @@
gap: 20px; gap: 20px;
color: $base-color; color: $base-color;
padding: 15px 45px; padding: 15px 45px;
background: rgba(245, 245, 245, 0.65); background: rgba($light-grey, 0.65);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
@ -50,13 +50,13 @@
border: none; border: none;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
background-color: #eeeeee; background-color: $light-grey;
transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out;
font-family: inherit; font-family: inherit;
} }
.button:hover { .button:hover {
background-color: #fff318; background-color: $highlight-color;
cursor: pointer; cursor: pointer;
} }
@ -99,7 +99,7 @@
.itemsLeft { .itemsLeft {
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #d0d0d0; border-bottom: 1px solid $border-color-light;
} }
.itemsLeft, .itemsRight { .itemsLeft, .itemsRight {

2
src/components/Pill/styles.module.scss
View file

@ -10,5 +10,5 @@
.danger { .danger {
background-color: $contrast-shade1; background-color: $contrast-shade1;
color: #ffffff; color: $white;
} }

12
src/components/PopupButton/styles.module.scss
View file

@ -1,3 +1,5 @@
@import 'template.scss';
.container { .container {
display: inline-grid; display: inline-grid;
place-items: center; place-items: center;
@ -11,7 +13,7 @@
.popup { .popup {
grid-area: a; grid-area: a;
background-color: white; background-color: $white;
box-shadow: 0 0 21px 0 rgba(0,0,0,0.4); box-shadow: 0 0 21px 0 rgba(0,0,0,0.4);
border-radius: 7px; border-radius: 7px;
min-width: 200px; min-width: 200px;
@ -23,7 +25,7 @@
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid $border-color-light;
} }
.link { .link {
@ -36,7 +38,7 @@
} }
.link:hover { .link:hover {
background-color: #e1e1e1; background-color: $border-color-light;
} }
.closeButton { .closeButton {
@ -44,7 +46,7 @@
top: 10px; top: 10px;
right: 5px; right: 5px;
border: none; border: none;
background: white; background: $white;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
@ -58,6 +60,6 @@
.closeButton:hover, .closeButton:hover,
.closeButton:focus-visible { .closeButton:focus-visible {
background-color: #f1f1f1; background-color: $light-grey;
outline: none; outline: none;
} }

2
src/components/SideSlider/styles.module.scss
View file

@ -39,7 +39,7 @@ $iconSize: 150px;
padding-left: calc($iconSize/2); padding-left: calc($iconSize/2);
min-height: 450px; min-height: 450px;
width: $width; width: $width;
color: #ffffff; color: $white;
} }
.padding { .padding {

2
src/compositions/Footer/styles.module.scss
View file

@ -20,7 +20,7 @@
} }
.list li::marker { .list li::marker {
color: rgba(66, 97, 86, 0.6); color: rgba($base-color, 0.6);
} }
.list li { .list li {

4
src/compositions/PublicationAndNewsletter/styles.module.scss
View file

@ -1,5 +1,7 @@
@import 'template.scss';
.image { .image {
border: 30px solid #f8f8f8; border: 30px solid $light-grey;
margin-bottom: 10px; margin-bottom: 10px;
height: auto; height: auto;
width: 70%; width: 70%;