Form fine tuning and link list add

components/01_Atoms/_atoms.scss

@@ -8,3 +8,5 @@
 @import 'image/image';
 @import 'logo/logo';
 @import 'tag/tag';
+@import 'message/message';
+@import 'pagination/pagination';

components/01_Atoms/button/_button.scss

@@ -5,6 +5,7 @@
     padding: 8px 14px;
     border-radius: 2px;
     font-weight: bold;
+    cursor: pointer;
 
     &:active{
         background-color: $-wine-red;
@@ -12,6 +13,11 @@
     }
 
     &--cancel{
+        background-color: $-grey;
+        color: $-almost-white;
+        &:active{
+            color: $-grey;
             background-color: $-almost-white;
         }
     }
+}

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{
@@ -18,6 +18,22 @@
             border-radius: 3px 3px 0 0;
             box-shadow: none;
         }
+        
+        &[type=submit]{
+            background-color: $-light-brown;
+            color: $-grey;
+            border: none;
+            padding: 8px 14px;
+            border-radius: 2px;
+            font-weight: bold;
+            cursor: pointer;
+
+            &:active{
+                background-color: $-wine-red;
+                color:$-almost-white;
+            }
+
+        }
     }
 
     .LP-Input__Label{

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}}

components/01_Atoms/message/_message.scss

