Anpassen Placelevel im PlaceDetail View

Unnötige Dependency
sync
2021-12-29 14:41:19 +01:00 · 2021-12-29 14:41:06 +01:00 · 2021-12-29 13:52:57 +01:00 · 2021-11-21 13:26:37 +01:00 · 2021-11-01 09:49:58 +01:00 · 2021-11-01 09:47:33 +01:00
165 changed files with 58918 additions and 6951 deletions
--- a/.gitignore
+++ b/.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
--- a/components/01_Atoms/_atoms.scss
+++ b/components/01_Atoms/_atoms.scss
@@ -8,3 +8,6 @@
@import 'image/image';
@import 'logo/logo';
@import 'tag/tag';
+@import 'message/message';
+@import 'pagination/pagination';
+@import 'materialdesignicons/materialdesignicons';
--- a/components/01_Atoms/button/_button.scss
+++ b/components/01_Atoms/button/_button.scss
@@ -1,17 +1,35 @@
-.LP-Button{
-	background-color: $-light-brown;
-	color: $-grey;
-	border: none;
-	padding: 8px 14px;
-	border-radius: 2px;
-	font-weight: bold;
+.LP-Button {
+    background-color: $-light-brown;
+    color: $-grey;
+    border: none;
+    padding: 8px 14px;
+    border-radius: 2px;
+    font-weight: bold;
+    cursor: pointer;
+    white-space: nowrap;
  
-	&:active{
-		background-color: $-wine-red;
-		color:$-almost-white;
-	}
+    &--fullWidth {
+        text-align: center;
+    }

-	&--cancel{
-		background-color: $-almost-white;
-	}
+    &.LP-Link {
+        display: block;
+        &:hover {
+            color: $-almost-white
+        }
+    }
+    &:active {
+        background-color: $-wine-red;
+        color: $-almost-white;
+    }
+
+    &--cancel {
+        background-color: $-grey;
+        color: $-almost-white;
+
+        &:active {
+            color: $-grey;
+            background-color: $-almost-white;
+        }
+    }
 }
--- a/components/01_Atoms/button/button.config.json
+++ b/components/01_Atoms/button/button.config.json
@@ -1,14 +1,14 @@
 {
-	"title": "Button",
-	"context":{
-		"text": "Click me"
-	},
-	"variants": [
-		{
-			"name": "Cancel Button",
-			"context": {
-				"modifier": "--cancel"
-			}
-		}
-	]
+    "title": "Button",
+    "context":{
+        "text": "Click me"
+    },
+    "variants": [
+        {
+            "name": "Cancel Button",
+            "context": {
+                "modifier": "--cancel"
+            }
+        }
+    ]
 }
--- a/components/01_Atoms/checkbox/_checkbox.scss
+++ b/components/01_Atoms/checkbox/_checkbox.scss
@@ -1,13 +1,17 @@
 .LP-Form{
-	.LP-Form__Checkbox{
-			display: none;
-	}	
+    .LP-Form__Checkbox{
+        display: none;
 		
-	.LP-Form__CheckBox__CheckMark{
-		height: 1em;
-		width: 1em;
-		border: 1px solid black;
-		padding: 0 calc(.5em + 2px);
-		margin-right: .7em;
-	}
+		&:checked + .LP-Form__CheckBox__CheckMark {
+			background-color: $-light-brown;
+		}
+    }   
+
+    .LP-Form__CheckBox__CheckMark{
+        height: 1em;
+        width: 1em;
+        border: 1px solid $-grey;
+        padding: 0 calc(.5em + 2px);
+        margin-right: .7em;
+    }
 }
--- a/components/01_Atoms/checkbox/checkbox.hbs
+++ b/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>
--- a/components/01_Atoms/headline/_headline.scss
+++ b/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;
-	}
+    }
 }
--- a/components/01_Atoms/headline/headline.config.json
+++ b/components/01_Atoms/headline/headline.config.json
@@ -9,6 +9,6 @@
            "context": {
                "modifier": "--main"
            }
-		}
+        }
    ]
 }
--- a/components/01_Atoms/headline/headline.hbs
+++ b/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>
--- a/components/01_Atoms/image/_image.scss
+++ b/components/01_Atoms/image/_image.scss
@@ -1,4 +1,13 @@
 .LP-Image{
-	max-width:100%;
-	max-height:100%;
+    object-fit: cover;
+    width: 100%;
+    height: auto;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+}
+
+.LP-Figure{
+	padding: 0;
+	margin: 0;
 }
--- a/components/01_Atoms/image/image.config.json
+++ b/components/01_Atoms/image/image.config.json
@@ -1,3 +1,5 @@
 {
-	
+    "context":{
+        "source": "/images/photo_2020-05-02_18-11-21.jpg"
+    }
 }
--- a/components/01_Atoms/image/image.hbs
+++ b/components/01_Atoms/image/image.hbs
@@ -1,23 +1 @@
-<img src="/images/photo_2020-05-02_18-11-21.jpg" 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>
+<img src="{{source}}" class="LP-Image"/>
--- a/components/01_Atoms/input/_input.scss
+++ b/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;
-
-        &:before{
-            content: '* ';
-        }
+        overflow: hidden;
    }

-    &--error{
-        .LP-Input__Field{
+    &--error {
+        .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;
+    &--disabled {

-			label + &{
-				color: red;
-			}
+        .LP-Input__Field,
+        .LP-Input__Field:disabled {
+            background-color: transparent;
+            border-bottom: 1px dashed $-grey;
+            cursor: not-allowed;

-			&:focus, &:active{
-				margin-bottom: $-margin-bottom;
-				border-radius: 0;
-			}
+            label+& {
+                color: red;
+            }

-			~.LP-Input__Message{
-				visibility: hidden;
-			}				
-		}
+            &:focus,
+            &:active {
+                margin-bottom: $-margin-bottom;
+                border-radius: 0;
+            }

-		.LP-Input__Label{
-			color: $-grey;
-		}
-	}
+            ~.LP-Input__Message {
+                visibility: hidden;
+            }
+        }
+
+        .LP-Input__Label {
+            color: $-grey;
+        }
+    }
 }
--- a/components/01_Atoms/input/input.config.json
+++ b/components/01_Atoms/input/input.config.json
@@ -1,27 +1,27 @@
 {
    "context": {
-		"label": "Enter your value here",
-		"placeholder": "A sample value"
-	},
-	"variants": [
-		{
-			"name": "With message",
-			"context":{
-				"message": "Please fill in anything valuable"
-			}
-		},
+        "label": "Enter your value here",
+        "placeholder": "A sample value"
+    },
+    "variants": [
+        {
+            "name": "With message",
+            "context":{
+                "message": "Please fill in anything valuable"
+            }
+        },
        {
            "name": "disabled",
            "context": {
-				"modifier": "--disabled",
-				"disabled": true
-			}
-		},
-		{
+                "modifier": "--disabled",
+                "disabled": true
+            }
+        },
+        {
            "name": "error",
            "context": {
-				"modifier": "--error",
-				"message": "This field is required"
+                "modifier": "--error",
+                "message": "This field is required"
            }
        }
    ]
--- a/components/01_Atoms/input/input.hbs
+++ b/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}}"
-	{{#if disabled}}
-		disabled="disabled"
-	{{/if}}
-	/>
-	{{#if message}}
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}">
+    {{#if disabled}}
+        disabled="disabled"
+    {{/if}}
+    {{#if message}}
    <span class="LP-Input__Message">{{message}}</span>
-	{{/if}}
+    {{/if}}
 </div>
--- a/components/01_Atoms/link/_link.scss
+++ b/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;
-    }
-
-    .LP-Text{
-        font-family: $-primary-sans-serif-accent-font;
-        &:hover{
-            color: $-light-brown;
-        }
+        color: $-grey;
+		text-decoration: underline;
    }
 }
-
-.LP-Link__IconWrapper{
-    display: inline;
-}
--- a/components/01_Atoms/link/link--iconized.hbs
+++ b/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>
--- a/components/01_Atoms/link/link.config.json
+++ b/components/01_Atoms/link/link.config.json
@@ -1,6 +1,6 @@
 {
    "context": {
        "url": "#",
-        "text": "Click Me"
+        "text": "click me"
    }
 }
--- a/components/01_Atoms/logo/logo.hbs
+++ b/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>
--- a/components/01_Atoms/materialdesignicons/_animated.scss
+++ b/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);
+    }
+}
--- a/components/01_Atoms/materialdesignicons/_core.scss
+++ b/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;
+}
--- a/components/01_Atoms/materialdesignicons/_extras.scss
+++ b/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";
+}
--- a/components/01_Atoms/materialdesignicons/_functions.scss
+++ b/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));
+}
--- a/components/01_Atoms/materialdesignicons/_icons.scss
+++ b/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;
+}
--- a/components/01_Atoms/materialdesignicons/_materialdesignicons.scss
+++ b/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";
--- a/components/01_Atoms/materialdesignicons/_path.scss
+++ b/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;
+}
--- a/components/01_Atoms/materialdesignicons/_variables.scss
+++ b/components/01_Atoms/materialdesignicons/_variables.scss
--- a/components/01_Atoms/materialdesignicons/materialdesignicons.hbs
+++ b/components/01_Atoms/materialdesignicons/materialdesignicons.hbs
--- a/components/01_Atoms/materialdesignicons/materialdesignicons.json
+++ b/components/01_Atoms/materialdesignicons/materialdesignicons.json
@@ -0,0 +1 @@
+{}
--- a/components/01_Atoms/message/_message.scss
+++ b/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;
+    }
+}
--- a/components/01_Atoms/message/message.config.json
+++ b/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"
+            }
+        }
+    ]
+}
--- a/components/01_Atoms/message/message.hbs
+++ b/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>
--- a/components/01_Atoms/pagination/_pagination.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/components/01_Atoms/pagination/pagination.config.json
+++ b/components/01_Atoms/pagination/pagination.config.json
@@ -0,0 +1,3 @@
+{
+    "title": "Pagnination"
+}
--- a/components/01_Atoms/pagination/pagination.hbs
+++ b/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>
--- a/components/01_Atoms/paragraph/_paragraph.scss
+++ b/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
 }
