Form fine tuning and link list add

LinkList add LInk
Converted indentation to spaces globally.
2020-08-21 12:08:51 +02:00 · 2020-08-21 10:51:07 +02:00 · 2020-08-17 15:39:17 +02:00 · 2020-08-16 20:56:34 +02:00 · 2020-08-16 17:50:55 +02:00 · 2020-08-16 17:22:08 +02:00
59 changed files with 1062 additions and 937 deletions
--- a/components/01_Atoms/input/_input.scss
+++ b/components/01_Atoms/input/_input.scss
@@ -8,7 +8,7 @@
    .LP-Input__Field{
        border: none;
        border-bottom: 1px solid $-grey;
-        padding: 8px;
+		padding: 8px 0;
        margin-bottom: $-margin-bottom;

        &:focus, &:active, &:invalid{
--- a/components/01_Atoms/input/input.hbs
+++ b/components/01_Atoms/input/input.hbs
@@ -1,6 +1,6 @@
 <div class="LP-Input LP-Input{{modifier}}">
    <label for="input123" class="LP-Input__Label">{{label}}</label>
-    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}">
    {{#if disabled}}
        disabled="disabled"
    {{/if}}
--- a/components/01_Atoms/message/_message.scss
+++ b/components/01_Atoms/message/_message.scss
@@ -13,14 +13,14 @@
    &--error{
        .LP-Message__Icon{
            background-color: invert(#fd6861);
-			background-image: url('/icons/error.png');
+            background-image: url('icons/error.png');
        }
    }

    &--warning{
        .LP-Message__Icon{
            background-color:invert(#ffb818);
-			background-image: url('/icons/error.png');
+            background-image: url('icons/error.png');
        }
    }

@@ -28,21 +28,21 @@
    &--info{
        .LP-Message__Icon{
            background-color: invert(lightblue);
-			background-image: url('/icons/information.svg');
+            background-image: url('icons/information.svg');
        }
    }

    &--success{
        .LP-Message__Icon{
            background-color: invert(#96c800);
-			background-image: url('/icons/success.svg');
+            background-image: url('icons/success.svg');
        }
    }

    &--debug{
        .LP-Message__Icon{
            background-color: invert(#fb95d0);
-			background-image: url('/icons/debug.png');
+            background-image: url('icons/debug.png');
        }
    }

--- a/components/01_Atoms/pagination/_pagination.scss
+++ b/components/01_Atoms/pagination/_pagination.scss
@@ -9,6 +9,8 @@
        list-style-type: none;
        display: flex;
        flex-direction: row;
+        padding-left: 0;
+        padding-right: 0;
    }

    .LP-Pagination__Item{
@@ -16,13 +18,20 @@
    
        &--disabled{
            color: rgb(182, 182, 182);
+            .LP-Link{
+                color: rgb(182, 182, 182);
+                cursor: default;
+                &:hover{
+                    background-color: unset;
+                    color: unset;
+                }
+            }
        }
        
        &--current{

            .LP-Link{
                background-color: $-beige;
-                border-radius: 2px;

                &:hover{
                    background-color: $-beige;
@@ -33,45 +42,51 @@
    }
    
    .LP-Link{
-        padding: 15px 25px;
+        padding: 15px 20px;
        vertical-align: sub;
+        border-radius: 2px;

        &:active, &:hover{
            background-color: $-beige;
-            border-radius: 2px;
            color: $-grey;
        }
    }

-    .LP-Pagination__First{
-        &:before{
-            content: "⟪";
-            padding-right: 1em;
+    .LP-Icon{
        font-size: larger;
    }
-    }
+}

-    .LP-Pagination__Previous{
-        &:before{
-            content: "⟨";
-            padding-right: 1em;
-            font-size: larger;
+@media(max-width: $-viewport-normal){
+    .LP-Pagination{
+        .LP-Link{
+            padding: 10px 15px;
        }
+        .LP-Pagination__Item--other{
+            .LP-Text{
+                display: none;
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-small){
+    .LP-Pagination{
+        .LP-Pagination__Item{
+            margin: 0 1px;
+            .LP-Link{
+                padding: 13px 16px;
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Pagination{
+        .LP-Pagination__Item{
+            .LP-Link{
+                padding: 8px 11px;
            }
-
-    .LP-Pagination__Next{
-        &:after{
-            content: "⟩";
-            padding-left: 1em;
-            font-size: larger;
-        }
-    }
-
-    .LP-Pagination__Last{
-        &:after{
-            content: "⟫";
-            padding-left: 1em;
-            font-size: larger;
        }
    }
 }
--- a/components/01_Atoms/pagination/pagination.hbs
+++ b/components/01_Atoms/pagination/pagination.hbs
@@ -1,43 +1,54 @@
 <div class="LP-Pagination">
    <ul class="LP-Pagination__List">
-        <li class="LP-Pagination__Item LP-Pagination__Item--first LP-Pagination__Item--disabled">
-            <span class="LP-Pagination__First">first</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
+            <a href="#" class="LP-Link">
+                <span class="LP-Icon">⟪</span>
+                <span class="LP-Text">First</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--previous LP-Pagination__Item--disabled">
-            <span class="LP-Pagination__Previous">previous</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--disabled LP-Pagination__Item--previous">
+            <a href="#" class="LP-Link">
+                <span class="LP-Icon">⟨</span>
+                <span class="LP-Text">Previous</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">1</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">2</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">3</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--current">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">4</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">5</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">Next</span>
+                <span class="LP-Icon">⟩</span>
+            </a>
        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</span></a>
-        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a>
-        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--number">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
-        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--next">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Next">next</span></a>
-        </li>
-        <li class="LP-Pagination__Item LP-Pagination__Item--last">
-            <a href="#" class="LP-Link"><span class="LP-Pagination__Last">last</span></a>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">Last</span>
+                <span class="LP-Icon">⟫</span>
+
+            </a>
        </li>
    </ul>
 </div>
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,11 +1,20 @@
 .LP-Form{
-	display: flex;
    flex-direction: column;
    align-items: center;

+	&--inline{
+		padding: 0 10px;
+		.LP-Form__Fieldset{
+			.LP-Form__Composition{
+				gap: 10px;
+			}
+		}
+	}
+
    .LP-Form__Fieldset{
        border: none;
-		
+		padding: 0;
+		margin: 0;
        max-width: 1200px;
        min-width: $-viewport-medium;

@@ -16,15 +25,21 @@
            font-size: 21px;
        }

+	}
 	
 	.LP-Form__Composition{
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		gap: 30px;
+
+		&--buttons{
+			gap: 10px;
+		}
 		
 		.LP-Form__Field{
 			flex: 3 2 100px;
-                padding: 6px 15px;
+			padding: 6px 0;

 			&--wider{
 				flex: 5 2;
@@ -41,6 +56,10 @@
 			&--narrower{
 				flex: 1 2;
 			}
+			
+			&--static{
+				flex: 0 0;
+			}
 		}

 		&--buttons{
@@ -64,7 +83,6 @@
 			}
 		}
 	}
-    }
 }

@media(max-width: $-viewport-medium){
@@ -88,7 +106,7 @@
 }

@media(max-width: $-viewport-extra-small){
-    .LP-Form{
+    .LP-Form :not(.LP-Form--inline){
        .LP-Form__Fieldset{
            .LP-Form__Composition{
                display: flex;
--- a/components/03_Organisms/header/_header.scss
+++ b/components/03_Organisms/header/_header.scss
@@ -8,6 +8,7 @@ $-logo-height: 45px;
    box-shadow: 0 0 2px $-light-brown;
    grid-area: header;
    background-color: white;
+    padding-left: 25px;

    &__Navigation{
        flex-grow: 2;
@@ -15,7 +16,6 @@ $-logo-height: 45px;
    
    &__Logo {
        height: $-logo-height;
-        margin: 25px;
        object-fit:cover;
        max-height: 100%;
        width: 225px;
@@ -63,8 +63,8 @@ $-logo-height: 45px;

@media(max-width: $-viewport-toggle-sidebar){
    .LP-Header{
-		padding-left: 40px;
-		width: calc(100% - 40px);
+        padding-left: 60px;
+        width: calc(100% - 60px);
        position: fixed;
        z-index: 10;
    }
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -9,6 +9,37 @@
        border-left: 1px solid $-light-brown;
        width: calc(100% - 1px);
        margin-top: 12px;
+        position: relative;
+
+        &--add{
+            .LP-LinkList__AddTrigger{
+				display: none;
+				&:checked{
+					& ~ .LP-LinkList__AddPlaceHolder{
+						visibility: hidden;
+					}
+					& ~ .LP-LinkList__Add{
+					display: block;
+					}
+				}
+            }
+            
+            .LP-LinkList__Add{
+                position: absolute;
+                top: 3px;
+				display: none;
+				width: 100%;
+
+                .LP-Form__Fieldset{
+                    min-width:unset;
+                }
+
+                .LP-Form{
+                    display: block;
+                    min-width: 0px;
+                }
+            }
+        }

        .LP-Link{
            $-link-padding: 1em;
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -6,7 +6,10 @@
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
-	    <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
+        <li class="LP-LinkList__Item LP-LinkList__Item--add">
+            <input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
+            <label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
+				<span class="LP-Link LP-Link--iconized">
 					<div class="LP-Link__IconWrapper">
 					<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
 						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
@@ -17,6 +20,24 @@
 						</g>
 					</svg>
 					</div>
-	        <span class="LP-Text">Link hinzufügen</span></a></li>
+					<span class="LP-Text">Link hinzufügen</span>
+				</span>
+            </label>
+			<span class="LP-LinkList__Add">
+				<form class="LP-Form LP-Form--inline">
+					<fieldset class="LP-Form__Fieldset">
+						<div class="LP-Form__Composition LP-Form__Composition">
+							<div class="LP-Form__Field LP-Form__Field--static LP-Input">
+								<button class="LP-Button">Add</button>
+							</div>
+							<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
+								<input class="LP-Input__Field" type="url"/>
+							</div>
+							</div>
+						</div>
+					</fieldset>
+				</form>
+			</span>
+        </li>
    </ul>
 </div>
--- a/components/03_Organisms/placeList/_placeList.scss
+++ b/components/03_Organisms/placeList/_placeList.scss
@@ -21,7 +21,7 @@
    
        .LP-PlaceList__Item{
            max-width: 900px;
-            min-width: 450px;
+            //min-width: 450px;
            margin: 18px 0;
        }
    }
--- a/components/main.scss
+++ b/components/main.scss
@@ -26,8 +26,8 @@ $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
 $-primary-serif-font: Crimson, Times, serif;
 $-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;

-$-viewport-small: 650px;
 $-viewport-extra-small: 450px;
+$-viewport-small: 650px;
 $-viewport-medium: 750px;
 $-viewport-normal: 1000px;

@@ -54,6 +54,7 @@ body{
    grid-template-areas: "header header" "sidebar content";
    margin: 0;
    padding: 0;
+    min-height: 100vh;
 }

 .LP-Main__Content{
@@ -77,6 +78,10 @@ body{
    }
 }

+.LP-Menu__Trigger{
+    display: none;
+}
+
@media(max-width: $-viewport-normal){
    .LP-Wrapper__Site{
        grid-template-columns: (0.75 * $-sidebar-width) 1fr;
@@ -94,21 +99,17 @@ body{
    }
 }

+@media(max-width: $-viewport-extra-small){
+    .LP-Main__Sidebar{
+        max-width: 100vw;
+    }
+}
+
@media(max-width: $-viewport-toggle-sidebar){
    .LP-Wrapper__Site{
        grid-template-columns: 0 1fr;
    }

-	@keyframes slide_out_siedebar{
-		from{left: -1 * $-sidebar-width;}
-		to{left: 0;}
-	}
-
-	@keyframes slide_in_siedebar{
-		from{left: 0;}
-		to{left: -1 * $-sidebar-width;}
-	}
-
    .LP-Main__Sidebar{
        grid-area:unset;
        width: $-sidebar-width;
@@ -118,28 +119,26 @@ body{
        height: 100vh;
        top: 60px;
        border-right: 1px solid $-light-brown;
+        transition: left 0.3s;
+
+        &--hidden{
+            visibility: hidden;
+        }
    }

    #toggle_sidebar:checked ~ .LP-Main__Sidebar{
-		animation-name: slide_out_siedebar;
-		animation-duration: .3s;
        left: 0 ;
    }

    #toggle_sidebar ~ .LP-Main__Sidebar{
-		animation-name: slide_in_siedebar;
-		animation-duration: .3s;
-	}
-
-	.LP-Menu__Trigger{
-		display: none;
+        left: -1 * $-sidebar-width - 1;
    }

    .LP-Menu__TriggerLabel{
        z-index: 20;
        height: 60px;
        width: 60px;    
-		background-image: url('/icons/hamburger_menu.svg');
+        background-image: url('icons/hamburger_menu.svg');
        background-repeat: no-repeat;
        background-clip: content-box;
        background-position: center;
--- a/public/main.css
+++ b/public/main.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
@font-face {
  font-family: Crimson;
  src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@@ -23,7 +22,8 @@ body {
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header" "sidebar content";
  margin: 0;
-  padding: 0; }
+  padding: 0;
+  min-height: 100vh; }

 .LP-Main__Content {
  min-height: 1px;
@@ -41,6 +41,9 @@ body {
  .LP-Section .LP-Headline {
    margin-left: -25px; }

+.LP-Menu__Trigger {
+  display: none; }
+
@media (max-width: 1000px) {
  .LP-Wrapper__Site {
    grid-template-columns: 187.5px 1fr; } }
@@ -52,19 +55,13 @@ body {
    .LP-Section .LP-Headline {
      margin: 0; } }

+@media (max-width: 450px) {
+  .LP-Main__Sidebar {
+    max-width: 100vw; } }
+
@media (max-width: 650px) {
  .LP-Wrapper__Site {
    grid-template-columns: 0 1fr; }
-  @keyframes slide_out_siedebar {
-    from {
-      left: -250px; }
-    to {
-      left: 0; } }
-  @keyframes slide_in_siedebar {
-    from {
-      left: 0; }
-    to {
-      left: -250px; } }
  .LP-Main__Sidebar {
    grid-area: unset;
    width: 250px;
@@ -73,21 +70,19 @@ body {
    left: -251px;
    height: 100vh;
    top: 60px;
-    border-right: 1px solid #C09F80; }
+    border-right: 1px solid #C09F80;
+    transition: left 0.3s; }
+    .LP-Main__Sidebar--hidden {
+      visibility: hidden; }
  #toggle_sidebar:checked ~ .LP-Main__Sidebar {
-    animation-name: slide_out_siedebar;
-    animation-duration: .3s;
    left: 0; }
  #toggle_sidebar ~ .LP-Main__Sidebar {
-    animation-name: slide_in_siedebar;
-    animation-duration: .3s; }
-  .LP-Menu__Trigger {
-    display: none; }
+    left: -251px; }
  .LP-Menu__TriggerLabel {
    z-index: 20;
    height: 60px;
    width: 60px;
-    background-image: url("/icons/hamburger_menu.svg");
+    background-image: url("icons/hamburger_menu.svg");
    background-repeat: no-repeat;
    background-clip: content-box;
    background-position: center;
@@ -183,7 +178,7 @@ body {
  .LP-Input .LP-Input__Field {
    border: none;
    border-bottom: 1px solid #565656;
-    padding: 8px;
+    padding: 8px 0;
    margin-bottom: 30px; }
    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
      margin-bottom: 29px;
@@ -271,19 +266,19 @@ body {
  overflow: hidden; }
  .LP-Message--error .LP-Message__Icon {
    background-color: #02979e;
-    background-image: url("/icons/error.png"); }
+    background-image: url("icons/error.png"); }
  .LP-Message--warning .LP-Message__Icon {
    background-color: #0047e7;
-    background-image: url("/icons/error.png"); }
+    background-image: url("icons/error.png"); }
  .LP-Message--info .LP-Message__Icon {
    background-color: #522719;
-    background-image: url("/icons/information.svg"); }
+    background-image: url("icons/information.svg"); }
  .LP-Message--success .LP-Message__Icon {
    background-color: #6937ff;
-    background-image: url("/icons/success.svg"); }
+    background-image: url("icons/success.svg"); }
  .LP-Message--debug .LP-Message__Icon {
    background-color: #046a2f;
-    background-image: url("/icons/debug.png"); }
+    background-image: url("icons/debug.png"); }
  .LP-Message .LP-Message__Icon {
    background-size: 40px 40px;
    background-repeat: no-repeat;
@@ -311,41 +306,50 @@ body {
  .LP-Pagination .LP-Pagination__List {
    list-style-type: none;
    display: flex;
-    flex-direction: row; }
+    flex-direction: row;
+    padding-left: 0;
+    padding-right: 0; }
  .LP-Pagination .LP-Pagination__Item {
    margin: 0 4px; }
    .LP-Pagination .LP-Pagination__Item--disabled {
      color: #b6b6b6; }
+      .LP-Pagination .LP-Pagination__Item--disabled .LP-Link {
+        color: #b6b6b6;
+        cursor: default; }
+        .LP-Pagination .LP-Pagination__Item--disabled .LP-Link:hover {
+          background-color: unset;
+          color: unset; }
    .LP-Pagination .LP-Pagination__Item--current .LP-Link {
-      background-color: #D7CEC7;
-      border-radius: 2px; }
+      background-color: #D7CEC7; }
      .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
        background-color: #D7CEC7;
        color: #565656; }
  .LP-Pagination .LP-Link {
-    padding: 15px 25px;
-    vertical-align: sub; }
+    padding: 15px 20px;
+    vertical-align: sub;
+    border-radius: 2px; }
    .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
      background-color: #D7CEC7;
-      border-radius: 2px;
      color: #565656; }
-  .LP-Pagination .LP-Pagination__First:before {
-    content: "⟪";
-    padding-right: 1em;
-    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Previous:before {
-    content: "⟨";
-    padding-right: 1em;
-    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Next:after {
-    content: "⟩";
-    padding-left: 1em;
-    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Last:after {
-    content: "⟫";
-    padding-left: 1em;
+  .LP-Pagination .LP-Icon {
    font-size: larger; }

+@media (max-width: 1000px) {
+  .LP-Pagination .LP-Link {
+    padding: 10px 15px; }
+  .LP-Pagination .LP-Pagination__Item--other .LP-Text {
+    display: none; } }
+
+@media (max-width: 650px) {
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 1px; }
+    .LP-Pagination .LP-Pagination__Item .LP-Link {
+      padding: 13px 16px; } }
+
+@media (max-width: 450px) {
+  .LP-Pagination .LP-Pagination__Item .LP-Link {
+    padding: 8px 11px; } }
+
 .LP-Content {
  padding: 35px; }

@@ -508,12 +512,12 @@ body {
  height: 60px;
  box-shadow: 0 0 2px #C09F80;
  grid-area: header;
-  background-color: white; }
+  background-color: white;
+  padding-left: 25px; }
  .LP-Header__Navigation {
    flex-grow: 2; }
  .LP-Header__Logo {
    height: 45px;
-    margin: 25px;
    object-fit: cover;
    max-height: 100%;
    width: 225px;
@@ -546,8 +550,8 @@ body {

@media (max-width: 650px) {
  .LP-Header {
-    padding-left: 40px;
-    width: calc(100% - 40px);
+    padding-left: 60px;
+    width: calc(100% - 60px);
    position: fixed;
    z-index: 10; } }

@@ -574,7 +578,6 @@ body {
      border-left: 2px #565656 solid; }
  .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
    max-width: 900px;
-    min-width: 450px;
    margin: 18px 0; }

 .LP-PlaceList .LP-Pagination {
@@ -589,7 +592,24 @@ body {
  .LP-LinkList__List .LP-LinkList__Item {
    border-left: 1px solid #C09F80;
    width: calc(100% - 1px);
-    margin-top: 12px; }
+    margin-top: 12px;
+    position: relative; }
+    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
+      display: none; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
+        visibility: hidden; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
+        display: block; }
+    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
+      position: absolute;
+      top: 3px;
+      display: none;
+      width: 100%; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
+        min-width: unset; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
+        display: block;
+        min-width: 0px; }
    .LP-LinkList__List .LP-LinkList__Item .LP-Link {
      padding: 1em 0 1em 1em;
      width: calc(100% - 1em);
@@ -641,11 +661,16 @@ body {
          background-color: inherit; }

 .LP-Form {
-  display: flex;
  flex-direction: column;
  align-items: center; }
+  .LP-Form--inline {
+    padding: 0 10px; }
+    .LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
+      gap: 10px; }
  .LP-Form .LP-Form__Fieldset {
    border: none;
+    padding: 0;
+    margin: 0;
    max-width: 1200px;
    min-width: 750px; }
    .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
@@ -653,30 +678,35 @@ body {
      padding: 0;
      font-family: Montserrat, Helvetica, sans-serif;
      font-size: 21px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
+  .LP-Form .LP-Form__Composition {
    display: flex;
    flex-direction: row;
-      justify-content: space-between; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
+    justify-content: space-between;
+    gap: 30px; }
+    .LP-Form .LP-Form__Composition--buttons {
+      gap: 10px; }
+    .LP-Form .LP-Form__Composition .LP-Form__Field {
      flex: 3 2 100px;
-        padding: 6px 15px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
+      padding: 6px 0; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--wider {
        flex: 5 2; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
+      .LP-Form .LP-Form__Composition .LP-Form__Field--wide {
        flex: 4 2; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
+      .LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
        flex: 2 1; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
+      .LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
        flex: 1 2; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
+      .LP-Form .LP-Form__Composition .LP-Form__Field--static {
+        flex: 0 0; }
+    .LP-Form .LP-Form__Composition--buttons {
      justify-content: flex-end; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
+    .LP-Form .LP-Form__Composition .LP-Form__Button {
      flex-grow: 0;
      padding-left: 0;
      min-width: 130px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link {
+      .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
        display: contents; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
+    .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
      font-family: Montserrat, Helvetica, sans-serif;
      color: #565656; }

@@ -691,16 +721,16 @@ body {
    justify-content: space-between; } }

@media (max-width: 450px) {
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
+  .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition {
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
      flex: 3 1 100px;
      padding: 12px 15px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
      padding: 0 15px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
      justify-content: flex-end; } }

 .LP-ImageGrid .LP-ImageGrid__List {
Author	SHA1	Message	Date
reverend	313968fafd	Form fine tuning and link list add	2020-08-21 12:08:51 +02:00
reverend	8fa8033be4	LinkList add LInk	2020-08-21 10:51:07 +02:00
Commander1024	b64724b586	Converted indentation to spaces globally.	2020-08-17 15:39:17 +02:00
reverend	e80e93bcaa	Pagination disabled class	2020-08-16 20:56:34 +02:00
reverend	384cdcaae7	More Paginatoin Styling, responsive	2020-08-16 17:50:55 +02:00
reverend	427ce11adb	Removed JS, using transition instead of animation for sidebar menu sliding	2020-08-16 17:22:08 +02:00
reverend	15b4bc7880	Padding fix	2020-08-16 12:26:10 +02:00
reverend	9ebfef6c6e	Sidebar height fix	2020-08-16 11:56:21 +02:00
reverend	3f69ff8f0d	No absolute icon paths	2020-08-16 11:42:13 +02:00
reverend	5f4b72f9be	Sidebar animation is not triggered when loading page	2020-08-16 11:40:40 +02:00