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

@@ -7,4 +7,7 @@
 @import 'input/input';
 @import 'image/image';
 @import 'logo/logo';
-@import 'tag/tag';
+@import 'tag/tag';
+@import 'message/message';
+@import 'pagination/pagination';
+@import 'materialdesignicons/materialdesignicons';

components/01_Atoms/button/_button.scss

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

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

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

components/01_Atoms/checkbox/_checkbox.scss

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

@@ -5,7 +5,7 @@
     padding-top: 0px;
     margin-top: 0px;
     padding-bottom: 0px;
-    margin-bottom: 0px;
+    margin-bottom: 25px;
 
     &--main{
         position: relative;
@@ -15,5 +15,5 @@
 
     &--inline{
         display: inline;
-	}
+    }
-}
+}

components/01_Atoms/headline/headline.config.json

@@ -9,6 +9,6 @@
             "context": {
                 "modifier": "--main"
             }
-		}
+        }
     ]
 }

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

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

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

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

components/01_Atoms/image/image.hbs

@@ -1,23 +1 @@
-<img src="/images/photo_2020-05-02_18-11-21.jpg" class="LP-Image"/>
+<img src="{{source}}" class="LP-Image"/>
-
-<div style="height: 80px;width: 40px; background-color: green;">
-	<img src="/images/photo_2020-05-02_18-11-21.jpg" class="LP-Image"/>
-</div>
-
-<p></p>
-
-<div style="height: 40px;width: 80px;background-color: green;">
-	<img src="/images/photo_2020-05-02_18-11-21.jpg" class="LP-Image"/>
-</div>
-
-<p></p>
-
-<div style="height: 80px;width: 40px;background-color: green;">
-	<img src="/images/ice-vertical-panorama.jpg" class="LP-Image"/>
-</div>
-
-<p></p>
-
-<div style="height: 40px;width: 80px;background-color: green;">
-	<img src="/images/ice-vertical-panorama.jpg" class="LP-Image"/>
-</div>

components/01_Atoms/input/_input.scss

@@ -1,76 +1,115 @@
-.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 $-grey;
-        padding: 8px;
+        padding: 8px 0;
         margin-bottom: $-margin-bottom;
+        width: 100%;
 