@@ -0,0 +1,69 @@
+.LP-Message{
+    display: flex;
+    flex-direction: row;
+    justify-content: center; 
+    align-items: stretch; 
+    background-color: $-almost-white;
+    font-family: $-primary-sans-serif-font;
+    border-radius: 3px;
+    font-weight: bold;
+    box-shadow: 0 0 2px $-grey;
+    overflow: hidden;
+
+    &--error{
+        .LP-Message__Icon{
+            background-color: invert(#fd6861);
+            background-image: url('icons/error.png');
+        }
+    }
+
+    &--warning{
+        .LP-Message__Icon{
+            background-color:invert(#ffb818);
+            background-image: url('icons/error.png');
+        }
+    }
+
+
+    &--info{
+        .LP-Message__Icon{
+            background-color: invert(lightblue);
+            background-image: url('icons/information.svg');
+        }
+    }
+
+    &--success{
+        .LP-Message__Icon{
+            background-color: invert(#96c800);
+            background-image: url('icons/success.svg');
+        }
+    }
+
+    &--debug{
+        .LP-Message__Icon{
+            background-color: invert(#fb95d0);
+            background-image: url('icons/debug.png');
+        }
+    }
+
+    .LP-Message__Icon{
+        background-size: 40px 40px;
+        background-repeat: no-repeat;
+        background-position: center; 
+        height: 100%;
+        min-height: 50px;
+        width: 50px;
+        filter: invert(1);
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    .LP-Message__Text{
+        padding: 0 15px;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 8px;
+    }
+}

components/01_Atoms/message/message.config.json

@@ -0,0 +1,39 @@
+{
+    "title": "Message",
+    "context": {
+        "messageText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+        "modifier": "--info"
+    },
+    "variants": [
+        {
+            "name": "Information",
+            "context": {
+                "modifier": "--info"
+            }
+        },
+        {
+            "name": "Warning",
+            "context": {
+                "modifier": "--warning"
+            }
+        },
+        {
+            "name": "Error",
+            "context": {
+                "modifier": "--error"
+            }
+        },
+        {
+            "name": "Success",
+            "context": {
+                "modifier": "--success"
+            }
+        },
+        {
+            "name": "Debug",
+            "context": {
+                "modifier": "--debug"
+            }
+        }
+    ]
+}

components/01_Atoms/message/message.hbs

@@ -0,0 +1,10 @@
+<div class="LP-Message {{#if modifier}}LP-Message{{modifier}}{{/if}}">
+    <div>
+        <div class="LP-Message__Icon">
+        
+        </div>
+    </div>
+    <div class="LP-Message__Text">
+        {{messageText}}
+    </div>
+</div>

components/01_Atoms/pagination/_pagination.scss

@@ -0,0 +1,92 @@
+.LP-Pagination{
+    font-family: $-primary-sans-serif-font;
+    font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    .LP-Pagination__List{
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .LP-Pagination__Item{
+        margin: 0 4px;
+    
+        &--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;
+
+                &:hover{
+                    background-color: $-beige;
+                    color: $-grey;
+                }
+            }
+        }
+    }
+    
+    .LP-Link{
+        padding: 15px 20px;
+        vertical-align: sub;
+        border-radius: 2px;
+
+        &:active, &:hover{
+            background-color: $-beige;
+            color: $-grey;
+        }
+    }
+
+    .LP-Icon{
+        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;
+            }
+        }
+    }
+}

components/01_Atoms/pagination/pagination.config.json

@@ -0,0 +1,3 @@
+{
+    "title": "Pagnination"
+}

components/01_Atoms/pagination/pagination.hbs

@@ -0,0 +1,54 @@
+<div class="LP-Pagination">
+    <ul class="LP-Pagination__List">
+        <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--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--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">1</span>
+            </a>
+        </li>
+        <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--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">3</span>
+            </a>
+        </li>
+        <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--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">5</span>
+            </a>
+        </li>
+        <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--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>

components/02_Molecules/_molecules.scss

@@ -2,3 +2,4 @@
 @import 'placeTeaser/placeTeaser';
 @import 'tagList/tagList';
 @import 'navigation/navigation';
+@import 'messageList/messageList';

components/02_Molecules/messageList/_messageList.scss

@@ -0,0 +1,15 @@
+.LP-MessageList{
+    padding: 25px;
+    .LP-MessageList__List{
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .LP-MessageList__Item{
+        margin: 5px 0;
+    }
+}

components/02_Molecules/messageList/messageList.config.json

@@ -0,0 +1,6 @@
+{
+    "title": "Message List",
+    "context": {
+        "text": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    }
+}

components/02_Molecules/messageList/messageList.hbs

@@ -0,0 +1,9 @@
+<div class="LP-MessageList">
+    <ul class="LP-MessageList__List">
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--info'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--warning'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--error'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--success'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--debug'}}</li>
+    </ul>
+</div>

components/02_Molecules/navigation/_navigation.scss

@@ -34,7 +34,6 @@
         border-left: none;
         min-width: 60px;
         background-color: $-almost-white;
-		height: 100%;
         padding-top: 25px;
         
         .LP-Menu__List{

components/03_Organisms/form/_form.scss

@@ -1,6 +1,22 @@
 .LP-Form{
+    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;
 
         .LP-Form__Legend{
             margin: 0;
@@ -9,31 +25,70 @@
             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 1 100px;
-                padding: 6px 15px;
+			flex: 3 2 100px;
+			padding: 6px 0;
 
 			&--wider{
-                    flex: 5 1;
+				flex: 5 2;
 			}
 
 			&--wide{
-                    flex: 4 1;
+				flex: 4 2;
 			}
 
 			&--narrow{
-                    flex: 2 0;
+				flex: 2 1;
 			}
 
 			&--narrower{
-                    flex: 1 0;
+				flex: 1 2;
+			}
+			
+			&--static{
+				flex: 0 0;
 			}
 		}
+
+		&--buttons{
+			justify-content: flex-end;
+		}
+
+		.LP-Form__Button{
+			flex-grow: 0;
+			padding-left: 0;
+			min-width: 130px;
+
+			.LP-Link{
+				display:contents;
+			}
+		}
+		
+		.LP-Form__InfoText{
+			.LP-Paragraph{
+			font-family: $-primary-sans-serif-font;
+			color: $-grey;
+			}
+		}
+	}
+}
+
+@media(max-width: $-viewport-medium){
+.LP-Form{
+    .LP-Form__Fieldset{
+        min-width: unset;
     }
 }
 }
@@ -51,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;
@@ -59,10 +114,21 @@
                 justify-content: space-between;
 
                 .LP-Form__Field{
+                    
+                    &:not(.LP-Form__Button){
                         flex: 3 1 100px;
                         padding: 12px 15px;
                     }
                 }
+                
+                .LP-Form__Button{
+                    padding: 0 15px;
+                }
+                
+                &--buttons{
+                    justify-content: flex-end;
+                }
+            }
         }
     }
 }

