Anpassen Placelevel im PlaceDetail View

.gitignore

@@ -10,6 +10,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+package-lock.json
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

components/01_Atoms/_atoms.scss

@@ -1,8 +1,13 @@
 @import 'link/link';
 @import 'headline/headline';
-@import 'text/text';
+@import 'paragraph/paragraph';
 @import 'icon/icon';
-@import 'textField/textField';
 @import 'button/button';
 @import 'checkbox/checkbox';
 @import 'input/input';
+@import 'image/image';
+@import 'logo/logo';
+@import 'tag/tag';
+@import 'message/message';
+@import 'pagination/pagination';
+@import 'materialdesignicons/materialdesignicons';

components/01_Atoms/button/_button.scss

@@ -1,13 +1,35 @@
-.LP-Button{
-	background-color: $-secondary-accent-color;
-	color: $-secondary-color;
-	border: none;
-	padding: 8px 14px;
-	border-radius: 2px;
-	font-weight: bold;
+.LP-Button {
+    background-color: $-light-brown;
+    color: $-grey;
+    border: none;
+    padding: 8px 14px;
+    border-radius: 2px;
+    font-weight: bold;
+    cursor: pointer;
+    white-space: nowrap;
+  
+    &--fullWidth {
+        text-align: center;
+    }
 
-	&:active {
-		background-color: $-primary-accent-color;
-		color: $-secondary-accent-color;
-	}
-}
+    &.LP-Link {
+        display: block;
+        &:hover {
+            color: $-almost-white
+        }
+    }
+    &:active {
+        background-color: $-wine-red;
+        color: $-almost-white;
+    }
+
+    &--cancel {
+        background-color: $-grey;
+        color: $-almost-white;
+
+        &:active {
+            color: $-grey;
+            background-color: $-almost-white;
+        }
+    }
+}

components/01_Atoms/button/button.config.json

@@ -1,3 +1,14 @@
 {
-	
+    "title": "Button",
+    "context":{
+        "text": "Click me"
+    },
+    "variants": [
+        {
+            "name": "Cancel Button",
+            "context": {
+                "modifier": "--cancel"
+            }
+        }
+    ]
 }

components/01_Atoms/button/button.hbs

@@ -1 +1 @@
-<button class="LP-Button">Click Me</button>
+<button class="LP-Button LP-Button{{modifier}}">Click Me</button>

components/01_Atoms/checkbox/_checkbox.scss

@@ -1,13 +1,17 @@
 .LP-Form{
-	.LP-Form__Checkbox{
-			display: none;
-	}	
+    .LP-Form__Checkbox{
+        display: none;
+		
+		&:checked + .LP-Form__CheckBox__CheckMark {
+			background-color: $-light-brown;
+		}
+    }   
 
-	.LP-Form__CheckBox__CheckMark{
-		height: 1em;
-		width: 1em;
-		border: 1px solid black;
-		padding: 0 calc(.5em + 2px);
-		margin-right: .7em;
-	}
-}
+    .LP-Form__CheckBox__CheckMark{
+        height: 1em;
+        width: 1em;
+        border: 1px solid $-grey;
+        padding: 0 calc(.5em + 2px);
+        margin-right: .7em;
+    }
+}

components/01_Atoms/checkbox/checkbox.config.json

@@ -1,3 +1,3 @@
 {
-	
+    
 }

components/01_Atoms/checkbox/checkbox.hbs

@@ -1,3 +1,7 @@
 <form class="LP-Form">
-	<label for="wurstwasser" class="LP-Form__Label"><span class="LP-Form__CheckBox__CheckMark"></span><input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>Check me</label>
+    <label for="wurstwasser" class="LP-Form__Label">
+		<input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>
+		<span class="LP-Form__CheckBox__CheckMark"></span>
+		Check me
+	</label>
 </form>

components/01_Atoms/headline/_headline.scss

@@ -1,11 +1,11 @@
 .LP-Headline{
     font-family: $-primary-sans-serif-font;
-    color: $-secondary-color;
+    color: $-grey;
     font-size: 1.7rem;
     padding-top: 0px;
     margin-top: 0px;
     padding-bottom: 0px;
-    margin-bottom: 0px;
+    margin-bottom: 25px;
 
     &--main{
         position: relative;
@@ -16,4 +16,4 @@
     &--inline{
         display: inline;
     }
-}
+}

components/01_Atoms/headline/headline.hbs

@@ -1 +1 @@
-<h1 class="LP-Headline LP-Headline{{modifier}}">{{headline}}</h1>
+<h1 class="LP-Headline{{#if modifier}} LP-Headline{{modifier}}{{/if}}">{{headline}}</h1>

components/01_Atoms/icon/_icon.scss

@@ -13,4 +13,4 @@
     .LP-Icon__Item{
         padding: 0 3px;
     }
-}
+}

components/01_Atoms/image/_image.scss

@@ -0,0 +1,13 @@
+.LP-Image{
+    object-fit: cover;
+    width: 100%;
+    height: auto;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+}
+
+.LP-Figure{
+	padding: 0;
+	margin: 0;
+}

components/01_Atoms/image/image.config.json

@@ -0,0 +1,5 @@
+{
+    "context":{
+        "source": "/images/photo_2020-05-02_18-11-21.jpg"
+    }
+}

components/01_Atoms/image/image.hbs

@@ -0,0 +1 @@
+<img src="{{source}}" class="LP-Image"/>

components/01_Atoms/input/_input.scss