--- a/components/01_Atoms/paragraph/paragraph.config.json
+++ b/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": [

-	]
+    ]
 }
--- a/components/01_Atoms/paragraph/paragraph.hbs
+++ b/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>
--- a/components/01_Atoms/tag/_tag.scss
+++ b/components/01_Atoms/tag/_tag.scss
@@ -1,14 +1,39 @@
-.LP-Tag{
-	padding: 8px 14px;
-	background-color: #D7CEC7;
-	border-radius: 2px;
-	width: max-content;
+.LP-Tag {
+    padding: 8px 14px;
+    background-color: $-beige;
+    border-radius: 2px;
+    width: max-content;
+    @include RV-Flex;
+    height: min-content;
+    gap: 3px;
+    transition: background .3s;
 	
-	.LP-Paragraph{
-		padding: 0;
-		margin: 0;
-		font-family: $-primary-sans-serif-font;
-		font-size: 1em;
-		display: inline;
+	.LP-Link {
+		color: $-grey;
+		&:hover {
+			text-decoration: none;
+		}
 	}
+
+    &__Remove {
+        .RV-Iconized__Icon {
+            fill: $-wine-red;
+
+            &:hover {
+                fill: $-grey;
+            }
+        }
+    }
+
+    &:hover {
+        background-color: #bdbdbd;
+    }
+
+    .LP-Paragraph {
+        padding: 0;
+        margin: 0;
+        font-family: $-primary-sans-serif-font;
+        font-size: 1em;
+        display: inline;
+    }
 }
--- a/components/01_Atoms/tag/tag.config.json
+++ b/components/01_Atoms/tag/tag.config.json
@@ -1,6 +1,6 @@
 {
-	"title": "Tag",
-	"context": {
-		"text": "Im a tag"
-	}
+    "title": "Tag",
+    "context": {
+        "text": "Im a tag"
+    }
 }
--- a/components/01_Atoms/tag/tag.hbs
+++ b/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>
--- a/components/02_Molecules/_molecules.scss
+++ b/components/02_Molecules/_molecules.scss
@@ -1,3 +1,7 @@
@import 'textSection/textSection';
@import 'placeTeaser/placeTeaser';
@import 'tagList/tagList';
+@import 'navigation/navigation';
+@import 'messageList/messageList';
+@import 'userInfo/userInfo';
+@import 'voting/voting';
--- a/components/02_Molecules/messageList/_messageList.scss
+++ b/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;
+    }
+}
--- a/components/02_Molecules/messageList/messageList.config.json
+++ b/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."
+    }
+}
--- a/components/02_Molecules/messageList/messageList.hbs
+++ b/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>
--- a/components/02_Molecules/navigation/_navigation.scss
+++ b/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;
+        }
+    }
+}
--- a/components/02_Molecules/navigation/navigation.config.json
+++ b/components/02_Molecules/navigation/navigation.config.json
@@ -0,0 +1,16 @@
+{
+    "title": "Navigation",
+    "context": {
+        "additionalItems": [
+            "Hello"
+        ]
+    },
+    "variants": [
+        {
+            "name": "Sidebar",
+            "context":{
+                "modifier": "--sidebar"
+            }
+        }
+    ]
+}
--- a/components/02_Molecules/navigation/navigation.hbs
+++ b/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>
--- a/components/02_Molecules/placeTeaser/_placeTeaser.scss
+++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss
@@ -1,93 +1,16 @@
-.LP-PlaceTeaser{
-	width: 280px;
+.LP-PlaceTeaser {
+	@include RV-Turner(200px, 280px);
+	@include RV-Turner--auto;
 	
-    .LP-PlaceTeaser__Image{
-		height: 165px;
-		width: 280px;
-		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{
-			font-family: $-primary-sans-serif-font;
-			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;
-	}
-}
-
-@media(min-width: $-viewport-small){
-	.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;
+	&__Image {
+		@include RV-Turner__Base;
 		
+		.LP-Image {
+			height: 100%;
 		}
 	}
+	
+	&__Meta {
+		@include RV-Turner__Content;
+	}
 }
--- a/components/02_Molecules/placeTeaser/placeTeaser.config.json
+++ b/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)",
-		"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
-	},
-	"variants": [
-		{
-			"name": "Extended",
-			"context": {
-				"modifier": "--extended"
-			}
-		}
-	]
+        "location": "Hamm (Westfalen)",
+        "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
+    },
+    "variants": [
+        {
+            "name": "Extended",
+            "context": {
+                "modifier": "--extended"
+            }
+        }
+    ]
 }
--- a/components/02_Molecules/placeTeaser/placeTeaser.hbs
+++ b/components/02_Molecules/placeTeaser/placeTeaser.hbs
@@ -1,21 +1,23 @@
 <article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
-	<div class="LP-PlaceTeaser__Image">
-		    <img class="LP-Image" src="{{image}}"/>
-	</div>
+    <div class="LP-PlaceTeaser__Image">
+        <img class="LP-Image" src="{{image}}"/>
+    </div>
    <div class="LP-PlaceTeaser__Meta">
+		<span class="LP-PlaceTeaser__Title">
+			{{> @headline headline=title modifier='--teaser'}}
+		</span>
        <div class="LP-PlaceTeaser__Info">
-            <span class="LP-PlaceTeaser__Title">{{> @headline headline=title modifier='--teaser'}}</span>
            <span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span>
        </div>
-		<div class="LP-PlaceTeaser__Description">
-			{{> @paragraph text=description}}
-		</div>
-		<div class="LP-PlaceTeaser__Icons">
-			<ul class="LP-Icon__List">
-				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
-				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
-				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
-			</ul>
-		</div>
+        <div class="LP-PlaceTeaser__Description">
+            {{> @paragraph text=description}}
+        </div>
+        <div class="LP-PlaceTeaser__Icons">
+            <ul class="LP-Icon__List">
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
+                <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
+            </ul>
+        </div>
    </div>
 </article>