components/03_Organisms/form/form.hbs

@@ -37,6 +37,12 @@
             </div>
         </div>
 
+        <div class="LP-Form__Composition">
+            <div class="LP-Form__Field LP-Form__InfoText">
+                <p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
+            </div>
+        </div>
+
         <div class="LP-Form__Composition">
             <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
                 <label for="input123" class="LP-Input__Label">Postal Code</label>
@@ -48,5 +54,14 @@
             </div>
         </div>
 
+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
+                <input type="submit" class="LP-Button" value="Submit"/>
+            </div>
+            <div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
+                <button class="LP-Button LP-Button--cancel">Kenschäll</button>
+            </div>
+        </div>
+
     </fieldset>
 </form>

components/03_Organisms/header/_header.scss

@@ -6,6 +6,9 @@ $-logo-height: 45px;
     justify-content: space-between;
     height: 60px;
     box-shadow: 0 0 2px $-light-brown;
+    grid-area: header;
+    background-color: white;
+    padding-left: 25px;
 
     &__Navigation{
         flex-grow: 2;
@@ -13,7 +16,6 @@ $-logo-height: 45px;
     
     &__Logo {
         height: $-logo-height;
-        margin: 25px;
         object-fit:cover;
         max-height: 100%;
         width: 225px;
@@ -58,3 +60,12 @@ $-logo-height: 45px;
         width: 100%;
     }
 }
+
+@media(max-width: $-viewport-toggle-sidebar){
+    .LP-Header{
+        padding-left: 60px;
+        width: calc(100% - 60px);
+        position: fixed;
+        z-index: 10;
+    }
+}

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;

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>

components/03_Organisms/placeList/_placeList.scss

@@ -21,8 +21,12 @@
     
         .LP-PlaceList__Item{
             max-width: 900px;
-            min-width: 450px;
+            //min-width: 450px;
             margin: 18px 0;
         }
     }
+    
+    .LP-Pagination{
+        margin-top: 50px;
+    }
 }

components/03_Organisms/placeList/placeList.hbs

@@ -9,4 +9,5 @@
             </li>
         {{/each}}
     </ul>
+    {{> @pagination}}
 </div>

components/04_Templates/placeDetail/_placeDetail.scss

@@ -27,6 +27,8 @@
                 height: auto;
                 margin: 0;
                 padding: 0;
+                
+                margin-bottom: 25px;
             }
         }
     }

components/04_Templates/placeDetail/placeDetail.hbs

@@ -8,7 +8,7 @@
     </header>
 
     <div class="LP-PlaceDetail__Description">
-		{{> @paragraph text='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'}}
+        {{> @paragraph text='Lorem ipsum dolor sit amet, '}}
     </div>
 
     <section class="LP-Section">

components/05_Pages/place/place.hbs

@@ -1,5 +1,7 @@
+<div class="LP-Wrapper__Site">
     {{> @header}}
-<div class="LP-Main">
+    <input id="toggle_sidebar" class="LP-Menu__Trigger" type="checkbox"/>
+    <label id="toggle_sidebar_label" for="toggle_sidebar" class="LP-Menu__TriggerLabel"></label>
     <aside class="LP-Main__Sidebar">
         {{> @navigation modifier='--sidebar'}}
     </aside>

components/main.scss

@@ -26,11 +26,13 @@ $-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;
 