@@ -1,89 +1,115 @@
-.LP-Input:has( .LP-Input__Field:disabled){
-    background-color: red;
-}
-
-.LP-Input{
+.LP-Input {
     $-margin-bottom: 30px;
     display: flex;
     flex-direction: column;
     margin-bottom: -$-margin-bottom;
     padding: 10px 0;
 
-    .LP-Input__Field{
+    &--tagging {
+
+        .LP-Button {
+            height: 53px;
+        }
+
+        .LP-Input__Field {
+            min-height: 36px;
+            height: max-content;
+            font-family: $-primary-sans-serif-font;
+            font-size: 1em;
+            padding: 0;
+            padding-left: 8px;
+        }
+    }
+
+    .LP-Input__Field {
         border: none;
-        border-bottom: 1px solid $-secondary-color;
-        padding: 8px;
+        border-bottom: 1px solid $-grey;
+        padding: 8px 0;
         margin-bottom: $-margin-bottom;
+        width: 100%;
 
-        &:focus, &:active{
+        &:focus,
+        &:active,
+        &:invalid,
+        &--active {
             margin-bottom: $-margin-bottom - 1px;
-            border-bottom: 2px solid $-primary-accent-color;
-            background-color: $-secondary-background-color;
+            border-bottom: 2px solid $-wine-red;
+            background-color: $-almost-white;
             border-radius: 3px 3px 0 0;
+            box-shadow: none;
         }
 
-        &:disabled{
-            background-color: transparent;
-            border-bottom: 1px dashed $-secondary-color;
-            cursor: not-allowed;
+        &[type=submit] {
+            background-color: $-light-brown;
+            color: $-grey;
+            border: none;
+            padding: 8px 14px;
+            border-radius: 2px;
+            font-weight: bold;
+            cursor: pointer;
 
-            &:active{
-                margin-bottom: $-margin-bottom;
-                border-radius: 0;
+            &:active {
+                background-color: $-wine-red;
+                color: $-almost-white;
             }
 
-            ~.LP-Input__Message{
-                visibility: hidden;
-            }
-            
         }
     }
 
-    .LP-Input__Label{
+    .LP-Input__Label {
         font-family: $-primary-sans-serif-font;
-        font-size: 18px;
+        font-size: 16px;
+        white-space: wrap;
+        overflow: hidden;
     }
 
-    .LP-Input__Message{
+    .LP-Input__Message {
         font-family: $-primary-sans-serif-font;
         font-style: italic;
         font-size: 13px;
         padding: 3px;
         position: relative;
         top: -$-margin-bottom;
-
-        &:before{
-            content: '* ';
-        }
+        overflow: hidden;
     }
 
-    &--error{
-        .LP-Input__Field{
+    &--error {
+        .LP-Input__Field {
             margin-bottom: 25px;
-            border-bottom: 2px solid $-primary-accent-color;
+            border-bottom: 2px solid $-wine-red;
             margin-bottom: $-margin-bottom - 1px;
         }
 
-        .LP-Input__Message{
-            color: $-primary-accent-color;
+        .LP-Input__Message {
+            color: $-wine-red;
+        }
+    }
+
+    &--disabled {
+
+        .LP-Input__Field,
+        .LP-Input__Field:disabled {
+            background-color: transparent;
+            border-bottom: 1px dashed $-grey;
+            cursor: not-allowed;
+
+            label+& {
+                color: red;
+            }
+
+            &:focus,
+            &:active {
+                margin-bottom: $-margin-bottom;
+                border-radius: 0;
+            }
+
+            ~.LP-Input__Message {
+                visibility: hidden;
+            }
+        }
+
+        .LP-Input__Label {
+            color: $-grey;
         }
     }
 }
-
-@media(max-width: $-viewport-small){
-    .LP-Input{
-        .LP-Input__Label{
-            font-family: $-primary-sans-serif-font;
-            font-size: 2.5vw;
-        }
-    }
-}
-
-@media(max-width: $-viewport-extra-small){
-    .LP-Input{
-        .LP-Input__Label{
-            font-family: $-primary-sans-serif-font;
-            font-size: 18px;
-        }
-    }
-}

components/01_Atoms/input/input.config.json

@@ -1,3 +1,28 @@
 {
-    
+    "context": {
+        "label": "Enter your value here",
+        "placeholder": "A sample value"
+    },
+    "variants": [
+        {
+            "name": "With message",
+            "context":{
+                "message": "Please fill in anything valuable"
+            }
+        },
+        {
+            "name": "disabled",
+            "context": {
+                "modifier": "--disabled",
+                "disabled": true
+            }
+        },
+        {
+            "name": "error",
+            "context": {
+                "modifier": "--error",
+                "message": "This field is required"
+            }
+        }
+    ]
 }

components/01_Atoms/input/input.hbs

@@ -1,10 +1,10 @@
-<div class="LP-Input">
-    <label for="input123" class="LP-Input__Label">First name</label>
-    <input type="text" id="input123" class="LP-Input__Field"/>
-    <span class="LP-Input__Message">Field is required</span>
-</div>
-<div class="LP-Input">
-    <label for="input123" class="LP-Input__Label">First name</label>
-    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
-    <span class="LP-Input__Message">Field is required</span>
+<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}}">
+    {{#if disabled}}
+        disabled="disabled"
+    {{/if}}
+    {{#if message}}
+    <span class="LP-Input__Message">{{message}}</span>
+    {{/if}}
 </div>

components/01_Atoms/link/_link.scss

@@ -1,19 +1,9 @@
 .LP-Link {
-    color: $-secondary-color;
+    color: $-light-brown;
     text-decoration: none;
-    font-family: $-primary-sans-serif-accent-font;
+    font-family: $-primary-sans-serif-font;
     &:hover {
-        color: $-secondary-accent-color;
+        color: $-grey;
+		text-decoration: underline;
     }
-
-    .LP-Text{
-        font-family: $-primary-sans-serif-accent-font;
-        &:hover{
-            color: $-secondary-accent-color;
-        }
-    }
-}
-
-.LP-Link__IconWrapper{
-    display: inline;
 }

components/01_Atoms/link/link--iconized.hbs

@@ -0,0 +1,10 @@
+<a href="{{url}}" class="LP-Link">
+	<span class="RV-Iconized">
+		<span class="RV-Iconized__Text">
+			Iconized Text
+		</span>
+		<span class="RV-Iconized__Icon RV-Iconized__Icon--medium RV-Iconized__Icon--right">
+			<img src="/icons/debug.png"/>
+		</span>
+	</span>
+</a>

components/01_Atoms/link/link.config.json

@@ -1,6 +1,6 @@
 {
     "context": {
         "url": "#",
-        "text": "Click Me"
+        "text": "click me"
     }
 }

components/01_Atoms/logo/_logo.scss

@@ -3,4 +3,4 @@
     max-height: 100%;
     width: auto;
     object-fit: contain;
-}
+}

components/01_Atoms/logo/logo.hbs

@@ -0,0 +1,5 @@
+<a href="LP-Link" href="#">
+    <div class="LP-Image">
+        <img class="LP-Logo" src="{{ path '/images/logo.png' }}"/>
+    </div>
+</a>

components/01_Atoms/materialdesignicons/_animated.scss

@@ -0,0 +1,27 @@
+// From Font Awesome
+.#{$mdi-css-prefix}-spin:before {
+    -webkit-animation: #{$mdi-css-prefix}-spin 2s infinite linear;
+            animation: #{$mdi-css-prefix}-spin 2s infinite linear;
+}
+
+@-webkit-keyframes #{$mdi-css-prefix}-spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(359deg);
+              transform: rotate(359deg);
+    }
+}
+
+@keyframes #{$mdi-css-prefix}-spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+              transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(359deg);
+              transform: rotate(359deg);
+    }
+}

components/01_Atoms/materialdesignicons/_core.scss

@@ -0,0 +1,10 @@
+.#{$mdi-css-prefix}:before,
+.#{$mdi-css-prefix}-set {
+  display: inline-block;
+  font: normal normal normal #{$mdi-font-size-base}/1 '#{$mdi-font-name}'; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

components/01_Atoms/materialdesignicons/_extras.scss

@@ -0,0 +1,65 @@
+$mdi-sizes: 18 24 36 48 !default;
+@each $mdi-size in $mdi-sizes {
+    .#{$mdi-css-prefix}-#{$mdi-size}px {
+        &.#{$mdi-css-prefix}-set,
+        &.#{$mdi-css-prefix}:before {
+            font-size: $mdi-size * 1px;
+        }
+    }
+}
+
+.#{$mdi-css-prefix}-dark {
+    &:before {
+        color: rgba(0, 0, 0, 0.54);
+    }
+    &.#{$mdi-css-prefix}-inactive:before {
+        color: rgba(0, 0, 0, 0.26);
+    }
+}
+.#{$mdi-css-prefix}-light {
+    &:before {
+        color: rgba(255, 255, 255, 1);
+    }
+    &.#{$mdi-css-prefix}-inactive:before {
+        color: rgba(255, 255, 255, 0.3);
+    }
+}
+
+$mdi-degrees: 45 90 135 180 225 270 315 !default;
+@each $mdi-degree in $mdi-degrees {
+    .#{$mdi-css-prefix}-rotate-#{$mdi-degree}{
+        &:before {
+            -webkit-transform: rotate(#{$mdi-degree}deg);
+            -ms-transform: rotate(#{$mdi-degree}deg);
+            transform: rotate(#{$mdi-degree}deg);
+        }
+        /*
+        // Not included in production
+        &.#{$mdi-css-prefix}-flip-h:before {
+            -webkit-transform: scaleX(-1) rotate(#{$mdi-degree}deg);
+            transform: scaleX(-1) rotate(#{$mdi-degree}deg);
+            filter: FlipH;
+            -ms-filter: "FlipH";
+        }
+        &.#{$mdi-css-prefix}-flip-v:before {
+            -webkit-transform: scaleY(-1) rotate(#{$mdi-degree}deg);
+            -ms-transform: rotate(#{$mdi-degree}deg);
+            transform: scaleY(-1) rotate(#{$mdi-degree}deg);
+            filter: FlipV;
+            -ms-filter: "FlipV";
+        }
+        */
+    }
+}
+.#{$mdi-css-prefix}-flip-h:before {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+.#{$mdi-css-prefix}-flip-v:before {
+    -webkit-transform: scaleY(-1);
+    transform: scaleY(-1);
+    filter: FlipV;
+    -ms-filter: "FlipV";
+}

components/01_Atoms/materialdesignicons/_functions.scss

@@ -0,0 +1,20 @@
+@function char($character-code) {
+    @if function-exists("selector-append") {
+        @return unquote("\"\\#{$character-code}\"");
+    }
+
+    @if "\\#{'x'}" == "\\x" {
+        @return str-slice("\x", 1, 1) + $character-code;
+    }
+    @else {
+        @return #{"\"\\"}#{$character-code + "\""};
+    }
+}
+
+@function mdi($name) {
+    @if map-has-key($mdi-icons, $name) == false {
+        @warn "Icon #{$name} not found.";
+        @return "";
+    }
+    @return char(map-get($mdi-icons, $name));
+}

components/01_Atoms/materialdesignicons/_icons.scss

@@ -0,0 +1,10 @@
+@each $key, $value in $mdi-icons {
+    .#{$mdi-css-prefix}-#{$key}::before {
+        content: char($value);
+    }
+}
+
+.#{$mdi-css-prefix}-blank::before {
+    content: "\F68C";
+    visibility: hidden;
+}

