cms/tibi-svelte-starter
Template
4
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

Browse Source
This commit is contained in:
Mario Linz
2022-05-24 16:44:55 +02:00
parent f4b6bb17ca
commit 47fdee2396
75 changed files with 2086 additions and 1234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/main.less
View File

@@ -1,3 +1 @@
body {
background-color: #eee;
}
@import "theme-2022/main";

5
src/css/prototype-article.less
View File

@@ -1,5 +0,0 @@
.p_article {
font-size: 14px;
border: 1px solid #000;
padding: 20px;
}

0
src/css/theme/components/article.less → src/css/theme-2022/components/article.less
View File

0
src/css/theme/components/audio.less → src/css/theme-2022/components/audio.less
View File

0
src/css/theme/components/carousel.less → src/css/theme-2022/components/carousel.less
View File

0
src/css/theme/components/cc-bar.less → src/css/theme-2022/components/cc-bar.less
View File

59
src/css/theme-2022/components/contact-information.less Normal file
View File

@@ -0,0 +1,59 @@
.contact-information {
margin-top: -120px;
min-height: 1060px;
background: url("../css/theme-2022/components/img/union.svg") top no-repeat;
background-size: cover;
& > .container {
padding-top: 10rem;
}
.appointmentOfficeHour {
@media (max-width: 768px) {
font-size: 0.87em;
margin-bottom: @space-sm;
}
strong {
display: inline-block;
min-width: 120px;
}
}
.meeting-information {
margin-top: @space-xl;
}
ul {
list-style-type: none;
padding-left: 40px;
width: 100%;
li {
line-height: 30px;
padding-left: 0px;
font-weight: 400;
width: 50%;
display: inline-block;
@media (max-width: 768px) {
width: 100%;
}
&:before {
content: url("../css/theme-2022/components/img/check-bold.svg");
font-weight: 400;
top: 1px;
left: -30px;
}
}
}
@media (max-width: 1050px) {
padding-bottom: 10rem;
}
@media (max-width: 768px) {
margin-bottom: -90px;
}
}

0
src/css/theme/components/content.less → src/css/theme-2022/components/content.less
View File

0
src/css/theme/components/event.less → src/css/theme-2022/components/event.less
View File

23
src/css/theme-2022/components/footer.less Normal file
View File

@@ -0,0 +1,23 @@
footer {
min-height: 70px;
margin-top: @space-md;
.copyright {
text-align: center;
margin: @space-md 0;
}
nav.footer {
display: flex;
justify-content: center;
gap: @space-md;
a {
color: @on-background;
&:hover {
text-decoration: underline;
}
}
}
}

139
src/css/theme-2022/components/forms.less Normal file
View File

@@ -0,0 +1,139 @@
form {
background: @surface;
color: @on-surface;
padding: @space-md;
border-radius: 10px;
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
strong {
color: @secondary;
font-weight: 700;
}
.titles {
flex-grow: 1;
.title,
.subTitle {
text-align: left;
color: @on-surface;
margin: 0;
}
}
.icon {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 100%;
&.contact {
background-color: @secondary-light-green;
}
&.recipe {
background-color: @secondary-light;
}
img {
width: 50%;
}
}
.collapse-icon {
cursor: pointer;
svg {
transition: @transition-default;
}
&.collapsed svg {
transform: rotate(-90deg);
}
}
input,
textarea,
.checkbox {
border: 1px solid transparent;
border-radius: 10px;
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
background: @surface;
color: @on-background;
padding: @space-sm @space-md;
width: 100%;
max-width: 100%;
transition: all 0.2s ease-in-out;
outline: none;
::placeholder {
color: @on-surface;
font-weight: 400;
}
:-ms-input-placeholder {
color: @on-surface;
font-weight: 400;
}
::-ms-input-placeholder {
color: @on-surface;
font-weight: 400;
}
&:focus {
border: 1px solid @secondary;
color: @primary;
}
&[readonly] {
opacity: 0.5;
}
}
.checkbox {
padding: 0;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: @secondary;
&:hover {
box-shadow: inset 0 0 10px 0 @secondary;
}
}
textarea {
height: 200px;
}
button {
width: 100%;
background: @secondary;
color: @on-secondary;
padding: @space-xs @space-md;
border-radius: 10px;
border: 1px solid transparent;
transition: @transition-default;
font-weight: 700;
cursor: pointer;
&:hover {
border-color: @on-secondary;
background-color: @primary;
color: @on-primary;
}
&[disabled] {
opacity: 0.5;
}
}
.error {
background: @error;
color: @on-error;
padding: @space-md;
}
}