--- a/components/02_Molecules/tagList/_tagList.scss
+++ b/components/02_Molecules/tagList/_tagList.scss
@@ -1,13 +1,13 @@
-.LP-TagList{
-	.LP-TagList__List{
-		list-style-type: none;
-		display: flex;
-		flex-wrap: wrap;
-		padding:0;
-		margin: 0;
+.LP-TagList {
+    .LP-TagList__List {
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        margin: 0;

-		.LP-TagList__Item{
-			margin: 6px;
-		}
-	}
+        .LP-TagList__Item {
+            margin: 3px;
+        }
+    }
 }
--- a/components/02_Molecules/tagList/tagList.config.json
+++ b/components/02_Molecules/tagList/tagList.config.json
@@ -1,11 +1,11 @@
 {
-	"title": "TagList",
-	"context": {
-		"tags": [
-			"Kamera",
-			"Wachhund",
-			"Zaun",
-			"Security"
-		]
-	}
+    "title": "TagList",
+    "context": {
+        "tags": [
+            "Kamera",
+            "Wachhund",
+            "Zaun",
+            "Security"
+        ]
+    }
 }
--- a/components/02_Molecules/tagList/tagList.hbs
+++ b/components/02_Molecules/tagList/tagList.hbs
@@ -1,7 +1,7 @@
 <div class="LP-TagList">
-	<ul class="LP-TagList__List">
-		{{#each tags}}
-			<li class="LP-TagList__Item">{{> @tag text=this}}</li>
-		{{/each}}
-	</ul>
+    <ul class="LP-TagList__List">
+        {{#each tags}}
+            <li class="LP-TagList__Item">{{> @tag text=this}}</li>
+        {{/each}}
+    </ul>
 </div>
--- a/components/02_Molecules/textSection/_textSection.scss
+++ b/components/02_Molecules/textSection/_textSection.scss
@@ -10,7 +10,11 @@

 .LP-TextSection{
    
-    .LP-Text {
-        line-height: 1.4rem;
+    &__Text {
+        font-family: $-primary-serif-font;
+        font-size: 1.4rem;
+        .LP-Link{
+            margin: 0 3px;
+        }
    }
 }
--- a/components/02_Molecules/textSection/textSection.config.json
+++ b/components/02_Molecules/textSection/textSection.config.json
@@ -1,6 +1,8 @@
 {
-	"context": {
-		"headline": "At vero eos et accusam et justo duo dolores",
-		"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-	}
+    "context": {
+        "headline": "At vero eos et accusam et justo duo dolores",
+        "text": [
+            "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+        ]
+    }
 }
--- a/components/02_Molecules/textSection/textSection.hbs
+++ b/components/02_Molecules/textSection/textSection.hbs
@@ -1,4 +1,10 @@
 <article class="LP-TextSection">
-    {{> @headline headline=headline}}
-    {{> @paragraph text=text}}
+    <header class="LP-TextSection__Headline">
+        {{> @headline headline=headline}}
+    </header>
+    <div class="LP-TextSection__Text">
+        {{#each text}}
+            {{> @paragraph text=this}}
+        {{/each}}
+    </div>
 </article>
--- a/components/02_Molecules/userInfo/_userInfo.scss
+++ b/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;
+        }
+    }
+}
--- a/components/04_Templates/placeOverview/placeOverview.config.json
+++ b/components/04_Templates/placeOverview/placeOverview.config.json
--- a/components/02_Molecules/userInfo/userInfo.hbs
+++ b/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>
--- a/components/02_Molecules/voting/_voting.scss
+++ b/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;
+        }
+    }
+}
--- a/components/02_Molecules/voting/voting.config.json
+++ b/components/02_Molecules/voting/voting.config.json
@@ -0,0 +1 @@
+{}
--- a/components/02_Molecules/voting/voting.hbs
+++ b/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>
--- a/components/03_Organisms/_organisms.scss
+++ b/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 'imageGrid/imageGrid';
+@import 'osmMap/osmMap';
+@import 'userProfile/userProfile';
--- a/components/03_Organisms/footer/_footer.scss
+++ b/components/03_Organisms/footer/_footer.scss
@@ -1,30 +1,275 @@
-.LP-Footer{
-    margin-top: 75px;
+// Define easily accessible color-defaults for the footer.
+$-primary-link-color: $-beige;
+$-primary-line-color: $-almost-white;
+
+.LP-Footer {
+    margin: auto;
+    background: $-grey;
    width: 100%;
-    background-color: $-grey;
-    padding: 25px;
+    font-family: $-primary-sans-serif-font;
+    font-size: 1rem;

-    .LP-LinkList__List{
-        display: flex;
-        align-items: center;
+    &Columns__Container {
+        @include RV-BreakPoint;
+        --breakPoint: 750px;
        justify-content: center;
-        .LP-LinkList__Item{
-            border: none;
-            padding: 5px;
-            width: auto;
+    }

-            .LP-Text{
-                color: $-almost-white;
-                font-size: 17px;
-            }
+    &Columns__Item {
+        @include RV-BreakPoint__Item;
+    }

-            .LP-Link{
-                display: inline;
+    * {
+        box-sizing: border-box;
+    }

-                &:hover{
-                    background-color: inherit;
-                }
-            }
+    ul {
+        list-style: none;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    &__GenericAnchor {
+        color: $-primary-link-color;
+
+        &:hover {
+            color: $-primary-line-color;
        }
    }
+
+    // Use flexbox
+    &__Flex {
+        display: flex;
+        flex-flow: row wrap;
+    }
+
+    &__ListTop {
+        text-align: left;
+    }
+
+    &__ListTop > li {
+        padding-bottom: 10px;
+    }
+
+    &__ListHeader {
+        padding: 10px 0 5px 0;
+        color: $-almost-white;
+        font-size: 2.3vw;
+    }
+
+    &__ListText {
+        font-size: 1.2em;
+        color: $-almost-white;
+    }
+
+    &__SocialSection {
+        width: 100%;
+        align-items: center;
+        justify-content: space-around;
+        position: relative;
+        margin-top: 5px;
+    }
+
+    &__SocialSection::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 10px;
+        border-top: 1px solid $-primary-line-color;
+        width: calc(100% - 20px);
+    }
+
+    // Include social media icons.
+    .LP-Footer__Social-Mastodon {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/mastodon.svg');
+        }
+    }
+
+    .LP-Footer__Social-Twitter {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/twitter.svg');
+        }
+    }
+
+    .LP-Footer__Social-Facebook {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/facebook.svg');
+        }
+    }
+
+    .LP-Footer__Social-Youtube {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/youtube.svg');
+        }
+    }
+
+    .LP-Footer__Social-Vimeo {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/vimeo.svg');
+        }
+    }
+
+    .LP-Footer__Social-Instagram {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/instagram.svg');
+        }
+    }
+
+    .LP-Footer__Social-Vkontakte {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/vkontakte.svg');
+        }
+    }
+
+    .LP-Footer__Social-Wordpress {
+        .LP-Footer__Icon {
+            background-image: url('icons/social/wordpress.svg');
+        }
+    }
+
+    // Social media icons style.
+    .LP-Footer__Icon {
+        background-size: 40px 40px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-clip: content-box;
+        position: absolute;
+        height: 50px;
+        width: 50px;
+    }
+
+    // Big letters of "EXPLORE WITH US"
+    &__SocialExplore {
+        display: flex;
+        align-items: center;
+        font-size: 2.5em;
+        color: $-almost-white;
+    }
+
+    // Small letters of "EXPLORE WITH US"
+    &__SocialSmall {
+        font-size: 0.5em;
+        padding: 0px 20px;
+    }
+
+    &__SocialOverlap {
+        position: relative;
+        z-index: 2;
+        background: $-grey;
+        padding: 0 10px;
+    }
+
+    &__SocialOverlap > a {
+        font-size: 3em;
+        padding-right: 50px;
+    }
+
+    &__BottomSection {
+        width: 100%;
+        padding: 10px;
+        border-top: 1px solid $-primary-line-color;
+        margin-top: 10px;
+    }
+
+    &__BottomSection > div:first-child {
+        margin-right: auto;
+    }
+
+    &__BottomWrapper {
+        font-size: 1.3em;
+        color: $-almost-white;
+    }
+}
+
+// Media queries using global widths.
+@media(max-width: $-viewport-normal) {
+    .LP-Footer__ListHeader {
+        font-size: 2em;
+    }
+    .LP-Footer__ListText {
+        font-size: 1.1em;
+    }
+    .LP-Footer__SocialConnect {
+        font-size: 2.5em;
+    }
+    .LP-Footer__SocialOverlap > a {
+        font-size: 2.24em;
+        height: 50px;
+    }
+    .LP-Footer__BottomWrapper {
+        font-size: 1.3em;
+    }
+}
+
+@media(max-width: $-viewport-medium) {
+    .LP-Footer__ListHeader {
+        font-size: 3em;
+    }
+    .LP-Footer__ListText {
+        font-size: 1.5em;
+    }
+    .LP-Footer__SocialSection {
+        justify-content: center
+    }
+    .LP-Footer__SocialSection::after {
+        top: 25%;
+    }
+    .LP-Footer__SocialConnect {
+        margin-bottom: 10px;
+        padding: 0 10px;
+    }
+    .LP-Footer__SocialOverlap {
+        display: flex;
+        justify-content: center;
+        height: 50px;
+    }
+    .LP-Footer__SocialIconsWrapper {
+        width: 100%;
+        padding: 0;
+    }
+    .LP-Footer__SocialOverlap {
+        margin-left: 0px;
+    }
+    .LP-Footer__BottomSection {
+        padding: 0 5px 10px 5px;
+    }
+    .LP-Footer__BottomWrapper {
+        text-align: center;
+        width: 100%;
+        margin-top: 10px;
+    }
+}
+
+@media(max-width: $-viewport-small) {
+    .LP-Footer__SocialOverlap > a {
+        margin: auto;
+    }
+    .LP-Footer__SocialOverlap > a:not(:first-child) {
+        margin-left: 0;
+    }
+    .LP-Footer__BottomRights {
+        display: block;
+    }
+}
+
+@media(max-width: $-viewport-extra-small) {
+    .LP-Footer__ListHeader {
+        font-size: 2.2em;
+    }
+    .LP-Footer__ListText {
+        font-size: 1.2em;
+    }
+    .LP-Footer__SocialConnect {
+        font-size: 2.4em;
+    }
+    .LP-Footer__SocialOverlap > a {
+        font-size: 2.24em;
+    }
+    .LP-Footer__BottomWrapper {
+        font-size: 1.3em;
+    }
 }
--- a/components/03_Organisms/footer/footer.config.json
+++ b/components/03_Organisms/footer/footer.config.json
@@ -1,3 +1,4 @@
 {
-    "title": "Footer"
+    "title": "Footer",
+    "status": "wip"
 }