+$-viewport-toggle-sidebar: $-viewport-small;
+
 $-sidebar-width: 250px;
 
 html{
@@ -42,26 +44,28 @@ html{
 body{
   height: 100%;
   margin: 0;
+  padding: 0;
 }
 
-.LP-Main{
-    display: table;
-    flex-direction: row-reverse;
-    height: calc(100% - 61px);
+.LP-Wrapper__Site{
+    display: grid;
+    grid-template-columns: $-sidebar-width 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "header header" "sidebar content";
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
 
 .LP-Main__Content{
-        display: table-cell;
-         width: calc(100% -300px);
         min-height: 1px;
         padding: 25px;
+        grid-area: content;
 }
 
 .LP-Main__Sidebar{
-        display: table-cell;
-        width: $-sidebar-width;
-        flex-grow: 0;
-        height: 100%;
-    }
+    grid-area: sidebar;
+    background-color: #f9f9f9;
 }
 
 .LP-Section{
@@ -74,6 +78,15 @@ body{
     }
 }
 
+.LP-Menu__Trigger{
+    display: none;
+}
+
+@media(max-width: $-viewport-normal){
+    .LP-Wrapper__Site{
+        grid-template-columns: (0.75 * $-sidebar-width) 1fr;
+    }
+}
 
 @media(max-width: $-viewport-small){
     .LP-Section{
@@ -85,6 +98,63 @@ 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;
+    }
+
+    .LP-Main__Sidebar{
+        grid-area:unset;
+        width: $-sidebar-width;
+        z-index: 15;
+        position: fixed;
+        left: -1 * $-sidebar-width - 1;
+        height: 100vh;
+        top: 60px;
+        border-right: 1px solid $-light-brown;
+        transition: left 0.3s;
+
+        &--hidden{
+            visibility: hidden;
+        }
+    }
+
+    #toggle_sidebar:checked ~ .LP-Main__Sidebar{
+        left: 0 ;
+    }
+
+    #toggle_sidebar ~ .LP-Main__Sidebar{
+        left: -1 * $-sidebar-width - 1;
+    }
+
+    .LP-Menu__TriggerLabel{
+        z-index: 20;
+        height: 60px;
+        width: 60px;    
+        background-image: url('icons/hamburger_menu.svg');
+        background-repeat: no-repeat;
+        background-clip: content-box;
+        background-position: center;
+        position: fixed;
+    }
+
+    .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{
+        background-color: invert($-grey);
+        filter: invert(1);
+    }
+
+    .LP-Main__Content{
+        margin-top: 60px;
+    }
+}
+
 @import '01_Atoms/atoms';
 @import '02_Molecules/molecules';
 @import '03_Organisms/organisms';

public/icons/hamburger_menu.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>

public/icons/information.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>

public/icons/message.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>

public/icons/success.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+    .st0{display:none;}
+</style><g class="st0" id="grid"/><g id="icon"><path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M12,23C5.935,23,1,18.065,1,12S5.935,1,12,1   s11,4.935,11,11S18.065,23,12,23z"/><path d="M16.801,8.403l-6.132,6.133L7.753,11.62c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l3.27,3.27   c0.094,0.094,0.221,0.146,0.354,0.146s0.26-0.053,0.354-0.146l6.485-6.486c0.195-0.195,0.195-0.512,0-0.707   S16.997,8.208,16.801,8.403z"/></g></svg>

public/main.css

@@ -13,22 +13,26 @@ html {
 
 body {
   height: 100%;
-  margin: 0; }
+  margin: 0;
+  padding: 0; }
 
-.LP-Main {
-  display: table;
-  flex-direction: row-reverse;
-  height: calc(100% - 61px); }
-  .LP-Main .LP-Main__Content {
-    display: table-cell;
-    width: calc(100% -300px);
+.LP-Wrapper__Site {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "header header" "sidebar content";
+  margin: 0;
+  padding: 0;
+  min-height: 100vh; }
+
+.LP-Main__Content {
   min-height: 1px;
-    padding: 25px; }
-  .LP-Main .LP-Main__Sidebar {
-    display: table-cell;
-    width: 250px;
-    flex-grow: 0;
-    height: 100%; }
+  padding: 25px;
+  grid-area: content; }
+
+.LP-Main__Sidebar {
+  grid-area: sidebar;
+  background-color: #f9f9f9; }
 
 .LP-Section {
   clear: both;
@@ -37,6 +41,13 @@ 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; } }
+
 @media (max-width: 650px) {
   .LP-Section {
     padding-left: 0;
@@ -44,6 +55,44 @@ 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; }
+  .LP-Main__Sidebar {
+    grid-area: unset;
+    width: 250px;
+    z-index: 15;
+    position: fixed;
+    left: -251px;
+    height: 100vh;
+    top: 60px;
+    border-right: 1px solid #C09F80;
+    transition: left 0.3s; }
+    .LP-Main__Sidebar--hidden {
+      visibility: hidden; }
+  #toggle_sidebar:checked ~ .LP-Main__Sidebar {
+    left: 0; }
+  #toggle_sidebar ~ .LP-Main__Sidebar {
+    left: -251px; }
+  .LP-Menu__TriggerLabel {
+    z-index: 20;
+    height: 60px;
+    width: 60px;
+    background-image: url("icons/hamburger_menu.svg");
+    background-repeat: no-repeat;
+    background-clip: content-box;
+    background-position: center;
+    position: fixed; }
+  .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel {
+    background-color: darkgray;
+    filter: invert(1); }
+  .LP-Main__Content {
+    margin-top: 60px; } }
+
 .LP-Link {
   color: #565656;
   text-decoration: none;
@@ -99,11 +148,16 @@ body {
   border: none;
   padding: 8px 14px;
   border-radius: 2px;
-  font-weight: bold; }
+  font-weight: bold;
+  cursor: pointer; }
   .LP-Button:active {
     background-color: #76323F;
     color: #f9f9f9; }
   .LP-Button--cancel {
+    background-color: #565656;
+    color: #f9f9f9; }
+    .LP-Button--cancel:active {
+      color: #565656;
       background-color: #f9f9f9; }
 
 .LP-Form .LP-Form__Checkbox {
@@ -124,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;
@@ -132,6 +186,17 @@ body {
       background-color: #f9f9f9;
       border-radius: 3px 3px 0 0;
       box-shadow: none; }
+    .LP-Input .LP-Input__Field[type=submit] {
+      background-color: #C09F80;
+      color: #565656;
+      border: none;
+      padding: 8px 14px;
+      border-radius: 2px;
+      font-weight: bold;
+      cursor: pointer; }
+      .LP-Input .LP-Input__Field[type=submit]:active {
+        background-color: #76323F;
+        color: #f9f9f9; }
   .LP-Input .LP-Input__Label {
     font-family: Montserrat, Helvetica, sans-serif;
     font-size: 16px; }
@@ -188,6 +253,103 @@ body {
     font-size: 1em;
     display: inline; }
 
+.LP-Message {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+  background-color: #f9f9f9;
+  font-family: Montserrat, Helvetica, sans-serif;
+  border-radius: 3px;
+  font-weight: bold;
+  box-shadow: 0 0 2px #565656;
+  overflow: hidden; }
+  .LP-Message--error .LP-Message__Icon {
+    background-color: #02979e;
+    background-image: url("icons/error.png"); }
+  .LP-Message--warning .LP-Message__Icon {
+    background-color: #0047e7;
+    background-image: url("icons/error.png"); }
+  .LP-Message--info .LP-Message__Icon {
+    background-color: #522719;
+    background-image: url("icons/information.svg"); }
+  .LP-Message--success .LP-Message__Icon {
+    background-color: #6937ff;
+    background-image: url("icons/success.svg"); }
+  .LP-Message--debug .LP-Message__Icon {
+    background-color: #046a2f;
+    background-image: url("icons/debug.png"); }
+  .LP-Message .LP-Message__Icon {
+    background-size: 40px 40px;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100%;
+    min-height: 50px;
+    width: 50px;
+    filter: invert(1);
+    flex-shrink: 0;
+    flex-grow: 0; }
+  .LP-Message .LP-Message__Text {
+    padding: 0 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 8px; }
+
+.LP-Pagination {
+  font-family: Montserrat, Helvetica, sans-serif;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  justify-content: center; }
+  .LP-Pagination .LP-Pagination__List {
+    list-style-type: none;
+    display: flex;
+    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; }
+      .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
+        background-color: #D7CEC7;
+        color: #565656; }
+  .LP-Pagination .LP-Link {
+    padding: 15px 20px;
+    vertical-align: sub;
+    border-radius: 2px; }
+    .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
+      background-color: #D7CEC7;
+      color: #565656; }
+  .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; }
 
@@ -300,7 +462,6 @@ body {
     border-left: none;
     min-width: 60px;
     background-color: #f9f9f9;
-    height: 100%;
     padding-top: 25px; }
     .LP-Menu--sidebar .LP-Menu__List {
       flex-direction: column; }
@@ -332,17 +493,31 @@ body {
   .LP-Menu .LP-Menu__List {
     justify-content: space-between; } }
 
+.LP-MessageList {
+  padding: 25px; }
+  .LP-MessageList .LP-MessageList__List {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; }
+  .LP-MessageList .LP-MessageList__Item {
+    margin: 5px 0; }
+
 .LP-Header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 60px;
-  box-shadow: 0 0 2px #C09F80; }
+  box-shadow: 0 0 2px #C09F80;
+  grid-area: header;
+  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;
@@ -373,6 +548,13 @@ body {
   .LP-Header__Navigation {
     width: 100%; } }
 
+@media (max-width: 650px) {
+  .LP-Header {
+    padding-left: 60px;
+    width: calc(100% - 60px);
+    position: fixed;
+    z-index: 10; } }
+
 .LP-PlaceGrid .LP-PlaceGrid__Grid {
   margin: 0;
   padding: 0;
@@ -396,9 +578,11 @@ 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 {
+  margin-top: 50px; }
+
 .LP-LinkList__List {
   list-style-type: none;
   display: grid;
@@ -408,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);
@@ -459,28 +660,59 @@ body {
         .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
           background-color: inherit; }
 
+.LP-Form {
+  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; }
+    border: none;
+    padding: 0;
+    margin: 0;
+    max-width: 1200px;
+    min-width: 750px; }
     .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
       margin: 0;
       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 {
-      flex: 3 1 100px;
-      padding: 6px 15px; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
-        flex: 5 1; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
-        flex: 4 1; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
-        flex: 2 0; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
-        flex: 1 0; }
+    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 0; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--wider {
+        flex: 5 2; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--wide {
+        flex: 4 2; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
+        flex: 2 1; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
+        flex: 1 2; }
+      .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__Composition .LP-Form__Button {
+      flex-grow: 0;
+      padding-left: 0;
+      min-width: 130px; }
+      .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
+        display: contents; }
+    .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
+      font-family: Montserrat, Helvetica, sans-serif;
+      color: #565656; }
+
+@media (max-width: 750px) {
+  .LP-Form .LP-Form__Fieldset {
+    min-width: unset; } }
 
 @media (max-width: 650px) {
   .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
@@ -489,13 +721,17 @@ 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 {
+    .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; } }
+      padding: 12px 15px; }
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
+      padding: 0 15px; }
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
+      justify-content: flex-end; } }
 
 .LP-ImageGrid .LP-ImageGrid__List {
   list-style-type: none;
@@ -558,4 +794,5 @@ body {
     width: 100%;
     height: auto;
     margin: 0;
-    padding: 0; } }
+    padding: 0;
+    margin-bottom: 25px; } }