added and styled registration link to fit in login area, changed navbar size and input fields, improved positionings of logo and icons, fixed animation of navbar when scrolling on small devices
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 60f961a..beca1f3 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -137,7 +137,7 @@
navbar.style.top = '0';
} else {
if (!navbar.classList.contains('show')) {
- navbar.style.top = '-3rem';
+ navbar.style.top = '-4rem';
}
}
prevScrollPos = currentScrollPos;
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 5b244ba..6bcad50 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -22,7 +22,7 @@
.navbar {
width: 100%;
- height: 3rem;
+ height: 4rem;
background-color: $dark-green;
display: flex;
flex-direction: column;
@@ -40,8 +40,9 @@
&-group {
fieldset.fieldset-login {
- display: inline;
- margin-right: 0;
+ display: flex;
+ flex-direction: column;
+ margin-right: 4rem;
padding: 0;
min-inline-size: unset;
border: unset;
@@ -54,13 +55,14 @@
input[type=password] {
@include input-field;
margin-right: 8px;
- height: 2rem;
+ height: 1.5rem;
}
button.btn-login {
- width: 3rem;
- height: 3rem;
- background-color: $dark-green;
+ // width: 3rem;
+ // height: 3rem;
+ // background-color: $dark-green;
+ background-color: unset;
color: $nearly-white;
// padding: .75rem 1rem;
font-size: 180%;
@@ -78,9 +80,24 @@
&::after {
content: $fa-login;
}
+
+ &:hover {
+ // background-color: $middle-green;
+ color: $dark-orange;
+ }
}
- button.btn-login:hover {
- background-color: $middle-green;
+ }
+
+ p {
+ margin: 0;
+ font-size: .7rem;
+
+ a {
+ color: $dark-orange;
+
+ &:hover {
+ color: $middle-orange;
+ }
}
}
}
@@ -101,8 +118,8 @@
}
&-btn {
- height: 3rem;
- padding: .6rem .9rem;
+ height: 4rem;
+ padding: 1rem;
font-size: 180% !important;
color: $nearly-white;
transition: all .2s ease-in-out;
@@ -125,8 +142,8 @@
&-content {
display: none;
- width: 100%;
- margin-top: 3rem;
+ width: fit-content;
+ margin-top: 4rem;
padding: 0;
background-color: $middle-green;
list-style: none;
@@ -208,7 +225,10 @@
display: block;
// padding-left: $logo-left-distance;
min-height: 2.7em;
- margin: 0 4rem;
+
+ &#searchform {
+ margin: 0 4rem;
+ }
}
input {
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index af8a0db..83ee68a 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -43,7 +43,7 @@
// margin-left: 10pt;
margin-left: 3rem;
left: 0;
- top: 0;
+ top: 50%;
width: 7.8em;
height: 2.4em;
z-index: 105;
@@ -51,6 +51,10 @@
size: 78% !important;
image: url('#{$img-path}/korap-logo.svg');
}
+ transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
}
// aside.active ~ header h1 {
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index dcf78dd..c9a1e7e 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -22,13 +22,17 @@
header {
padding-top: 2rem;
- padding-right: 8px;
+ // padding-right: 8px;
}
header form {
margin: 1.5rem 1rem;
padding-left: 0;
// padding-top: 33px;
+
+ &#searchform {
+ margin: 2.5rem 1rem 0 1rem;
+ }
}
.navbar {
@@ -37,10 +41,22 @@
}
.burger-icon {
+ position: relative;
display: block !important;
- padding: .6rem .9rem;
- font-size: 1.5rem;
+ width: 4rem;
+ height: 4rem;
+ font-size: 1.8rem;
color: $nearly-white;
+
+ &::after {
+ position: absolute;
+ top: 2rem;
+ left: 2rem;
+ transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ }
}
&.show .burger-icon {
@@ -55,7 +71,7 @@
}
&-group {
- margin-top: 3rem;
+ margin-top: 4rem;
width: 100%;
display: block;
position: fixed;
@@ -64,7 +80,8 @@
background-color: $middle-green;
fieldset.fieldset-login {
- width: 100%;
+ display: block !important;
+ margin-right: 0 !important;
form.login {
align-items: normal !important;
@@ -80,6 +97,20 @@
button.btn-login {
width: 100% !important;
align-self: center;
+ background-color: $dark-green !important;
+
+ &:hover {
+ background-color: $middle-green !important;
+ color: unset !important;
+ }
+ }
+ }
+
+ p {
+ padding: 0 1rem 1rem;
+
+ a {
+ display: inline;
}
}
}
@@ -91,6 +122,7 @@
&-content {
display: block !important;
+ width: 100% !important;
}
}
}
@@ -283,6 +315,9 @@
footer {
padding-left: 0 !important;
+ padding-top: 2rem;
+ flex-direction: column;
+ height: unset;
}
}
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
index 5a8e15d..7d994eb 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
@@ -8,7 +8,7 @@
</div>
<ul class="dropdown-content">
<li>
- <a class="dropdown-item" href="/settings/oauth#page-top">OAuth</a>
+ <a class="dropdown-item" href="/settings">Einstellungen</a>
</li>
<li>
<a href="<%= url_for 'logout' %>"