--- a/components/03_Organisms/footer/footer.hbs
+++ b/components/03_Organisms/footer/footer.hbs
@@ -1,7 +1,78 @@
-<article class="LP-Footer">
-        <ul class="LP-LinkList__List">
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Impressum</span></a></li>
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Kontakt</span></a></li>
-            <li class="LP-LinkList__Item"><a href="" class="LP-Link"><span class="LP-Text">Datenschutz</span></a></li>
-        </ul>
-</article>
+<footer class="LP-Footer">
+    <div class="LP-FooterColumns__Container">
+        
+        <!-- 1st footer column -->
+        <div class="LP-FooterColumns__Item">
+            <ul class="LP-Footer__ListTop">
+                <li><h4 class="LP-Footer__ListHeader">About</h4></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/src/branch/master/Readme.md' class="LP-Footer__GenericAnchor">Host your own instance!</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/issues' class="LP-Footer__GenericAnchor">Issue tracker</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend' class="LP-Footer__GenericAnchor">Backend repository</a></li>
+                    <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-frontend' class="LP-Footer__GenericAnchor">Frontend repository</a></li>
+            </ul>
+        </div>
+
+        <div class="LP-FooterColumns__Item">
+            <!-- 2nd footer column -->
+            <ul class="LP-Footer__ListTop">
+                <li><h4 class="LP-Footer__ListHeader">Contact</h4></li>
+                    <li class="LP-Footer__ListText">web. <a href='https://www.urban-exploration.com' class="LP-Footer__GenericAnchor">https://www.urban-exploration.com</a></li>
+                    <li class="LP-Footer__ListText">mail. <a href='mailto:JohnSSmith@einrot.com' class="LP-Footer__GenericAnchor">JohnSSmith@einrot.com</a></li>
+                    <li class="LP-Footer__ListText">tel. 937-387-6498</li>
+            </ul>
+        </div>
+
+        <div class="LP-FooterColumns__Item">
+            <!-- 3rd footer column -->
+            <ul class="LP-Footer__ListTop">
+                <li id='Contact'><h4 class="LP-Footer__ListHeader">Postal address</h4></li>
+                    <li class="LP-Footer__ListText"><b>Urban Exploration Ltd.</b></li>
+                    <li class="LP-Footer__ListText">John S. Smith</li>
+                    <li class="LP-Footer__ListText">2563 College Avenue</li>
+                    <li class="LP-Footer__ListText">Dayton, OH 45402</li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Explore with us / social media bar -->
+    <section class="LP-Footer__SocialSection LP-Footer__Flex">
+        <span class="LP-Footer__SocialOverlap LP-Footer__SocialExplore">
+            EXPLORE <span class="LP-Footer__SocialSmall">with</span> US
+        </span>
+        <span class="LP-Footer__SocialOverlap LP-Footer__SocialIconsWrapper">
+            <a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__GenericAnchor"
+                target="_blank" title="Mastodon">
+                    <span class="LP-Footer__Icon"></span>
+                </a>
+            <a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__GenericAnchor"
+                target="_blank" title="Twitter">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+            <a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__GenericAnchor"
+                target="_blank" title="Youtube">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+            <a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__GenericAnchor"
+                target="_blank" title="Wordpress">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+            <a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__GenericAnchor"
+                target="_blank" title="Instagram">
+                    <span class="LP-Footer__Icon"></span>
+            </a>
+        </span>
+    </section>
+
+    <!-- Bottom section with last line of text and links. -->
+    <section class="LP-Footer__BottomSection LP-Footer__Flex">
+        <div class="LP-Footer__BottomWrapper">   
+            Proudly made by <a href="https://www.reverend.church" class="LP-Footer__GenericAnchor">Reverend</a> 
+            and <a href="https://www.commander1024.de" class="LP-Footer__GenericAnchor">Commander1024.</a></span>
+        </div>
+        <div class="LP-Footer__BottomWrapper">
+            <a href="/flat/privacy-policy.html" class="LP-Footer__GenericAnchor">Privacy Policy</a> 
+            | 
+            <a href="/flat/impress.html" class="LP-Footer__GenericAnchor">Impress</a>
+        </div>
+    </section>
+</footer>
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,71 +1,93 @@
-.LP-Form{
-    max-width: 900px;
-    .LP-Form__Fieldset{
-        border: none;
+.LP-Form {

-        .LP-Form__Legend{
-            margin: 0;
+    &--tagging {
+        margin-top: 25px;
+
+        div.LP-Form__Composition {
+            gap: 25px;
+        }
+    }
+
+    &--inline {
+
+        .LP-Form__Legend,
+        .LP-Input__Label {
+            display: none;
+        }
+
+        .LP-Form__Button {
+            @include RV-Flex__Item--fixedSize;
+            --fixed-size: max-content;
+        }
+
+        fieldset.LP-Form__Fieldset {
+            max-width: unset;
+        }
+
+        div.LP-Form__Composition {
            padding: 0;
        }
+    }

-        .LP-Form__Composition{
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
+    &:not(.LP-Form--inline) {
+        .LP-Form__Composition {
+            @media(max-width: $-viewport-extra-small) {
+                @include RV-Flex--wrap;
+            }
+        }

-            .LP-Form__Field{
-                flex: 3 1 100px;
-                padding: 6px 15px;
+        .LP-Form__Button {
+            @include RV-Flex__Item--fixedSize;
+            --fixedSize: 130px;

-                &--wider{
-                    flex: 5 1 200px;
-                }
-
-                &--wide{
-                    flex: 4 1 150px;
-                }
-
-                &--narrow{
-                    flex: 2 0 50px;
-                }
-
-                &--narrower{
-                    flex: 1 0 25px;
-                }
-
-                input{
-                    width: 100%;
-                }
+            @media(max-width: $-viewport-extra-small) {
+                @include RV-Flex__Item--fixedSize;
+                --fixedSize: 100%;
            }
        }
    }
-}

-@media(max-width: $-viewport-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition--breakable{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-            }
-        }
-    }
-}
-
-@media(max-width: $-viewport-extra-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                .LP-Form__Field{
-					flex: 3 1 100px;
-					padding: 12px 15px;
-                }
+    .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;
+        }
    }
 }
--- a/components/03_Organisms/form/form.hbs
+++ b/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">
-					<label for="input123" class="LP-Input__Label">First name</label>
-					<input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
-					<span class="LP-Input__Message">Field is required</span>
-				</div>
+                <div class="LP-Input LP-Input--error">
+                    <label for="input123" class="LP-Input__Label">First name</label>
+                    <input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
+                    <span class="LP-Input__Message">Field is required</span>
+                </div>
            </div>
            <div class="LP-Form__Field">
-				<div class="LP-Input">
-                	<label for="input123" class="LP-Input__Label">Last name</label>
-                	<input type="text" id="input123" class="LP-Input__Field"/>
-				</div>
+                <div class="LP-Input">
+                    <label for="input123" class="LP-Input__Label">Last name</label>
+                    <input type="text" id="input123" class="LP-Input__Field"/>
+                </div>
            </div>
-			<div class="LP-Form__Field LP-Form__Field--narrower">
-				<div class="LP-Input LP-Input--disabled">
-					<label for="input123" class="LP-Input__Label">Age</label>
-					<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
-				</div>
-			</div>
-		</div>
+            <div class="LP-Form__Field LP-Form__Field--narrower">
+                <div class="LP-Input LP-Input--disabled">
+                    <label for="input123" class="LP-Input__Label">Age</label>
+                    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
+                </div>
+            </div>
+        </div>

        <div class="LP-Form__Composition">
            <div class="LP-Form__Field LP-Form__Field--wider LP-Input">
@@ -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">
-                <label for="input123" class="LP-Input__Label">House no</label>
+            <div class="LP-Form__Field LP-Form__Field--narrower LP-Input">
+                <label for="input123" class="LP-Input__Label">No.</label>
                <input type="text" id="input123" class="LP-Input__Field"/>
                <span class="LP-Input__Message">Field is required</span>
            </div>
        </div>

+        <div class="LP-Form__Composition">
+            <div class="LP-Form__Field LP-Form__InfoText">
+                <p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
+            </div>
+        </div>
+
        <div class="LP-Form__Composition">
            <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
-                <label for="input123" class="LP-Input__Label">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>

--- a/components/03_Organisms/header/_header.scss
+++ b/components/03_Organisms/header/_header.scss
@@ -1,16 +1,71 @@
+
+$-logo-height: 45px;
 .LP-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    margin-bottom: 70px;
+    height: 60px;
+    box-shadow: 0 0 2px $-light-brown;
+    grid-area: header;
+    background-color: white;
+    padding-left: 25px;
+
+    &__Navigation{
+        flex-grow: 2;
+    }
    
    &__Logo {
-        max-width: 300px;
-        width: 35%;
-        object-fit:contain;
-    }
+        height: $-logo-height;
+        object-fit:cover;
+        max-height: 100%;
+        width: 225px;
+        overflow: hidden;
+        flex-shrink: 0;

-    .LP-Header__Logo{
-        margin: 25px;
+        .LP-Image{
+            height: 100%;
+        }
+    }
+}
+
+.LP-Header__UserInformation{
+    margin-right: 3%;
+    .LP-Paragraph{
+        font-family: $-primary-sans-serif-font;
+        white-space: nowrap;
+    }
+
+    .LP-Link{
+        margin: 0 3px;
+        padding: 4px 4px;
+    }
+}
+
+@media(max-width: $-viewport-medium){
+    .LP-Header__Logo{
+        width: $-logo-height;
+        .LP-Image{
+            object-position: 0 0;
+            object-fit: cover;
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Header__Logo{
+        display: none;
+    }
+
+    .LP-Header__Navigation{
+        width: 100%;
+    }
+}
+
+@media(max-width: $-viewport-toggle-sidebar){
+    .LP-Header{
+        padding-left: 60px;
+        width: calc(100% - 60px);
+        position: fixed;
+        z-index: 10;
    }
 }
--- a/components/03_Organisms/header/header.hbs
+++ b/components/03_Organisms/header/header.hbs
@@ -1,8 +1,10 @@
 <header class="LP-Header">
    <div class="LP-Header__Logo">
-        {{render '@logo'}}
+        {{> @image source='/images/logo.png'}}
    </div>
-    <div class="LP-Header__Navigation">
-        {{> @navigation}}
+    <div class="LP-Header__UserInformation">
+        <span class="LP-Paragraph">
+            Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
+            </span>
    </div>
 </header>
--- a/components/03_Organisms/imageGrid/_imageGrid.scss
+++ b/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; 
+}
--- a/components/03_Organisms/imageGrid/imageGrid.config.json
+++ b/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"
+			}
+        ]
+    }
+}
--- a/components/03_Organisms/imageGrid/imageGrid.hbs
+++ b/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>
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -1,58 +1,47 @@
-.LP-LinkList__List{
-    list-style-type: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 300px);
-    margin: 0;
-    padding: 0;
+.LP-LinkList{
+	@include RV-Grid;
+	@include RV-Grid--autoWidth;
+	--itemMinWidth: 350px;
+	--itemHeight: 3em;
+	align-items: center;
+	--icon-color: #{$-light-brown};
+	
+	.RV-Iconized__Icon {
+		font-size: calc(var(--itemHeight) * .75);
+		line-height: 1em;
+		color: var(--icon-color);
+		transition: color .2s;
+	}
 	
    .LP-LinkList__Item{
-        border-left: 1px solid $-light-brown;
-        width: 100%;
-        margin-top: 12px;
+		font-weight: 500;
+		--color: #{$-grey};
+		border-left: 1px solid $-light-brown;
+		transition: background .2s;
+		height: 100%;

-        .LP-Link{
-            $-link-padding: 1em;
-            padding: $-link-padding 0 $-link-padding $-link-padding;
-            width: calc(100% - $-link-padding);
-            display: block;
-            color: $-grey;
+		@include RV-Alignment--verticalCenter;

+		&:hover {
+			background-color: $-beige;
+			--icon-color: #{$-grey};

-            &--iconized{
-                padding-top: 0;
-                padding-bottom: 1.1em;
+			.LP-LinkList__ItemHover {
+				opacity: 1;
+			}
+		}

-                &:hover{
-                    background-color: #ccc !important;
-                }
+		&--addItem {
+			background-color: $-almost-white;
+			font-weight: bold;
+		}
+	}

-                .LP-Text{
-                    padding-top: .1em;
-                }
-            }
+	.LP-Link {
+		@include RV-Flex__Item;
+		padding-left: $-spacing-medium;
+		color: var(--color);
+		transition: color .2s;
+	}

-
-            &:hover{
-                background-color: $-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;
 }
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -1,19 +1,74 @@
-<ul class="LP-LinkList__List">
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
-         <div class="LP-Link__IconWrapper">
-            <svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
-                xml:space="preserve">
-                <g>
-                    <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
-    v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
-                </g>
-            </svg>
-        </div>
-        <span class="LP-Text">Link hinzufügen</span></a></li>
+<ul class="LP-LinkList">
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				OSM
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-map-outline"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Google Maps
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-map-outline"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Photoalbum
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-camera-burst"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				YouTube Link
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-youtube"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Twitter Link
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-twitter"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item"><a href="#" class="LP-Link">
+		<span class="LP-Text RV-Iconized">
+			<span class="RV-Iconized__Text">
+				Toller externer Blog
+			</span>
+			<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+				<i class="mdi mdi-open-in-new"></i>
+			</span>
+		</span></a>
+	</li>
+	<li class="LP-LinkList__Item LP-LinkList__Item--addItem">
+		<a href="#" class="LP-Link">
+			<span class="LP-Text RV-Iconized">
+				<span class="RV-Iconized__Text">
+					Link Hinzufügen
+				</span>
+				<span class="RV-Iconized__Icon RV-Iconized__Icon--left">
+					<i class="mdi mdi-plus"></i>
+				</span>
+			</span>
+		</a>
+	</li>
 </ul>
--- a/components/03_Organisms/navigation/_navigation.scss
+++ b/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;
-        }
-    }
-}
--- a/components/03_Organisms/navigation/navigation.config.json
+++ b/components/03_Organisms/navigation/navigation.config.json
@@ -1,3 +0,0 @@
-{
-    
-}
--- a/components/03_Organisms/navigation/navigation.hbs
+++ b/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>
--- a/components/03_Organisms/osmMap/_osmMap.scss
+++ b/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;
+    }
+}
--- a/components/03_Organisms/osmMap/osmMap.config.json
+++ b/components/03_Organisms/osmMap/osmMap.config.json
@@ -0,0 +1,3 @@
+{
+
+}
--- a/components/03_Organisms/osmMap/osmMap.hbs
+++ b/components/03_Organisms/osmMap/osmMap.hbs
--- a/components/03_Organisms/placeGrid/_placeGrid.scss
+++ b/components/03_Organisms/placeGrid/_placeGrid.scss
@@ -1,22 +1,27 @@
 .LP-PlaceGrid{
-	.LP-PlaceGrid__Grid{
-		margin: 0;
-		padding: 0;
-		list-style-type: none;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
+    .LP-PlaceGrid__Grid{
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+		@include RV-Grid;
+		@include RV-Grid--autoWidth;
+		--itemHeight: 200px;
+		--itemMinWidth: 280px;
+		--gap: 15px;
+		padding: 15px;
+		justify-content: center;
 		
-		.LP-PlaceGrid__Item{
-			margin: 18px;
-		}

-		.LP-Link{
-			.LP-PlaceTeaser{
-				&:hover{
-					box-shadow: 0 0 2px $-grey;
-				}
-			}
-		}
-	}
+        .LP-PlaceGrid__Item{
+            @include RV-Grid__Item;
+        }
+
+        .LP-Link{
+            .LP-PlaceTeaser{
+                &:hover{
+                    box-shadow: 0 0 2px $-grey;
+                }
+            }
+        }
+    }
 }
