Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ja...

Browse Source
This commit is contained in:
reverend 2020-07-17 17:55:46 +02:00
commit 875cf06dd1
61 changed files with 6431 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
.gitignore vendored Normal file
View File

@ -0,0 +1,126 @@
# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,node
# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace
### VisualStudioCode Patch ###
# Ignore all local history of files
.history
# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,node

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"git.ignoreLimitWarning": true
}

4
components/01_Atoms/_atoms.scss Normal file
View File

@ -0,0 +1,4 @@
@import 'link/link';
@import 'headline/headline';
@import 'text/text';
@import 'icon/icon';

8
components/01_Atoms/headline/_headline.scss Normal file
View File

@ -0,0 +1,8 @@
.LP-Headline{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1.7rem;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0.2rem;
}

5
components/01_Atoms/headline/headline.config.json Normal file
View File

@ -0,0 +1,5 @@
{
"context": {
"headline": "Hello here is my headline"
}
}

1
components/01_Atoms/headline/headline.hbs Normal file
View File

@ -0,0 +1 @@
<h1 class="LP-Headline">{{headline}}</h1>

15
components/01_Atoms/icon/_icon.scss Normal file
View File

@ -0,0 +1,15 @@
.LP-Icon{
height: 20px;
width: 20px;
}
.LP-Icon__List{
list-style-type: none;
display: inline-flex;
justify-content: space-between;
justify-items: stretch;
.LP-Icon__Item{
padding: 0 3px;
}
}

1
components/01_Atoms/icon/icon.config.json Normal file
View File

@ -0,0 +1 @@
{}

7
components/01_Atoms/icon/icon.hbs Normal file
View File

@ -0,0 +1,7 @@
<img class="LP-Icon" src="/icons/favourite.svg"/>
<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>

8
components/01_Atoms/link/_link.scss Normal file
View File

@ -0,0 +1,8 @@
.LP-Link {
color: $-secondary-color;
text-decoration: none;
font-family: $-primary-accent-font;
&:hover {
color: $-secondary-accent-color;
}
}

6
components/01_Atoms/link/link.config.json Normal file
View File

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

1
components/01_Atoms/link/link.hbs Normal file
View File

@ -0,0 +1 @@
<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>

5
components/01_Atoms/text/_text.scss Normal file
View File

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

5
components/01_Atoms/text/text.config.json Normal file
View File

@ -0,0 +1,5 @@
{
"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."
}
}

1
components/01_Atoms/text/text.hbs Normal file
View File

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

4
components/02_Molecules/_molecules.scss Normal file
View File

@ -0,0 +1,4 @@
@import 'logo/logo';
@import 'textSection/textSection';
@import 'place/place';
@import 'securityMeasureList/securityMeasureList';

6
components/02_Molecules/logo/_logo.scss Normal file
View File

@ -0,0 +1,6 @@
.LP-Logo {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
}

1
components/02_Molecules/logo/logo.config.json Normal file
View File

@ -0,0 +1 @@
{}

3
components/02_Molecules/logo/logo.hbs Normal file
View File

@ -0,0 +1,3 @@
<a href="LP-Link" href="#">
<img class="LP-Logo" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2016/07/logo-2.png?auto=format&q=60&fit=max&w=930"/>
</a>

38
components/02_Molecules/place/_place.scss Normal file
View File

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

7
components/02_Molecules/place/place.config.json Normal file
View File

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

14
components/02_Molecules/place/place.hbs Normal file
View File

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

16
components/02_Molecules/securityMeasureList/_securityMeasureList.scss Normal file
View File

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

1
components/02_Molecules/securityMeasureList/securityMeasureList.config.json Normal file
View File

@ -0,0 +1 @@
{}

7
components/02_Molecules/securityMeasureList/securityMeasureList.hbs Normal file
View File

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

10
components/02_Molecules/textSection/_textSection.scss Normal file
View File

@ -0,0 +1,10 @@
.LP-Content{
padding: 15px;
}
.LP-TextSection{
.LP-Text {
line-height: 1.4rem;
}
}

1
components/02_Molecules/textSection/textSection.config.json Normal file
View File

@ -0,0 +1 @@
{}

4
components/02_Molecules/textSection/textSection.hbs Normal file
View File

@ -0,0 +1,4 @@
<article class="LP-TextSection LP-Content">
{{> @headline headline=headline}}
{{> @text text=text}}
</article>

4
components/03_Organisms/_organisms.scss Normal file
View File

@ -0,0 +1,4 @@
@import 'header/header';
@import 'navigation/navigation';
@import 'introduction/introduction';
@import 'placeGrid/placeGrid';