108
src/css/theme-2022/components/general.less Executable file
View File

@@ -0,0 +1,108 @@
html,
body {
background: @background;
color: @on-background;
font-size: @font-size-default;
font-weight: @font-weight-default;
line-height: @font-line-height-default;
font-family: "Montserrat", sans-serif;
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
padding: @header-height + 60px 0 0 0;
@media (max-width: 768px) {
padding: @header-height-max-768 0 0 0;
}
}
// Body Images
.body-image-left {
position: absolute;
left: 0;
top: 80rem;
@media (max-width: 900px) {
top: 90rem;
}
}
// Lists
ul {
list-style-type: none;
padding-left: 15px;
li {
line-height: 30px;
padding-left: 0;
font-weight: 700;
&:before {
content: "\203A";
font-weight: 700;
position: absolute;
top: -1px;
left: -12px;
}
}
}
// Scroll To Top
.scroll-to-top {
position: fixed;
z-index: 9999;
right: 5rem;
bottom: 5rem;
@media (max-width: 768px) {
right: 4rem;
bottom: 1rem;
}
.circle-top,
.circle-email,
.circle-contact {
width: 80px;
height: 80px;
border-radius: 100%;
background-color: @secondary;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.circle-email {
width: 60px;
height: 60px;
background-color: @secondary-light;
position: absolute;
top: -20px;
right: -39px;
}
.circle-contact {
width: 60px;
height: 60px;
background-color: @secondary-light-green;
position: absolute;
top: 23px;
right: -53px;
}
}
// Promotion
.promotion-image-wave-top {
height: 70px;
}
.promotion-image-wave-bottom {
height: 137px;
}

10
src/css/theme/components/grid.less → src/css/theme-2022/components/grid.less
View File

@@ -2,7 +2,7 @@
@container_width: 1200px;
@columns: 12;
@main_padding: 15px;
@main_padding: 20px;
// Grid
@@ -23,8 +23,8 @@
@media (min-width: 992px) {
width: 960px;
}
@media (min-width: 1200px) {
width: 1140px;
@media (min-width: 1240px) {
width: 1200px;
}
@media (min-width: 1400px) {
width: 1320px;
@@ -67,6 +67,10 @@
justify-content: flex-end;
}
}
& ~ .row:not(.nospace) {
margin-top: @space-lg;
}
}
each(range(@columns), {

162
src/css/theme-2022/components/header.less Executable file
View File

@@ -0,0 +1,162 @@
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 1s ease-in-out;
height: @header-height;
background: rgba(255, 255, 255, 0.9);
z-index: 9999;
@media (max-width: 992px) {
background-color: @surface;
}
@media (max-width: 768px) {
height: @header-height-max-768;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
.header-content-right {
text-align: right;
}
}
.brand {
display: block;
margin: @space-md 0;
@media (max-width: 992px) {
width: 80%;
}
}
.tel-box {
display: inline-flex;
align-items: center;
gap: @space-sm;
background: @secondary;
color: @on-secondary;
font-weight: 700;
border-radius: 50px;
height: 40px;
padding-right: @space-md;
margin: @space-md 0 0 auto;
text-decoration: none;
white-space: nowrap;
.icon {
background: @secondary-light;
width: 40px;
height: 40px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 992px) {
& {
display: none;
}
&.mobile {
display: inline-flex;
justify-content: center;
}
}
}
nav {
list-style-type: none;
margin-top: @space-md;
display: flex;
justify-content: flex-end;
align-items: center;
gap: @space-md;
@media (max-width: 992px) {
display: none;
}
& > * {
text-decoration: none;
color: @primary;
transition: @transition-default;
font-weight: 500;
&:hover {
color: @on-background;
}
}
}
.nav-mobile-toggle {
display: none;
cursor: pointer;
margin: @space-md 0 0 auto;
@media (max-width: 992px) {
display: block;
}
}
nav.main-mobile {
display: none;
position: fixed;
top: @header-height;
left: 0;
right: 0;
bottom: 0;
background-color: @surface;
z-index: 9999;
margin: 0;
overflow-y: auto;
@media (max-width: 768px) {
top: @header-height-max-768;
}
&.show {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.bg-image {
position: absolute;
left: 0;
top: 0;
}
.nav-item {
align-self: center;
display: block;
text-align: center;
color: @primary;
font-size: 18px;
font-weight: 700;
a {
transition: @transition-default;
padding: @space-xs;
&:hover {
color: @secondary;
}
&.tel-box {
padding: 0 @space-md 0 0;
margin-bottom: @space-md;
color: @primary;
}
}
}
}
}

50
src/css/theme-2022/components/history.less Normal file
View File

@@ -0,0 +1,50 @@
.history {
font-size: 24px;
font-weight: 700;
.history-item {
min-height: 80px;
.date {
width: 80px;
height: 80px;
border-radius: 100%;
background-color: @secondary;
color: @on-secondary;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
position: absolute;
top: -21px;
left: calc(50% - 40px);
}
.text {
width: 41%;
}
&:nth-child(odd) {
.text {
margin-left: auto;
}
}
& ~ .history-item {
margin-top: @space-md;
}
@media (max-width: 900px) {
.date {
left: 0;
}
&:nth-child(odd),
&:nth-child(even) {
.text {
width: 100%;
padding-left: 100px;
font-size: 0.7em;
}
}
}
}
}

9
src/css/theme-2022/components/iframes.less Normal file
View File

@@ -0,0 +1,9 @@
iframe {
width: 100%;
max-width: 100%;
border: 0;
&#googleMaps {
height: 720px;
}
}

3
src/css/theme-2022/components/img/check-bold.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="m9 20.92-6.21-6.21 2.83-2.83L9 15.27l9.88-9.89 2.83 2.83L9 20.92z" fill="#72EFDD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

0
src/css/theme/components/img/arrow-right-3.png → src/css/theme-2022/components/img/list-arrow-right.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 358 B

39
src/css/theme-2022/components/img/top-bg.svg Normal file
View File

@@ -0,0 +1,39 @@
<svg width="1920" height="1003" viewBox="0 0 1920 1003" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity=".5" clip-rule="evenodd">
<path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#s8guwl92ja)"/>
<path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#d44dn5xirb)"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#dzvpq96n6c)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#qmmqrfmedd)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#m8la3ielte)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#eyw4yzjlhf)"/>
<g opacity=".7" stroke="#72EFDD" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.3 0.3">
<path opacity=".7" d="m1135.97 730.546 423.2-439.715M1139.36 766.411l449.79-468.108M1152.96 791.375l462.52-481.691M1172.07 810.457l472.86-492.746M1186.97 834.023l487.67-508.552M1204.48 854.829l501.7-523.534M1221.84 875.77l508.48-530.757M1239.24 896.672l520.62-543.709M1257.19 917l526.69-550.204M1273.01 939.569l530.9-554.668M1290.99 959.877l535.48-559.572M1310.07 978.979l538.63-562.925M1326.14 1001.32l519.61-542.638"/>
</g>
<defs>
<radialGradient id="s8guwl92ja" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 495)">
<stop stop-color="#FFFEFF"/>
<stop offset="1" stop-color="#D7FFFE"/>
</radialGradient>
<radialGradient id="d44dn5xirb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 550.678 196.962) scale(675.018 3192.21)">
<stop stop-color="#BCFFFD"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="dzvpq96n6c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 466)">
<stop stop-color="#FFFEFF"/>
<stop offset="1" stop-color="#D7FFFE"/>
</radialGradient>
<radialGradient id="qmmqrfmedd" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 548.81 182.462) scale(675.018 3192.21)">
<stop stop-color="#BCFFFD"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="m8la3ielte" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.00191 594.50235 -1703.6414 2338.38377 494.5 132)">
<stop stop-color="#fff"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<linearGradient id="eyw4yzjlhf" x1="960" y1="-1" x2="960" y2="669" gradientUnits="userSpaceOnUse">
<stop offset=".083" stop-color="#fff"/>
<stop offset=".333" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