components/01_Atoms/materialdesignicons/_materialdesignicons.scss

@@ -0,0 +1,8 @@
+/* MaterialDesignIcons.com */
+@import "variables";
+@import "functions";
+@import "path";
+@import "core";
+@import "icons";
+@import "extras";
+@import "animated";

components/01_Atoms/materialdesignicons/_path.scss

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: '#{$mdi-font-name}';
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}') format('woff2'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}') format('woff'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

components/01_Atoms/materialdesignicons/materialdesignicons.json

@@ -0,0 +1 @@
+{}

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/01_Atoms/paragraph/_paragraph.scss

@@ -0,0 +1,8 @@
+.LP-Paragraph {
+    color: black;
+    font-family: $-primary-serif-font;
+    font-size: 1.4rem;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 0.75em
+}

components/01_Atoms/paragraph/paragraph.config.json

@@ -1,5 +1,8 @@
 {
     "context": {
         "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."
-    }
+    },
+    "variants": [
+
+    ]
 }

components/01_Atoms/paragraph/paragraph.hbs

@@ -0,0 +1 @@
+<p class="LP-Paragraph{{#if modifier}} LP-Paragraph{{modifier}}{{/if}}">{{text}}</p>

components/01_Atoms/tag/_tag.scss

@@ -0,0 +1,39 @@
+.LP-Tag {
+    padding: 8px 14px;
+    background-color: $-beige;
+    border-radius: 2px;
+    width: max-content;
+    @include RV-Flex;
+    height: min-content;
+    gap: 3px;
+    transition: background .3s;
+	
+	.LP-Link {
+		color: $-grey;
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+    &__Remove {
+        .RV-Iconized__Icon {
+            fill: $-wine-red;
+
+            &:hover {
+                fill: $-grey;
+            }
+        }
+    }
+
+    &:hover {
+        background-color: #bdbdbd;
+    }
+
+    .LP-Paragraph {
+        padding: 0;
+        margin: 0;
+        font-family: $-primary-sans-serif-font;
+        font-size: 1em;
+        display: inline;
+    }
+}

components/01_Atoms/tag/tag.config.json

@@ -0,0 +1,6 @@
+{
+    "title": "Tag",
+    "context": {
+        "text": "Im a tag"
+    }
+}

components/01_Atoms/tag/tag.hbs

@@ -0,0 +1,13 @@
+<div class="LP-Tag">
+    {{> @link text=text url="#"}}
+    <a href="#" class="LP-Link">
+        <span class="LP-Tag__Remove RV-Iconized__Container RV-Iconized__Container--extraSmall">
+            <svg class="RV-Iconized__Icon" height="24" viewBox="0 0 24 24" width="24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z">
+                </path>
+            </svg>
+        </span>
+    </a>
+</div>

components/01_Atoms/text/_text.scss

@@ -1,5 +0,0 @@
-.LP-Text {
-    color: black;
-    font-family: $-primary-serif-font;
-    font-size: 1.2rem;
-}

components/01_Atoms/text/text.hbs

@@ -1 +0,0 @@
-<p class="LP-Text LP-Content">{{text}}</p>

components/01_Atoms/textField/_textField.scss

@@ -1,10 +0,0 @@
-.LP-Form{
-	.LP-Form__Input--text{
-		border: none;
-		border-bottom: 1px solid $-secondary-accent-color;
-
-		&:active, &:focus{
-			border-bottom: 1px solid $-primary-accent-color;
-		}
-	}
-}

components/01_Atoms/textField/textField.config.json

@@ -1,17 +0,0 @@
-{
-	"title": "TextField",
-	"variants": [
-		{
-			"name": "default",
-			"context": {
-				"type": "text"
-			}
-		},
-		{
-			"name": "Password",
-			"context": {
-				"type": "password"
-			}
-		}
-	]
-}

components/01_Atoms/textField/textField.hbs

@@ -1,3 +0,0 @@
-<form class="LP-Form">
-	<input type="{{type}}" class="LP-Form__Input LP-Form__Input--text"/>
-</form>

components/02_Molecules/_molecules.scss

@@ -1,5 +1,7 @@
-@import 'logo/logo';
 @import 'textSection/textSection';
-@import 'place/place';
-@import 'securityMeasureList/securityMeasureList';
-@import 'form/form';
+@import 'placeTeaser/placeTeaser';
+@import 'tagList/tagList';
+@import 'navigation/navigation';
+@import 'messageList/messageList';
+@import 'userInfo/userInfo';
+@import 'voting/voting';

components/02_Molecules/form/_form.scss

@@ -1,70 +0,0 @@
-.LP-Form{
-    max-width: 900px;
-    .LP-Form__Fieldset{
-        border: none;
-
-        .LP-Form__Legend{
-            margin: 0;
-            padding: 0;
-        }
-
-        .LP-Form__Composition{
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            .LP-Form__Field{
-                flex: 3 1 100px;
-                padding: 0 15px;
-
-                &--wider{
-                    flex: 5 1 200px;
-                }
-
-                &--wide{
-                    flex: 4 1 150px;
-                }
-
-                &--narrow{
-                    flex: 2 0 50px;
-                }
-
-                &--narrower{
-                    flex: 1 0 25px;
-                }
-
-                input{
-                    width: 100%;
-                }
-            }
-        }
-    }
-}
-
-@media(max-width: $-viewport-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition--breakable{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-            }
-        }
-    }
-}
-
-@media(max-width: $-viewport-extra-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                .LP-Form__Field{
-                    flex: 3 1 100px;
-                }
-            }
-        }
-    }
-}

components/02_Molecules/form/form.hbs

@@ -1,47 +0,0 @@
-<form class="LP-Form">
-    <fieldset class="LP-Form__Fieldset">
-        <legend class="LP-Form__Legend">Basic data</legend>
-
-        <div class="LP-Form__Composition LP-Form__Composition--breakable">
-            <span class="LP-Form__Field LP-Input LP-Input--error">
-                <label for="input123" class="LP-Input__Label">First name</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-                <span class="LP-Input__Message">Field is required</span>
-            </span>
-            <span class="LP-Form__Field LP-Input">
-                <label for="input123" class="LP-Input__Label">Last name</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-            </span>
-        </div>
-
-        <div class="LP-Form__Composition">
-            <span class="LP-Form__Field LP-Form__Field--wider LP-Input">
-                <label for="input123" class="LP-Input__Label">Street</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-                <span class="LP-Input__Message">We won't send any stalkers, promise</span>
-            </span>
-            <span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
-                <label for="input123" class="LP-Input__Label">House no</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-                <span class="LP-Input__Message">Field is required</span>
-            </span>
-            <span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
-                <label for="input123" class="LP-Input__Label">Disabled</label>
-                <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
-                <span class="LP-Input__Message">Field is required</span>
-            </span>
-        </div>
-
-        <div class="LP-Form__Composition">
-            <span class="LP-Form__Field LP-Form__Field--narrow LP-Input">
-                <label for="input123" class="LP-Input__Label">Postal Code</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-            </span>
-            <span class="LP-Form__Field LP-Form__Field--wide LP-Input">
-                <label for="input123" class="LP-Input__Label">Town</label>
-                <input type="text" id="input123" class="LP-Input__Field"/>
-            </span>
-        </div>
-
-    </fieldset>
-</form>

components/02_Molecules/logo/logo.hbs

@@ -1,3 +0,0 @@
-<a href="LP-Link" href="#">
-    <img class="LP-Logo" src="{{ path '/images/logo.png' }}"/>
-</a>

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