16
components/03_Organisms/header/_header.scss Normal file
View File

@ -0,0 +1,16 @@
.LP-Header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 70px;
&__Logo {
max-width: 300px;
width: 35%;
object-fit:contain;
}
.LP-Header__Navigation{
}
}

1
components/03_Organisms/header/header.config.json Normal file
View File

@ -0,0 +1 @@
{}

8
components/03_Organisms/header/header.hbs Normal file
View File

@ -0,0 +1,8 @@
<header class="LP-Header">
<div class="LP-Header__Logo">
{{render '@logo'}}
</div>
<div class="LP-Header__Navigation">
{{> @navigation}}
</div>
</header>

10
components/03_Organisms/introduction/_introduction.scss Normal file
View File

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

3
components/03_Organisms/introduction/introduction.config.json Normal file
View File

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

4
components/03_Organisms/introduction/introduction.hbs Normal file
View File

@ -0,0 +1,4 @@
<div class="LP-Introduction">
{{> @textsection headline='Welcome to the urban exploring registry' text='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'}}
</div>

24
components/03_Organisms/navigation/_navigation.scss Normal file
View File

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

3
components/03_Organisms/navigation/navigation.config.json Normal file
View File

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

7
components/03_Organisms/navigation/navigation.hbs Normal file
View File

@ -0,0 +1,7 @@
<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>

14
components/03_Organisms/placeGrid/_placeGrid.scss Normal file
View File

@ -0,0 +1,14 @@
.LP-Place__Grid{
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.LP-Place__Item{
margin: 0 15px;
margin-bottom: 50px;
}
}

1
components/03_Organisms/placeGrid/placeGrid.config.json Normal file
View File

@ -0,0 +1 @@
{}

35
components/03_Organisms/placeGrid/placeGrid.hbs Normal file
View File

@ -0,0 +1,35 @@
<div class="LP-Content">
{{> @headline headline='Explorere the latest locations'}}
<ul class="LP-Place__Grid">
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}
</li>
</ul>
</div>

2
components/04_Templates/_templates.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'home/home';
@import 'placeOverview/placeOverview';

4
components/04_Templates/home/_home.scss Normal file
View File

@ -0,0 +1,4 @@
.LP-MainContainer {
margin: 0 auto;
max-width: 1280px;
}

1
components/04_Templates/home/home.config.json Normal file
View File

@ -0,0 +1 @@
{}

5
components/04_Templates/home/home.hbs Normal file
View File