19
src/css/theme-2022/components/img/union.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg viewBox="0 0 1920 1060" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#9fz5hy4h1a)"/>
<path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#e1z5hwatsb)"/>
<path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#nign7co5vc)"/>
<defs>
<radialGradient id="9fz5hy4h1a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 212.392 960 488.607)">
<stop stop-color="#FFFEFF"/>
<stop offset="1" stop-color="#D7FFFE"/>
</radialGradient>
<radialGradient id="e1z5hwatsb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-653.00038 -178.91022 879.8803 -3211.45532 1033.5 522.084)">
<stop stop-color="#BCFFFD"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="nign7co5vc" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.0031 622.01048 -1805.66361 2368.81393 494.5 139.154)">
<stop stop-color="#fff"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

10
src/css/theme/components/layout.less → src/css/theme-2022/components/layout.less
View File

@@ -1,8 +1,8 @@
@space-xs: 0.25rem;
@space-sm: 0.5rem;
@space-md: 1rem;
@space-lg: 2rem;
@space-xl: 3rem;
@space-xs: 0.6rem;
@space-sm: 1rem;
@space-md: 1.6rem;
@space-lg: 2.5rem;
@space-xl: 4rem;
.layout {
display: flex;

0
src/css/theme/components/navigation.less → src/css/theme-2022/components/navigation.less
View File

19
src/css/theme-2022/components/news.less Normal file
View File

@@ -0,0 +1,19 @@
.news {
article {
background: @surface;
color: @on-surface;
padding: @space-sm @space-md;
border-radius: 10px;
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
margin-bottom: @space-lg;
@media (max-width: 768px) {
text-align: center;
}
.title {
font-weight: 700;
margin-bottom: @space-xs;
}
}
}

12
src/css/theme-2022/components/promotion-image.less Normal file
View File

@@ -0,0 +1,12 @@
.promotion-image-wave-top,
.promotion-image-wave-bottom {
z-index: 2;
width: 100%;
}
.promotion-image {
z-index: 0;
margin-top: -56px;
margin-bottom: -68px;
width: 100%;
}

7
src/css/theme-2022/components/section.less Normal file
View File

@@ -0,0 +1,7 @@
section,
.section {
& ~ section,
& ~ .section {
margin-top: 4rem;
}
}

52
src/css/theme-2022/components/services.less Normal file
View File

@@ -0,0 +1,52 @@
.services {
article {
font-weight: 700;
display: flex;
align-items: flex-start;
gap: @space-sm;
margin-bottom: @space-xs;
padding: @space-sm @space-md;
border-radius: 10px;
cursor: pointer;
&:hover {
background: @surface;
color: @on-surface;
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
.icon {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: @secondary-light;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
img {
height: 32px;
margin-top: 2px;
}
}
.title {
font-size: 24px;
font-weight: 700;
@media (max-width: 768px) {
font-size: 20px;
}
}
@media (max-width: 768px) {
padding: 0;
&:hover {
background: transparent;
box-shadow: none;
}
}
}
}

0
src/css/theme/components/sidebar.less → src/css/theme-2022/components/sidebar.less
View File

79
src/css/theme-2022/components/specials.less Normal file
View File

@@ -0,0 +1,79 @@
.specials {
article {
background: @surface;
color: @on-surface;
padding: @space-md;
border-radius: 10px;
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
margin-bottom: @space-lg;
font-weight: 700;
display: flex;
justify-content: flex-start;
align-items: center;
gap: @space-md;
@media (max-width: 768px) {
flex-direction: column;
text-align: center;
}
.icon {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
@media (max-width: 768px) {
width: 50px;
height: 50px;
}
img {
width: 100%;
}
}
.title {
margin-bottom: @space-xs;
font-size: 24px;
line-height: 1.3;
@media (max-width: 768px) {
font-size: 20px;
}
}
&.hovered {
display: none;
@media (min-width: 768px) {
display: flex;
position: fixed;
top: 40%;
left: 30%;
right: 30%;
z-index: 999;
box-shadow: inset 0 0 2px 1px white, 0 10px 40px 0 rgba(0, 0, 0, 0.1), 0 10px 40px 0 rgba(0, 0, 0, 0.1);
background: linear-gradient(
90deg,
rgba(238, 254, 255, 1) 0%,
rgba(255, 254, 255, 1) 35%,
rgba(215, 255, 254, 1) 100%
),
radial-gradient(88.73% 230.98% at 25.76% 13.14%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
radial-gradient(50% 20.05% at 50% 46.13%, #fffeff 0%, #d7fffe 100%);
}
}
}
.row:nth-child(2) > *:nth-child(2) > article:first-child {
margin-top: @space-xl;
@media (max-width: 1050px) {
margin-top: 0;
}
}
}

50
src/css/theme-2022/components/top-section.less Normal file
View File

@@ -0,0 +1,50 @@
.top-section {
height: 1003px;
margin-bottom: -28rem;
@media (max-width: 1050px) {
margin-bottom: 0rem;
}
.text {
margin-top: @space-xl;
strong {
color: @secondary;
}
}
.top-section-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
@media (max-width: 768px) {
height: 64rem;
object-fit: cover;
}
}
.circles {
position: absolute;
top: -151px;
left: -97px;
min-width: 986px;
@media (max-width: 1049px) {
top: -151px;
left: -97px;
}
}
.circles-image {
position: absolute;
top: 0;
left: 70px;
min-width: 550px;
@media (max-width: 1240px) {
min-width: 652px;
}
}
}

51
src/css/theme-2022/components/typo.less Normal file
View File

@@ -0,0 +1,51 @@
// Headlines
h1,
h2,
h3,
h4,
h5,
h6 {
color: @primary;
font-weight: 700;
@media (max-width: 768px) {
text-align: center;
}
}
h1 {
font-size: 48px;
margin-bottom: @space-md;
line-height: @space-xl;
@media (max-width: 768px) {
font-size: 32px;
}
}
h2 {
font-size: 48px;
margin-bottom: @space-md;
line-height: @space-xl;
@media (max-width: 768px) {
font-size: 28px;
}
}
h3 {
font-size: 24px;
margin-bottom: @space-sm;
@media (max-width: 768px) {
font-size: 18px;
}
}
// Link
a {
text-decoration: none;
color: @on-background;
}

0
src/css/theme/fonts.less → src/css/theme-2022/fonts.less
View File

57
src/css/theme-2022/main.less Normal file
View File

@@ -0,0 +1,57 @@
// Variables
@background: #fff;
@on-background: #575756;
@primary: #2d8e91;
@on-primary: #fff;
@secondary: #72efdd;
@on-secondary: #2d8e91;
@secondary-light: #dafbf7;
@on-secondary-light: @on-secondary;
@secondary-light-green: #e2fbf0;
@on-secondary-light-green: @on-secondary;
@surface: #fff;
@on-surface: #575756;
@error: #fff0e9;
@on-error: #eb5757;
@font-size-default: 16px;
@font-weight-default: 400;
@font-line-height-default: 1.6;
@radius-default: 50px;
@transition-default: all 0.2s ease-in-out;
// Header
@header-height: 140px;
@header-height-max-768: 100px;
// CSS Definitions
@import "fonts";
@import "reset";
@import "components/general";
@import "components/grid";
@import "components/typo";
@import "components/layout";
@import "components/section";
@import "components/header";
@import "components/footer";
@import "components/news";
@import "components/services";
@import "components/specials";
@import "components/iframes";
@import "components/contact-information";
@import "components/promotion-image";
@import "components/history";
@import "components/top-section";
@import "components/forms";
@import "components/cc-bar";

0
src/css/theme/reset.less → src/css/theme-2022/reset.less
View File

8
src/css/theme/components/appointment.less
View File

@@ -1,8 +0,0 @@
.appointment {
background: @secondary;
color: @on-secondary;
border-radius: 50px;
font-size: 18px;
text-align: center;
padding: @space-xs @space-sm;
}

14
src/css/theme/components/footer.less
View File

@@ -1,14 +0,0 @@
footer {
padding: 20px 0;
color: @secondary;
a {
color: @secondary;
}
.wave {
height: 54px;
background-repeat: repeat-x;
background-image: url("../css/theme/components/img/wave_footer_top.png");
}
}

46
src/css/theme/components/forms.less
View File

@@ -1,46 +0,0 @@
form {
input,
textarea {
border: 1px solid @secondary;
background: #fff;
color: @on-background;
padding: @space-md;
width: 100%;
max-width: 100%;
border-radius: @space-sm;
transition: all 0.2s ease-in-out;
&[readonly] {
opacity: 0.5;
}
}
textarea {
height: 200px;
}
button {
background: @primary;
color: @on-primary;
padding: @space-md @space-lg;
border: 1px solid @primary;
border-radius: @space-sm;
transition: all 0.2s ease-in-out;
cursor: pointer;
&:hover {
border: 1px solid #fff;
box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.5);
}
&[disabled] {
opacity: 0.5;
}
}
.error {
background: @error;
color: @on-error;
padding: @space-md;
}
}

16
src/css/theme/components/general.less
View File

@@ -1,16 +0,0 @@
html,
body {
background: @background;
color: @on-background;
font-size: @font-size-default;
font-weight: @font-weight-default;
font-family: "Nunito", sans-serif;
width: 100%;
height: 100%;
}
img {
&.rounded {
border-radius: @radius-half;
}
}

127
src/css/theme/components/header.less
View File

@@ -1,127 +0,0 @@
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 1s ease-in-out;
.brand {
margin-top: -@space-md;
@media (max-width: 992px) {
display: block;
height: 100px;
margin: @space-md 0;
}
@media (max-width: 768px) {
display: block;
height: 60px;
margin: @space-md 0;
}
img {
width: auto;
height: 100%;
}
}
.service-bar {
background-color: @primary;
color: @on-primary;
border-bottom-left-radius: @radius-default;
border-bottom-right-radius: @radius-default;
height: 29px;
line-height: 29px;
padding: 0 20px;
@media (max-width: 992px) {
display: none;
}
}
nav {
ul {
padding: 0 20px;
margin-top: 50px;
list-style: none;
transition: all 1s ease-in-out;
li {
a {
font-size: 20px;
color: #fff;
font-weight: 700;
text-decoration: none;
&:hover {
color: @primary;
text-decoration: none;
}
&.active {
color: @primary;
}
}
}
}
&.show {
display: block;
}
}
&.scroll {
background: rgba(0, 0, 0, 0.7);
padding-bottom: @space-lg;
@media (max-width: 992px) {
padding-bottom: 0;
}
}
@media (max-width: 992px) {
background: rgba(0, 0, 0, 0.7);
}
}
.top-article {
.wave-bottom {
height: 200px;
margin-top: -33px;
background-image: url("../css/theme/components/img/wave_header_bottom.png");
background-repeat: repeat-x;
}
& > .articles {
z-index: 1;
margin-right: 120px;
margin-left: 120px;
display: flex;
justify-content: space-around;
align-items: stretch;
gap: @space-lg;
margin-top: -80px;
margin-bottom: -120px;
article {
width: 33%;
}
@media (max-width: 1200px) {
flex-direction: column;
margin-right: @space-xl;
margin-left: @space-xl;
article {
width: 100%;
}
}
}
*[class^="col"] {
margin-top: @space-md;
}
}

BIN
src/css/theme/components/img/wave_footer_top.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/css/theme/components/img/wave_header_bottom.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/css/theme/components/img/wave_header_top.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

46
src/css/theme/components/typo.less
View File

@@ -1,46 +0,0 @@
a {
color: @on-background;
text-decoration: none;
transition: @transition-default;
&:hover {
color: @primary;
text-decoration: underline;
}
}
a {
color: @primary;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: @primary;
font-weight: 700;
line-height: 1.2;
}
h1,
.h1 {
font-size: 32px;
}
h2,
.h2 {
font-size: 24px;
}
h3,
.h3 {
font-size: 24px;
}

46
src/css/theme/main.less
View File

@@ -1,46 +0,0 @@
// Variables
@background: #f1ebe4;
@on-background: #352a1c;
@primary: #c4253e;
@on-primary: #fff;
@secondary: #bda082;
@on-secondary: #fff;
@surface: #fff;
@on-surface: #352a1c;
@error: @primary;
@on-error: #fff;
@font-size-default: 14px;
@font-weight-default: 400;
@radius-default: 25px;
@radius-half: 12px;
@transition-default: all 0.2s ease-in-out;
// CSS Definitions
@import "fonts";
@import "reset";
@import "components/general";
@import "components/typo";
@import "components/layout";
@import "components/grid";
@import "components/content";
@import "components/sidebar";
@import "components/article";
@import "components/event";
@import "components/header";
@import "components/footer";
@import "components/carousel";
@import "components/navigation";
@import "components/appointment";
@import "components/cc-bar";
@import "components/audio";
@import "components/forms";