Added 0.75em margin-bottom to LP-Paragraph.

Delete button for tags
Tagify dropdown styling
2020-09-02 23:11:34 +02:00 · 2020-09-01 22:27:32 +02:00 · 2020-09-01 18:31:29 +02:00 · 2020-09-01 18:19:51 +02:00 · 2020-08-27 15:47:03 +02:00 · 2020-08-26 19:26:11 +02:00
20 changed files with 2515 additions and 526 deletions
--- a/components/01_Atoms/button/_button.scss
+++ b/components/01_Atoms/button/_button.scss
@@ -1,4 +1,4 @@
-.LP-Button{
+.LP-Button {
    background-color: $-light-brown;
    color: $-grey;
    border: none;
@@ -6,16 +6,18 @@
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;
+    white-space: nowrap;

-    &:active{
+    &:active {
        background-color: $-wine-red;
-        color:$-almost-white;
+        color: $-almost-white;
    }

-    &--cancel{
+    &--cancel {
        background-color: $-grey;
        color: $-almost-white;
-        &:active{
+
+        &:active {
            color: $-grey;
            background-color: $-almost-white;
        }
--- a/components/01_Atoms/input/_input.scss
+++ b/components/01_Atoms/input/_input.scss
@@ -1,25 +1,45 @@
-.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 0;
+        padding: 8px 0;
        margin-bottom: $-margin-bottom;
+        width: 100%;

-        &:focus, &:active, &:invalid{
+        &: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]{
+
+        &[type=submit] {
            background-color: $-light-brown;
            color: $-grey;
            border: none;
@@ -28,61 +48,67 @@
            font-weight: bold;
            cursor: pointer;

-            &:active{
+            &:active {
                background-color: $-wine-red;
-                color:$-almost-white;
+                color: $-almost-white;
            }

        }
    }

-    .LP-Input__Label{
+    .LP-Input__Label {
        font-family: $-primary-sans-serif-font;
        font-size: 16px;
+        white-space: wrap;
+        overflow: hidden;
    }

-    .LP-Input__Message{
+    .LP-Input__Message {
        font-family: $-primary-sans-serif-font;
        font-style: italic;
        font-size: 13px;
        padding: 3px;
        position: relative;
        top: -$-margin-bottom;
+        overflow: hidden;
    }

-    &--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{
+
+    &--disabled {
+
+        .LP-Input__Field,
+        .LP-Input__Field:disabled {
            background-color: transparent;
            border-bottom: 1px dashed $-grey;
            cursor: not-allowed;
-            
-            label + &{
+
+            label+& {
                color: red;
            }

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

-            ~.LP-Input__Message{
+            ~.LP-Input__Message {
                visibility: hidden;
-            }               
+            }
        }

-        .LP-Input__Label{
+        .LP-Input__Label {
            color: $-grey;
        }
    }
--- a/components/01_Atoms/paragraph/_paragraph.scss
+++ b/components/01_Atoms/paragraph/_paragraph.scss
@@ -4,4 +4,5 @@
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
+    margin-bottom: 0.75em
 }
--- a/components/01_Atoms/tag/_tag.scss
+++ b/components/01_Atoms/tag/_tag.scss
@@ -1,10 +1,27 @@
-.LP-Tag{
+.LP-Tag {
    padding: 8px 14px;
-    background-color: #D7CEC7;
+    background-color: $-beige;
    border-radius: 2px;
    width: max-content;
+    @include RV-FlexRow__Container;
+    height: min-content;
+    gap: 3px;

-    .LP-Paragraph{
+    &__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;
--- 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/tagList/_tagList.scss
+++ b/components/02_Molecules/tagList/_tagList.scss
@@ -1,13 +1,13 @@
-.LP-TagList{
-    .LP-TagList__List{
+.LP-TagList {
+    .LP-TagList__List {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
-        padding:0;
+        padding: 0;
        margin: 0;

-        .LP-TagList__Item{
-            margin: 6px;
+        .LP-TagList__Item {
+            margin: 3px;
        }
    }
 }
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,134 +1,90 @@
-.LP-Form{
-    flex-direction: column;
-    align-items: center;
+.LP-Form {

-	&--inline{
-		padding: 0 10px;
-		.LP-Form__Fieldset{
-			.LP-Form__Composition{
-				gap: 10px;
-			}
-		}
-	}
+    &--tagging {
+        margin-top: 25px;

-    .LP-Form__Fieldset{
-        border: none;
-		padding: 0;
-		margin: 0;
+        div.LP-Form__Composition {
+            gap: 25px;
+        }
+    }
+
+    &--inline {
+
+        .LP-Form__Legend,
+        .LP-Input__Label {
+            display: none;
+        }
+
+        .LP-Form__Button {
+            @include RV-FlexRow__Item--fixedSize(max-content);
+        }
+
+        fieldset.LP-Form__Fieldset {
+            max-width: unset;
+        }
+
+        div.LP-Form__Composition {
+            padding: 0;
+        }
+    }
+
+    &:not(.LP-Form--inline) {
+        .LP-Form__Composition {
+            @media(max-width: $-viewport-extra-small) {
+                @include RV-FlexRow__Container--multiRow;
+            }
+        }
+
+        .LP-Form__Button {
+            @include RV-FlexRow__Item--fixedSize(130px);
+
+            @media(max-width: $-viewport-extra-small) {
+                @include RV-FlexRow__Item--fixedSize(100%);
+            }
+        }
+    }
+
+    .LP-Form__Fieldset {
+        @include RV-Reset;
        max-width: 1200px;
        min-width: $-viewport-medium;

-        .LP-Form__Legend{
-            margin: 0;
-            padding: 0;
+        @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-FlexRow__Container;
+        @include RV-Spacing__Inner--small('');
+
+        &--breakable {
+            @media(max-width: $-viewport-small) {
+                @include RV-FlexRow__Container--multiRow;
+            }
+        }
+
+        &--buttons {
+            justify-content: flex-end;
+            @include RV-Spacing__Inner--small;
+        }
+    }
+
+    .LP-Form__Field {
+        @include RV-FlexRow__Item;
+    }
+
+    .LP-Form__InfoText {
+        .LP-Paragraph {
            font-family: $-primary-sans-serif-font;
-            font-size: 21px;
-        }
-
-	}
-	
-	.LP-Form__Composition{
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		gap: 30px;
-
-		&--buttons{
-			gap: 10px;
-		}
-		
-		.LP-Form__Field{
-			flex: 3 2 100px;
-			padding: 6px 0;
-
-			&--wider{
-				flex: 5 2;
-			}
-
-			&--wide{
-				flex: 4 2;
-			}
-
-			&--narrow{
-				flex: 2 1;
-			}
-
-			&--narrower{
-				flex: 1 2;
-			}
-			
-			&--static{
-				flex: 0 0;
-			}
-		}
-
-		&--buttons{
-			justify-content: flex-end;
-		}
-
-		.LP-Form__Button{
-			flex-grow: 0;
-			padding-left: 0;
-			min-width: 130px;
-
-			.LP-Link{
-				display:contents;
-			}
-		}
-		
-		.LP-Form__InfoText{
-			.LP-Paragraph{
-			font-family: $-primary-sans-serif-font;
-			color: $-grey;
-			}
-		}
-	}
-}
-
-@media(max-width: $-viewport-medium){
-.LP-Form{
-    .LP-Form__Fieldset{
-        min-width: unset;
-    }
-}
-}
-
-@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 :not(.LP-Form--inline){
-        .LP-Form__Fieldset{
-            .LP-Form__Composition{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                .LP-Form__Field{
-                    
-                    &:not(.LP-Form__Button){
-                        flex: 3 1 100px;
-                        padding: 12px 15px;
-                    }
-                }
-                
-                .LP-Form__Button{
-                    padding: 0 15px;
-                }
-                
-                &--buttons{
-                    justify-content: flex-end;
-                }
-            }
+            color: $-grey;
        }
    }
 }
--- a/components/03_Organisms/form/form.hbs
+++ b/components/03_Organisms/form/form.hbs
@@ -1,3 +1,23 @@
+
+<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>
@@ -30,8 +50,8 @@
                <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>
@@ -45,7 +65,7 @@

        <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">
--- a/components/03_Organisms/imageGrid/_imageGrid.scss
+++ b/components/03_Organisms/imageGrid/_imageGrid.scss
@@ -1,42 +1,9 @@
 .LP-ImageGrid{
+	@include RV-FlexGrid(290px, 200px);
+	@include RV-ElementList;
+	@include RV-Spacing__Inner--small;

-    .LP-ImageGrid__List{
-        list-style-type: none;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, 300px);
-        align-content: space-around;
-        justify-content: center;
-        margin: 0px;
-        padding: 0px;
+    .LP-ImageGrid__Item {
+		@include RV-ContentCrop;
    }
-
-    .LP-ImageGrid__Item{
-        margin-top:10px;
-    }
-
-    .LP-Link{
-        overflow: hidden;
-    }
-
-    .LP-Image {
-        box-shadow: 0 0 5px $-grey;
-        height: 200px;
-        width: 290px;
-        object-fit: cover;
-    }
-}
-
-@media(max-width: $-viewport-small){
-    .LP-ImageGrid{
-        .LP-ImageGrid__List{
-            grid-template-columns: 1fr;
-
-            .LP-Image{
-                box-shadow: 0 0 5px $-grey;
-                height: auto;
-                width: 100%;
-                object-fit: cover;
-            }
-        }
-    }
-}
+}
--- a/components/03_Organisms/imageGrid/imageGrid.hbs
+++ b/components/03_Organisms/imageGrid/imageGrid.hbs
@@ -1,6 +1,6 @@

 <div class="LP-ImageGrid">
-    <ul class="LP-ImageGrid__List">
+    <ul class="LP-ImageGrid__Container">
        {{#each images}}
        <li class="LP-ImageGrid__Item">
            <a href="#" class="LP-Link"><img  class="LP-Image" src="{{this}}"></a>
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -1,89 +1,75 @@
-.LP-LinkList__List{
-    list-style-type: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    margin: 0;
-    padding: 0;
+.LP-LinkList{
+	@include RV-FlexGrid(300px, 3em);
+	@include RV-ElementList;
+	@include RV-Spacing__Inner--small;
+	align-items: center;

    .LP-LinkList__Item{
-        border-left: 1px solid $-light-brown;
-        width: calc(100% - 1px);
-        margin-top: 12px;
-        position: relative;
+		border-left: 1px solid $-light-brown;
+		width: calc(100% - 1px);
+		overflow: hidden;

-        &--add{
-            .LP-LinkList__AddTrigger{
-				display: none;
-				&:checked{
-					& ~ .LP-LinkList__AddPlaceHolder{
-						visibility: hidden;
-					}
-					& ~ .LP-LinkList__Add{
-					display: block;
-					}
-				}
-            }
-            
-            .LP-LinkList__Add{
-                position: absolute;
-                top: 3px;
-				display: none;
-				width: 100%;
+		@include RV-Alignment--verticalCenter;
+		@include RV-FlexRow__Container;

-                .LP-Form__Fieldset{
-                    min-width:unset;
-                }
+		.LP-LinkList__ItemHover {
+			opacity: 0.5;
+			@include RV-Alignment--right;
+			@include RV-FlexRow__Item--fixedSize(min-content);
+		}

-                .LP-Form{
-                    display: block;
-                    min-width: 0px;
-                }
-            }
-        }
+		&:hover {
+			background-color: $-almost-white;

-        .LP-Link{
-            $-link-padding: 1em;
-            padding: $-link-padding 0 $-link-padding $-link-padding;
-            width: calc(100% - 1em);
-            display: block;
-            color: $-grey;
+			.LP-LinkList__ItemHover {
+				opacity: 1;
+			}
+		}
+	}

+	.LP-Link {
+		@include RV-FlexRow__Item;
+		@include RV-Spacing__Inner--small;
+	}

-            &--iconized{
-                padding-top: 0;
-                padding-bottom: 1.1em;
+	.LP-LinkAdd{
+		height: 0;
+	}

-                &:hover{
-                    background-color: #ccc !important;
-                }
+	.LP-LinkAdd__Container{
+		position: relative;
+		top: -39px;
+		
+	
+		.LP-Form__Fieldset{
+			min-width:unset;
+		}
+	
+		.LP-Form{
+			display: block;
+			min-width: 0px;
+		}
+	}

-                .LP-Text{
-                    padding-top: .1em;
-                }
-            }
-
-
-            &: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-LinkAdd{
+	display: none;
 }

-.LP-LinkList__Item .LP-Link__Icon{
-    position: relative;
-    top: .7em;
-    margin-right: .6em;
+.LP-LinkAdd__Trigger {
+	display: none;
+}
+
+.LP-LinkAdd__TriggerLabel{
+	cursor: pointer;
+	display: contents;
+}
+
+.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
+	display: none;
+}
+
+.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd{
+	display: block;
 }
--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -1,43 +1,66 @@
-
 <div class="LP-LinkList">
-    <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 LP-LinkList__Item--add">
-            <input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
-            <label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
-				<span class="LP-Link LP-Link--iconized">
-					<div class="LP-Link__IconWrapper">
-					<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
-						xml:space="preserve">
+	<ul class="LP-LinkList__Container">
+		<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>
+			<a href="google.com" class="LP-Link LP-LinkList__ItemHover">
+				<div class="RV-Iconized__Container RV-Iconized__Container--small">
+					<svg class="RV-Iconized__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.001 512.001"
+						style="enable-background:new 0 0 512.001 512.001;" 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>
+								<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
+			L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
+			c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
+			l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
+			L284.286,256.002z" />
+							</g>
 						</g>
 					</svg>
+				</div>
+			</a>
+		</li>
+		<li class="LP-LinkList__Item">
+			<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" />
+			<label for="checkbox123" class="LP-LinkAdd__TriggerLabel">
+				<a class="LP-Link">
+					<div class="RV-Iconized__Container RV-Iconized__Container--small">
+						<svg class="RV-Iconized__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>
+						<span class="RV-Iconized__Text">Link hinzufügen</span>
 					</div>
-					<span class="LP-Text">Link hinzufügen</span>
+				</a>
+			</label>
+			<div class="LP-LinkAdd">
+				<span class="LP-LinkAdd__Container">
+					<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">
+										<label for="input123" class="LP-Input__Label">Link URL</label>
+										<input type="text" id="input123" class="LP-Input__Field" />
+									</div>
+								</div>
+							</div>
+						</fieldset>
+					</form>
 				</span>
-            </label>
-			<span class="LP-LinkList__Add">
-				<form class="LP-Form LP-Form--inline">
-					<fieldset class="LP-Form__Fieldset">
-						<div class="LP-Form__Composition LP-Form__Composition">
-							<div class="LP-Form__Field LP-Form__Field--static LP-Input">
-								<button class="LP-Button">Add</button>
-							</div>
-							<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
-								<input class="LP-Input__Field" type="url"/>
-							</div>
-							</div>
-						</div>
-					</fieldset>
-				</form>
-			</span>
-        </li>
-    </ul>
+			</div>
+		</li>
+	</ul>
 </div>
--- a/components/04_Templates/placeDetail/_placeDetail.scss
+++ b/components/04_Templates/placeDetail/_placeDetail.scss
@@ -2,7 +2,8 @@

    .LP-PlaceDetail__Image{
        width: 700px;
-        max-height: 500px;
+		max-height: 500px;
+		@include RV-BoxShadow--simple($-grey);
        box-shadow: 0 0 10px $-grey;
        object-fit: cover;
        object-position: 0 0;
--- a/components/_tagify.scss
+++ b/components/_tagify.scss
@@ -0,0 +1,149 @@
+.tagify {
+    @extend .LP-Input__Field;
+
+    &+input,
+    &+textarea {
+        display: none;
+    }
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.tagify--focus {
+    @extend .LP-Input__Field--active
+}
+
+.tagify__tag {
+    @extend .LP-Tag;
+    @extend .LP-TagList__Item;
+    background-color: #bdbdbd;
+
+    &:hover {
+        background-color: #e9e9e9;
+    }
+
+    display: inline-flex;
+    cursor: default;
+    transition: .13s ease-out;
+    height: max-content;
+
+    align-items: center;
+    gap: 3px;
+}
+
+.tagify__input {
+    flex-grow: 1;
+    display: inline-block;
+    min-width: 110px;
+    margin: 5px;
+    line-height: inherit;
+    position: relative;
+    white-space: pre-wrap;
+    margin-left: 15px;
+    height: 1em;
+}
+
+.tagify__tag__removeBtn {
+    order: 5;
+    cursor: pointer;
+    font: 1.5em/1 Arial;
+    transition: .2s ease-out;
+    color: $-wine-red;
+}
+
+.tagify__tag__removeBtn::after {
+    content: "\00D7"
+}
+
+.tagify__tag__removeBtn:hover {
+    color: $-grey;
+}
+
+.tagify__tag__removeBtn:hover+div>span {
+    opacity: .5
+}
+
+.tagify__tag__removeBtn:hover+div::before {
+    box-shadow: 0 0 0 1.1em rgba(211, 148, 148, .3) inset !important;
+    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important;
+    transition: .2s
+}
+
+.tagify__tag--loading .tagify__tag__removeBtn {
+    display: none
+}
+
+.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
+    display: none
+}
+
+.tagify__dropdown {
+    position: absolute;
+    z-index: 9999;
+    transform: translateY(1px);
+    overflow: hidden
+}
+
+.tagify__dropdown[placement=top] {
+    margin-top: 0;
+    transform: translateY(-100%)
+}
+
+.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
+    border-top-width: 1px;
+    border-bottom-width: 0
+}
+
+.tagify__dropdown[position=text] {
+    box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), .1);
+    font-size: .9em
+}
+
+.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
+    border-width: 1px
+}
+
+.tagify__dropdown__wrapper {
+    max-height: 300px;
+    overflow: hidden;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .2);
+    transition: .25s cubic-bezier(0, 1, .5, 1)
+}
+
+.tagify__dropdown__wrapper:hover {
+    overflow: auto
+}
+
+.tagify__dropdown--initial .tagify__dropdown__wrapper {
+    max-height: 20px;
+    transform: translateY(-1em)
+}
+
+.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
+    transform: translateY(2em)
+}
+
+.tagify__dropdown__item {
+    box-sizing: inherit;
+    padding: .3em .5em;
+    margin: 1px;
+    cursor: pointer;
+    border-radius: 2px;
+    position: relative;
+    outline: 0;
+
+    font-family: $-primary-sans-serif-font;
+}
+
+.tagify__dropdown__item--active {
+    color: $-almost-white;
+    background-color: gray;
+}
+
+.tagify__dropdown__item:active {
+    filter: brightness(105%)
+}
--- a/components/main.scss
+++ b/components/main.scss
@@ -1,20 +1,20 @@
+@import './rcss.bundled.scss';
+
@font-face {
    font-family: Crimson;
    src:
        url('fonts/Crimson/CrimsonText-Regular.ttf'),
        url('fonts/Crimson/CrimsonText-Bold.ttf'),
-        url('fonts/Crimson/CrimsonText-Italic.ttf')
-        ;
-  }
+        url('fonts/Crimson/CrimsonText-Italic.ttf');
+}

-  @font-face {
+@font-face {
    font-family: Montserrat;
    src:
        url('fonts/Montserrat/Montserrat-Regular.ttf'),
        url('fonts/Montserrat/Montserrat-Bold.ttf'),
-        url('fonts/Montserrat/Montserrat-Italic.ttf')
-        ;
-  }
+        url('fonts/Montserrat/Montserrat-Italic.ttf');
+}

 $-beige: #D7CEC7;
 $-grey: #565656;
@@ -22,9 +22,15 @@ $-wine-red: #76323F;
 $-light-brown: #C09F80;
 $-almost-white: #f9f9f9;

-$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
-$-primary-serif-font: Crimson, Times, serif;
-$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
+$-primary-sans-serif-font: Montserrat,
+Helvetica,
+sans-serif;
+$-primary-serif-font: Crimson,
+Times,
+serif;
+$-primary-sans-serif-accent-font: Roboto,
+Arial,
+sans-serif;

 $-viewport-extra-small: 450px;
 $-viewport-small: 650px;
@@ -35,83 +41,83 @@ $-viewport-toggle-sidebar: $-viewport-small;

 $-sidebar-width: 250px;

-html{
-  height:100%;
-  margin: 0;
-  padding: 0;
+html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }

-body{
-  height: 100%;
-  margin: 0;
-  padding: 0;
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }

-.LP-Wrapper__Site{
+.LP-Wrapper__Site {
    display: grid;
    grid-template-columns: $-sidebar-width 1fr;
    grid-template-rows: auto 1fr;
-    grid-template-areas: "header header" "sidebar content";
+    grid-template-areas: "header header""sidebar content";
    margin: 0;
    padding: 0;
    min-height: 100vh;
 }

-.LP-Main__Content{
-        min-height: 1px;
-        padding: 25px;
-        grid-area: content;
+.LP-Main__Content {
+    min-height: 1px;
+    padding: 25px;
+    grid-area: content;
 }

-.LP-Main__Sidebar{
+.LP-Main__Sidebar {
    grid-area: sidebar;
    background-color: #f9f9f9;
 }

-.LP-Section{
+.LP-Section {
    clear: both;
    padding: 25px 0px;
    padding-left: 25px;

-    .LP-Headline{
+    .LP-Headline {
        margin-left: -25px;
    }
 }

-.LP-Menu__Trigger{
+.LP-Menu__Trigger {
    display: none;
 }

-@media(max-width: $-viewport-normal){
-    .LP-Wrapper__Site{
+@media(max-width: $-viewport-normal) {
+    .LP-Wrapper__Site {
        grid-template-columns: (0.75 * $-sidebar-width) 1fr;
    }
 }

-@media(max-width: $-viewport-small){
-    .LP-Section{
+@media(max-width: $-viewport-small) {
+    .LP-Section {
        padding-left: 0;
        padding-right: 0;

-        .LP-Headline{
+        .LP-Headline {
            margin: 0;
        }
    }
 }

-@media(max-width: $-viewport-extra-small){
-    .LP-Main__Sidebar{
+@media(max-width: $-viewport-extra-small) {
+    .LP-Main__Sidebar {
        max-width: 100vw;
    }
 }

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

-    .LP-Main__Sidebar{
-        grid-area:unset;
+    .LP-Main__Sidebar {
+        grid-area: unset;
        width: $-sidebar-width;
        z-index: 15;
        position: fixed;
@@ -121,23 +127,23 @@ body{
        border-right: 1px solid $-light-brown;
        transition: left 0.3s;

-        &--hidden{
+        &--hidden {
            visibility: hidden;
        }
    }

-    #toggle_sidebar:checked ~ .LP-Main__Sidebar{
-        left: 0 ;
+    #toggle_sidebar:checked~.LP-Main__Sidebar {
+        left: 0;
    }

-    #toggle_sidebar ~ .LP-Main__Sidebar{
+    #toggle_sidebar~.LP-Main__Sidebar {
        left: -1 * $-sidebar-width - 1;
    }

-    .LP-Menu__TriggerLabel{
+    .LP-Menu__TriggerLabel {
        z-index: 20;
        height: 60px;
-        width: 60px;    
+        width: 60px;
        background-image: url('icons/hamburger_menu.svg');
        background-repeat: no-repeat;
        background-clip: content-box;
@@ -145,12 +151,12 @@ body{
        position: fixed;
    }

-    .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{
+    .LP-Menu__Trigger:checked~.LP-Menu__TriggerLabel {
        background-color: invert($-grey);
        filter: invert(1);
    }

-    .LP-Main__Content{
+    .LP-Main__Content {
        margin-top: 60px;
    }
 }
@@ -159,4 +165,6 @@ body{
@import '02_Molecules/molecules';
@import '03_Organisms/organisms';
@import '04_Templates/templates';
-@import '05_Pages/pages';
+@import '05_Pages/pages';
+
+@import './tagify';
--- a/components/rcss.bundled.scss
+++ b/components/rcss.bundled.scss
@@ -0,0 +1,580 @@
+// Padding and Margin sizes
+
+$-spacing-small: 10px;
+$-spacing-medium: 25px;
+$-spacing-large: 35px;
+
+.pink {
+	background-color: pink;
+}
+@mixin RV-Reset {
+	margin: 0;
+	padding: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	border: none;
+}
+@mixin RV-Alignment--top {
+	display: grid;
+	align-content: start;
+}
+
+@mixin RV-Alignment--bottom {
+	display: grid;
+	align-content: end;
+}
+
+@mixin RV-Alignment--left {
+	display: grid;
+	justify-content: start;
+}
+
+@mixin RV-Alignment--right {
+	display: grid;
+	justify-content: end;
+}
+
+@mixin RV-Alignment--horizontalCenter {
+	display: grid;
+	justify-content: center;
+}
+
+@mixin RV-Alignment--verticalCenter {
+	display: grid;
+	align-items: center;
+}
+
+@mixin RV-Alignment--center {
+	@include RV-Alignment--horizontalCenter;
+	@include RV-Alignment--verticalCenter;
+}
+
+@mixin RV-Alignment__Container {
+	display: grid;
+
+	&--top {
+		@include RV-Alignment--top;
+	}
+
+	&--bottom {
+		@include RV-Alignment--bottom;
+	}
+
+	&--left {
+		@include RV-Alignment--left;
+	}
+
+	&--right {
+		@include RV-Alignment--right;
+	}
+
+	&--horizontalCenter {
+		@include RV-Alignment--horizontalCenter;
+	}
+
+	&--verticalCenter {
+		@include RV-Alignment--verticalCenter;
+	}
+
+	&--center {
+		@include RV-Alignment--center;
+	}
+}
+
+@mixin RV-Alignment {
+	&__Container {
+		@include RV-Alignment__Container;
+	}
+}
+
+.RV-Alignment {
+	@include RV-Alignment;
+}
+
+
+@mixin RV-FlexRow__Container--column {
+	display: flex;
+	flex-direction: column;
+}
+
+@mixin RV-FlexRow__Container--multiRow {
+	flex-wrap: wrap;
+}
+
+@mixin RV-FlexRow__Container {
+	display: flex;
+	flex-direction: row;
+	height: 100%;
+
+	&--multiRow {
+		@include RV-FlexRow__Container--multiRow;
+	}
+
+	&--column {
+		@include RV-FlexRow__Container--column;
+	}
+}
+
+@mixin RV-FlexRow__Item--normal {
+	flex-grow: 3;
+	flex-shrink: 3;
+}
+
+@mixin RV-FlexRow__Item--narrower {
+	flex-grow: 1;
+	flex-shrink: 5;
+}
+
+@mixin RV-FlexRow__Item--narrow {
+	flex-grow: 2;
+	flex-shrink: 4;
+}
+
+@mixin RV-FlexRow__Item--wide {
+	flex-grow: 4;
+	flex-shrink: 2;
+}
+@mixin RV-FlexRow__Item--wider {
+	flex-grow: 5;
+	flex-shrink: 1;
+}
+@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
+	flex-grow: 0;
+	flex-shrink: 0;
+	width: min-content;
+	flex-basis: $-width;
+}
+
+@mixin RV-FlexRow__Item {
+	@include RV-Alignment;
+
+	min-width: min-content;
+	width: 100%;
+
+	&,&--normal {
+		@include RV-FlexRow__Item--normal;
+	}
+
+	&--narrower {
+		@include RV-FlexRow__Item--narrower;
+	}
+
+	&--narrow {
+		@include RV-FlexRow__Item--narrow;
+	}
+
+	&--wide {
+		@include RV-FlexRow__Item--wide;
+	}
+
+	&--wider {
+		@include RV-FlexRow__Item--wider;
+	}
+
+	&--fixedSize {
+		@include RV-FlexRow__Item--fixedSize;
+	}
+}
+
+@mixin RV-FlexRow--multiRow {
+	&__Container {
+		@include RV-FlexRow__Container--multiRow;
+	}
+}
+
+@mixin RV-FlexRow {
+	&__Container {
+		@include RV-FlexRow__Container;
+	}
+
+	&__Item {
+		@include RV-FlexRow__Item;
+	}
+}
+
+.RV-FlexRow{
+	@include RV-FlexRow;
+}
+@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
+	grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
+	grid-auto-rows: minmax($-item_height, 1fr);
+}
+
+@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
+	&__Container {
+		@include RV-FlexGrid__Container($-item_width, $-item_height);
+	}
+
+	&__Item {
+		@include RV-Alignment;
+	}
+}
+
+.RV-FlexGrid{
+	@include RV-FlexGrid;
+}
+
+@mixin RV-ContentCrop--bottom {
+	img {
+		object-position: botom;
+	}
+}
+
+@mixin RV-ContentCrop--top {
+	img {
+		object-position: top;
+	}
+}
+
+@mixin RV-ContentCrop--right {
+	img {
+		object-position: right;
+	}
+}
+
+@mixin RV-ContentCrop--left {
+	img {
+		object-position: left;
+	}
+}
+
+@mixin RV-ContentCrop--center {
+	img {
+		object-position: center;
+	}
+}
+
+@mixin RV-ContentCrop{
+	&,* {
+		overflow: hidden;
+		word-break: break-all;
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	&--left {
+		@include RV-ContentCrop--left;
+	}
+
+	&--center {
+		@include RV-ContentCrop--center;
+	}
+
+	&--top {
+		@include RV-ContentCrop--top;
+	}
+
+	&--bottom {
+		@include RV-ContentCrop--bottom;
+	}
+
+	&--center {
+		@include RV-ContentCrop--center;
+	}
+}
+
+.RV-ContentCrop__Container {
+	@include RV-ContentCrop;
+}
+@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
+	
+	&__Container#{$-suffix} {
+		flex-direction: row;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		min-width: $-base_width;
+		height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') {
+	&__Container#{$-suffix} {
+		flex-direction: column;
+		width:max-content;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		width: $-base_width;
+		min-height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') {
+
+	&__Container#{$-suffix} {
+		flex-flow: row wrap;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		width: calc(100% - #{$-base_width});
+		min-width: $-base-width;
+		height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') {
+	&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
+		flex-grow: 1;
+	}
+}
+
+@mixin RV-Fan ($-base_height, $-base_width) {
+	@include RV-Fan--vertical($-base_height, $-base_width, '--vertical');
+	@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal');
+	@include RV-Fan--auto($-base_height, $-base_width, '--auto');
+	@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth');
+
+	&__Container {
+		display: flex;
+	}
+
+	&__Base {
+		height: $-base_height;
+		width: $-base_width;
+		flex: 0 0 auto;
+	}
+
+	&__Surface {
+		@include RV-ContentCrop;
+	}
+}
+
+.RV-Fan {
+	@include RV-Fan(280px, 320px);
+}
+@mixin RV-FullWidthContent__Container {
+	width: 100%;
+}
+
+@mixin RV-FullWidthContent__Item {
+	width: 100%;
+        @include RV-ContentCrop;
+}
+
+@mixin RV-FullWidthContent {
+    &__Container {
+        @include RV-FullWidthContent__Container;
+    }
+
+    &__Item {
+		@include RV-FullWidthContent__Item;
+    }
+}
+
+.RV-FullWidthContent {
+    @include RV-FullWidthContent;
+}
+@mixin RV-BoxShadow--simple($-color) {
+	box-shadow: 0 0 10px $-color;
+}
+
+@mixin RV-BoxShadow($-color) {
+
+    position:relative;
+    float:left;
+
+    &:before, &:after {
+        content:"";
+        position:absolute; 
+        z-index:-2;
+    }
+
+    &--simple {
+        @include RV-BoxShadow--simple($-color);
+    }
+
+    &--raised {
+        &:after {
+            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+        }
+    }
+
+    &--liftedCorners {
+          
+        &:before, &:after {
+            bottom:15px;
+            left:10px;
+            width:50%;
+            height:20%;
+            max-width:300px;
+            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+            transform:rotate(-3deg);
+        }
+          
+        &:after{
+            right:10px; 
+            left:auto;
+            transform:rotate(3deg);
+        }
+    }
+}
+
+.RV-BoxShadow {
+    @include RV-BoxShadow(#6b5690);
+}
+@mixin RV-ElementList {
+    &__Container {
+        list-style-type: none;
+        @include RV-Reset;
+    }
+
+    &__Item {
+        @include RV-Reset;
+    }
+}
+
+.RV-ElementList {
+    @include RV-ElementList;
+}
+@mixin RV-Spacing__Outer--small {
+    margin: $-spacing-small;
+}
+
+@mixin RV-Spacing__Outer--medium {
+    margin: $-spacing-medium;
+}
+
+@mixin RV-Spacing__Outer--large {
+    margin: $-spacing-large;
+}
+
+
+@mixin RV-Spacing__Inner--small($-container-suffix: '__Container')  {
+	padding: $-spacing-small;
+	&#{$-container-suffix} {
+		gap: $-spacing-small;
+	}
+}
+
+@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container')  {
+    padding: $-spacing-medium;
+    &#{$-container-suffix} {
+		gap: $-spacing-medium;
+	}
+}
+
+@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') {
+    padding: $-spacing-large;
+    &#{$-container-suffix} {
+		gap: $-spacing-large;
+	}
+}
+
+@mixin RV-Spacing {
+    &__Outer{
+        &--small {
+            @include RV-Spacing__Outer--small;
+        }
+
+        &--medium {
+            @include RV-Spacing__Outer--medium;
+        }
+
+        &--large {
+            @include RV-Spacing__Outer--large;
+        }
+    }
+
+    &__Inner{
+        &--small {
+            @include RV-Spacing__Inner--small('');
+        }
+
+        &--medium {
+            @include RV-Spacing__Inner--medium('');
+        }
+
+        &--large {
+            @include RV-Spacing__Inner--large('');
+        }
+    }
+}
+
+.RV-Spacing {
+    @include RV-Spacing;
+}
+.RV-Iconized {
+	&__Container {
+		position: relative;
+
+		&--small {
+			top: -.25em;
+		}
+
+		&--medium {
+			top: -.5em;
+		}
+
+		&--large {
+			top: -1.03073em;
+		}
+
+		&--huge {
+			top: -2.05em;
+		}
+	}
+
+	&__Icon {
+		@include RV-Reset;
+	}
+
+	&__Container--extraSmall &__Icon{
+		width: 1em;
+		height: 1em;
+		position: relative;
+		top: .125em;
+	}
+
+	&__Container--small &__Icon{
+		width: 1.5em;
+		height: 1.5em;
+		position: relative;
+		top: .45em;
+	}
+	
+	&__Container--medium &__Icon{
+		width: 2em;
+		height: 2em;
+		position: relative;
+		top: .625em;
+	}
+	&__Container--large &__Icon{
+		width: 3em;
+		height: 3em;
+		position: relative;
+		top: 1.15573em;
+	}
+	&__Container--huge &__Icon{
+		width: 5em;
+		height: 5em;
+		position: relative;
+		top: 2.175em;
+	}
+}
+
+@mixin RV-ImageGrid {
+    @include RV-ElementList;
+    @include RV-FlexGrid;
+
+    &__Container {
+        @include RV-Spacing__Inner--medium;
+    }
+
+    &__Item {
+        @include RV-ContentCrop;
+        @include RV-ContentCrop--center;
+    }
+}
+
+.RV-ImageGrid {
+    @include RV-ImageGrid;
+}
--- a/public/icons/cancel.svg
+++ b/public/icons/cancel.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
+			L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
+			c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
+			l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
+			L284.286,256.002z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/public/icons/plus.svg
+++ b/public/icons/plus.svg
@@ -0,0 +1,8 @@
+					<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>
--- a/public/main.css
+++ b/public/main.css
--- a/public/rcss.bundled.css
+++ b/public/rcss.bundled.css
@@ -0,0 +1,416 @@
+.pink {
+  background-color: pink; }
+
+.RV-Alignment__Container {
+  display: grid; }
+  .RV-Alignment__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-Alignment__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-Alignment__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-Alignment__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-Alignment__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-Alignment__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-Alignment__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-FlexRow__Container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around; }
+  .RV-FlexRow__Container--multiRow {
+    flex-wrap: wrap; }
+
+.RV-FlexRow__Item {
+  min-width: 0;
+  width: 100%; }
+  .RV-FlexRow__Item__Container {
+    display: grid; }
+    .RV-FlexRow__Item__Container--top {
+      display: grid;
+      align-content: start; }
+    .RV-FlexRow__Item__Container--bottom {
+      display: grid;
+      align-content: end; }
+    .RV-FlexRow__Item__Container--left {
+      display: grid;
+      justify-content: start; }
+    .RV-FlexRow__Item__Container--right {
+      display: grid;
+      justify-content: end; }
+    .RV-FlexRow__Item__Container--horizontalCenter {
+      display: grid;
+      justify-content: center; }
+    .RV-FlexRow__Item__Container--verticalCenter {
+      display: grid;
+      align-content: center; }
+    .RV-FlexRow__Item__Container--center {
+      display: grid;
+      justify-content: center;
+      display: grid;
+      align-content: center; }
+  .RV-FlexRow__Item, .RV-FlexRow__Item--normal {
+    flex-grow: 3;
+    flex-shrink: 3; }
+  .RV-FlexRow__Item--narrower {
+    flex-grow: 1;
+    flex-shrink: 5; }
+  .RV-FlexRow__Item--narrow {
+    flex-grow: 2;
+    flex-shrink: 4; }
+  .RV-FlexRow__Item--wide {
+    flex-grow: 4;
+    flex-shrink: 2; }
+  .RV-FlexRow__Item--wider {
+    flex-grow: 5;
+    flex-shrink: 1; }
+  .RV-FlexRow__Item--fixedSize {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: min-content; }
+
+.RV-FlexGrid__Container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-rows: repeat(auto-fill, 300px);
+  grid-auto-rows: 300px; }
+
+.RV-FlexGrid__Item__Container {
+  display: grid; }
+  .RV-FlexGrid__Item__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-FlexGrid__Item__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-FlexGrid__Item__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-FlexGrid__Item__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-FlexGrid__Item__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-FlexGrid__Item__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-FlexGrid__Item__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-ContentCrop__Container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-ContentCrop__Container--left img {
+  object-position: left; }
+
+.RV-ContentCrop__Container--center img {
+  object-position: center; }
+
+.RV-ContentCrop__Container--top img {
+  object-position: top; }
+
+.RV-ContentCrop__Container--bottom img {
+  object-position: botom; }
+
+.RV-ContentCrop__Container--center img {
+  object-position: center; }
+
+.RV-Fan__Container--vertical {
+  flex-direction: column;
+  width: max-content; }
+
+.RV-Fan__Container--vertical .RV-Fan__Surface {
+  width: 320px;
+  min-height: 280px; }
+
+.RV-Fan__Container--horizontal {
+  flex-direction: row; }
+
+.RV-Fan__Container--horizontal .RV-Fan__Surface {
+  min-width: 320px;
+  height: 280px; }
+
+.RV-Fan__Container--auto {
+  flex-flow: row wrap; }
+
+.RV-Fan__Container--auto .RV-Fan__Surface {
+  width: calc(100% - 320px);
+  min-width: 320px;
+  height: 280px; }
+
+.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface {
+  flex-grow: 1; }
+
+.RV-Fan__Container {
+  display: flex; }
+
+.RV-Fan__Base {
+  height: 280px;
+  width: 320px;
+  flex: 0 0 auto; }
+
+.RV-Fan__Surface, .RV-Fan__Surface * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-Fan__Surface img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-Fan__Surface--left img {
+  object-position: left; }
+
+.RV-Fan__Surface--center img {
+  object-position: center; }
+
+.RV-Fan__Surface--top img {
+  object-position: top; }
+
+.RV-Fan__Surface--bottom img {
+  object-position: botom; }
+
+.RV-Fan__Surface--center img {
+  object-position: center; }
+
+.RV-FullWidthContent__Container {
+  width: 100%; }
+
+.RV-FullWidthContent__Item {
+  width: 100%; }
+  .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * {
+    overflow: hidden;
+    word-break: break-all; }
+  .RV-FullWidthContent__Item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; }
+  .RV-FullWidthContent__Item--left img {
+    object-position: left; }
+  .RV-FullWidthContent__Item--center img {
+    object-position: center; }
+  .RV-FullWidthContent__Item--top img {
+    object-position: top; }
+  .RV-FullWidthContent__Item--bottom img {
+    object-position: botom; }
+  .RV-FullWidthContent__Item--center img {
+    object-position: center; }
+
+.RV-BoxShadow {
+  position: relative;
+  float: left;
+  width: 40%;
+  margin: 2em 10px 4em;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  .RV-BoxShadow:before, .RV-BoxShadow:after {
+    content: "";
+    position: absolute;
+    z-index: -2; }
+  .RV-BoxShadow--simple {
+    box-shadow: 0 0 20px #6b5690; }
+  .RV-BoxShadow--raised:after {
+    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after {
+    bottom: 15px;
+    left: 10px;
+    width: 50%;
+    height: 20%;
+    max-width: 300px;
+    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
+    transform: rotate(-3deg); }
+  .RV-BoxShadow--liftedCorners:after {
+    right: 10px;
+    left: auto;
+    transform: rotate(3deg); }
+
+.RV-ElementList__Container {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ElementList__Item {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-Spacing__Outer--small {
+  margin: 10px; }
+
+.RV-Spacing__Outer--medium {
+  margin: 25px; }
+
+.RV-Spacing__Outer--large {
+  margin: 35px; }
+
+.RV-Spacing__Inner--small {
+  padding: 10px; }
+  .RV-Spacing__Inner--small {
+    gap: 10px; }
+
+.RV-Spacing__Inner--medium {
+  padding: 25px; }
+  .RV-Spacing__Inner--medium {
+    gap: 25px; }
+
+.RV-Spacing__Inner--large {
+  padding: 35px; }
+  .RV-Spacing__Inner--large {
+    gap: 35px; }
+
+.RV-Iconized__Container {
+  position: relative; }
+  .RV-Iconized__Container--medium {
+    top: -.5em; }
+  .RV-Iconized__Container--large {
+    top: -1.03073em; }
+  .RV-Iconized__Container--huge {
+    top: -2.05em; }
+
+.RV-Iconized__Icon {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-Iconized__Container--small .RV-Iconized__Icon {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  top: .125em; }
+
+.RV-Iconized__Container--medium .RV-Iconized__Icon {
+  width: 2em;
+  height: 2em;
+  position: relative;
+  top: .625em; }
+
+.RV-Iconized__Container--large .RV-Iconized__Icon {
+  width: 3em;
+  height: 3em;
+  position: relative;
+  top: 1.15573em; }
+
+.RV-Iconized__Container--huge .RV-Iconized__Icon {
+  width: 5em;
+  height: 5em;
+  position: relative;
+  top: 2.175em; }
+
+.RV-ImageGrid__Container {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ImageGrid__Item {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ImageGrid__Container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-rows: repeat(auto-fill, 300px);
+  grid-auto-rows: 300px; }
+
+.RV-ImageGrid__Item__Container {
+  display: grid; }
+  .RV-ImageGrid__Item__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-ImageGrid__Item__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-ImageGrid__Item__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-ImageGrid__Item__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-ImageGrid__Item__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-ImageGrid__Item__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-ImageGrid__Item__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-ImageGrid__Container {
+  padding: 25px; }
+  .RV-ImageGrid__Container__Container {
+    gap: 25px; }
+
+.RV-ImageGrid__Item, .RV-ImageGrid__Item * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-ImageGrid__Item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-ImageGrid__Item--left img {
+  object-position: left; }
+
+.RV-ImageGrid__Item--center img {
+  object-position: center; }
+
+.RV-ImageGrid__Item--top img {
+  object-position: top; }
+
+.RV-ImageGrid__Item--bottom img {
+  object-position: botom; }
+
+.RV-ImageGrid__Item--center img {
+  object-position: center; }
+
+.RV-ImageGrid__Item img {
+  object-position: center; }
Author	SHA1	Message	Date
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