--- a/components/03_Organisms/placeGrid/placeGrid.config.json
+++ b/components/03_Organisms/placeGrid/placeGrid.config.json
@@ -1,31 +1,31 @@
 {
-	"title": "PlaceGrid",
-	"context":{
-		"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": ""
-			}
-		]
-	}
+    "title": "PlaceGrid",
+    "context":{
+        "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": ""
+            }
+        ]
+    }
 }
--- a/components/03_Organisms/placeGrid/placeGrid.hbs
+++ b/components/03_Organisms/placeGrid/placeGrid.hbs
@@ -1,12 +1,12 @@
 <div class="LP-PlaceGrid">
-	{{> @headline headline='Explorere the latest locations'}}
-	<ul class="LP-PlaceGrid__Grid">
-		{{#each places}}
-			<li class="LP-PlaceGrid__Item">
-				<a href="#" class="LP-Link">
-					{{> @placeteaser image=this.image title=this.name location=this.location description=this.description}}
-				</a>
-			</li>
-		{{/each}}
-	</ul>
+    {{> @headline headline='Explorere the latest locations'}}
+    <ul class="LP-PlaceGrid__Grid">
+        {{#each places}}
+            <li class="LP-PlaceGrid__Item">
+                <a href="#" class="LP-Link">
+                    {{> @placeteaser image=this.image title=this.name location=this.location description=this.description}}
+                </a>
+            </li>
+        {{/each}}
+    </ul>
 </div>
--- a/components/03_Organisms/placeList/_placeList.scss
+++ b/components/03_Organisms/placeList/_placeList.scss
@@ -1,28 +1,37 @@
 .LP-PlaceList{
-	.LP-PlaceList__List{
-		list-style-type: none;
+    .LP-PlaceList__List{
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
    
-		.LP-Link{
-			.LP-Place{
-				&:hover{
-					color: $-grey;
-					background-color: $-almost-white;
+        .LP-Link{
+            .LP-Place{
+                &:hover{
+                    color: $-grey;
+                    background-color: $-almost-white;
                    
        
-					$-hover-offset: 2px;
-					position: relative;
-					left: -$-hover-offset;
-					>.LP-Place__Image{
-						border-left: $-hover-offset $-grey solid;
-					}
-				}
-			}
-		}
+                    $-hover-offset: 2px;
+                    position: relative;
+                    left: -$-hover-offset;
+                    >.LP-Place__Image{
+                        border-left: $-hover-offset $-grey solid;
+                    }
+                }
+            }
+        }
    
-		.LP-PlaceList__Item{
-			max-width: 900px;
-			min-width: 450px;
-			margin: 18px 0;
-		}
-	}
+        .LP-PlaceList__Item{
+            max-width: 900px;
+            //min-width: 450px;
+            margin: 18px 0;
+            @media (max-width: $-viewport-medium) {
+                width: 100%;
+            }
+        }
+    }
+    
+    .LP-Pagination{
+        margin-top: 50px;
+    }
 }
--- a/components/03_Organisms/placeList/placeList.config.json
+++ b/components/03_Organisms/placeList/placeList.config.json
@@ -1,31 +1,31 @@
 {
-	"title": "PlaceList",
-	"context": {
-		"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": ""
-			}
-		]
-	}
+    "title": "PlaceList",
+    "context": {
+        "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": ""
+            }
+        ]
+    }
 }
