I honstly lost of what I did, but its definitly worth it
This commit is contained in:
@@ -2,4 +2,6 @@
|
||||
@import 'navigation/navigation';
|
||||
@import 'introduction/introduction';
|
||||
@import 'placeGrid/placeGrid';
|
||||
@import 'placeList/placeList';
|
||||
@import 'placeList/placeList';
|
||||
@import 'linkList/linkList';
|
||||
@import 'footer/footer';
|
||||
30
components/03_Organisms/footer/_footer.scss
Normal file
30
components/03_Organisms/footer/_footer.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.LP-Footer{
|
||||
margin-top: 75px;
|
||||
width: 100%;
|
||||
background-color: $-secondary-color;
|
||||
padding: 25px;
|
||||
|
||||
.LP-LinkList__List{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.LP-LinkList__Item{
|
||||
border: none;
|
||||
padding: 5px;
|
||||
width: auto;
|
||||
|
||||
.LP-Text{
|
||||
color: $-secondary-background-color;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.LP-Link{
|
||||
display: inline;
|
||||
|
||||
&:hover{
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
components/03_Organisms/footer/footer.config.json
Normal file
3
components/03_Organisms/footer/footer.config.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Footer"
|
||||
}
|
||||
7
components/03_Organisms/footer/footer.hbs
Normal file
7
components/03_Organisms/footer/footer.hbs
Normal file
@@ -0,0 +1,7 @@
|
||||
<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>
|
||||
59
components/03_Organisms/linkList/_linkList.scss
Normal file
59
components/03_Organisms/linkList/_linkList.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.LP-LinkList__List{
|
||||
list-style-type: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 300px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.LP-LinkList__Item{
|
||||
border-left: 1px solid $-secondary-accent-color;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
height: 55px;
|
||||
|
||||
.LP-Link{
|
||||
$-link-padding: 1em;
|
||||
padding: $-link-padding 0 $-link-padding $-link-padding;
|
||||
width: calc(100% - $-link-padding);
|
||||
display: block;
|
||||
color: $-secondary-color;
|
||||
|
||||
|
||||
&--iconized{
|
||||
padding-top: 0;
|
||||
padding-bottom: 1.1em;
|
||||
|
||||
&:hover{
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
|
||||
.LP-Text{
|
||||
padding-top: .1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover{
|
||||
background-color: $-secondary-background-color;
|
||||
color: $-primary-accent-color;
|
||||
}
|
||||
|
||||
.LP-Text{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Link__Icon{
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
fill: $-primary-accent-color;
|
||||
line-height: 5em;
|
||||
}
|
||||
|
||||
.LP-LinkList__Item .LP-Link__Icon{
|
||||
position: relative;
|
||||
top: .7em;
|
||||
margin-right: .6em;
|
||||
}
|
||||
3
components/03_Organisms/linkList/linkLilst.config.json
Normal file
3
components/03_Organisms/linkList/linkLilst.config.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "LinkList"
|
||||
}
|
||||
19
components/03_Organisms/linkList/linkList.hbs
Normal file
19
components/03_Organisms/linkList/linkList.hbs
Normal file
@@ -0,0 +1,19 @@
|
||||
<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>
|
||||
@@ -1,35 +1,37 @@
|
||||
<div class="LP-Content">
|
||||
{{> @headline headline='Explorere the latest locations'}}
|
||||
<ul class="LP-Place__Grid">
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='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.'}}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<div class="LP-Content__Wrapper">
|
||||
<div class="LP-Content">
|
||||
{{> @headline headline='Explorere the latest locations'}}
|
||||
<ul class="LP-Place__Grid">
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='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.'}}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}</a>
|
||||
</li>
|
||||
<li class="LP-Place__Item">
|
||||
<a href="#" class="LP-Link">{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user