Revize d79e27be

Code fixes

resources/sass/_custom.scss

@@ -4 +4 @@
 body {
     background-color: $theme-color-five;
     font-family: $font-family-one;
+    padding-top: 5.1rem;
 
     .head-title h1 {
         color: $theme-color-one;
@@ -14 +15 @@
     }
 
     .carousel {
+        margin-top: - 5.1rem;
+
         .carousel-inner {
             .museum-logo {
                 display: flex;
@@ -58 +61 @@
             top: 50%;
             bottom: auto;
             transform: translateY(-50%);
-            background-color:  rgba(239, 218, 179, 0.5);
+            background-color: rgba(239, 218, 179, 0.5);
         }
     }
 
-    .container{
-        margin-top: 4.99055rem;
-    }
-
     /////////text types
     //většina běžných textů
     .text {
@@ -75 +74 @@
     }
 
     //text inputu a název artefaktů
-    .text2{
+    .text2 {
         font-weight: $font-weight-two;
         font-size: 8pt;
     }
 
     //název "kaplicky" a "choose a few" v categories (tam má jinou barvu)
-    .kaplicky{
+    .kaplicky {
         color: $theme-color-one;
         font-size: 11pt;
         font-weight: $font-weight-three;
@@ -89 +88 @@
     }
 
     //autor artefaktu
-    .text-author{
+    .text-author {
         font-weight: $font-weight-one;
         font-size: 7pt;
         color: $theme-color-four;
     }
 
     //počet lajků
-    .text-number{
+    .text-number {
         font-weight: $font-weight-two;
         font-size: 5pt;
         color: $theme-color-four;
     }
 
     //notes u metadat, about v about, text levého menu
-    .text-headline{
+    .text-headline {
         font-weight: $font-weight-two;
         font-size: 12pt;
         color: $theme-color-four;
     }
 
     //název metadata, text pravého menu
-    .text-page{
+    .text-page {
         font-weight: $font-weight-two;
         font-size: 7pt;
     }
 
     ////color pro změnu jen barvy
-    .black{
+    .black {
         color: $theme-color-five;
     }
-    .white{
+
+    .white {
         color: $theme-color-one;
     }
-    .colored{
+
+    .colored {
         color: $theme-color-four;
     }
 
 
     ////login
-    .auth{
-        .card{
+    .auth {
+        .card {
             border: none;
             text-align: center;
             font-size: 8pt;
         }
 
-        .col-form-label{
+        .col-form-label {
             text-align: left;
             padding-top: 0;
             padding-bottom: 0;
         }
-        .form-control{
+
+        .form-control {
             padding: 0;
             height: 17pt;
             border-radius: 0;
-            &:focus{
+
+            &:focus {
                 border-color: $theme-color-one;
                 -webkit-box-shadow: none;
                 box-shadow: none;
             }
         }
-
-        .card-body{
-            padding-bottom: 0px;
-            padding-top: calc(28vh - 4.99055rem);
-        }
     }
 
-    /*input:-internal-autofill-selected{
-
-    }*/
     //Oprava barev pro Chrom
     input:-webkit-autofill {
-        -webkit-box-shadow:0 0 0 50px $theme-color-five inset !important;
+        -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
         -webkit-text-fill-color: $theme-color-one;
         background-color: $theme-color-five !important;
         //outline: none !important;
-        &:active, &:focus, &:visited, &:hover{
-            -webkit-box-shadow:0 0 0 50px $theme-color-five inset !important;
+        &:active, &:focus, &:visited, &:hover {
+            -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
             -webkit-text-fill-color: $theme-color-one;
             background-color: $theme-color-five !important;
             //outline: none !important;
@@ -175 +170 @@
     }
 
     .card-body {
-    	background-color: $theme-color-five;
-    	font-weight: $font-weight-one;
-    	color: $theme-color-four;
-	}
-
-	.form-control {
-    	background-color: $theme-color-five;
-    	margin-top: -1px;
-    	border-top-color: $theme-color-five;
-    	border-left-color: $theme-color-five;
-    	border-right-color: $theme-color-five;
-    	border-bottom-color: 0.5pt $theme-color-one;
-    	color: $theme-color-one;
+        background-color: $theme-color-five;
+        font-weight: $font-weight-one;
+        color: $theme-color-four;
+    }
+
+    .form-control {
+        background-color: $theme-color-five;
+        margin-top: -1px;
+        border-top-color: $theme-color-five;
+        border-left-color: $theme-color-five;
+        border-right-color: $theme-color-five;
+        border-bottom-color: 0.5pt $theme-color-one;
+        color: $theme-color-one;
         box-shadow: none;
         font-size: 8pt;
         outline: none;
 
-        &:active, &:focus, &:visited, &:hover{
+        &:active, &:focus, &:visited, &:hover {
             outline: none;
             background-color: $theme-color-five;
             margin-top: -1px;
@@ -204 +199 @@
             box-shadow: none;
         }
 
-	}
-    .form-control.is-invalid{
+    }
+
+    .form-control.is-invalid {
         box-shadow: none;
         border-color: $theme-color-four;
         background-image: none;
-        &:active, &:focus, &:visited{
+
+        &:active, &:focus, &:visited {
             box-shadow: none;
             border-color: $theme-color-four;
         }
@@ -230 +227 @@
             box-shadow: none;
             color: $theme-color-one;
         }
-        &:hover{
+
+        &:hover {
             color: $theme-color-four;
         }
     }
@@ -250 +248 @@
 
     .pin-left {
         border-left: .5pt solid $theme-color-four;
-        display: inline-block;
-        margin: 12rem 50px 0px -5rem;
         position: fixed;
-        top: 28vh;
         bottom: 0;
         text-align: left;
-        width: 100%;
-        .text{
+
+        // center fixed div
+        left: 50%;
+        transform: translateX(-50%);
+        width: 70%;
+
+        .text {
             margin-left: 0.5rem;
+            margin-bottom: 0.2rem; // looks fugly without margin
         }
-        p{
+
+        p {
             margin-top: 0;
             margin-bottom: 0;
         }
     }
 
-    .register{
-        .pin-left{
-            margin-top: 17rem;
-        }
-    }
-
-    li{
+    li {
         list-style-type: none;
     }
 
@@ -288 +284 @@
             margin-right: 5px;
             vertical-align: text-top;
             background-color: transparent;
-            background-position : center center;
-            background-repeat:no-repeat;
+            background-position: center center;
+            background-repeat: no-repeat;
         }
     }
 
@@ -344 +340 @@
 
         .inter_like {
             display: none;
+
             &:before {
-                background-image : url(../images/interface/Hearth_Empty_50.png);
+                background-image: url(../images/interface/Hearth_Empty_50.png);
                 width: 60px;
                 height: 60px;
             }
@@ -353 +350 @@
 
         .inter_like_filled {
             &:before {
-                background-image : url(../images/interface/Hearth_Filled_50.png);
+                background-image: url(../images/interface/Hearth_Filled_50.png);
                 width: 60px;
                 height: 60px;
             }
@@ -361 +358 @@
 
         .inter_info, .inter_like, .inter_like_filled {
             padding: 0;
+
             &:focus, &:active, &:hover {
                 background-color: transparent !important;
                 border-color: transparent !important;
                 outline: none !important;
                 box-shadow: none !important;
-            };
+            }
+        ;
         }
     }
 
@@ -409 +408 @@
 
         .inter_like_filled {
             &:before {
-                background-image : url(../images/interface/Heart_Filled.svg);
+                background-image: url(../images/interface/Heart_Filled.svg);
                 width: 1.563rem;
                 height: 1.25rem;
             }
@@ -418 +417 @@
         .inter_info {
 
             padding-right: 1rem;
+
             &:before {
                 background-image: url(../images/interface/Button_Info.svg);
                 width: 1.875rem;
@@ -459 +459 @@
             display: inline-block;
             margin: 2.75rem 3.125rem 0 0;
 
-            &:before {
+            &:after {
                 content: '';
-                background-color: $theme-color-two;
+                background-color: #ddd1b9;
                 position: relative;
                 height: .5rem;
                 width: .5rem;
                 border-radius: 50%;
-                display: inline-block;
-                top: 1.5rem;
-                left: 50vw;
+                display: block;
+                margin-left: auto;
+                top: .25rem;
             }
 
             .metadata {
@@ -551 +551 @@
                 .inter_like_filled {
 
                     &:before {
-                        background-image : url(../images/interface/Heart_Filled.svg);
+                        background-image: url(../images/interface/Heart_Filled.svg);
                         width: 3.125rem;
                         height: 3.125rem;
                         margin-right: 0;
@@ -644 +644 @@
     }*/
 
     //CATEGORIES - ROW BLOCK
-    .cat-col-md-2
-    {
+    .cat-col-md-2 {
         margin: 2%;
     }
 
     //CATEGORIES - TILES
-    .btn.btn-dark.cat-tile
-    {
+    .btn.btn-dark.cat-tile {
         //STYLING
         border-color: $theme-color-four;
         border-radius: 0;
@@ -671 +669 @@
         height: 40mm;
         width: 100%;
 
-        &:active, &:focus
-        {
+        &:active, &:focus {
             background-color: $theme-color-three;
             border-color: $theme-color-four;
             outline: none !important;
@@ -682 +679 @@
     }
 
     //CATEGORY/{id} -h2 title NO ARTEFACTS
-    .category-h2
-    {
+    .category-h2 {
         color: $theme-color-four;
     }
 }
 
-.arrow{
+.arrow {
     position: absolute;
     width: 0;
     height: 0;
     margin: 2rem;
-    cursor:pointer;
+    cursor: pointer;
     border: 0.59055rem solid transparent;
 }
 
-.top-bar{
-    padding-bottom: 4.59055rem;
+.top-bar {
     background-color: $theme-color-five;
+    height: 5rem;
     position: fixed;
     width: 100%;
     top: 0;
+    z-index: 2;
 }
 
 .arrow-left {
     margin-left: 80%;
 
-    border-right:0.59055rem solid $theme-color-five;
+    border-right: 0.59055rem solid $theme-color-five;
     background-color: $theme-color-four !important;
 }
 
 .arrow-right {
-    border-left:0.59055rem solid $theme-color-four;
+    border-left: 0.59055rem solid $theme-color-four;
 
     position: fixed;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     left: 0;
 }
 
-.separator{
+.separator {
     border-bottom: 1px solid $theme-color-five;
 }
 
@@ -730 +727 @@
     //width: 0;
     width: 250px;
     position: fixed;
-    z-index: 1;
+    z-index: 4;
     top: 0;
     left: 0;
     background-color: $theme-color-four;
@@ -743 +740 @@
     color: $theme-color-five;
     display: block;
     transition: 0.3s;
-    &:hover{
+
+    &:hover {
         color: $theme-color-four;
         background-color: $theme-color-one;
     }
-    &:active, &:focus, .active{
+
+    &:active, &:focus, .active {
         color: $theme-color-one;
         background-color: $theme-color-four;
     }
 }
 
-.dropdown-item.active, .dropdown-item:active{
+.dropdown-item.active, .dropdown-item:active {
     color: $theme-color-five;
     background-color: $theme-color-one;
 }
 
-.logo-kaplicky{
-    position: fixed;
-    top: 0;
-    left: calc(50vw - 50pt);
-    margin-top: 2rem;
+.logo-kaplicky {
+    display: block;
+    text-align: center;
 }
 
 .vertical-center {
+    margin-top: -5.1rem; // fixed navbar correction
     min-height: 100vh;
     display: flex;
     align-items: center;
@@ -778 +776 @@
     text-align: center;
 }
 
+// login and registration alert bottom margin
+.al {
+    margin-bottom: 3rem;
+}
+
 @media screen and (max-height: 450px) {
-    .sidenav a {font-size: 18px;}
+    .sidenav a {
+        font-size: 18px;
+    }
 }
 
-@media (max-width: 990px) {}//Ponecháno pro případ, že se bude měnit login
+@media (max-width: 990px) {
+}
 
 @media (max-width: 770px) {
-    body {
-        .pin-left {
-            margin-left: -33vw;
-            margin-top: 15rem;
-            //left: 20vw;
-        }
-        .register{
-            .pin-left{
-                margin-top: 20rem;
-            }
-        }
-
-    }
 }
 
-@media only screen and (max-width: 540px)
-{
-    .sidenav{
+@media only screen and (max-width: 540px) {
+    .sidenav {
         width: 0;
     }
-    .head-title.text-center h1
-    {
+    .head-title.text-center h1 {
         font-size: 23pt;
         padding-top: 50pt;
         white-space: nowrap;
@@ -831 +822 @@
         height: 180px;
     }*/
 
-    body{
+    body {
         .carousel {
             .carousel-inner {
                 .social-logo {
@@ -843 +834 @@
     }
 }
 
-@media (min-width: 330px) and (max-height: 900px)
-{
-    body{
+@media (min-width: 330px) and (max-height: 900px) {
+    body {
         .carousel {
             .carousel-inner {
                 .social-logo {