-        &:focus, &:active{
+        &:focus,
+        &:active,
+        &:invalid,
+        &--active {
             margin-bottom: $-margin-bottom - 1px;
             border-bottom: 2px solid $-wine-red;
             background-color: $-almost-white;
             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{
+    .LP-Input__Label {
         font-family: $-primary-sans-serif-font;
-		font-size: 16px;
+        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;
-
+        overflow: hidden;
-        &:before{
-            content: '* ';
-        }
     }
 
-    &--error{
+    &--error {
-        .LP-Input__Field{
+        .LP-Input__Field {
             margin-bottom: 25px;
             border-bottom: 2px solid $-wine-red;
             margin-bottom: $-margin-bottom - 1px;
         }
 
-        .LP-Input__Message{
+        .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{
+    &--disabled {
-				margin-bottom: $-margin-bottom;
-				border-radius: 0;
-			}
 
-			~.LP-Input__Message{
+        .LP-Input__Field,
-				visibility: hidden;
+        .LP-Input__Field:disabled {
-			}				
+            background-color: transparent;
-		}
+            border-bottom: 1px dashed $-grey;
+            cursor: not-allowed;
 
-		.LP-Input__Label{
+            label+& {
-			color: $-grey;
+                color: red;
-		}
+            }
-	}
+
-}
+            &:focus,
+            &:active {
+                margin-bottom: $-margin-bottom;
+                border-radius: 0;
+            }
+
+            ~.LP-Input__Message {
+                visibility: hidden;
+            }
+        }
+
+        .LP-Input__Label {
+            color: $-grey;
+        }
+    }
+}

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

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

components/01_Atoms/input/input.hbs

@@ -1,11 +1,10 @@
 <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}}
+    {{#if disabled}}
-		disabled="disabled"
+        disabled="disabled"
-	{{/if}}
+    {{/if}}
-	/>
+    {{#if message}}
-	{{#if message}}
     <span class="LP-Input__Message">{{message}}</span>
-	{{/if}}
+    {{/if}}
 </div>

components/01_Atoms/link/_link.scss

@@ -1,19 +1,9 @@
 .LP-Link {
-    color: $-grey;
+    color: $-light-brown;
     text-decoration: none;
-    font-family: $-primary-sans-serif-accent-font;
+    font-family: $-primary-sans-serif-font;
     &:hover {
-        color: $-light-brown;
+        color: $-grey;
+		text-decoration: underline;
     }
-
-    .LP-Text{
-        font-family: $-primary-sans-serif-accent-font;
-        &:hover{
-            color: $-light-brown;
-        }
-    }
-}
-
-.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

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

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

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

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

components/01_Atoms/paragraph/paragraph.hbs

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

components/01_Atoms/tag/_tag.scss

@@ -1,14 +1,39 @@
-.LP-Tag{
+.LP-Tag {
-	padding: 8px 14px;
+    padding: 8px 14px;
-	background-color: #D7CEC7;
+    background-color: $-beige;
-	border-radius: 2px;
+    border-radius: 2px;
-	width: max-content;
+    width: max-content;
-
+    @include RV-Flex;
-	.LP-Paragraph{
+    height: min-content;
-		padding: 0;
+    gap: 3px;
-		margin: 0;
+    transition: background .3s;
-		font-family: $-primary-sans-serif-font;
+	
-		font-size: 1em;
+	.LP-Link {
-		display: inline;
+		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

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

components/01_Atoms/tag/tag.hbs

@@ -1,3 +1,13 @@
 <div class="LP-Tag">
-	{{> @paragraph text=text}}
+    {{> @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/02_Molecules/_molecules.scss

@@ -1,3 +1,7 @@
 @import 'textSection/textSection';
 @import 'placeTeaser/placeTeaser';
-@import 'tagList/tagList';
+@import 'tagList/tagList';
+@import 'navigation/navigation';
+@import 'messageList/messageList';
+@import 'userInfo/userInfo';
+@import 'voting/voting';

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/placeTeaser/_placeTeaser.scss

@@ -1,93 +1,16 @@
-.LP-PlaceTeaser{
+.LP-PlaceTeaser {
-	width: 280px;
+	@include RV-Turner(200px, 280px);
-
+	@include RV-Turner--auto;
-    .LP-PlaceTeaser__Image{
+	
-		height: 165px;
+	&__Image {
-		width: 280px;
+		@include RV-Turner__Base;
-		overflow: hidden;
-
-		.LP-Image{
-			max-width:unset;
-			max-height:unset;
-			object-fit: cover;
-		}
-    }
-
-    .LP-PlaceTeaser__Meta{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-		padding-bottom: 10px;
 		
-		.LP-Paragraph{
+		.LP-Image {
-			font-family: $-primary-sans-serif-font;
+			height: 100%;
-			padding: 0;
-			margin: 0;
-			margin-top: 5px;
-			font-size: 0.9rem;
 		}
-
-		.LP-Headline{
-			font-family: $-primary-sans-serif-font;
-			color: $-grey;
-			font-size: 1rem;
-			padding: 0px;
-			margin: 0px;
-		}
-    }
-
-	.LP-PlaceTeaser__Description{
-		font-family: $-primary-sans-serif-accent-font;
-		color: $-grey;
-		display: none;
 	}
-}
+	
-
+	&__Meta {
-@media(min-width: $-viewport-small){
+		@include RV-Turner__Content;
-	.LP-PlaceTeaser--extended{
-		display: flex;
-		flex-direction: row;
-		width: auto;
-		padding-right: 25px;
-		height: 165px;
-
-		.LP-PlaceTeaser__Meta{
-			margin: 0;
-			padding: 5px;
-			padding-left: 25px;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			align-items: flex-start;
-
-			.LP-PlaceTeaser__Info{
-				.LP-Headline{
-					font-size: 28px;
-				}
-			}
-
-			.LP-PlaceTeaser__Icons{
-				margin-top: auto;
-				
-				ul{
-					padding: 0;
-					margin: 0;
-				}
-			}
-		}
-
-		.LP-PlaceTeaser__Description{
-			display: block;
-			max-height: 55px;
-			overflow: hidden;
-		}
-
-		.LP-PlaceTeaser__Image{
-			height:165px;
-			width: 280px;
-			flex-shrink: 0;
-			flex-grow: 0;
-			
-		}
 	}
 }

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

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

components/02_Molecules/placeTeaser/placeTeaser.hbs

@@ -1,21 +1,23 @@
 <article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
-	<div class="LP-PlaceTeaser__Image">
+    <div class="LP-PlaceTeaser__Image">
-		    <img class="LP-Image" src="{{image}}"/>
+        <img class="LP-Image" src="{{image}}"/>
-	</div>
+    </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__Title">{{> @headline headline=title modifier='--teaser'}}</span>
             <span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span>
         </div>
-		<div class="LP-PlaceTeaser__Description">
+        <div class="LP-PlaceTeaser__Description">
-			{{> @paragraph text=description}}
+            {{> @paragraph text=description}}
-		</div>
+        </div>
-		<div class="LP-PlaceTeaser__Icons">
+        <div class="LP-PlaceTeaser__Icons">
-			<ul class="LP-Icon__List">
+            <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/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/location.svg"/></li>
-				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
-			</ul>
+            </ul>
-		</div>
+        </div>
     </div>
 </article>

components/02_Molecules/tagList/_tagList.scss

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

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

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

components/02_Molecules/tagList/tagList.hbs

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

components/02_Molecules/textSection/_textSection.scss

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

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

@@ -1,6 +1,8 @@
 {
-	"context": {
+    "context": {
-		"headline": "At vero eos et accusam et justo duo dolores",
+        "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."
+        "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}}
+    <header class="LP-TextSection__Headline">
-    {{> @paragraph text=text}}
+        {{> @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.config.json

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

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 'placeGrid/placeGrid';
 @import 'placeList/placeList';
 @import 'linkList/linkList';
 @import 'footer/footer';
-@import 'form/form';
+@import 'form/form';
+@import 'imageGrid/imageGrid';
+@import 'osmMap/osmMap';
+@import 'userProfile/userProfile';

components/03_Organisms/footer/_footer.scss

@@ -1,30 +1,275 @@
-.LP-Footer{
+// Define easily accessible color-defaults for the footer.
-    margin-top: 75px;
+$-primary-link-color: $-beige;
+$-primary-line-color: $-almost-white;
+
+.LP-Footer {
+    margin: auto;
+    background: $-grey;
     width: 100%;
-    background-color: $-grey;
+    font-family: $-primary-sans-serif-font;
-    padding: 25px;
+    font-size: 1rem;
 
-    .LP-LinkList__List{
+    &Columns__Container {
-        display: flex;
+        @include RV-BreakPoint;
-        align-items: center;
+        --breakPoint: 750px;
         justify-content: center;
-        .LP-LinkList__Item{
+    }
-            border: none;
-            padding: 5px;
-            width: auto;
 
-            .LP-Text{
+    &Columns__Item {
-                color: $-almost-white;
+        @include RV-BreakPoint__Item;
-                font-size: 17px;
+    }
-            }
 
-            .LP-Link{
+    * {
-                display: inline;
+        box-sizing: border-box;
+    }
 
-                &:hover{
+    ul {
-                    background-color: inherit;
+        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">
+<footer class="LP-Footer">
-        <ul class="LP-LinkList__List">
+    <div class="LP-FooterColumns__Container">
-            <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>
+        <!-- 1st footer column -->
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Datenschutz</span></a></li>
+        <div class="LP-FooterColumns__Item">
-        </ul>
+            <ul class="LP-Footer__ListTop">
-</article>
+                <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

@@ -1,71 +1,93 @@
-.LP-Form{
+.LP-Form {
-    max-width: 900px;
-    .LP-Form__Fieldset{
-        border: none;
 
-        .LP-Form__Legend{
+    &--tagging {
-            margin: 0;
+        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;
         }
+    }
 
-        .LP-Form__Composition{
+    &:not(.LP-Form--inline) {
-            display: flex;
+        .LP-Form__Composition {
-            flex-direction: row;
+            @media(max-width: $-viewport-extra-small) {
-            justify-content: space-between;
+                @include RV-Flex--wrap;
-
-            .LP-Form__Field{
-                flex: 3 1 100px;
-                padding: 6px 15px;
-
-                &--wider{
-                    flex: 5 1 200px;
-                }
-
-                &--wide{
-                    flex: 4 1 150px;
-                }
-
-                &--narrow{
-                    flex: 2 0 50px;
-                }
-
-                &--narrower{
-                    flex: 1 0 25px;
-                }
-
-                input{
-                    width: 100%;
-                }
             }
         }
+
+        .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;
+        }
     }
 }
-
-@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;
-					padding: 12px 15px;
-                }
-            }
-        }
-    }
-}

components/03_Organisms/form/form.hbs

@@ -1,28 +1,48 @@
+
+<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">
+                <div class="LP-Input LP-Input--error">
-					<label for="input123" class="LP-Input__Label">First name</label>
+                    <label for="input123" class="LP-Input__Label">First name</label>
-					<input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
+                    <input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
-					<span class="LP-Input__Message">Field is required</span>
+                    <span class="LP-Input__Message">Field is required</span>
-				</div>
+                </div>
             </div>
             <div class="LP-Form__Field">
-				<div class="LP-Input">
+                <div class="LP-Input">
-                	<label for="input123" class="LP-Input__Label">Last name</label>
+                    <label for="input123" class="LP-Input__Label">Last name</label>
-                	<input type="text" id="input123" class="LP-Input__Field"/>
+                    <input type="text" id="input123" class="LP-Input__Field"/>
-				</div>
+                </div>
             </div>
-			<div class="LP-Form__Field LP-Form__Field--narrower">
+            <div class="LP-Form__Field LP-Form__Field--narrower">
-				<div class="LP-Input LP-Input--disabled">
+                <div class="LP-Input LP-Input--disabled">
-					<label for="input123" class="LP-Input__Label">Age</label>
+                    <label for="input123" class="LP-Input__Label">Age</label>
-					<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
+                    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
-				</div>
+                </div>
-			</div>
+            </div>
-		</div>
+        </div>
 
         <div class="LP-Form__Composition">
             <div class="LP-Form__Field LP-Form__Field--wider LP-Input">
@@ -30,21 +50,36 @@
                 <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--narrow LP-Input">
+            <div class="LP-Form__Field LP-Form__Field--narrower LP-Input">
-                <label for="input123" class="LP-Input__Label">House no</label>
+                <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">Postal Code</label>
+                <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"/>
+				<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>
 

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;
+        height: $-logo-height;
-        width: 35%;
+        object-fit:cover;
-        object-fit:contain;
+        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{
+    .LP-Link{
-        margin: 25px;
+        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">
+    <div class="LP-Header__UserInformation">
-        {{> @navigation}}
+        <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/linkList/_linkList.scss

@@ -1,58 +1,47 @@
-.LP-LinkList__List{
+.LP-LinkList{
-    list-style-type: none;
+	@include RV-Grid;
-    display: grid;
+	@include RV-Grid--autoWidth;
-    grid-template-columns: repeat(auto-fit, 300px);
+	--itemMinWidth: 350px;
-    margin: 0;
+	--itemHeight: 3em;
-    padding: 0;
+	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 $-light-brown;
+		font-weight: 500;
-        width: 100%;
+		--color: #{$-grey};
-        margin-top: 12px;
+		border-left: 1px solid $-light-brown;
+		transition: background .2s;
+		height: 100%;
 
-        .LP-Link{
+		@include RV-Alignment--verticalCenter;
-            $-link-padding: 1em;
-            padding: $-link-padding 0 $-link-padding $-link-padding;
-            width: calc(100% - $-link-padding);
-            display: block;
-            color: $-grey;
 
+		&:hover {
+			background-color: $-beige;
+			--icon-color: #{$-grey};
 
-            &--iconized{
+			.LP-LinkList__ItemHover {
-                padding-top: 0;
+				opacity: 1;
-                padding-bottom: 1.1em;
+			}
+		}
 
-                &:hover{
+		&--addItem {
-                    background-color: #ccc !important;
+			background-color: $-almost-white;
-                }
+			font-weight: bold;
+		}
+	}
 
-                .LP-Text{
+	.LP-Link {
-                    padding-top: .1em;
+		@include RV-Flex__Item;
-                }
+		padding-left: $-spacing-medium;
-            }
+		color: var(--color);
+		transition: color .2s;
+	}
 
-
-            &:hover{
-                background-color: $-almost-white;
-                color: $-wine-red;
-            }
-
-            .LP-Text{
-                color: inherit;
-            }
-        }
-    }
-}
-
-.LP-Link__Icon{
-    width: 2em;
-    height: 2em;
-    fill: $-wine-red;
-    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">
+<ul class="LP-LinkList">
-    <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">
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
+		<span class="LP-Text RV-Iconized">
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
+			<span class="RV-Iconized__Text">
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
+				OSM
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
+			</span>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
-         <div class="LP-Link__IconWrapper">
+				<i class="mdi mdi-map-outline"></i>
-            <svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+			</span>
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+		</span></a>
-                xml:space="preserve">
+	</li>
-                <g>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
-                    <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
+		<span class="LP-Text RV-Iconized">
-    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" />
+			<span class="RV-Iconized__Text">
-                </g>
+				Google Maps
-            </svg>
+			</span>
-        </div>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
-        <span class="LP-Text">Link hinzufügen</span></a></li>
+				<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: $-grey;
-        font-weight: bold;
-        text-shadow: 0px 0px 20px white;
-        &:hover{
-            color: $-wine-red;
-        }
-    }
-}

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>

components/03_Organisms/osmMap/_osmMap.scss

@@ -0,0 +1,47 @@
+.LP-Map {
+    margin-bottom: $-spacing-medium;
+
+    &--wide {
+        height: 300px;
+    }
+
+    &--full {
+        height: 100%;
+        width: 100%;
+    }
+
+    .ol-attribution {
+        font-family: $-primary-sans-serif-font;
+        color: $-grey;
+
+        a {
+            color: $-light-brown;
+
+            &:hover,
+            &:focus {
+                color: $-beige;
+            }
+        }
+    }
+
+    .ol-zoom {
+
+        &-in,
+        &-out {
+            background-color: $-light-brown;
+
+            &:hover,
+            &:focus {
+                background-color: $-grey;
+            }
+        }
+    }
+
+    .LP-Map__Popup {
+        font-family: $-primary-sans-serif-font;
+        color: $-grey;
+        background-color: $-almost-white;
+        padding: .5em;
+        border-radius: 2px;
+    }
+}

components/03_Organisms/osmMap/osmMap.config.json

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

components/03_Organisms/placeGrid/_placeGrid.scss

@@ -1,22 +1,27 @@
 .LP-PlaceGrid{
-	.LP-PlaceGrid__Grid{
+    .LP-PlaceGrid__Grid{
-		margin: 0;
+        margin: 0;
-		padding: 0;
+        padding: 0;
-		list-style-type: none;
+        list-style-type: none;
-		display: flex;
+		@include RV-Grid;
-		flex-direction: row;
+		@include RV-Grid--autoWidth;
-		flex-wrap: wrap;
+		--itemHeight: 200px;
+		--itemMinWidth: 280px;
+		--gap: 15px;
+		padding: 15px;
+		justify-content: center;
+		
 
-		.LP-PlaceGrid__Item{
+        .LP-PlaceGrid__Item{
-			margin: 18px;
+            @include RV-Grid__Item;
-		}
+        }
 
-		.LP-Link{
+        .LP-Link{
-			.LP-PlaceTeaser{
+            .LP-PlaceTeaser{
-				&:hover{
+                &:hover{
-					box-shadow: 0 0 2px $-grey;
+                    box-shadow: 0 0 2px $-grey;
-				}
+                }
-			}
+            }
-		}
+        }
-	}
+    }
-}
+}

components/03_Organisms/placeGrid/placeGrid.config.json

@@ -1,31 +1,31 @@
 {
-	"title": "PlaceGrid",
+    "title": "PlaceGrid",
-	"context":{
+    "context":{
-		"places": [
+        "places": [
-			{
+            {
-				"image": "/images/photo_2020-04-09_18-27-13.jpg",
+                "image": "/images/photo_2020-04-09_18-27-13.jpg",
-				"name": "Haus Maikotten",
+                "name": "Haus Maikotten",
-				"location": "Münster (westfalen)",
+                "location": "Münster (westfalen)",
-				"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-			},
+            },
-			{
+            {
-				"image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+                "image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
-				"name": "Kokerei in Hamm",
+                "name": "Kokerei in Hamm",
-				"location": "Hamm (westfalen)",
+                "location": "Hamm (westfalen)",
-				"description": ""
+                "description": ""
-			},
+            },
-			{
+            {
-				"image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+                "image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
-				"name": "Noch ein Zementwerk",
+                "name": "Noch ein Zementwerk",
-				"location": "Beckum (Westfalen)",
+                "location": "Beckum (Westfalen)",
-				"description": ""
+                "description": ""
-			},
+            },
-			{
+            {
-				"image": "/images/photo_2020-05-02_18-11-21.jpg",
+                "image": "/images/photo_2020-05-02_18-11-21.jpg",
-				"name": "Zementwerk Mersmann",
+                "name": "Zementwerk Mersmann",
-				"location": "Beckum (Westfalen)",
+                "location": "Beckum (Westfalen)",
-				"description": ""
+                "description": ""
-			}
+            }
-		]
+        ]
-	}
+    }
 }

components/03_Organisms/placeGrid/placeGrid.hbs

@@ -1,12 +1,12 @@
 <div class="LP-PlaceGrid">
-	{{> @headline headline='Explorere the latest locations'}}
+    {{> @headline headline='Explorere the latest locations'}}
-	<ul class="LP-PlaceGrid__Grid">
+    <ul class="LP-PlaceGrid__Grid">
-		{{#each places}}
+        {{#each places}}
-			<li class="LP-PlaceGrid__Item">
+            <li class="LP-PlaceGrid__Item">
-				<a href="#" class="LP-Link">
+                <a href="#" class="LP-Link">
-					{{> @placeteaser image=this.image title=this.name location=this.location description=this.description}}
+                    {{> @placeteaser image=this.image title=this.name location=this.location description=this.description}}
-				</a>
+                </a>
-			</li>
+            </li>
-		{{/each}}
+        {{/each}}
-	</ul>
+    </ul>
 </div>

components/03_Organisms/placeList/_placeList.scss

@@ -1,28 +1,37 @@
 .LP-PlaceList{
-	.LP-PlaceList__List{
+    .LP-PlaceList__List{
-		list-style-type: none;
+        list-style-type: none;
-	
+        padding: 0;
-		.LP-Link{
+        margin: 0;
-			.LP-Place{
+    
-				&:hover{
+        .LP-Link{
-					color: $-grey;
+            .LP-Place{
-					background-color: $-almost-white;
+                &:hover{
-					
+                    color: $-grey;
-		
+                    background-color: $-almost-white;
-					$-hover-offset: 2px;
+                    
-					position: relative;
+        
-					left: -$-hover-offset;
+                    $-hover-offset: 2px;
-					>.LP-Place__Image{
+                    position: relative;
-						border-left: $-hover-offset $-grey solid;
+                    left: -$-hover-offset;
-					}
+                    >.LP-Place__Image{
-				}
+                        border-left: $-hover-offset $-grey solid;
-			}
+                    }
-		}
+                }
-	
+            }
-		.LP-PlaceList__Item{
+        }
-			max-width: 900px;
+    
-			min-width: 450px;
+        .LP-PlaceList__Item{
-			margin: 18px 0;
+            max-width: 900px;
-		}
+            //min-width: 450px;
-	}
+            margin: 18px 0;
-}
+            @media (max-width: $-viewport-medium) {
+                width: 100%;
+            }
+        }
+    }
+    
+    .LP-Pagination{
+        margin-top: 50px;
+    }
+}

components/03_Organisms/placeList/placeList.config.json

@@ -1,31 +1,31 @@
 {
-	"title": "PlaceList",
+    "title": "PlaceList",
-	"context": {
+    "context": {
-		"places": [
+        "places": [
-			{
+            {
-				"image": "/images/photo_2020-04-09_18-27-13.jpg",
+                "image": "/images/photo_2020-04-09_18-27-13.jpg",
-				"name": "Haus Maikotten",
+                "name": "Haus Maikotten",
-				"location": "Münster (westfalen)",
+                "location": "Münster (westfalen)",
-				"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-			},
+            },
-			{
+            {
-				"image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+                "image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
-				"name": "Kokerei in Hamm",
+                "name": "Kokerei in Hamm",
-				"location": "Hamm (westfalen)",
+                "location": "Hamm (westfalen)",
-				"description": ""
+                "description": ""
-			},
+            },
-			{
+            {
-				"image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+                "image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
-				"name": "Noch ein Zementwerk",
+                "name": "Noch ein Zementwerk",
-				"location": "Beckum (Westfalen)",
+                "location": "Beckum (Westfalen)",
-				"description": ""
+                "description": ""
-			},
+            },
-			{
+            {
-				"image": "/images/photo_2020-05-02_18-11-21.jpg",
+                "image": "/images/photo_2020-05-02_18-11-21.jpg",
-				"name": "Zementwerk Mersmann",
+                "name": "Zementwerk Mersmann",
-				"location": "Beckum (Westfalen)",
+                "location": "Beckum (Westfalen)",
-				"description": ""
+                "description": ""
-			}
+            }
-		]
+        ]
-	}
+    }
 }

components/03_Organisms/placeList/placeList.hbs

@@ -1,12 +1,13 @@
 <div class="LP-PlaceList">
-	{{> @headline headline='Listing our places'}}
+    {{> @headline headline='Listing our places'}}
-	<ul class="LP-PlaceList__List">
+    <ul class="LP-PlaceList__List">
-		{{#each places}}
+        {{#each places}}
-			<li class="LP-PlaceList__Item">
+            <li class="LP-PlaceList__Item">
-				<a href="#" class="LP-Link">
+                <a href="#" class="LP-Link">
-					{{> @placeteaser image=this.image title=this.name location=this.location description=this.description modifier='--extended'}}
+                    {{> @placeteaser image=this.image title=this.name location=this.location description=this.description modifier='--extended'}}
-				</a>
+                </a>
-			</li>
+            </li>
-		{{/each}}
+        {{/each}}
-	</ul>
+    </ul>
+    {{> @pagination}}
 </div>

components/03_Organisms/userProfile/_userProfile.scss

@@ -0,0 +1,16 @@
+.LP-UserProfile {
+    display: flex;
+    flex-direction: row;
+
+    &__Bio {
+        flex-grow: 5;
+        flex-shrink: 10;
+        padding-right: $-spacing-large;
+    }
+
+    &__Info {
+        flex-grow: 10;
+        flex-shrink: 1;
+        flex-basis: max-content;
+    }
+}

components/03_Organisms/userProfile/userProfile.config.json

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

components/03_Organisms/userProfile/userProfile.hbs

@@ -0,0 +1,11 @@
+<div class="LP-UserProfile">
+	<div class="LP-UserProfile__Bio">
+		<h2 class="LP-Headline">Bio</h2>
+		<p class="LP-Paragraph">Natus id quaerat aperiam. Dolore tempora repellendus atque. Facilis quidem eum dolore incidunt aut voluptatibus ex culpa. Consectetur est explicabo ut fugit.
+Et illum cumque recusandae et. Nisi et aspernatur non qui architecto. Beatae molestias hic beatae in doloremque dolores nihil libero. Rerum voluptas tempora laborum est quae quaerat.
+Maiores fuga voluptatem laborum ut sit eum itaque. Molestiae molestiae non consequatur expedita. Explicabo sit a qui omnis.</p>
+	</div>
+	<div class="LP-UserProfile__Info">
+		{{> @userinfo }}
+	</div>
+</div>

components/04_Templates/_templates.scss

@@ -1,2 +1,3 @@
 @import 'home/home';
-@import 'placeOverview/placeOverview';
+@import 'placeDetail/placeDetail';
+@import 'codex/codex';

components/04_Templates/codex/_codex.scss

@@ -0,0 +1,13 @@
+.LP-TextSection {
+
+    .LP-UnorderedList {
+        font-family: $-primary-serif-font;
+        font-size: 1.4rem;
+        li{
+            margin-bottom: 0.75em;
+            list-style-type: square;
+            margin-left: 2em;
+            padding-left: 1em;
+        }
+    }
+}

components/04_Templates/codex/codex.config.json

@@ -0,0 +1,4 @@
+{
+    "title": "UrBex codex",
+    "status": "wip"
+}

components/04_Templates/codex/codex.hbs

@@ -0,0 +1,44 @@
+<header class="LP-TextSection__Headline">
+    <h1 class="LP-Headline">Take nothing but pictures. Leave nothing but footprints.</h1>
+</header>
+
+<article class="LP-TextSection">
+
+<p class="LP-Paragraph">This should be pretty self-explanatory, right? But as you all know, every sign has a history. We have seen too much senseless destruction so we decided to write down a basic Urban Exploration codex.</p>
+    <ul class="LP-UnorderedList">
+        <li>
+            <b>We respect other people's property</b>, just as we demand it from others. Therefore we do not open access by force, or damage a locking device. We only enter a property or a building / a facility / a ruin if we can assume that we am not there against the will of the owner. A well-preserved fence or a permanent guard indicates that the owner is still dealing with his property. Fences that have long since collapsed, ruins in the final stages of decay, are more likely to indicate that the owner doesn't care.
+        </li>
+        <li>
+            <b>We take nothing from a location</b>, not even "small souvenirs", and leave nothing there — no cigarettes, no waste — nothing. 
+            <b>We do not change anything in the location.</b>
+        </li>
+        <li>
+            We don't smoke if possible. Not only, because it smells bad and causes litter, there is always the chance, to set anything on fire with flying sparks. Let it be dry leaves on a hot summer day or (poentially) flammable materials in industrial plants.
+        </li>
+        <li>    
+            <b>Spraying is an absolute "no-go"!</b>
+        </li>
+        <li>    
+            <b>In a location we are careful not to endanger ourselves or others.</b> We don't throw anything into holes or out of windows, and we don't touch electrical equipment. You can't tell from its look or sound if the power is really switched off. Therefore we do not open bottles and other containers. We never go into a dark room without light, and always have a spare lamp with us.
+        </li>
+        <li>    
+            <b>Before my tour we tell at least one person of my trust where we are</b> (coordinates!), how long we will be there and what we will do there. We arrange that we will contact him regularly if we stay there for a longer period of time, or give an "okay" when we have left the location again. If we am late, we will remember to send a message to that effect. Our contact person is supposed to provide help after a certain period of time if he does not hear from me.
+        </li>
+        <li>
+            <b>We prepare my tour carefully.</b> It is annoying when the camera batteries are not charged — but it is not dangerous at all. But it is life-threatening if you step unto a dirty nail that perforates your shoe. It is wise to wear sturdy shoes. When we go underground, we take appropiate equipment with us to protect ourselves — e. g. a gas warner or even a geiger counter.
+        </li>
+        <li>
+            <b>We do not park in such a way that third parties become aware of my intention.</b> Our hobby does not need public attention, which is directed to illegal entering of properties (and illegal entering is probably the most common way ...).
+        </li>
+        <li>
+            <b>We do not disclose our locations</b> and only publish photos where geodata has been removed from the files (EXIF). Therefore we only post from my smartphone when we am absolutely sure that no coordinates are contained in the picture.
+        </li>
+        <li>
+            <b>Above all, we keep my mouth shut</b> and don't brag about a great, still untouched looking location. You often don't even know your "friends" in Facebook personally, especially not in a group. Nothing spreads faster than a "secret" that has been passed on under the seal of trust. Do you want to be responsible for brainless sprayers destroying this place too?
+        </li>
+        <li>
+            <b>We make sure through argument and conviction that my companions behave the same way!</b> First and foremost we try to convince through our own behavior.
+        </li>
+    </ul>
+</article>

components/04_Templates/home/_home.scss

@@ -5,4 +5,11 @@
 
 .LP-HorizontalLine{
     color: $-grey;
-}
+}
+
+@media(max-width: $-viewport-small){
+    .LP-MainContainer {
+        width: 100%;
+    }
+    
+}

components/04_Templates/home/home.config.json

@@ -1 +1,33 @@
-{}
+{
+    "context":{
+        "paragraphs": [
+            "Welcome to our Urban Exploration community catalogue, explorer", "We strictly follow our UrBex codex and expect you to do so, too.", "You can create, view and share your favorite lost places with other members of this site. You can upload photos, place links to your web galleries and contribute your knowledge by tagging other places or commenting on them. You will find detailed information on where these locations are, how to get there and what to expect from them. This might even include detailed information on the surroundings or the history of a lost place.", "Since vandalism is a growing problem these days, no sensitive information is available to the public. You have to sign up with a voucher code as an invitation to join this community. Only admins can create these codes. Usually you are given a code when we know you in real life in person. A request from an unknown person will most probably be denied."
+        ],
+        "places": [
+            {
+                "image": "/images/photo_2020-04-09_18-27-13.jpg",
+                "name": "Haus Maikotten",
+                "location": "Münster (westfalen)",
+                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+            },
+            {
+                "image": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+                "name": "Kokerei in Hamm",
+                "location": "Hamm (westfalen)",
+                "description": ""
+            },
+            {
+                "image": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+                "name": "Noch ein Zementwerk",
+                "location": "Beckum (Westfalen)",
+                "description": ""
+            },
+            {
+                "image": "/images/photo_2020-05-02_18-11-21.jpg",
+                "name": "Zementwerk Mersmann",
+                "location": "Beckum (Westfalen)",
+                "description": ""
+            }
+        ]
+    }
+}