Prototype Article und Theme Files hinzugefügt
This commit is contained in:
Mario Linz
5
src/css/prototype-article.less
Normal file
5
src/css/prototype-article.less
Normal file
@@ -0,0 +1,5 @@
|
||||
.p_article {
|
||||
font-size: 14px;
|
||||
border: 1px solid #000;
|
||||
padding: 20px;
|
||||
}
|
||||
8
src/css/theme/components/appointment.less
Normal file
8
src/css/theme/components/appointment.less
Normal file
@@ -0,0 +1,8 @@
|
||||
.appointment {
|
||||
background: @secondary;
|
||||
color: @on-secondary;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
padding: @space-xs @space-sm;
|
||||
}
|
||||
211
src/css/theme/components/article.less
Normal file
211
src/css/theme/components/article.less
Normal file
@@ -0,0 +1,211 @@
|
||||
article,
|
||||
.article {
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
strong {
|
||||
color: @secondary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.top,
|
||||
&.top-of-content,
|
||||
&.end-of-content {
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
background-color: @surface;
|
||||
color: @on-surface;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.article-image {
|
||||
min-height: 200px;
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 20px;
|
||||
color: #f1ebe4;
|
||||
text-shadow: 0 2px 10px #000;
|
||||
overflow-wrap: anywhere;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
font-size: 20px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
padding: 20px;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
.article-subtitle {
|
||||
font-size: @font-size-default;
|
||||
}
|
||||
}
|
||||
|
||||
&.end-of-content {
|
||||
.article-image {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-link {
|
||||
background: @primary;
|
||||
color: @on-primary;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
height: 44px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
|
||||
li {
|
||||
background-image: url("../css/theme/components/img/arrow-right-3.png");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
line-height: 30px;
|
||||
padding-left: 35px;
|
||||
color: @primary;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
strong {
|
||||
color: @primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-title:not(h1) {
|
||||
color: @primary;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
color: @secondary;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.content {
|
||||
margin-bottom: @space-lg;
|
||||
|
||||
.article-link {
|
||||
border: 1px solid @primary;
|
||||
border-bottom: 3px solid #c4253e;
|
||||
color: @primary;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
transition: @transition-default;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: @space-sm;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: @on-primary;
|
||||
color: @primary;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.end-of-content {
|
||||
.article-image {
|
||||
justify-content: flex-start;
|
||||
|
||||
.article-title {
|
||||
margin-top: 20px;
|
||||
color: #fff;
|
||||
font-family: "Caveat", sans-serif;
|
||||
text-shadow: none;
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
font-weight: 700;
|
||||
padding-right: 10%;
|
||||
}
|
||||
.article-subtitle {
|
||||
color: #fff;
|
||||
font-family: "Caveat", sans-serif;
|
||||
text-shadow: none;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.article-details {
|
||||
img {
|
||||
border-radius: 10px;
|
||||
width: 300px;
|
||||
display: inline-block;
|
||||
|
||||
&.layout-1 {
|
||||
float: left;
|
||||
margin: 0 @space-md @space-md 0;
|
||||
}
|
||||
&.layout-2 {
|
||||
float: right;
|
||||
margin: 0 0 @space-md @space-md;
|
||||
}
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.article-link {
|
||||
margin-top: @space-lg;
|
||||
border: 1px solid @primary;
|
||||
border-bottom: 3px solid #c4253e;
|
||||
color: @primary;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
transition: @transition-default;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: @space-sm;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: @on-primary;
|
||||
color: @primary;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/css/theme/components/audio.less
Normal file
18
src/css/theme/components/audio.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.audioToggle {
|
||||
position: fixed;
|
||||
right: 17px;
|
||||
bottom: 17px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 100%;
|
||||
padding: 15px;
|
||||
background-color: @secondary;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
audio {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
137
src/css/theme/components/carousel.less
Normal file
137
src/css/theme/components/carousel.less
Normal file
@@ -0,0 +1,137 @@
|
||||
.carousel {
|
||||
width: 100%;
|
||||
height: 695px;
|
||||
|
||||
.carousel-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 10px #000;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: 17rem;
|
||||
left: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
top: 10rem;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-family: "Caveat", sans-serif;
|
||||
text-shadow: rgb(196, 37, 62) 6px 0px 0px,
|
||||
rgb(196, 37, 62) 5.91686px 0.995377px 0px,
|
||||
rgb(196, 37, 62) 5.66974px 1.96317px 0px,
|
||||
rgb(196, 37, 62) 5.2655px 2.87655px 0px,
|
||||
rgb(196, 37, 62) 4.71532px 3.71022px 0px,
|
||||
rgb(196, 37, 62) 4.03447px 4.44106px 0px,
|
||||
rgb(196, 37, 62) 3.24181px 5.04883px 0px,
|
||||
rgb(196, 37, 62) 2.35931px 5.51667px 0px,
|
||||
rgb(196, 37, 62) 1.41143px 5.83163px 0px,
|
||||
rgb(196, 37, 62) 0.424423px 5.98497px 0px,
|
||||
rgb(196, 37, 62) -0.574341px 5.97245px 0px,
|
||||
rgb(196, 37, 62) -1.55719px 5.79441px 0px,
|
||||
rgb(196, 37, 62) -2.49688px 5.45578px 0px,
|
||||
rgb(196, 37, 62) -3.36738px 4.96596px 0px,
|
||||
rgb(196, 37, 62) -4.14455px 4.33852px 0px,
|
||||
rgb(196, 37, 62) -4.80686px 3.59083px 0px,
|
||||
rgb(196, 37, 62) -5.33596px 2.74364px 0px,
|
||||
rgb(196, 37, 62) -5.71718px 1.8204px 0px,
|
||||
rgb(196, 37, 62) -5.93995px 0.84672px 0px,
|
||||
rgb(196, 37, 62) -5.99811px -0.150428px 0px,
|
||||
rgb(196, 37, 62) -5.89004px -1.14341px 0px,
|
||||
rgb(196, 37, 62) -5.61874px -2.1047px 0px,
|
||||
rgb(196, 37, 62) -5.19172px -3.00766px 0px,
|
||||
rgb(196, 37, 62) -4.62082px -3.82727px 0px,
|
||||
rgb(196, 37, 62) -3.92186px -4.54081px 0px,
|
||||
rgb(196, 37, 62) -3.11421px -5.12852px 0px,
|
||||
rgb(196, 37, 62) -2.22026px -5.57409px 0px,
|
||||
rgb(196, 37, 62) -1.26477px -5.86518px 0px,
|
||||
rgb(196, 37, 62) -0.274238px -5.99373px 0px,
|
||||
rgb(196, 37, 62) 0.723898px -5.95617px 0px,
|
||||
rgb(196, 37, 62) 1.70197px -5.75355px 0px,
|
||||
rgb(196, 37, 62) 2.63288px -5.39147px 0px,
|
||||
rgb(196, 37, 62) 3.49082px -4.87998px 0px,
|
||||
rgb(196, 37, 62) 4.25202px -4.23324px 0px,
|
||||
rgb(196, 37, 62) 4.89538px -3.46919px 0px,
|
||||
rgb(196, 37, 62) 5.40307px -2.60899px 0px,
|
||||
rgb(196, 37, 62) 5.76102px -1.67649px 0px,
|
||||
rgb(196, 37, 62) 5.95932px -0.697531px 0px, 0 2px 20px #000;
|
||||
line-height: 70px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 96px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 32px;
|
||||
font-family: "Nunito", sans-serif;
|
||||
margin-left: @space-md;
|
||||
}
|
||||
|
||||
ul.text {
|
||||
list-style-type: none;
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
font-size: 32px;
|
||||
font-family: "Nunito", sans-serif;
|
||||
text-shadow: rgb(196, 37, 62) 3px 0px 0px,
|
||||
rgb(196, 37, 62) 2.83487px 0.981584px 0px,
|
||||
rgb(196, 37, 62) 2.35766px 1.85511px 0px,
|
||||
rgb(196, 37, 62) 1.62091px 2.52441px 0px,
|
||||
rgb(196, 37, 62) 0.705713px 2.91581px 0px,
|
||||
rgb(196, 37, 62) -0.287171px 2.98622px 0px,
|
||||
rgb(196, 37, 62) -1.24844px 2.72789px 0px,
|
||||
rgb(196, 37, 62) -2.07227px 2.16926px 0px,
|
||||
rgb(196, 37, 62) -2.66798px 1.37182px 0px,
|
||||
rgb(196, 37, 62) -2.96998px 0.42336px 0px,
|
||||
rgb(196, 37, 62) -2.94502px -0.571704px 0px,
|
||||
rgb(196, 37, 62) -2.59586px -1.50383px 0px,
|
||||
rgb(196, 37, 62) -1.96093px -2.27041px 0px,
|
||||
rgb(196, 37, 62) -1.11013px -2.78704px 0px,
|
||||
rgb(196, 37, 62) -0.137119px -2.99686px 0px,
|
||||
rgb(196, 37, 62) 0.850987px -2.87677px 0px,
|
||||
rgb(196, 37, 62) 1.74541px -2.43999px 0px,
|
||||
rgb(196, 37, 62) 2.44769px -1.73459px 0px,
|
||||
rgb(196, 37, 62) 2.88051px -0.838247px 0px,
|
||||
0 2px 20px #000;
|
||||
font-weight: 700;
|
||||
|
||||
&:before {
|
||||
content: "»";
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/css/theme/components/cc-bar.less
Normal file
8
src/css/theme/components/cc-bar.less
Normal file
@@ -0,0 +1,8 @@
|
||||
#ccBarButtons #ccBarShowMoreButton {
|
||||
color: @primary !important;
|
||||
}
|
||||
|
||||
#ccBar ul li input[type="checkbox"]:checked ~ label:before {
|
||||
background: @primary !important;
|
||||
top: 1px;
|
||||
}
|
||||
29
src/css/theme/components/content.less
Normal file
29
src/css/theme/components/content.less
Normal file
@@ -0,0 +1,29 @@
|
||||
.top-of-content {
|
||||
*[class^="col"] {
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
gap: @space-lg;
|
||||
|
||||
article {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
flex-direction: column;
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wave-top {
|
||||
height: 54px;
|
||||
margin-top: -54px;
|
||||
background-image: url("../css/theme/components/img/wave_header_top.png");
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
64
src/css/theme/components/event.less
Normal file
64
src/css/theme/components/event.less
Normal file
@@ -0,0 +1,64 @@
|
||||
.event {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: @font-size-default;
|
||||
|
||||
.event-header {
|
||||
background: @primary;
|
||||
color: @on-primary;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: @space-md;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
padding: @space-sm;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: @space-lg;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
|
||||
strong {
|
||||
color: @secondary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
color: @primary;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.event-subtitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar {
|
||||
.event-content {
|
||||
gap: @space-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/css/theme/components/footer.less
Normal file
14
src/css/theme/components/footer.less
Normal file
@@ -0,0 +1,14 @@
|
||||
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
Normal file
46
src/css/theme/components/forms.less
Normal file
@@ -0,0 +1,46 @@
|
||||
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
Executable file
16
src/css/theme/components/general.less
Executable file
@@ -0,0 +1,16 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
188
src/css/theme/components/grid.less
Executable file
188
src/css/theme/components/grid.less
Executable file
@@ -0,0 +1,188 @@
|
||||
// Settings
|
||||
|
||||
@container_width: 1200px;
|
||||
@columns: 12;
|
||||
@main_padding: 15px;
|
||||
|
||||
// Grid
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
width: @container_width;
|
||||
padding: 0 @main_padding;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
width: 90%;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
width: 540px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
width: 720px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
width: 960px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
width: 1140px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
width: 1320px;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixins
|
||||
|
||||
.order(@val) {
|
||||
order: @val;
|
||||
-moz-order: @val;
|
||||
-webkit-order: @val;
|
||||
}
|
||||
|
||||
// Row / Col
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0px -@main_padding;
|
||||
&.centerrow {
|
||||
each(range(@columns), {
|
||||
.col-@{value}, .col-xs-@{value}, .col-sm-@{value}, .col-md-@{value}, .col-lg-@{value} {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
});
|
||||
}
|
||||
&.fullwidth {
|
||||
margin: 0px;
|
||||
}
|
||||
.col {
|
||||
flex: none;
|
||||
padding: 0px @main_padding;
|
||||
width: 100%;
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
each(range(@columns), {
|
||||
.col-@{value}, .col-xs-@{value}, .col-sm-@{value}, .col-md-@{value}, .col-lg-@{value} {
|
||||
flex:none;
|
||||
position:relative;
|
||||
min-height:1px;
|
||||
padding:0px @main_padding;
|
||||
width:100%;
|
||||
display:flex;
|
||||
display:-webkit-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap:wrap;
|
||||
|
||||
&.right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > * {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-@{value} {
|
||||
.order(@value);
|
||||
}
|
||||
});
|
||||
|
||||
// Set Column Width on breakpoints
|
||||
.loop (@val) {
|
||||
each(range(@columns), {
|
||||
.col-@{val}-@{value} {
|
||||
width: (100% / @columns * @value);
|
||||
}
|
||||
.order-@{val}-@{value} {
|
||||
.order(@value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
.col-0 {
|
||||
display: none;
|
||||
}
|
||||
each(range(@columns), {
|
||||
.col-@{value} {
|
||||
width: (100% / @columns * @value);
|
||||
}
|
||||
.order-@{value} {
|
||||
.order(@value);
|
||||
}
|
||||
});
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.row .col {
|
||||
width: 50%;
|
||||
flex: none;
|
||||
}
|
||||
.row .col-xs-0 {
|
||||
display: none;
|
||||
}
|
||||
.loop(xs);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.row .col {
|
||||
width: 33.3333333%;
|
||||
flex: none;
|
||||
}
|
||||
.row .col-sm-0 {
|
||||
display: none;
|
||||
}
|
||||
.loop(sm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1050px) {
|
||||
.row .col-md-0 {
|
||||
display: none;
|
||||
}
|
||||
.loop(md);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1250px) {
|
||||
.row .col {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
.row .col-lg-0 {
|
||||
display: none;
|
||||
}
|
||||
.loop(lg);
|
||||
}
|
||||
|
||||
// Hidden
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
.hidden-xl {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
127
src/css/theme/components/header.less
Executable file
127
src/css/theme/components/header.less
Executable file
@@ -0,0 +1,127 @@
|
||||
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/arrow-right-3.png
Normal file
BIN
src/css/theme/components/img/arrow-right-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
BIN
src/css/theme/components/img/wave_footer_top.png
Normal file
BIN
src/css/theme/components/img/wave_footer_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/css/theme/components/img/wave_header_bottom.png
Normal file
BIN
src/css/theme/components/img/wave_header_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/css/theme/components/img/wave_header_top.png
Normal file
BIN
src/css/theme/components/img/wave_header_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
287
src/css/theme/components/layout.less
Executable file
287
src/css/theme/components/layout.less
Executable file
@@ -0,0 +1,287 @@
|
||||
@space-xs: 0.25rem;
|
||||
@space-sm: 0.5rem;
|
||||
@space-md: 1rem;
|
||||
@space-lg: 2rem;
|
||||
@space-xl: 3rem;
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&.layout-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.layout-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > *:not([type="checkbox"]):not([type="radio"]) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.layout-gap-xs {
|
||||
gap: @space-xs;
|
||||
}
|
||||
|
||||
&.layout-gap-sm {
|
||||
gap: @space-sm;
|
||||
}
|
||||
|
||||
&.layout-gap-md {
|
||||
gap: @space-md;
|
||||
}
|
||||
|
||||
&.layout-gap-lg {
|
||||
gap: @space-lg;
|
||||
}
|
||||
|
||||
&.layout-gap-xl {
|
||||
gap: @space-xl;
|
||||
}
|
||||
|
||||
&.layout-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.layout-stretch {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.layout-wrap {
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > .layout {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.justify-content-start {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
&.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.justify-content-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&.justify-content-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&.justify-content-end {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
&.align-items-start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
&.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.align-items-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
&.align-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&.align-self-start {
|
||||
align-self: start;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&:not(.layout-nowrap) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.align-self-end {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&.align-self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.layout-scrollable {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.p-xs {
|
||||
padding: @space-xs;
|
||||
}
|
||||
.p-sm {
|
||||
padding: @space-sm;
|
||||
}
|
||||
.p-md {
|
||||
padding: @space-md;
|
||||
}
|
||||
.p-lg {
|
||||
padding: @space-lg;
|
||||
}
|
||||
.p-xl {
|
||||
padding: @space-xl;
|
||||
}
|
||||
|
||||
.pt-xs {
|
||||
padding-top: @space-xs;
|
||||
}
|
||||
.pr-xs {
|
||||
padding-right: @space-xs;
|
||||
}
|
||||
.pb-xs {
|
||||
padding-bottom: @space-xs;
|
||||
}
|
||||
.pl-xs {
|
||||
padding-left: @space-xs;
|
||||
}
|
||||
|
||||
.pt-sm {
|
||||
padding-top: @space-sm;
|
||||
}
|
||||
.pr-sm {
|
||||
padding-right: @space-sm;
|
||||
}
|
||||
.pb-sm {
|
||||
padding-bottom: @space-sm;
|
||||
}
|
||||
.pl-sm {
|
||||
padding-left: @space-sm;
|
||||
}
|
||||
|
||||
.pt-md {
|
||||
padding-top: @space-md;
|
||||
}
|
||||
.pr-md {
|
||||
padding-right: @space-md;
|
||||
}
|
||||
.pb-md {
|
||||
padding-bottom: @space-md;
|
||||
}
|
||||
.pl-md {
|
||||
padding-left: @space-md;
|
||||
}
|
||||
|
||||
.pt-lg {
|
||||
padding-top: @space-lg;
|
||||
}
|
||||
.pr-lg {
|
||||
padding-right: @space-lg;
|
||||
}
|
||||
.pb-lg {
|
||||
padding-bottom: @space-lg;
|
||||
}
|
||||
.pl-lg {
|
||||
padding-left: @space-lg;
|
||||
}
|
||||
|
||||
.pt-xl {
|
||||
padding-top: @space-xl;
|
||||
}
|
||||
.pr-xl {
|
||||
padding-right: @space-xl;
|
||||
}
|
||||
.pb-xl {
|
||||
padding-bottom: @space-xl;
|
||||
}
|
||||
.pl-xl {
|
||||
padding-left: @space-xl;
|
||||
}
|
||||
|
||||
.m-xs {
|
||||
margin: @space-xs;
|
||||
}
|
||||
.m-sm {
|
||||
margin: @space-sm;
|
||||
}
|
||||
.m-md {
|
||||
margin: @space-md;
|
||||
}
|
||||
.m-lg {
|
||||
margin: @space-lg;
|
||||
}
|
||||
.m-xl {
|
||||
margin: @space-xl;
|
||||
}
|
||||
|
||||
.mt-xs {
|
||||
margin-top: @space-xs;
|
||||
}
|
||||
.mr-xs {
|
||||
margin-right: @space-xs;
|
||||
}
|
||||
.mb-xs {
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
.ml-xs {
|
||||
margin-left: @space-xs;
|
||||
}
|
||||
|
||||
.mt-sm {
|
||||
margin-top: @space-sm;
|
||||
}
|
||||
.mr-sm {
|
||||
margin-right: @space-sm;
|
||||
}
|
||||
.mb-sm {
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
.ml-sm {
|
||||
margin-left: @space-sm;
|
||||
}
|
||||
|
||||
.mt-md {
|
||||
margin-top: @space-md;
|
||||
}
|
||||
.mr-md {
|
||||
margin-right: @space-md;
|
||||
}
|
||||
.mb-md {
|
||||
margin-bottom: @space-md;
|
||||
}
|
||||
.ml-md {
|
||||
margin-left: @space-md;
|
||||
}
|
||||
|
||||
.mt-lg {
|
||||
margin-top: @space-lg;
|
||||
}
|
||||
.mr-lg {
|
||||
margin-right: @space-lg;
|
||||
}
|
||||
.mb-lg {
|
||||
margin-bottom: @space-lg;
|
||||
}
|
||||
.ml-lg {
|
||||
margin-left: @space-lg;
|
||||
}
|
||||
|
||||
.mt-xl {
|
||||
margin-top: @space-xl;
|
||||
}
|
||||
.mr-xl {
|
||||
margin-right: @space-xl;
|
||||
}
|
||||
.mb-xl {
|
||||
margin-bottom: @space-xl;
|
||||
}
|
||||
.ml-xl {
|
||||
margin-left: @space-xl;
|
||||
}
|
||||
30
src/css/theme/components/navigation.less
Normal file
30
src/css/theme/components/navigation.less
Normal file
@@ -0,0 +1,30 @@
|
||||
nav {
|
||||
@media (max-width: 992px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navToggle {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-self: center;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
42
src/css/theme/components/sidebar.less
Normal file
42
src/css/theme/components/sidebar.less
Normal file
@@ -0,0 +1,42 @@
|
||||
.sidebar {
|
||||
.contact-info {
|
||||
color: @primary;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.today {
|
||||
padding: 5px 20px;
|
||||
border-radius: 25px;
|
||||
border: solid 3px #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lastPageUpdate {
|
||||
text-align: center;
|
||||
|
||||
.lastPageUpdate-date {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin-top: @space-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.visitor-counter {
|
||||
h3 {
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
table {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
display: block !important;
|
||||
td {
|
||||
width: 100%;
|
||||
font-family: "Nunito", sans-serif;
|
||||
font-size: @font-size-default;
|
||||
line-height: auto;
|
||||
padding: @space-xs 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
src/css/theme/components/typo.less
Normal file
46
src/css/theme/components/typo.less
Normal file
@@ -0,0 +1,46 @@
|
||||
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;
|
||||
}
|
||||
52
src/css/theme/fonts.less
Executable file
52
src/css/theme/fonts.less
Executable file
@@ -0,0 +1,52 @@
|
||||
// Font - NUNITO
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("../fonts/nunito/nunito-v22-latin-300.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/nunito/nunito-v22-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("../fonts/nunito/nunito-v22-latin-600.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/nunito/nunito-v22-latin-700italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
// Font - CAVEAT
|
||||
|
||||
@font-face {
|
||||
font-family: "Caveat";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/caveat/caveat-v14-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Caveat";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("../fonts/caveat/caveat-v14-latin-600.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Caveat";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/caveat/caveat-v14-latin-700.woff2") format("woff2");
|
||||
}
|
||||
46
src/css/theme/main.less
Normal file
46
src/css/theme/main.less
Normal file
@@ -0,0 +1,46 @@
|
||||
// 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";
|
||||
77
src/css/theme/reset.less
Normal file
77
src/css/theme/reset.less
Normal file
@@ -0,0 +1,77 @@
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role="list"],
|
||||
ol[role="list"] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user