@@ -0,0 +1,98 @@
+.LP-Menu{
+    border-left: 1px solid $-light-brown;
+    .LP-Menu__List {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .LP-Menu__Item {
+        margin: 0;
+        text-align: center;
+        background-color: transparent;
+
+        .LP-Paragraph {
+            margin-bottom: 0;
+        }
+
+        .LP-Link{
+            display: block;
+            padding: 15px 0;
+        }
+    }
+
+    .LP-Link__Text {
+        color: $-grey;
+        font-weight: bold;
+        text-shadow: 0px 0px 20px white;
+        &:hover{
+            color: $-wine-red;
+        }
+    }
+
+    &--sidebar{
+        border-top: 1px solid $-light-brown;
+        border-left: none;
+        min-width: 60px;
+        background-color: $-almost-white;
+        padding-top: 25px;
+        
+        .LP-Menu__List{
+            flex-direction: column;
+
+            .LP-Menu__Item{
+                text-align: left;
+                margin-bottom: 10px;
+                padding-left: 25px;
+                transition: background .2s;
+
+                &--additional{
+                    background-color: #ccc;
+                }
+
+                .LP-Link{
+                    line-height: 1em;
+                }
+                
+                &:last-child{
+                    margin-bottom: 0;
+                }
+
+                &:hover{
+                    border-right: 2px solid $-light-brown;
+                    position: relative;
+                    background-color: $-beige;
+                    color: $-wine-red;
+                }
+            }
+
+        }
+    }
+}
+
+@media(max-width: $-viewport-medium){
+    .LP-Menu{
+        &:not(&--sidebar){
+            .LP-Menu__List{
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+
+                .LP-Menu__Item{
+                    flex: 1 1 auto;
+                }
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Menu{
+        .LP-Menu__List {
+            justify-content: space-between;
+        }
+    }
+}

components/02_Molecules/navigation/navigation.config.json

@@ -0,0 +1,16 @@
+{
+    "title": "Navigation",
+    "context": {
+        "additionalItems": [
+            "Hello"
+        ]
+    },
+    "variants": [
+        {
+            "name": "Sidebar",
+            "context":{
+                "modifier": "--sidebar"
+            }
+        }
+    ]
+}

components/02_Molecules/navigation/navigation.hbs

@@ -0,0 +1,9 @@
+<nav class="LP-Menu LP-Menu{{modifier}}">
+    <ul class="LP-Menu__List">
+        {{#each additionalItems}}
+            <li class="LP-Menu__Item LP-Menu__Item--additional">{{> @link text=this}}</li>
+        {{/each}}
+        <li class="LP-Menu__Item">{{> @link text='Home'}}</li>
+        <li class="LP-Menu__Item">{{> @link text='UrBex codex'}}</li>
+    </ul>
+</nav>

components/02_Molecules/place/_place.scss

@@ -1,42 +0,0 @@
-.LP-Place{
-    .LP-Place__Image{
-        width: 280px;
-        height: 165px;
-        object-fit: fill;
-    }
-
-    .LP-Place__Assets{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: 0.8rem;
-        
-        padding: 0 10px;
-        padding-bottom: 10px;
-    }
-
-    .LP-Place__Info{
-
-        .LP-Place__Title{
-            font-family: $-primary-sans-serif-font;
-            color: $-secondary-color;
-            font-size: 1rem;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        .LP-Place__Description{
-            font-family: $-primary-sans-serif-accent-font;
-            color: $-secondary-color;
-        }
-
-        .LP-Place__Detail{
-            font-family: $-primary-sans-serif-font;
-            padding: 0;
-            margin: 0;
-            margin-top: 5px;
-            font-size: 0.9rem;
-        }
-    }
-
-}

components/02_Molecules/place/place.config.json

@@ -1,7 +0,0 @@
-{
-    "context": {
-        "image": "/images/photo_2020-05-02_18-11-21.jpg",
-        "title": "Kokerei Wiescherhöfen",
-        "location": "Hamm (Westfalen)"
-    }
-}

components/02_Molecules/place/place.hbs

@@ -1,20 +0,0 @@
-<article class="LP-Place">
-    <img class="LP-Place__Image" src="{{image}}"/>
-    <div class="LP-Place__Assets">
-        <div class="LP-Place__Info">
-            <h3 class="LP-Place__Title">{{title}}</h3>
-            <p class="LP-Place__Detail" >{{location}}</p>
-        </div>
-        {{# if description}}
-            <p class="LP-TextSection LP-Place__Description">
-                {{description}}
-            </p>
-        {{/if}}
-
-        <ul class="LP-Icon__List">
-            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
-            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
-            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
-        </ul>
-    </div>
-</article>

components/02_Molecules/placeTeaser/_placeTeaser.scss

@@ -0,0 +1,16 @@
+.LP-PlaceTeaser {
+	@include RV-Turner(200px, 280px);
+	@include RV-Turner--auto;
+	
+	&__Image {
+		@include RV-Turner__Base;
+		
+		.LP-Image {
+			height: 100%;
+		}
+	}
+	
+	&__Meta {
+		@include RV-Turner__Content;
+	}
+}

components/02_Molecules/placeTeaser/placeTeaser.config.json

@@ -0,0 +1,16 @@
+{
+    "context": {
+        "image": "/images/photo_2020-05-02_18-11-21.jpg",
+        "title": "Kokerei Wiescherhöfen",
+        "location": "Hamm (Westfalen)",
+        "description": "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. "
+    },
+    "variants": [
+        {
+            "name": "Extended",
+            "context": {
+                "modifier": "--extended"
+            }
+        }
+    ]
+}

components/02_Molecules/placeTeaser/placeTeaser.hbs

@@ -0,0 +1,23 @@
+<article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
+    <div class="LP-PlaceTeaser__Image">
+        <img class="LP-Image" src="{{image}}"/>
+    </div>
+    <div class="LP-PlaceTeaser__Meta">
+		<span class="LP-PlaceTeaser__Title">
+			{{> @headline headline=title modifier='--teaser'}}
+		</span>
+        <div class="LP-PlaceTeaser__Info">
+            <span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span>
+        </div>
+        <div class="LP-PlaceTeaser__Description">
+            {{> @paragraph text=description}}
+        </div>
+        <div class="LP-PlaceTeaser__Icons">
+            <ul class="LP-Icon__List">
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
+            </ul>
+        </div>
+    </div>
+</article>

components/02_Molecules/securityMeasureList/_securityMeasureList.scss

@@ -1,17 +0,0 @@
-.LP-SecurityMeasure__List{
-    list-style-type: none;
-    display: flex;
-    padding:0;
-    margin: 0;
-
-    .LP-SecurityMeasure__Item{
-        margin: 0 8px;
-        padding: 8px 14px;
-        background-color: #D7CEC7;
-        border-radius: 2px;
-        .LP-Text{
-            font-family: $-primary-sans-serif-font;
-            font-size: 1.2rem;
-        }
-    }
-}

components/02_Molecules/securityMeasureList/securityMeasureList.hbs

@@ -1,7 +0,0 @@
-<ul class="LP-SecurityMeasure__List">
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Wachhund</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
-</ul>

components/02_Molecules/tagList/_tagList.scss

@@ -0,0 +1,13 @@
+.LP-TagList {
+    .LP-TagList__List {
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        margin: 0;
+
+        .LP-TagList__Item {
+            margin: 3px;
+        }
+    }
+}

components/02_Molecules/tagList/tagList.config.json

@@ -0,0 +1,11 @@
+{
+    "title": "TagList",
+    "context": {
+        "tags": [
+            "Kamera",
+            "Wachhund",
+            "Zaun",
+            "Security"
+        ]
+    }
+}

components/02_Molecules/tagList/tagList.hbs

@@ -0,0 +1,7 @@
+<div class="LP-TagList">
+    <ul class="LP-TagList__List">
+        {{#each tags}}
+            <li class="LP-TagList__Item">{{> @tag text=this}}</li>
+        {{/each}}
+    </ul>
+</div>

components/02_Molecules/textSection/_textSection.scss

@@ -9,8 +9,12 @@
 }
 
 .LP-TextSection{
-
-    .LP-Text {
-        line-height: 1.4rem;
+    
+    &__Text {
+        font-family: $-primary-serif-font;
+        font-size: 1.4rem;
+        .LP-Link{
+            margin: 0 3px;
+        }
     }
-}
+}

components/02_Molecules/textSection/textSection.config.json

@@ -1 +1,8 @@
-{}
+{
+    "context": {
+        "headline": "At vero eos et accusam et justo duo dolores",
+        "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.", "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.", "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."
+        ]
+    }
+}

components/02_Molecules/textSection/textSection.hbs

@@ -1,4 +1,10 @@
 <article class="LP-TextSection">
-    {{> @headline headline=headline}}
-    {{> @text text=text}}
+    <header class="LP-TextSection__Headline">
+        {{> @headline headline=headline}}
+    </header>
+    <div class="LP-TextSection__Text">
+        {{#each text}}
+            {{> @paragraph text=this}}
+        {{/each}}
+    </div>
 </article>

components/02_Molecules/userInfo/_userInfo.scss

@@ -0,0 +1,36 @@
+.LP-UserInfo {
+    display: flex;
+    flex-direction: column;
+    background-color: $-beige;
+
+    max-width: 400px;
+    width: 100%;
+    min-width: 300px;
+
+    &__UserName {
+        background-color: $-light-brown;
+
+        .LP-Headline {
+            color: black;
+            padding: 0;
+            margin: 0;
+            text-align: center;
+            padding: $-spacing-small;
+            font-size: 25px;
+        }
+    }
+
+    &__Meta {
+        * {
+            font-family: $-primary-sans-serif-font;
+            font-size: 18px;
+        }
+
+        padding: $-spacing-small;
+
+        .LP-UserInfo__Key {
+            padding-right: $-spacing-medium;
+            font-weight: bold;
+        }
+    }
+}

components/02_Molecules/userInfo/userInfo.hbs

@@ -0,0 +1,45 @@
+<div class="LP-UserInfo">
+	<div class="LP-UserInfo__UserName">
+		{{> @headline headline='reverend'}}
+	</div>
+	<div class="LP-UserInfo__Picture">
+		{{> @image source='/images/profile_picture.jpeg'}}
+	</div>
+	<div class="LP-UserInfo__Meta">
+		<table>
+			<tr>
+				<td class="LP-UserInfo__Key">
+					<span class="LP-Paragraph"> Joined</span>
+				</td>
+				<td class="LP-UserInfo__Value">
+					<span class="LP-Paragraph">27th of September 2020</span>
+				</td>
+			</tr>
+			<tr>
+				<td class="LP-UserInfo__Key">
+					<span class="LP-Paragraph">Places</span>
+				</td>
+				<td class="LP-UserInfo__Value">
+					<span class="LP-Paragraph">42</span>
+				</td>
+			</tr>
+			<tr>
+				<td class="LP-UserInfo__Key">
+					<span class="LP-Paragraph">Place Assets</span>
+				</td>
+				<td class="LP-UserInfo__Value">
+					<span class="LP-Paragraph">136</span>
+				</td>
+			</tr>
+			<tr>
+				<td class="LP-UserInfo__Key">
+					<span class="LP-Paragraph">Location</span>
+				</td>
+				<td class="LP-UserInfo__Value">
+					<span class="LP-Paragraph">Münster</span>
+				</td>
+			</tr>
+		</table>
+		<a href="#" class="LP-Button LP-Button--fullWidth LP-Link">Edit profile</a>
+	</div>
+</div>

components/02_Molecules/voting/_voting.scss

@@ -0,0 +1,103 @@
+.LP-Voting {
+    $-block: &;
+
+    font-family: $-primary-sans-serif-font;
+    gap: 16PX;
+    font-size: 42px;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .LP-Headline {
+        margin-bottom: 0;
+        height: 33px;
+    }
+    
+    &__Left {
+        position: relative;
+    }
+
+    &__Choices {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        margin-bottom: calc(1.5 * 18px);
+        width: max-content;
+
+        --indication-color: #{$-light-brown};
+        &:hover {
+            --indication-color: #{$-beige};
+        }
+    }
+
+    &__Vote {
+        color: $-beige;
+        text-decoration: none;
+        transition: color .4s;
+
+        &:hover,
+        &:hover ~ &,
+        &:focus,
+        &focus ~ & {
+            color: $-grey;
+            cursor: pointer;
+        }
+
+        &:hover {
+            #{$-block}__Label {
+                visibility: visible;
+            }
+        }
+
+        &--overall {
+            color: var(--indication-color);
+        }
+    }
+
+    &__Label {
+        position: absolute;
+        visibility: hidden;
+        height: 1.5em;
+        left: 0px;
+        width: 100%;
+        text-align: center;
+        top: 83px;
+        background-color: white;
+        color: $-grey;
+    }
+
+    &__Label, &__CurrentVote {
+        font-size: 18px;
+        font-weight: bold;
+    }
+
+    &__CurrentVote {
+        margin-top: -29px;
+        color: $-light-brown;
+    }
+
+    &__Date, &__Vote {
+        font-weight: bold;
+    }
+
+    &__UserVote {
+        #{$-block}__Vote {
+            &, &:hover {
+                color: black;
+                cursor: unset;
+            }
+        }
+    }
+
+    &__Info{
+        font-size: 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        &Label {
+            display: block;
+        }
+    }
+}

components/02_Molecules/voting/voting.hbs

@@ -0,0 +1,57 @@
+<div class="LP-Voting">
+	<div class="LP-Voting__Left">
+		<h2 class="LP-Headline">
+			Place level
+		</h2>
+		<div class="LP-Voting__Choices">
+			<a href="#5" class="LP-Voting__Vote" title="Vote place as &quot;Time Capsule&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Time Capsule
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote" title="Vote place as &quot;Lost in History&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Lost in History
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Natures Treasure&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Natures Treasure
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Vandalized&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Vandalized
+				</span>
+			</a>
+			<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Ruin&quot;">
+				<i class="mdi mdi-shield-home"></i>
+				<span class="LP-Voting__Label">
+					Ruin
+				</span>
+			</a>
+		</div>
+		<div class="LP-Voting__CurrentVote">
+			Natures Treasure
+		</div>
+	</div>
+	<div class="LP-Voting__Right">
+		<div class="LP-Voting__Info">
+			<div class="LP-Voting__UserVote">
+				<span class="LP-Voting__InfoLabel">You voted this place as</span>
+				<span class="LP-Voting__Vote">Lost in History (4 / 5)</span>
+			</div>
+			
+			<div class="LP-Voting__Expiration">
+				<span class="LP-Voting__InfoLabel">Your vote expires on</span>
+				<span class="LP-Voting__Date">
+					<time datetime="2022-01-24">24 of January 2022</time>
+				</span>
+			</div>
+		</div>
+	</div>
+</div>

components/03_Organisms/_organisms.scss

@@ -1,7 +1,9 @@
 @import 'header/header';
-@import 'navigation/navigation';
-@import 'introduction/introduction';
 @import 'placeGrid/placeGrid';
 @import 'placeList/placeList';
 @import 'linkList/linkList';
-@import 'footer/footer';
+@import 'footer/footer';
+@import 'form/form';
+@import 'imageGrid/imageGrid';
+@import 'osmMap/osmMap';
+@import 'userProfile/userProfile';

components/03_Organisms/footer/_footer.scss

@@ -1,30 +1,275 @@
-.LP-Footer{
-    margin-top: 75px;
+// Define easily accessible color-defaults for the footer.
+$-primary-link-color: $-beige;
+$-primary-line-color: $-almost-white;
+
+.LP-Footer {
+    margin: auto;
+    background: $-grey;
     width: 100%;
-    background-color: $-secondary-color;
-    padding: 25px;
+    font-family: $-primary-sans-serif-font;
+    font-size: 1rem;
 
-    .LP-LinkList__List{
-        display: flex;
-        align-items: center;
+    &Columns__Container {
+        @include RV-BreakPoint;
+        --breakPoint: 750px;
         justify-content: center;
-        .LP-LinkList__Item{
-            border: none;
-            padding: 5px;
-            width: auto;
+    }
 
-            .LP-Text{
-                color: $-secondary-background-color;
-                font-size: 17px;
-            }
+    &Columns__Item {
+        @include RV-BreakPoint__Item;
+    }
 
-            .LP-Link{
-                display: inline;
+    * {
+        box-sizing: border-box;
+    }
 
-                &:hover{
-                    background-color: inherit;
-                }
-            }
+    ul {
+        list-style: none;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    &__GenericAnchor {
+        color: $-primary-link-color;
+
+        &:hover {
+            color: $-primary-line-color;
         }
     }
-}
+
+    // Use flexbox
+    &__Flex {
+        display: flex;
+        flex-flow: row wrap;
+    }
+
+    &__ListTop {
+        text-align: left;
+    }
+
+    &__ListTop > li {
+        padding-bottom: 10px;
+    }
+
+    &__ListHeader {
+        padding: 10px 0 5px 0;
+        color: $-almost-white;
+        font-size: 2.3vw;
+    }
+
+    &__ListText {
+        font-size: 1.2em;
+        color: $-almost-white;
+    }
+
+    &__SocialSection {
+        width: 100%;
+        align-items: center;
+        justify-content: space-around;
+        position: relative;
+        margin-top: 5px;
+    }
+
+    &__SocialSection::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 10px;
+        border-top: 1px solid $-primary-line-color;
+        width: calc(100% - 20px);
+    }
+
+    // Include social media icons.
+    .LP-Footer__Social-Mastodon {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/mastodon.svg');
+        }
+    }
+
+    .LP-Footer__Social-Twitter {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/twitter.svg');
+        }
+    }
+
+    .LP-Footer__Social-Facebook {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/facebook.svg');
+        }
+    }
+
+    .LP-Footer__Social-Youtube {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/youtube.svg');
+        }
+    }
+
+    .LP-Footer__Social-Vimeo {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/vimeo.svg');
+        }
+    }
+
+    .LP-Footer__Social-Instagram {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/instagram.svg');
+        }
+    }
+
+    .LP-Footer__Social-Vkontakte {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/vkontakte.svg');
+        }
+    }
+
+    .LP-Footer__Social-Wordpress {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/wordpress.svg');
+        }
+    }
+
+    // Social media icons style.
+    .LP-Footer__Icon {
+        background-size: 40px 40px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-clip: content-box;
+        position: absolute;
+        height: 50px;
+        width: 50px;
+    }
+
+    // Big letters of "EXPLORE WITH US"
+    &__SocialExplore {
+        display: flex;
+        align-items: center;
+        font-size: 2.5em;
+        color: $-almost-white;
+    }
+
+    // Small letters of "EXPLORE WITH US"
+    &__SocialSmall {
+        font-size: 0.5em;
+        padding: 0px 20px;
+    }
+
+    &__SocialOverlap {
+        position: relative;
+        z-index: 2;
+        background: $-grey;
+        padding: 0 10px;
+    }
+
+    &__SocialOverlap > a {
+        font-size: 3em;
+        padding-right: 50px;
+    }
+
+    &__BottomSection {
+        width: 100%;
+        padding: 10px;
+        border-top: 1px solid $-primary-line-color;
+        margin-top: 10px;
+    }
+
+    &__BottomSection > div:first-child {
+        margin-right: auto;
+    }
+
+    &__BottomWrapper {
+        font-size: 1.3em;
+        color: $-almost-white;
+    }
+}
+
+// Media queries using global widths.
+@media(max-width: $-viewport-normal) {
+    .LP-Footer__ListHeader {
+        font-size: 2em;
+    }
+    .LP-Footer__ListText {
+        font-size: 1.1em;
+    }
+    .LP-Footer__SocialConnect {
+        font-size: 2.5em;
+    }
+    .LP-Footer__SocialOverlap > a {
+        font-size: 2.24em;
+        height: 50px;
+    }
+    .LP-Footer__BottomWrapper {
+        font-size: 1.3em;
+    }
+}
+
+@media(max-width: $-viewport-medium) {
+    .LP-Footer__ListHeader {
+        font-size: 3em;
+    }
+    .LP-Footer__ListText {
+        font-size: 1.5em;
+    }
+    .LP-Footer__SocialSection {
+        justify-content: center
+    }
+    .LP-Footer__SocialSection::after {
+        top: 25%;
+    }
+    .LP-Footer__SocialConnect {
+        margin-bottom: 10px;
+        padding: 0 10px;
+    }
+    .LP-Footer__SocialOverlap {
+        display: flex;
+        justify-content: center;
+        height: 50px;
+    }
+    .LP-Footer__SocialIconsWrapper {
+        width: 100%;
+        padding: 0;
+    }
+    .LP-Footer__SocialOverlap {
+        margin-left: 0px;
+    }
+    .LP-Footer__BottomSection {
+        padding: 0 5px 10px 5px;
+    }
+    .LP-Footer__BottomWrapper {
+        text-align: center;
+        width: 100%;
+        margin-top: 10px;
+    }
+}
+
+@media(max-width: $-viewport-small) {
+    .LP-Footer__SocialOverlap > a {
+        margin: auto;
+    }
+    .LP-Footer__SocialOverlap > a:not(:first-child) {
+        margin-left: 0;
+    }
+    .LP-Footer__BottomRights {
+        display: block;
+    }
+}
+
+@media(max-width: $-viewport-extra-small) {
+    .LP-Footer__ListHeader {
+        font-size: 2.2em;
+    }
+    .LP-Footer__ListText {
+        font-size: 1.2em;
+    }
+    .LP-Footer__SocialConnect {
+        font-size: 2.4em;
+    }
+    .LP-Footer__SocialOverlap > a {
+        font-size: 2.24em;
+    }
+    .LP-Footer__BottomWrapper {
+        font-size: 1.3em;
+    }
+}

components/03_Organisms/footer/footer.config.json

@@ -1,3 +1,4 @@
 {
-    "title": "Footer"
+    "title": "Footer",
+    "status": "wip"
 }

components/03_Organisms/footer/footer.hbs

@@ -1,7 +1,78 @@
-<article class="LP-Footer">
-        <ul class="LP-LinkList__List">
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Impressum</span></a></li>
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Kontakt</span></a></li>
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Datenschutz</span></a></li>
-        </ul>
-</article>
+<footer class="LP-Footer">
+    <div class="LP-FooterColumns__Container">
+        
+        <!-- 1st footer column -->
+        <div class="LP-FooterColumns__Item">
+            <ul class="LP-Footer__ListTop">
+                <li><h4 class="LP-Footer__ListHeader">About</h4></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/src/branch/master/Readme.md' class="LP-Footer__GenericAnchor">Host your own instance!</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/issues' class="LP-Footer__GenericAnchor">Issue tracker</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend' class="LP-Footer__GenericAnchor">Backend repository</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-frontend' class="LP-Footer__GenericAnchor">Frontend repository</a></li>
+            </ul>
+        </div>
+
+        <div class="LP-FooterColumns__Item">
+            <!-- 2nd footer column -->
+            <ul class="LP-Footer__ListTop">
+                <li><h4 class="LP-Footer__ListHeader">Contact</h4></li>
+                    <li class="LP-Footer__ListText">web. <a href='https://www.urban-exploration.com' class="LP-Footer__GenericAnchor">https://www.urban-exploration.com</a></li>
+                    <li class="LP-Footer__ListText">mail. <a href='mailto:JohnSSmith@einrot.com' class="LP-Footer__GenericAnchor">JohnSSmith@einrot.com</a></li>
+                    <li class="LP-Footer__ListText">tel. 937-387-6498</li>
+            </ul>
+        </div>
+
+        <div class="LP-FooterColumns__Item">
+            <!-- 3rd footer column -->
+            <ul class="LP-Footer__ListTop">
+                <li id='Contact'><h4 class="LP-Footer__ListHeader">Postal address</h4></li>
+                    <li class="LP-Footer__ListText"><b>Urban Exploration Ltd.</b></li>
+                    <li class="LP-Footer__ListText">John S. Smith</li>
+                    <li class="LP-Footer__ListText">2563 College Avenue</li>
+                    <li class="LP-Footer__ListText">Dayton, OH 45402</li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Explore with us / social media bar -->
+    <section class="LP-Footer__SocialSection LP-Footer__Flex">
+        <span class="LP-Footer__SocialOverlap LP-Footer__SocialExplore">
+            EXPLORE <span class="LP-Footer__SocialSmall">with</span> US
+        </span>
+        <span class="LP-Footer__SocialOverlap LP-Footer__SocialIconsWrapper">
+            <a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__GenericAnchor"
+                target="_blank" title="Mastodon">
+                    <span class="LP-Footer__Icon"></span>
+                </a>
+            <a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__GenericAnchor"
+                target="_blank" title="Twitter">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+            <a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__GenericAnchor"
+                target="_blank" title="Youtube">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+            <a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__GenericAnchor"
+                target="_blank" title="Wordpress">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+            <a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__GenericAnchor"
+                target="_blank" title="Instagram">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+        </span>
+    </section>
+
+    <!-- Bottom section with last line of text and links. -->
+    <section class="LP-Footer__BottomSection LP-Footer__Flex">
+        <div class="LP-Footer__BottomWrapper">   
+            Proudly made by <a href="https://www.reverend.church" class="LP-Footer__GenericAnchor">Reverend</a> 
+            and <a href="https://www.commander1024.de" class="LP-Footer__GenericAnchor">Commander1024.</a></span>
+        </div>
+        <div class="LP-Footer__BottomWrapper">
+            <a href="/flat/privacy-policy.html" class="LP-Footer__GenericAnchor">Privacy Policy</a> 
+            | 
+            <a href="/flat/impress.html" class="LP-Footer__GenericAnchor">Impress</a>
+        </div>
+    </section>
+</footer>

components/03_Organisms/form/_form.scss

@@ -0,0 +1,93 @@
+.LP-Form {
+
+    &--tagging {
+        margin-top: 25px;
+
+        div.LP-Form__Composition {
+            gap: 25px;
+        }
+    }
+
+    &--inline {
+
+        .LP-Form__Legend,
+        .LP-Input__Label {
+            display: none;
+        }
+
+        .LP-Form__Button {
+            @include RV-Flex__Item--fixedSize;
+            --fixed-size: max-content;
+        }
+
+        fieldset.LP-Form__Fieldset {
+            max-width: unset;
+        }
+
+        div.LP-Form__Composition {
+            padding: 0;
+        }
+    }
+
+    &:not(.LP-Form--inline) {
+        .LP-Form__Composition {
+            @media(max-width: $-viewport-extra-small) {
+                @include RV-Flex--wrap;
+            }
+        }
+
+        .LP-Form__Button {
+            @include RV-Flex__Item--fixedSize;
+            --fixedSize: 130px;
+
+            @media(max-width: $-viewport-extra-small) {
+                @include RV-Flex__Item--fixedSize;
+                --fixedSize: 100%;
+            }
+        }
+    }
+
+    .LP-Form__Fieldset {
+        max-width: 1200px;
+        min-width: $-viewport-medium;
+        border: none;
+
+        @media(max-width: $-viewport-medium) {
+            min-width: unset;
+        }
+    }
+
+    .LP-Form__Legend {
+        margin: 0;
+        padding: 0;
+        font-family: $-primary-sans-serif-font;
+        font-size: 21px;
+    }
+
+    .LP-Form__Composition {
+        @include RV-Flex;
+        gap: $-spacing-small;
+
+        &--breakable {
+            @media(max-width: $-viewport-small) {
+                @include RV-Flex--wrap;
+            }
+        }
+
+        &--buttons {
+            justify-content: flex-end;
+            gap: 20px;
+        }
+    }
+
+    .LP-Form__Field {
+        @include RV-Flex__Item;
+    }
+
+    .LP-Form__InfoText {
+        .LP-Paragraph {
+            font-family: $-primary-sans-serif-font;
+            color: $-grey;
+        }
+    }
+}

components/03_Organisms/form/form.hbs

@@ -0,0 +1,87 @@
+
+<form class="LP-Form LP-Form--inline">
+    <fieldset class="LP-Form__Fieldset">
+		<legend class="LP-Form__Legend">Basic data</legend>
+        <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__Field--narrower">
+                <div class="LP-Input LP-Input--disabled">
+                    <label for="input123" class="LP-Input__Label">Age</label>
+                    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
+                </div>
+            </div>
+        </div>
+
+    </fieldset>
+</form>
+
+
+<form class="LP-Form">
+    <fieldset class="LP-Form__Fieldset">
+        <legend class="LP-Form__Legend">Basic data</legend>
+
+        <div class="LP-Form__Composition LP-Form__Composition--breakable">
+            <div class="LP-Form__Field">
+                <div class="LP-Input LP-Input--error">
+                    <label for="input123" class="LP-Input__Label">First name</label>
+                    <input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
+                    <span class="LP-Input__Message">Field is required</span>
+                </div>
+            </div>
+            <div class="LP-Form__Field">
+                <div class="LP-Input">
+                    <label for="input123" class="LP-Input__Label">Last name</label>
+                    <input type="text" id="input123" class="LP-Input__Field"/>
+                </div>
+            </div>
+            <div class="LP-Form__Field LP-Form__Field--narrower">
+                <div class="LP-Input LP-Input--disabled">
+                    <label for="input123" class="LP-Input__Label">Age</label>
+                    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
+                </div>
+            </div>
+        </div>
+
+        <div class="LP-Form__Composition">
+            <div class="LP-Form__Field LP-Form__Field--wider LP-Input">
+                <label for="input123" class="LP-Input__Label">Street</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">We won't send any stalkers, promise</span>
+            </div>
+            <div class="LP-Form__Field LP-Form__Field--narrower LP-Input">
+                <label for="input123" class="LP-Input__Label">No.</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">Field is required</span>
+            </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">ZIP</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+            </div>
+            <div class="LP-Form__Field LP-Form__Field--wide LP-Input">
+                <label for="input123" class="LP-Input__Label">Town</label>
+				<input type="text" id="input123" class="LP-Input__Field"/>
+            </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

@@ -1,16 +1,71 @@
+
+$-logo-height: 45px;
 .LP-Header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 70px;
+    height: 60px;
+    box-shadow: 0 0 2px $-light-brown;
+    grid-area: header;
+    background-color: white;
+    padding-left: 25px;
 
+    &__Navigation{
+        flex-grow: 2;
+    }
+    
     &__Logo {
-        max-width: 300px;
-        width: 35%;
-        object-fit:contain;
+        height: $-logo-height;
+        object-fit:cover;
+        max-height: 100%;
+        width: 225px;
+        overflow: hidden;
+        flex-shrink: 0;
+
+        .LP-Image{
+            height: 100%;
+        }
+    }
+}
+
+.LP-Header__UserInformation{
+    margin-right: 3%;
+    .LP-Paragraph{
+        font-family: $-primary-sans-serif-font;
+        white-space: nowrap;
     }
 
-    .LP-Header__Logo{
-        margin: 25px;
+    .LP-Link{
+        margin: 0 3px;
+        padding: 4px 4px;
     }
-}
+}
+
+@media(max-width: $-viewport-medium){
+    .LP-Header__Logo{
+        width: $-logo-height;
+        .LP-Image{
+            object-position: 0 0;
+            object-fit: cover;
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Header__Logo{
+        display: none;
+    }
+
+    .LP-Header__Navigation{
+        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/header/header.hbs

@@ -1,8 +1,10 @@
 <header class="LP-Header">
     <div class="LP-Header__Logo">
-        {{render '@logo'}}
+        {{> @image source='/images/logo.png'}}
     </div>
-    <div class="LP-Header__Navigation">
-        {{> @navigation}}
+    <div class="LP-Header__UserInformation">
+        <span class="LP-Paragraph">
+            Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
+            </span>
     </div>
 </header>

components/03_Organisms/imageGrid/_imageGrid.scss

@@ -0,0 +1,153 @@
+@use "sass:math";
+
+.LP-ImageGrid{
+
+	&__Container {
+		@include RV-Grid;
+		@include RV-Grid--fixedSize;
+		--fixedSize: var(--itemWidth);
+		--itemWidth: 290px;
+		--itemHeight: 200px;
+		list-style-type: none;
+		--gap: #{$-spacing-small};
+	}
+	
+    &__Item {
+		position: relative;
+		
+		.LP-Image {
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+		}
+
+		&--add {
+			.LP-Link {
+				width: 100%;
+				height: 100%;
+				position: relative;	
+				display: block;
+				background: $-almost-white;
+				transition: background .3s;
+
+				.LP-Icon {
+					width: $-spacing-large;
+					height: $-spacing-large;
+
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+			}
+
+			&:hover .LP-Link{
+				background-color: $-beige;
+			}
+		}
+	}
+
+	&__DeleteItem {
+		opacity: 0.7;
+		visibility: hidden;
+		position: absolute;
+		top: $-spacing-small;
+		right: $-spacing-small;
+		background-color: transparent;
+		border-radius: 50%;
+		transition: background .2s;
+
+		height: $-spacing-large;
+		width: $-spacing-large;
+
+		.LP-Link .LP-Icon{
+			height: #{$-spacing-small * 2};
+			width: #{$-spacing-small * 2};
+			position:relative;
+			left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
+			top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
+		}
+	}
+	
+	&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover { 
+		background-color: $-light-brown;
+		visibility: visible;
+	}
+	
+	&__LightBox {
+		visibility: hidden;
+		display: none;
+		position: fixed;
+		pointer-events: none;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba($-grey, .9);
+		padding: 2rem;
+		padding-bottom: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: 30;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+		
+		img {
+			object-fit: contain;
+		}
+
+		&:target {
+			visibility: visible;
+			display: grid;
+			grid-template-areas: 'picture picture' 'previous next';
+			grid-template-rows: 1fr 4rem;
+			grid-template-columns: 1fr 1fr;
+			pointer-events: initial;
+		}
+	}
+
+	&__FullSizeImage {
+		grid-area: picture;
+		justify-self: center;
+	}
+	
+	&__Previous{
+		grid-area: previous;
+		align-self: center;
+		justify-self: end;
+	}
+	
+	&__Next {
+		grid-area: next;
+		align-self: center;
+		justify-self: start;
+	}
+	
+	&__Previous, &__Next {
+		padding: 25px;
+		color: $-beige;
+		text-decoration: none;
+		font-family: $-primary-sans-serif-font;
+		font-weight: bold;
+		font-size: 20px;
+	}
+	
+	&__Close{
+		position: fixed;
+		right: 1rem;
+		top: 1rem;
+		left: unset;
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
+.LP-Select {
+	display: block;
+	cursor: pointer; 
+	transition: box-shadow .3s;
+}
+
+.LP-Select:checked, :checked + .LP-Select, .LP-Select--active {
+	box-shadow: 0 0 3px 3px #C09F80; 
+}

components/03_Organisms/imageGrid/imageGrid.config.json

@@ -0,0 +1,34 @@
+{
+    "context": {
+        "images": [
+			{
+            	"url": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+				"current_id": "image0",
+				"next_id": "image1"
+			},
+			{
+            	"url": "/images/photo_2020-05-02_18-11-21.jpg",
+				"previous_id": "image0",
+				"current_id": "image1",
+				"next_id": "image2"
+			},
+			{
+            	"url": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+				"previous_id": "image1",
+				"current_id": "image2",
+				"next_id": "image3"
+			},
+			{
+            	"url": "/images/photo_2020-05-02_18-11-21.jpg",
+				"previous_id": "image2",
+				"current_id": "image3",
+				"next_id": "image4"
+			},
+			{
+            	"url": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+				"previous_id": "image3",
+				"current_id": "image4"
+			}
+        ]
+    }
+}

components/03_Organisms/imageGrid/imageGrid.hbs

@@ -0,0 +1,36 @@
+
+<div class="LP-ImageGrid">
+    <ul class="LP-ImageGrid__Container">
+        {{#each images}}
+        <li class="LP-ImageGrid__Item">
+            <a href="#{{this.current_id}}" class="LP-Link">
+                <img  class="LP-Image" src="{{this.url}}">
+            </a>
+            <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
+                <a href="#" class="LP-Link">
+                    <img class="LP-Icon" src="/icons/cancel.svg"/>
+                </a>
+            </span>
+			<div id="{{this.current_id}}" class="LP-ImageGrid__LightBox">
+				<img class="LP-ImageGrid__FullSizeImage" src="{{this.url}}" loading="lazy"/>
+				{{#if this.next_id}}
+				<a href="#{{this.next_id}}" class="LP-ImageGrid__Next">Next</a>
+				{{/if}}
+				{{#if this.previous_id}}
+				<a href="#{{this.previous_id}}" class="LP-ImageGrid__Previous">Previous</a>
+				{{/if}}
+				<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
+					<a href="#" class="LP-Link">
+						<img class="LP-Icon" src="/icons/cancel.svg"/>
+					</a>
+				</span>
+			</div>
+        </li>
+        {{/each}}
+        <li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
+            <a class="LP-Link" href="#">
+                <img class="LP-Icon" src="/icons/plus.svg"/>
+            </a>
+        </li>
+    </ul>
+</div>

components/03_Organisms/introduction/_introduction.scss

@@ -1,10 +0,0 @@
-.LP-Introduction{
-
-    .LP-Headline{
-        font-size: 2rem;
-    }
-
-    .LP-Text{
-        font-size: 1.3rem;
-    }
-}

components/03_Organisms/introduction/introduction.config.json

@@ -1,3 +0,0 @@
-{
-    "context": {}
-}

components/03_Organisms/introduction/introduction.hbs

@@ -1,4 +0,0 @@
-
-<div class="LP-Introduction">
-    {{> @textsection headline='Welcome to the urban exploring registry' 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.'}}
-</div>

components/03_Organisms/linkList/_linkList.scss

@@ -1,59 +1,47 @@
-.LP-LinkList__List{
-    list-style-type: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 300px);
-    margin: 0;
-    padding: 0;
-
+.LP-LinkList{
+	@include RV-Grid;
+	@include RV-Grid--autoWidth;
+	--itemMinWidth: 350px;
+	--itemHeight: 3em;
+	align-items: center;
+	--icon-color: #{$-light-brown};
+	
+	.RV-Iconized__Icon {
+		font-size: calc(var(--itemHeight) * .75);
+		line-height: 1em;
+		color: var(--icon-color);
+		transition: color .2s;
+	}
+	
     .LP-LinkList__Item{
-        border-left: 1px solid $-secondary-accent-color;
-        width: 100%;
-        margin-top: 12px;
-        height: 55px;
+		font-weight: 500;
+		--color: #{$-grey};
+		border-left: 1px solid $-light-brown;
+		transition: background .2s;
+		height: 100%;
 
-        .LP-Link{
-            $-link-padding: 1em;
-            padding: $-link-padding 0 $-link-padding $-link-padding;
-            width: calc(100% - $-link-padding);
-            display: block;
-            color: $-secondary-color;
+		@include RV-Alignment--verticalCenter;
 
+		&:hover {
+			background-color: $-beige;
+			--icon-color: #{$-grey};
 
-            &--iconized{
-                padding-top: 0;
-                padding-bottom: 1.1em;
+			.LP-LinkList__ItemHover {
+				opacity: 1;
+			}
+		}
 
-                &:hover{
-                    background-color: #ccc !important;
-                }
+		&--addItem {
+			background-color: $-almost-white;
+			font-weight: bold;
+		}
+	}
 
-                .LP-Text{
-                    padding-top: .1em;
-                }
-            }
+	.LP-Link {
+		@include RV-Flex__Item;
+		padding-left: $-spacing-medium;
+		color: var(--color);
+		transition: color .2s;
+	}
 
-
-            &:hover{
-                background-color: $-secondary-background-color;
-                color: $-primary-accent-color;
-            }
-
-            .LP-Text{
-                color: inherit;
-            }
-        }
-    }
-}
-
-.LP-Link__Icon{
-    width: 2em;
-    height: 2em;
-    fill: $-primary-accent-color;
-    line-height: 5em;
-}
-
-.LP-LinkList__Item .LP-Link__Icon{
-    position: relative;
-    top: .7em;
-    margin-right: .6em;
 }

components/03_Organisms/linkList/linkList.hbs

@@ -1,19 +1,74 @@
-<ul class="LP-LinkList__List">
-    <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"><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">
-         <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"
-                xml:space="preserve">
-                <g>
-                    <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
-    v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
-                </g>
-            </svg>
-        </div>
-        <span class="LP-Text">Link hinzufügen</span></a></li>
+<ul class="LP-LinkList">
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				OSM
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-map-outline"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Google Maps
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-map-outline"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Photoalbum
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-camera-burst"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				YouTube Link
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-youtube"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Twitter Link
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-twitter"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Toller externer Blog
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-open-in-new"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item LP-LinkList__Item--addItem">
+		<a href="#" class="LP-Link">
+			<span class="LP-Text RV-Iconized">
+				<span class="RV-Iconized__Text">
+					Link Hinzufügen
+				</span>
+				<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+					<i class="mdi mdi-plus"></i>
+				</span>
+			</span>
+		</a>
+	</li>
 </ul>

components/03_Organisms/navigation/_navigation.scss

@@ -1,24 +0,0 @@
-.LP-Menu{
-    &__List {
-        list-style-type: none;
-        display: inline-flex;
-        justify-content: space-around;
-    }
-
-    &__Item {
-        padding: 10px 15px;
-        margin: 0 15px;
-        width: 100px;
-        text-align: center;
-        background-color: transparent;
-    }
-
-    .LP-Link__Text {
-        color: $-secondary-color;
-        font-weight: bold;
-        text-shadow: 0px 0px 20px white;
-        &:hover{
-            color: $-primary-accent-color;
-        }
-    }
-}

components/03_Organisms/navigation/navigation.config.json

@@ -1,3 +0,0 @@
-{
-    
-}

components/03_Organisms/navigation/navigation.hbs

@@ -1,7 +0,0 @@
-<nav class="LP-Menu">
-    <ul class="LP-Menu__List">
-        <li class="LP-Menu__Item">{{> @link text='Home'}}</li>
-        <li class="LP-Menu__Item">{{> @link text='About'}}</li>
-        <li class="LP-Menu__Item">{{> @link text='Contact'}}</li>
-    </ul>
-</nav>