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

CSS classnames now in CamelCase.

Browse Source
This commit is contained in:
Marcus Scholz
2020-09-06 12:32:25 +02:00
parent 9012d465d6
commit ce43085167
3 changed files with 215 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
// Define easily accessible color-defalts for the footer.
// Define easily accessible color-defaults for the footer.
$-primary-link-color: $-beige;
$-primary-line-color: $-almost-white;
@@ -21,7 +21,7 @@ $-primary-line-color: $-almost-white;
text-decoration: none;
}
&__generic-anchor {
&__GenericAnchor {
color: $-primary-link-color;
&:hover {
@@ -30,31 +30,31 @@ $-primary-line-color: $-almost-white;
}
// Use flexbox
&__flex {
&__Flex {
display: flex;
flex-flow: row wrap;
}
&__list-top {
&__ListTop {
width: 33.333%;
}
&__list-top > li {
&__ListTop > li {
text-align: center;
padding-bottom: 10px;
}
&__list-header {
&__ListHeader {
padding: 10px 0 5px 0;
color: $-almost-white;
font-size: 2.3vw;
}
&__list-anchor {
&__ListAnchor {
font-size: 1.3em;
}
&__social-section {
&__SocialSection {
width: 100%;
align-items: center;
justify-content: space-around;
@@ -62,7 +62,7 @@ $-primary-line-color: $-almost-white;
margin-top: 5px;
}
&__social-section::after {
&__SocialSection::after {
content: "";
position: absolute;
z-index: 1;
@@ -133,7 +133,7 @@ $-primary-line-color: $-almost-white;
}
// Big letters of "EXPLORE WITH US"
&__social-explore {
&__SocialExplore {
display: flex;
align-items: center;
font-size: 3.5em;
@@ -141,128 +141,128 @@ $-primary-line-color: $-almost-white;
}
// Small letters of "EXPLORE WITH US"
&__social-small {
&__SocialSmall {
font-size: 0.6em;
padding: 0px 20px;
}
&__social-overlap {
&__SocialOverlap {
position: relative;
z-index: 2;
background: $-grey;
padding: 0 10px;
}
&__social-overlap > a {
&__SocialOverlap > a {
font-size: 3em;
padding-right: 50px;
}
&__bottom-section {
&__BottomSection {
width: 100%;
padding: 10px;
border-top: 1px solid $-primary-line-color;
margin-top: 10px;
}
&__bottom-section > div:first-child {
&__BottomSection > div:first-child {
margin-right: auto;
}
&__bottom-wrapper {
&__BottomWrapper {
font-size: 1.5em;
color: $-almost-white;
}
}
// Media queries using global widths.
@media(max-width: $-viewport-normal) {
.LP-Footer__list-header {
font-size: 2em;
}
.LP-Footer__list-anchor {
font-size: 1.1em;
}
.LP-Footer__social-connect {
font-size: 2.5em;
}
.LP-Footer__social-overlap > a {
font-size: 2.24em;
height: 50px;
}
.LP-Footer__bottom-wrapper {
font-size: 1.3em;
}
// Media queries using global widths.
@media(max-width: $-viewport-normal) {
.LP-Footer__ListHeader {
font-size: 2em;
}
.LP-Footer__ListAnchor {
font-size: 1.1em;
}
.LP-Footer__SocialConnect {
font-size: 2.5em;
}
.LP-Footer__SocialOverlap > a {
font-size: 2.24em;
height: 50px;
}
.LP-Footer__BottomWrapper {
font-size: 1.3em;
}
}
@media(max-width: $-viewport-medium) {
.LP-Footer__list-top {
width: 100%;
}
.LP-Footer__list-header {
font-size: 3em;
}
.LP-Footer__list-anchor {
font-size: 1.5em;
}
.LP-Footer__social-section {
justify-content: center
}
.LP-Footer__social-section::after {
top: 25%;
}
.LP-Footer__social-connect {
margin-bottom: 10px;
padding: 0 10px;
}
.LP-Footer__social-overlap {
display: flex;
justify-content: center;
height: 50px;
}
.LP-Footer__social-icons-wrapper {
width: 100%;
padding: 0;
}
.LP-Footer__social-overlap {
margin-left: 0px;
}
.LP-Footer__bottom-section {
padding: 0 5px 10px 5px;
}
.LP-Footer__bottom-wrapper {
text-align: center;
width: 100%;
margin-top: 10px;
}
@media(max-width: $-viewport-medium) {
.LP-Footer__ListTop {
width: 100%;
}
.LP-Footer__ListHeader {
font-size: 3em;
}
.LP-Footer__ListAnchor {
font-size: 1.5em;
}
.LP-Footer__SocialSection {
justify-content: center
}
.LP-Footer__SocialSection::after {
top: 25%;
}
.LP-Footer__SocialConnect {
margin-bottom: 10px;
padding: 0 10px;
}
.LP-Footer__SocialOverlap {
display: flex;
justify-content: center;
height: 50px;
}
.LP-Footer__SocialIconsWrapper {
width: 100%;
padding: 0;
}
.LP-Footer__SocialOverlap {
margin-left: 0px;
}
.LP-Footer__BottomSection {
padding: 0 5px 10px 5px;
}
.LP-Footer__BottomWrapper {
text-align: center;
width: 100%;
margin-top: 10px;
}
}
@media(max-width: $-viewport-small) {
.LP-Footer__social-overlap > a {
margin: auto;
}
.LP-Footer__social-overlap > a:not(:first-child) {
margin-left: 0;
}
.LP-Footer__bottom-rights {
display: block;
}
@media(max-width: $-viewport-small) {
.LP-Footer__SocialOverlap > a {
margin: auto;
}
.LP-Footer__SocialOverlap > a:not(:first-child) {
margin-left: 0;
}
.LP-Footer__BottomRights {
display: block;
}
}
@media(max-width: $-viewport-extra-small) {
.LP-Footer__list-header {
font-size: 2.2em;
}
.LP-Footer__list-anchor {
font-size: 1.2em;
}
.LP-Footer__social-connect {
font-size: 2.4em;
}
.LP-Footer__social-overlap > a {
font-size: 2.24em;
}
.LP-Footer__bottom-wrapper {
font-size: 1.3em;
}
@media(max-width: $-viewport-extra-small) {
.LP-Footer__ListHeader {
font-size: 2.2em;
}
}
.LP-Footer__ListAnchor {
font-size: 1.2em;
}
.LP-Footer__SocialConnect {
font-size: 2.4em;
}
.LP-Footer__SocialOverlap > a {
font-size: 2.24em;
}
.LP-Footer__BottomWrapper {
font-size: 1.3em;
}
}

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

@@ -1,52 +1,52 @@
<footer class="LP-Footer LP-Footer__flex">
<ul class="LP-Footer__list-top">
<li><h4 class="LP-Footer__list-header">About Pavilion</h4></li>
<li><a href='/shop/about-mission' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">GET TO KNOW US</a></li>
<li><a href='/promos.html' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">PROMOS</a></li>
<li><a href='/retailers/new-retailers.html' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">BECOME A RETAILER</a></li>
<li><a href='/job-openings.html' itemprop="significantLink" class="LP-Footer__generic-anchor LP-Footer__list-anchor">JOB OPENINGS</a></li>
<li><a href='/shop/about-show-schedule' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">EVENTS</a></li>
<footer class="LP-Footer LP-Footer__Flex">
<ul class="LP-Footer__ListTop">
<li><h4 class="LP-Footer__ListHeader">About Pavilion</h4></li>
<li><a href='/shop/about-mission' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">GET TO KNOW US</a></li>
<li><a href='/promos.html' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">PROMOS</a></li>
<li><a href='/retailers/new-retailers.html' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">BECOME A RETAILER</a></li>
<li><a href='/job-openings.html' itemprop="significantLink" class="LP-Footer__GenericAnchor LP-Footer__ListAnchor">JOB OPENINGS</a></li>
<li><a href='/shop/about-show-schedule' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">EVENTS</a></li>
</ul>
<ul class="LP-Footer__list-top">
<li><h4 class="LP-Footer__list-header">The Gift Selection</h4></li>
<li><a href='/Angels/cat/id/70' class="LP-Footer__generic-anchor LP-Footer__list-anchor">ANGEL FIGURINES</a></li>
<li><a href='/Home-Decor/cat/id/64' class="LP-Footer__generic-anchor LP-Footer__list-anchor">HOME DECOR</a></li>
<li><a href='/Mugs/cat/id/32' class="LP-Footer__generic-anchor LP-Footer__list-anchor">MUGS</a></li>
<li><a href='/Pet-Lover/cat/id/108' class="LP-Footer__generic-anchor LP-Footer__list-anchor">PET LOVER</a></li>
<li><a href='/Ladies-Accessories/cat/id/117' class="LP-Footer__generic-anchor LP-Footer__list-anchor" target="_blank">HANDBAGS & JEWELRY</a></li>
<ul class="LP-Footer__ListTop">
<li><h4 class="LP-Footer__ListHeader">The Gift Selection</h4></li>
<li><a href='/Angels/cat/id/70' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor">ANGEL FIGURINES</a></li>
<li><a href='/Home-Decor/cat/id/64' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor">HOME DECOR</a></li>
<li><a href='/Mugs/cat/id/32' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor">MUGS</a></li>
<li><a href='/Pet-Lover/cat/id/108' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor">PET LOVER</a></li>
<li><a href='/Ladies-Accessories/cat/id/117' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" target="_blank">HANDBAGS & JEWELRY</a></li>
</ul>
<ul class="LP-Footer__list-top">
<li id='help'><h4 class="LP-Footer__list-header">Please Help Me</h4></li>
<li><a href='/shop/about-contact' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">CONTACT</a></li>
<li><a href='/faq.html' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">FAQ</a></li>
<li id='find-a-store'><a href='/shop/store-locator' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">STORE LOCATOR</a></li>
<li id='user-registration'><a href='/shop/user-registration?URL=' class="LP-Footer__generic-anchor LP-Footer__list-anchor" itemprop="significantLink">NEW USERS</a></li>
<li id='order-tracking'><a href='/shop/order-status' itemprop="significantLink" class="LP-Footer__generic-anchor LP-Footer__list-anchor">ORDER STATUS</a></li>
<ul class="LP-Footer__ListTop">
<li id='help'><h4 class="LP-Footer__ListHeader">Please Help Me</h4></li>
<li><a href='/shop/about-contact' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">CONTACT</a></li>
<li><a href='/faq.html' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">FAQ</a></li>
<li id='find-a-store'><a href='/shop/store-locator' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">STORE LOCATOR</a></li>
<li id='user-registration'><a href='/shop/user-registration?URL=' class="LP-Footer__GenericAnchor LP-Footer__ListAnchor" itemprop="significantLink">NEW USERS</a></li>
<li id='order-tracking'><a href='/shop/order-status' itemprop="significantLink" class="LP-Footer__GenericAnchor LP-Footer__ListAnchor">ORDER STATUS</a></li>
</ul>
<!-- Explore with us / social media bar -->
<section class="LP-Footer__social-section LP-Footer__flex">
<span class="LP-Footer__social-overlap LP-Footer__social-explore">
EXPLORE <span class="LP-Footer__social-small">with</span> US
<section class="LP-Footer__SocialSection LP-Footer__Flex">
<span class="LP-Footer__SocialOverlap LP-Footer__SocialExplore">
EXPLORE <span class="LP-Footer__SocialSmall">with</span> US
</span>
<span class="LP-Footer__social-overlap LP-Footer__social-icons-wrapper">
<a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__generic-anchor"
<span class="LP-Footer__SocialOverlap LP-Footer__SocialIconsWrapper">
<a href="https://mastodon.social/@urbanexploration" class="LP-Footer__Social-Mastodon LP-Footer__GenericAnchor"
target="_blank" title="Mastodon" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__generic-anchor"
<a href="https://twitter.com/urbanexploration" class="LP-Footer__Social-Twitter LP-Footer__GenericAnchor"
target="_blank" title="Twitter" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__generic-anchor"
<a href="https://www.youtube.com/channel/urbanexploration" class="LP-Footer__Social-Youtube LP-Footer__GenericAnchor"
target="_blank" title="Youtube" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__generic-anchor"
<a href="https://blog.urbanexploration.com" class="LP-Footer__Social-Wordpress LP-Footer__GenericAnchor"
target="_blank" title="Wordpress" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
<a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__generic-anchor"
<a href="https://www.instagram.com/urbanexploration" class="LP-Footer__Social-Instagram LP-Footer__GenericAnchor"
target="_blank" title="Instagram" itemprop="significantLink">
<span class="LP-Footer__Icon"></span>
</a>
@@ -54,12 +54,12 @@
</section>
<!-- Bottom section with last line of text and links. -->
<section class="LP-Footer__bottom-section LP-Footer__flex">
<div class="LP-Footer__bottom-wrapper">
<section class="LP-Footer__BottomSection LP-Footer__Flex">
<div class="LP-Footer__BottomWrapper">
Proudly made by reverend and Commander1024</span>
</div>
<div class="LP-Footer__bottom-wrapper">
<a href="/terms-of-use.html" class="LP-Footer__generic-anchor">Terms</a> | <a href="/privacy-policy.html" class="LP-Footer__generic-anchor">Privacy Policy</a>
<div class="LP-Footer__BottomWrapper">
<a href="/terms-of-use.html" class="LP-Footer__GenericAnchor">Terms</a> | <a href="/privacy-policy.html" class="LP-Footer__GenericAnchor">Privacy Policy</a>
</div>
</section>
</footer>