--- a/components/03_Organisms/placeList/placeList.hbs
+++ b/components/03_Organisms/placeList/placeList.hbs
@@ -1,12 +1,13 @@
 <div class="LP-PlaceList">
-	{{> @headline headline='Listing our places'}}
-	<ul class="LP-PlaceList__List">
-		{{#each places}}
-			<li class="LP-PlaceList__Item">
-				<a href="#" class="LP-Link">
-					{{> @placeteaser image=this.image title=this.name location=this.location description=this.description modifier='--extended'}}
-				</a>
-			</li>
-		{{/each}}
-	</ul>
+    {{> @headline headline='Listing our places'}}
+    <ul class="LP-PlaceList__List">
+        {{#each places}}
+            <li class="LP-PlaceList__Item">
+                <a href="#" class="LP-Link">
+                    {{> @placeteaser image=this.image title=this.name location=this.location description=this.description modifier='--extended'}}
+                </a>
+            </li>
+        {{/each}}
+    </ul>
+    {{> @pagination}}
 </div>
--- a/components/03_Organisms/userProfile/_userProfile.scss
+++ b/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;
+    }
+}
--- a/components/03_Organisms/userProfile/userProfile.config.json
+++ b/components/03_Organisms/userProfile/userProfile.config.json
@@ -0,0 +1 @@
+{}
--- a/components/03_Organisms/userProfile/userProfile.hbs
+++ b/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>
--- a/components/04_Templates/_templates.scss
+++ b/components/04_Templates/_templates.scss
@@ -1,2 +1,3 @@
@import 'home/home';
-@import 'placeOverview/placeOverview';
+@import 'placeDetail/placeDetail';
+@import 'codex/codex';
--- a/components/04_Templates/codex/_codex.scss
+++ b/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;
+        }
+    }
+}
--- a/components/04_Templates/codex/codex.config.json
+++ b/components/04_Templates/codex/codex.config.json
@@ -0,0 +1,4 @@
+{
+    "title": "UrBex codex",
+    "status": "wip"
+}
--- a/components/04_Templates/codex/codex.hbs
+++ b/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>
--- a/components/04_Templates/home/_home.scss
+++ b/components/04_Templates/home/_home.scss
@@ -6,3 +6,10 @@
 .LP-HorizontalLine{
    color: $-grey;
 }
+
+@media(max-width: $-viewport-small){
+    .LP-MainContainer {
+        width: 100%;
+    }
+    
+}
--- a/components/04_Templates/home/home.config.json
+++ b/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": ""
+            }
+        ]
+    }
+}
--- a/components/04_Templates/home/home.hbs
+++ b/components/04_Templates/home/home.hbs
@@ -1,5 +1,3 @@

