cms/tibi-svelte-starter
Template
5
0 Fork 1
Code Issues Pull Requests Actions 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 committed 2022-05-31 15:55:35 +02:00
1 parent fcf5490d5a
commit 87aa1689f3
8 files changed
+162 -109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/css/theme-2022/components/header.less
-93
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;
}
}
}
}
}
src/css/theme-2022/components/navigation.less
+121
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;
}
}
}
}
src/css/theme-2022/main.less
+1
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";