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

Content-Seiten und Language Chooser + Collections so überarbeitet, dass ein Umschalten zwischen Sprachen und Pages möglich ist. Collection der Seiten wurde um eine Priorität erweitert. Navigation zeigt aktives Item an. Entsprechende CSS Klassen angepasst und für neue Projekte sauberer strukturiert.

Browse Source
This commit is contained in:
Mario Linz
2022-05-31 15:55:35 +02:00
parent fcf5490d5a
commit 87aa1689f3
8 changed files with 162 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/css/theme-2022/components/header.less
View File

@@ -37,97 +37,4 @@ header {
width: 80%;
}
}
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;
}
a {
&.active {
color: @primary;
}
}
& > * {
text-decoration: none;
transition: @transition-default;
font-weight: 500;
&:hover {
color: @primary;
}
}
}
.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;
}
}
}
}
}

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

@@ -1,3 +1,5 @@
// NAVIGATION - GENERAL
nav {
@media (max-width: 992px) {
display: none;
@@ -28,3 +30,122 @@ nav {
display: block;
}
}
// HEADER
header {
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;
}
a {
&.active {
color: @primary;
}
}
& > * {
text-decoration: none;
transition: @transition-default;
font-weight: 500;
&:hover {
color: @primary;
}
}
}
.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;
}
}
}
}
}
// FOOTER
footer {
nav.footer {
display: flex;
justify-content: center;
gap: @space-md;
a {
color: @on-background;
&:hover {
text-decoration: underline;
}
&.active {
color: @primary;
}
}
}
}

1
src/css/theme-2022/main.less
View File

@@ -40,6 +40,7 @@
@import "components/section";
@import "components/header";
@import "components/footer";
@import "components/navigation";
@import "components/news";
@import "components/services";
@import "components/specials";