-    {{> @introduction}}
-    {{> @placegrid}}
-
-Icons made by <a class="LP-Link" href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
+    {{> @textsection headline='Start'}}
+    {{> @placegrid places=places}}
--- a/components/04_Templates/placeDetail/_placeDetail.scss
+++ b/components/04_Templates/placeDetail/_placeDetail.scss
@@ -0,0 +1,52 @@
+.LP-PlaceDetail{
+
+    .LP-PlaceDetail__Image{
+        max-width: 700px;
+        max-height: 500px;
+        width: 50%;
+        box-shadow: 0 0 10px $-grey;
+        object-fit: cover;
+        object-position: 0 0;
+
+        margin: 0;
+        padding: 0;
+
+        float: right;
+        margin-left: $-spacing-medium;
+        margin-bottom: $-spacing-medium;
+        margin-right: $-spacing-medium;
+        overflow: hidden;
+    }
+}
+
+.LP-Quickinfo {
+	clear: both;
+	display: flex;
+	gap: $-spacing-large;
+	justify-content: space-between;
+	
+	.LP-Section {
+		flex-basis: 50%;
+	}
+}
+
+@media (max-width: $-viewport-medium){
+    .LP-PlaceDetail{
+        .LP-PlaceDetail__Header{
+            .LP-PlaceDetail__Image{
+                float: none;
+                width: 100%;
+                max-width: unset;
+                height: auto;
+                margin: 0;
+                padding: 0;
+                
+                margin-bottom: 25px;
+            }
+        }
+    }
+	
+	.LP-Quickinfo {
+		flex-direction: column;
+	}
+}
--- a/components/04_Templates/placeDetail/placeDetail.config.json
+++ b/components/04_Templates/placeDetail/placeDetail.config.json
@@ -0,0 +1,21 @@
+{
+    "context": {
+        "tags": [
+            "Kamera",
+            "Wachhund",
+            "Zaun",
+            "Security"
+        ],
+        "images": [
+            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+            "/images/photo_2020-05-02_18-11-21.jpg",
+            "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+            "/images/photo_2020-05-02_18-11-21.jpg",
+            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
+        ],
+        "additionalItems": [
+            "Edit Place",
+            "Delete Place"
+        ]
+    }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
reverend	603d7eb2c7	Anpassen Placelevel im PlaceDetail View	2021-12-29 14:41:19 +01:00
reverend	492b0cc0d2	Unnötige Dependency	2021-12-29 14:41:06 +01:00
reverend	ff9c9ddcbc	sync	2021-12-29 13:52:57 +01:00
reverend	aed29a6497	Merge branch 'master' of git.commander1024.de:Commander1024/lostplaces-frontend	2021-11-21 13:26:37 +01:00
reverend	b4508ee3e3	No SCSS errors anymore	2021-11-01 09:49:58 +01:00
reverend	c2cdefff6d	Fixing Rest of the Organisms	2021-11-01 09:47:33 +01:00
reverend	c2678fec85	Fixing ImageGrid and Lightbox	2021-11-01 09:43:20 +01:00
reverend	daaa3e11a7	Adapting ImageGrid	2021-10-24 19:39:00 +02:00
reverend	bbcbd19ef5	Adapting Form	2021-10-24 18:28:09 +02:00
reverend	dd69cbbaaf	Better Wrapping in the footer	2021-10-24 16:58:08 +02:00
reverend	db13ef4787	#50 Restyling LinkList and Removing Add Item Form	2021-10-24 16:03:16 +02:00
reverend	b264b3a559	Adapating Organisms / LinkList w Icons	2021-10-24 12:32:32 +02:00
Commander1024	e3688ed070	Merge branch 'master' of git.commander1024.de:Commander1024/lostplaces-frontend	2021-10-18 16:30:32 +02:00
reverend	b7d1770044	Housekeeping	2021-10-18 16:02:28 +02:00
reverend	612052e0ce	Adapting LinkList to new RCSS	2021-10-18 16:02:20 +02:00
reverend	4ad580674a	so stupid js scss shit shuts the fuck up	2021-10-18 16:02:09 +02:00
reverend	739acb2e77	Iconzied Link Variant	2021-10-18 16:01:36 +02:00
reverend	2ba096e8f0	Checking Atoms	2021-10-18 16:01:28 +02:00
reverend	e775c11cc2	Removing imports in order to fix scss	2021-10-18 16:00:32 +02:00
reverend	6aa31e975f	New RCSS Version	2021-10-18 15:59:45 +02:00
reverend	0f909daeff	Fixing Watcher	2021-10-18 15:59:32 +02:00
Commander1024	6939d8823d	New generated CSS.	2021-10-09 01:46:39 +02:00
Commander1024	d34d72a675	Fixed mdi font paths.	2021-10-09 01:46:15 +02:00
Commander1024	7eb19a147c	Deleted incomplete / deprecated MDI fonts.	2021-10-02 10:03:52 +02:00
Commander1024	3d6601c110	New CSS.	2021-10-02 09:30:58 +02:00
Commander1024	8aff544de6	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2021-10-02 09:30:50 +02:00
Commander1024	f155324933	Added generated CSS - that's the one I wanted in the first place -.-	2021-10-02 09:28:51 +02:00
Commander1024	e728dc7c85	Added MDI component HTML.	2021-10-02 09:28:14 +02:00
Commander1024	e73d2d6bc2	Added empty json.	2021-10-02 09:27:41 +02:00
Commander1024	a30e09db9e	Added MDI-scss. Slightly modified to match path structure.	2021-10-02 09:27:21 +02:00
Commander1024	f839696169	Added complete MDI fonts. In 4 different formats.	2021-10-02 09:26:16 +02:00
Commander1024	e0cd7c2cbf	Added @mdi/font npm package.	2021-10-02 09:24:36 +02:00
Commander1024	dd99500edd	Remove incomplete font and stuff again.	2021-10-02 09:23:45 +02:00
reverend	c5f6a6525e	Fixed some	2021-10-02 09:04:40 +02:00
reverend	6c5ce4a6ee	A few transitions to amek things look fancier	2021-10-02 08:25:37 +02:00
Commander1024	53aec141ba	Added Material Icons font, scss and hsb.	2021-10-02 07:55:54 +02:00
Commander1024	6dc669ac19	Added Material Design Icons CSS.	2021-10-02 07:23:05 +02:00
Commander1024	9f47f9f49c	Added trailing newline.	2021-10-02 07:19:34 +02:00
Commander1024	0b99a430ee	Added Material Design Icons font, incl. license.	2021-10-02 06:50:56 +02:00
reverend	5c7136bcbf	#48 Better Link Styling	2021-07-31 11:44:52 +02:00
reverend	e906065d47	Implementing a beta version of a lightbox	2021-04-03 22:25:35 +02:00
reverend	d6a456d1eb	Small change for figure	2021-04-02 11:45:51 +02:00
Commander1024	902e815411	Fixed 404 because of misnamed font file.	2020-12-26 14:33:55 +01:00
reverend	799b9b2eff	Edit profile button	2020-12-25 16:42:39 +01:00
reverend	b4fba7b3f0	#46 Large map	2020-12-25 13:31:55 +01:00
reverend	f35ca8c818	#44 Text in place teaser is cut of	2020-12-25 12:39:37 +01:00
reverend	b97607aa8d	npm sucks bad	2020-12-25 12:39:26 +01:00
reverend	802134db14	User Profile	2020-10-04 11:14:41 +02:00
reverend	1bd1797281	More Tweaking	2020-09-29 22:21:08 +02:00
reverend	c190940fff	Tweaking teaser / teaser list on mobile viewport	2020-09-29 22:11:02 +02:00
reverend	66a420741e	image sizing tweaks	2020-09-29 21:52:09 +02:00
reverend	705d880181	Teaking image size	2020-09-29 21:48:20 +02:00
reverend	5137901948	Spacing below map	2020-09-29 20:37:34 +02:00
reverend	fe70b648d6	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend into master	2020-09-29 20:21:05 +02:00
reverend	a6e392ce51	Styling for OSM Maps	2020-09-29 20:21:02 +02:00
Commander1024	0bc2dca640	Updated sass.	2020-09-28 17:31:30 +02:00
reverend	b7a9be0c59	Aligning X	2020-09-27 17:06:21 +02:00
reverend	919c0c4f6c	Minor styling changes	2020-09-27 15:18:04 +02:00
reverend	8e4ae2d9be	Deleting and adding Image	2020-09-25 21:42:18 +02:00
reverend	af100b940b	o	2020-09-25 18:46:26 +02:00
reverend	0c24dec2ef	i	2020-09-25 18:09:22 +02:00
Commander1024	592fd4773b	Updated file / fontnames.	2020-09-22 19:39:19 +02:00
Commander1024	3a7a72e1dd	Updated fonts / included Montserrat woff2	2020-09-22 19:38:54 +02:00
Commander1024	5bbb17093d	Fixed indentation and added comments.	2020-09-09 22:03:09 +02:00
Commander1024	250dc44273	Footer refactoring.	2020-09-09 21:57:51 +02:00
Commander1024	c722b929fe	Enlarged font-size in TextSection to 1.4rem.	2020-09-08 20:50:10 +02:00
Commander1024	598bfac764	Fixed text TextSection handlebars and moved font selection up the tree.	2020-09-08 20:41:03 +02:00
Commander1024	2daa74f85a	Set a 5em top-margin to pull the footer away from maincontent.	2020-09-06 19:37:43 +02:00
Commander1024	d27d99792e	Merge commit 'f9468e3e70c1630d55be14378d0bcdba7beaeaed'	2020-09-06 17:30:00 +02:00
Commander1024	f9468e3e70	There is always something to fiddle around with styling.	2020-09-06 17:22:48 +02:00
Commander1024	e8d4a13bd0	Added dummy content to footer.	2020-09-06 17:20:09 +02:00
Commander1024	76014232a1	Adjusted social svg color, because I can't style it from file.	2020-09-06 14:36:07 +02:00
Commander1024	ce43085167	CSS classnames now in CamelCase.	2020-09-06 12:32:25 +02:00
Commander1024	9012d465d6	Sanitized line endigs.	2020-09-06 11:47:19 +02:00
Commander1024	e3b281f868	Styled social media icons.	2020-09-06 11:36:35 +02:00
Commander1024	b437fd5a2e	Added social media icons to the footer. Still ugly. I hate CSS!	2020-09-06 05:00:17 +02:00
Commander1024	e24330da63	Added a bunch of social media svg icons.	2020-09-06 04:58:04 +02:00
Commander1024	2fcc3ac3ab	Merge commit '7739cd0f5cf16eadc70b091605217f24e3233e93' into feature/footer	2020-09-06 00:36:05 +02:00
Commander1024	7739cd0f5c	Got rid of that annoying 404. Added favicon.ico.	2020-09-06 00:34:06 +02:00
Commander1024	687637af93	Added comments.	2020-09-06 00:30:04 +02:00
Commander1024	5cd481bf40	Also scoped media queries. (?)	2020-09-06 00:22:12 +02:00
Commander1024	80bd9bdb13	Scoped footer under LP-Footer.	2020-09-06 00:12:55 +02:00
Commander1024	fb13f466d0	Footer now uses global viewport variables.	2020-09-05 23:17:02 +02:00
Commander1024	713edfdc3b	Moved footer below LP-Wrapper__Site to use full width.	2020-09-05 23:13:47 +02:00
Commander1024	e5b7862752	Remove redundant and offensive CSS.	2020-09-05 23:00:50 +02:00
Commander1024	4a532b9a3d	Rudimentary first import of footer. Still needs massive work.	2020-09-05 22:39:55 +02:00
Commander1024	638c5d5510	Added comments.	2020-09-05 22:27:18 +02:00
Commander1024	d3dfc4b0cd	Edited indentation and order of fonts.	2020-09-05 22:21:25 +02:00
Commander1024	1571c8c33b	Added footer to place page.	2020-09-05 22:13:51 +02:00
Commander1024	bd86fed2f8	Merge commit '3cd9dc6ec6da65e961dcec9d57742050c3baf6a8' into feature/footer	2020-09-05 20:32:19 +02:00
Commander1024	3cd9dc6ec6	blubb	2020-09-05 20:31:00 +02:00
Commander1024	fef659aa92	Translated footer items into English.	2020-09-05 20:11:04 +02:00
Commander1024	6453a05647	Metadata maintenance.	2020-09-05 20:09:15 +02:00
Commander1024	b0e45c230b	Changed in-text font and slightly modified padding.	2020-09-04 22:19:22 +02:00
Commander1024	8a79068ba6	Useless home text change.	2020-09-04 21:57:29 +02:00
Commander1024	a3abe842b3	Codex styling adjustments.	2020-09-04 21:11:06 +02:00
Commander1024	0a3a236a47	Moderate styling changes to codec page.	2020-09-04 20:22:37 +02:00
Commander1024	3a8498ac0c	Fixed font loading. Now correctly uses bold and italic faces.	2020-09-04 20:21:54 +02:00
Commander1024	b78752144e	Removed the need to put css-classes into every paragraph.	2020-09-04 20:21:22 +02:00
Commander1024	313a9d6142	Slightly increased Cromson Text font size (0.2em).	2020-09-04 20:20:52 +02:00
Commander1024	def53cc2fc	Replaced only occurance of Roboto font with Montserrat.	2020-09-04 20:20:15 +02:00
Commander1024	669234a15d	Marked codex styling 'wip' infractaljs.	2020-09-04 20:19:04 +02:00
Commander1024	a41cb2c3af	Replaces short dummy text with longer more reasonable one.	2020-09-04 20:18:32 +02:00
Commander1024	5398343657	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-09-04 17:43:49 +02:00
Commander1024	b95e83e7b7	Dirty sync push..	2020-09-04 17:43:40 +02:00
Commander1024	ef1506ef99	Updated npm packages fractal and lodash.	2020-09-04 17:39:44 +02:00
Commander1024	02c271aa3a	Emptied context - it's a static page.	2020-09-03 21:47:43 +02:00
Commander1024	b4f2c03903	Added codex template (without styling).	2020-09-03 21:27:27 +02:00
Commander1024	d3e68e12bb	Removed About, Contact and replaces with UrBex codex.	2020-09-03 21:18:01 +02:00
Commander1024	11d33af370	Added 0.75em margin-bottom to LP-Paragraph.	2020-09-02 23:11:34 +02:00
reverend	97eaedd85f	Delete button for tags	2020-09-01 22:27:32 +02:00
reverend	ec0ba2f9c7	Tagify dropdown styling	2020-09-01 18:31:29 +02:00
reverend	179db0f9b7	CSS for tags ough	2020-09-01 18:19:51 +02:00
reverend	607de24c14	All the boxshadow	2020-08-27 15:47:03 +02:00
reverend	6a1e281b3e	Iconization in Linklist and inline form	2020-08-26 19:26:11 +02:00
reverend	7865066adb	New Icon	2020-08-26 16:48:53 +02:00
reverend	b39202d296	Linkadd form	2020-08-26 16:48:48 +02:00
reverend	4004342255	Inline Forms	2020-08-25 16:26:18 +02:00
reverend	9c8986c564	Trying out inline forms	2020-08-25 15:58:21 +02:00
reverend	823d78a0ae	Using rcss	2020-08-25 15:55:02 +02:00
reverend	313968fafd	Form fine tuning and link list add	2020-08-21 12:08:51 +02:00
reverend	8fa8033be4	LinkList add LInk	2020-08-21 10:51:07 +02:00
Commander1024	b64724b586	Converted indentation to spaces globally.	2020-08-17 15:39:17 +02:00
reverend	e80e93bcaa	Pagination disabled class	2020-08-16 20:56:34 +02:00
reverend	384cdcaae7	More Paginatoin Styling, responsive	2020-08-16 17:50:55 +02:00
reverend	427ce11adb	Removed JS, using transition instead of animation for sidebar menu sliding	2020-08-16 17:22:08 +02:00
reverend	15b4bc7880	Padding fix	2020-08-16 12:26:10 +02:00
reverend	9ebfef6c6e	Sidebar height fix	2020-08-16 11:56:21 +02:00
reverend	3f69ff8f0d	No absolute icon paths	2020-08-16 11:42:13 +02:00
reverend	5f4b72f9be	Sidebar animation is not triggered when loading page	2020-08-16 11:40:40 +02:00
reverend	57afcbdffb	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-16 10:31:01 +02:00
reverend	681cdad1cb	Responsive Sidebarmenu	2020-08-16 10:30:55 +02:00
Commander1024	a613d9a069	Made inactive pag-items gray and non-hover.	2020-08-15 20:47:40 +02:00
Commander1024	fb72b00456	Aligned page numbers to the rest again.	2020-08-14 13:56:11 +02:00
Commander1024	3970aed176	Added beautiful navigation icons to pagination nav-css.	2020-08-14 13:41:27 +02:00
Commander1024	0eacea8243	Added fest/previous next/last again incl text for alignment.	2020-08-14 11:31:35 +02:00
Commander1024	14ea0910ef	Added first/last pagination item.	2020-08-14 11:21:13 +02:00
reverend	0e3f005639	Using grid for master layout	2020-08-13 23:44:06 +02:00
reverend	fc0a96b167	Unbugged nav	2020-08-13 23:43:49 +02:00
reverend	8edcf77d44	Removed after content for prev/next	2020-08-13 23:43:34 +02:00
reverend	f973dccd27	Minor tweaks	2020-08-13 11:17:33 +02:00
reverend	a55b02825e	Color adjustment	2020-08-12 22:31:48 +02:00
reverend	7ceddb736f	Pagnation in place list	2020-08-12 22:30:14 +02:00
reverend	2243c7ed9e	Centered Pagination	2020-08-12 22:29:18 +02:00
reverend	1507a0b01e	Small tweak	2020-08-12 22:27:31 +02:00
reverend	c8c21869c4	Pagnination Component	2020-08-12 22:27:18 +02:00
reverend	09a6377901	Some Tweaks	2020-08-12 21:31:13 +02:00
reverend	f0b3839e73	MessageList Component	2020-08-12 21:31:04 +02:00
reverend	72c8febfc4	CSS for Messages	2020-08-12 20:11:22 +02:00
reverend	4120155a1c	New Icons	2020-08-12 20:11:12 +02:00
reverend	fba48603b6	Ye	2020-08-12 18:29:27 +02:00
reverend	16f0e10d89	Minor fix	2020-08-12 18:29:20 +02:00
reverend	e431d9a1a0	Form squishiness and Button layout	2020-08-12 18:29:08 +02:00
reverend	f9233249a3	Styled submit input	2020-08-12 18:28:47 +02:00
reverend	2e48395076	Neater cancle button	2020-08-12 18:28:37 +02:00
reverend	fb20b555c4	More Dynamic modifier rendering	2020-08-09 23:52:15 +02:00
reverend	67fe74d67e	Added Wrapper for Component	2020-08-09 23:52:04 +02:00
reverend	b335e7a587	Removed remnants	2020-08-09 23:48:51 +02:00
reverend	b497e10584	Current build	2020-08-09 23:44:55 +02:00
reverend	bd9df610e7	Renaming	2020-08-09 23:44:50 +02:00
reverend	448358531c	Mayor restrukturing	2020-08-09 23:44:23 +02:00
reverend	9c85c44d2b	Minor width fix	2020-08-09 23:43:57 +02:00
reverend	6d69fb6c29	New Component	2020-08-09 23:43:40 +02:00
reverend	f663864c29	Resetting	2020-08-09 23:43:21 +02:00
reverend	1230f140d0	Adjusted padding/margin	2020-08-09 23:43:03 +02:00
reverend	1a92521029	Layout defintion	2020-08-09 23:42:48 +02:00
Commander1024	02b1c39e9e	Mysterious whitespace difference after npm install.	2020-08-08 09:46:01 +02:00
reverend	039bb7d427	Sync	2020-08-07 11:24:00 +02:00
Commander1024	abb072dfcf	Added missing trailing newline.	2020-08-06 20:24:18 +02:00
Commander1024	178394ed10	Added padding to placegrid.	2020-08-05 20:44:52 +02:00
Commander1024	5844871862	Added max-height to hero image css.	2020-08-05 20:16:07 +02:00
Commander1024	bb7d3b1a2f	Limited image in hight dimension to deal with vertical photos.	2020-08-05 20:08:37 +02:00
reverend	8f7e03cda9	Sidebar and Content the same height	2020-08-05 18:38:22 +02:00
reverend	33c8b302b3	More consistent alignment	2020-08-05 18:38:22 +02:00
reverend	08872806d2	Dirty fix for SCSS bug(?)	2020-08-05 18:38:22 +02:00
Commander1024	8d99205575	Replaced .otf with .ttf fonts as referenced in .css.	2020-08-05 18:20:24 +02:00
Commander1024	450395fa01	Removed unused fonts.	2020-08-05 18:18:22 +02:00
Commander1024	6547569d78	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-05 13:46:55 +02:00
Commander1024	e79c61c63c	updated dependencies	2020-08-05 13:46:41 +02:00
reverend	af634294e2	Refactoring and uncluttering	2020-08-05 13:19:00 +02:00
reverend	cf5e804e50	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 23:48:00 +02:00
reverend	0ca397071a	uff	2020-08-04 23:47:51 +02:00
reverend	ba56976420	zam rumfrickelei	2020-08-04 23:47:39 +02:00
reverend	8f2e607b61	Styling sidebar navigation	2020-08-04 23:47:14 +02:00
reverend	8c412db0e9	Reseting of html, body	2020-08-04 23:46:44 +02:00
Commander1024	43def15caa	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 23:41:19 +02:00
Commander1024	0ad042487f	Changed otf font references by correct ttf ones.	2020-08-04 23:41:15 +02:00
reverend	93341886d6	Other behavior for sidebar links	2020-08-04 20:05:12 +02:00
Commander1024	9e061f9566	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 20:00:44 +02:00
reverend	6f3fb3850f	Minor improvements	2020-08-04 19:42:13 +02:00
reverend	8af6803dcc	More stuff	2020-08-04 19:41:55 +02:00
reverend	19c7bc9442	fixes and first steps towards navigation on the side	2020-08-04 19:41:47 +02:00
reverend	862582c7ba	Changed font of link	2020-08-04 19:40:55 +02:00
reverend	ad17e48049	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 18:36:34 +02:00
reverend	706004d2d0	Fixed Distance from headline to text	2020-08-04 18:36:25 +02:00
reverend	600361d6f9	Small tweaks for forms	2020-08-03 17:26:23 +02:00
reverend	b7486db8ef	Optimized for smaller viewports	2020-08-03 17:26:11 +02:00
Commander1024	f469520885	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-02 23:12:25 +02:00
reverend	2b079e39e3	Build	2020-08-02 23:11:52 +02:00
Commander1024	fa5cf10104	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-02 23:03:24 +02:00
reverend	00d01b0abf	More context	2020-08-02 23:03:11 +02:00
reverend	09d1ab522b	Move responseive	2020-08-02 23:02:56 +02:00
reverend	96882aef12	Optimized header for small viewports	2020-08-02 23:02:25 +02:00
reverend	e2addb919f	Fixed Markup	2020-08-02 23:02:11 +02:00
reverend	aa2a5cf3cc	Made Image more responsive	2020-08-02 23:02:06 +02:00
reverend	0bb23d6a71	Removed Navigation	2020-08-02 23:01:39 +02:00
reverend	e004d2ea7f	Defined new viewports	2020-08-02 23:00:55 +02:00
Commander1024	76e8a64a2e	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-02 09:22:03 +02:00
Commander1024	f1dcbc19db	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-01 11:09:00 +02:00
Commander1024	f898b49d05	Ignored npm package-lock file as it is a uniqe to each system.	2020-08-01 11:04:26 +02:00