@ -0,0 +1,5 @@
{{> @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>

33
components/04_Templates/placeOverview/_placeOverview.scss Normal file
View File

@ -0,0 +1,33 @@
.LP-PlaceOverview{
.LP-PlaceOverview__Info{
display: flex;
margin-bottom: 40px;
.LP-PlaceOveriew__Image{
width: 600px;
height: 400px;
box-shadow: 0 0 10px $-secondary-color;
object-fit: cover;
}
.LP-PlaceOverView__Description{
padding: 0 25px;
}
}
.LP-PlaceOverView__ImageList{
list-style-type: none;
display: flex;
flex-wrap: wrap;
.LP-PlaceOverView__ImageItem{
padding: 15px;
img {
box-shadow: 0 0 5px $-secondary-color;
height: 200px;
width: 300px;
object-fit: cover;
}
}
}
}

1
components/04_Templates/placeOverview/placeOverview.config.json Normal file
View File

@ -0,0 +1 @@
{}

36
components/04_Templates/placeOverview/placeOverview.hbs Normal file
View File

@ -0,0 +1,36 @@
<article class="LP-PlaceOverview">
<div class="LP-PlaceOverview__Info">
<img class="LP-PlaceOveriew__Image" src="/images/Bildschirmfoto_von_2020-07-13_20-15-00.png">
<article class="LP-PlaceOverView__Description">
{{> @textsection headline='Kokerei Wiescherhöfen' 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.'}}
</article>
</div>
<article>
{{> @headline headline='Sicherheitsmaßnahmen'}}
{{> @securitymeasurelist}}
</article>
<ul class="LP-PlaceOverView__ImageList">
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/photo_2020-05-02_18-11-21.jpg"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_20-15-00.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/photo_2020-05-02_18-11-21.jpg"></a>
</li>
</ul>
{{> @headline headline='Lade deine Bilder hoch'}}
<form>
<input type="file"/>
</form>
</article>

12
components/_preview.hbs Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ path '/components.css' }}">
<title>Preview</title>
</head>
<body>
{{> @header}}
<article class="LP-MainContainer">{{{ yield }}}</article>
</body>
</html>

13
components/components.scss Normal file
View File

@ -0,0 +1,13 @@
$-primary-color: #D7CEC7;
$-secondary-color: #565656;
$-primary-accent-color: #76323F;
$-secondary-accent-color: #C09F80;
$-primary-sans-serif-font: "Trebuchet MS", Helvetica, sans-serif;
$-primary-serif-font: "Times New Roman", Times, serif;
$-primary-accent-font: Tahoma, 'sans-serif';
@import '01_Atoms/atoms';
@import '02_Molecules/molecules';
@import '03_Organisms/organisms';
@import '04_Templates/templates';

37
fractal.config.js Normal file
View File

@ -0,0 +1,37 @@
'use strict';
/*
* Require the path module
*/
const path = require('path');
const fs = require('fs');
/*
* Require the Fractal module
*/
const fractal = module.exports = require('@frctl/fractal').create();
/*
* Give your project a title.
*/
fractal.set('project.title', 'lostplaces');
/*
* Tell Fractal where to look for components.
*/
fractal.components.set('path', path.join(__dirname, 'components'));
/*
* Tell Fractal where to look for documentation pages.
*/
fractal.docs.set('path', path.join(__dirname, 'docs'));
/*
* Tell the Fractal web preview plugin where to look for static assets.
*/
fractal.web.set('static.path', path.join(__dirname, 'public'));
/**
* Default preview
*/
fractal.components.set('default.preview', '@preview');

5678
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

13
package.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "communitea",
"version": "0.1.0",
"dependencies": {
"@frctl/fractal": "^1.2.1",
"node-sass": "^4.13.1"
},
"scripts": {
"sass": "node-sass -w components/components.scss -o public/ --recursive",
"styleguide": "fractal start --sync",
"suite": "npm run sass & npm run styleguide"
}
}

155
public/components.css Normal file
View File

@ -0,0 +1,155 @@
.LP-Link {
color: #565656;
text-decoration: none;
font-family: Tahoma, "sans-serif"; }
.LP-Link:hover {
color: #C09F80; }
.LP-Headline {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: #565656;
font-size: 1.7rem;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0.2rem; }
.LP-Text {
color: black;
font-family: "Times New Roman", Times, serif;
font-size: 1.2rem; }
.LP-Icon {
height: 20px;
width: 20px; }
.LP-Icon__List {
list-style-type: none;
display: inline-flex;
justify-content: space-between;
justify-items: stretch; }
.LP-Icon__List .LP-Icon__Item {
padding: 0 3px; }
.LP-Logo {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain; }
.LP-Content {
padding: 15px; }
.LP-TextSection .LP-Text {
line-height: 1.4rem; }
.LP-Place {
width: 280px;
height: 235px; }
.LP-Place .LP-Place__Image {
width: 100%;
height: 165px;
object-fit: fill; }
.LP-Place .LP-Place__Assets {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.8rem;
padding: 0 10px; }
.LP-Place .LP-Place__Info .LP-Place__Title {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: #565656;
font-size: 1rem;
padding: 0px;
margin: 0px; }
.LP-Place .LP-Place__Info .LP-Place__Detail {
font-family: "Trebuchet MS", Helvetica, sans-serif;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem; }
.LP-SecurityMeasure__List {
list-style-type: none;
display: flex;
padding: 0;
margin: 0; }
.LP-SecurityMeasure__List .LP-SecurityMeasure__Item {
margin: 0 5px;
padding: 5px 8px;
background-color: #D7CEC7; }
.LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 1.2rem; }
.LP-Header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 70px; }
.LP-Header__Logo {
max-width: 300px;
width: 35%;
object-fit: contain; }
.LP-Menu__List {
list-style-type: none;
display: inline-flex;
justify-content: space-around; }
.LP-Menu__Item {
padding: 10px 15px;
margin: 0 15px;
width: 100px;
text-align: center;
background-color: transparent; }
.LP-Menu .LP-Link__Text {
color: #565656;
font-weight: bold;
text-shadow: 0px 0px 20px white; }
.LP-Menu .LP-Link__Text:hover {
color: #76323F; }
.LP-Introduction .LP-Headline {
font-size: 2rem; }
.LP-Introduction .LP-Text {
font-size: 1.3rem; }
.LP-Place__Grid {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.LP-Place__Grid .LP-Place__Item {
margin: 0 15px;
margin-bottom: 50px; }
.LP-MainContainer {
margin: 0 auto;
max-width: 1280px; }
.LP-PlaceOverview .LP-PlaceOverview__Info {
display: flex;
margin-bottom: 40px; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
width: 600px;
height: 400px;
box-shadow: 0 0 10px #565656;
object-fit: cover; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
padding: 0 25px; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList {
list-style-type: none;
display: flex;
flex-wrap: wrap; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem {
padding: 15px; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem img {
box-shadow: 0 0 5px #565656;
height: 200px;
width: 300px;
object-fit: cover; }

1
public/icons/favourite.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512.07 512.07" height="512" viewBox="0 0 512.07 512.07" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m509.759 194.639c-6.152-18.858-22.945-31.043-42.781-31.043h-127.918l-40.282-122.33c-6.192-18.805-22.95-30.926-42.729-30.926-.063 0-.128 0-.191.001-19.86.078-36.611 12.349-42.674 31.262l-39.108 121.993h-128.983c-19.886 0-36.692 12.226-42.814 31.146-6.123 18.92.335 38.674 16.453 50.324l104.361 75.434-40.17 121.991c-6.217 18.88.133 38.662 16.177 50.396 8.058 5.894 17.307 8.842 26.562 8.842 9.171-.001 18.347-2.897 26.365-8.693l104.542-75.563 103.3 75.436c16.026 11.704 36.781 11.76 52.873.147s22.575-31.328 16.518-50.227l-39.218-122.329 103.474-75.563c16.02-11.698 22.396-31.441 16.243-50.298zm-33.935 26.07-120.959 88.332 45.825 142.946c3.085 9.621-3.435 15.247-5.506 16.742s-9.465 5.91-17.625-.05l-120.901-88.289-122.206 88.333c-8.201 5.927-15.576 1.461-17.642-.05-2.065-1.511-8.558-7.187-5.392-16.8l47.033-142.833-122.145-88.287c-8.206-5.932-6.272-14.34-5.484-16.775s4.146-10.382 14.271-10.382h150.87l45.79-142.835c3.087-9.629 11.668-10.41 14.225-10.421h.052c2.62 0 11.113.769 14.255 10.309l47.07 142.947h149.624c10.1 0 13.469 7.92 14.261 10.348s2.74 10.81-5.416 16.765z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
public/icons/flag.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m512 165v-15h-166v-30c0-33.084-26.916-60-60-60h-196v-60h-90v512h90v-150h136v30c0 33.084 26.916 60 60 60h226v-15c0-37.162-8.647-56.762-16.276-74.055-7.365-16.691-13.724-31.107-13.724-61.945s6.359-45.254 13.724-61.945c7.629-17.293 16.276-36.893 16.276-74.055zm-452 317h-30v-452h30zm30-392h196c16.542 0 30 13.458 30 30v220.072c-8.833-5.123-19.075-8.072-30-8.072h-196zm166 302v-30h30c16.542 0 30 13.458 30 30s-13.458 30-30 30-30-13.458-30-30zm212.276-16.945c6.054 13.723 11.43 25.908 13.15 46.945h-143.498c5.123-8.833 8.072-19.075 8.072-30v-212h135.427c-1.721 21.037-7.097 33.223-13.15 46.945-7.63 17.293-16.277 36.893-16.277 74.055s8.647 56.762 16.276 74.055z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 816 B

1
public/icons/location.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 511 511" height="512" viewBox="0 0 511 511" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m255.5 59c-91.533 0-166 74.468-166 166s74.467 166 166 166 166-74.468 166-166-74.467-166-166-166zm0 302c-74.991 0-136-61.01-136-136s61.009-136 136-136 136 61.01 136 136-61.009 136-136 136z"/><path d="m415.306 66.193c-42.685-42.685-99.439-66.193-159.806-66.193s-117.121 23.508-159.806 66.193c-42.686 42.687-66.194 99.44-66.194 159.807 0 106.499 74.454 198.443 177.887 220.849l48.113 64.151 48.114-64.152c103.432-22.406 177.886-114.349 177.886-220.848 0-60.367-23.508-117.12-66.194-159.807zm-123.064 352.355-5.716 1.083-31.026 41.369-31.026-41.368-5.716-1.083c-92.28-17.495-159.258-98.474-159.258-192.549 0-108.075 87.925-196 196-196s196 87.925 196 196c0 94.074-66.978 175.053-159.258 192.548z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 850 B

BIN
public/images/Bildschirmfoto_von_2020-07-13_11-03-07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
public/images/Bildschirmfoto_von_2020-07-13_20-15-00.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
public/images/photo_2020-04-09_18-27-13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

BIN
public/images/photo_2020-05-02_18-11-21.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB