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

Better Wrapping in the footer

Browse Source
This commit is contained in:
reverend
2021-10-24 16:58:08 +02:00
parent db13ef4787
commit dd69cbbaaf
6 changed files with 282 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/03_Organisms/_organisms.scss
View File

@@ -2,7 +2,7 @@
@import 'placeGrid/placeGrid';
@import 'placeList/placeList';
@import 'linkList/linkList';
//@import 'footer/footer';
@import 'footer/footer';
//@import 'form/form';
//@import 'imageGrid/imageGrid';
//@import 'osmMap/osmMap';

13
components/03_Organisms/footer/_footer.scss
View File

@@ -10,15 +10,13 @@ $-primary-line-color: $-almost-white;
font-size: 1rem;
&Columns__Container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
@include RV-BreakPoint;
--breakPoint: 750px;
justify-content: center;
}
&Columns__Item {
flex-grow: 1;
@include RV-BreakPoint__Item;
}
* {
@@ -208,9 +206,6 @@ $-primary-line-color: $-almost-white;
}
@media(max-width: $-viewport-medium) {
.LP-Footer__ListTop {
width: 100%;
}
.LP-Footer__ListHeader {
font-size: 3em;
}

50
components/03_Organisms/footer/footer.hbs
View File

@@ -2,30 +2,36 @@
<div class="LP-FooterColumns__Container">
<!-- 1st footer column -->
<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 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>
<!-- 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 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>
<!-- 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 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 -->