Skip to content

Commit

Permalink
add dark background for locations list
Browse files Browse the repository at this point in the history
  • Loading branch information
@Beth3346
Beth3346 committed Dec 7, 2021
1 parent 432aedf commit 9a6e819
Show file tree
Hide file tree
Showing 3 changed files with 291 additions and 36 deletions.
125 changes: 124 additions & 1 deletion src/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
$config: extend(
(
primary-color: $primary-color,
accent-color: $secondary-color,
accent-color: #e3037e,
),
$config
);
Expand Down Expand Up @@ -67,3 +67,126 @@
font-weight: 900;
}
}

@mixin elr-locations-list($config: ()) {
$config: extend(
(
heading-color: $primary-color,
accent-color: $tertiary-color,
border-color: $light-gray,
background-color: #111,
),
$config
);

$heading-color: map-get($config, heading-color);
$accent-color: map-get($config, accent-color);
$border-color: map-get($config, border-color);
$background-color: map-get($config, background-color);

padding: ($base-fontsize * 2) ($base-fontsize * 3) 0;
border-radius: $border-radius;

@media (max-width: 660px) {
padding-bottom: ($base-fontsize * 2);
}

.locations-heading {
color: $heading-color;
font-weight: 900;
border-bottom: 1px solid $border-color;
margin: 0;
padding: 0;
padding-bottom: $base-fontsize * 0.5;
margin-bottom: $base-fontsize;
}

.location-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
padding-left: 0;
}

.location-item {
@include elr-address-block;
flex-basis: 25%;
padding: ($base-fontsize * 2) ($base-fontsize * 3);

@media (min-width: ($landscape-width + 1)) {
&:nth-child(1n - 1) {
padding-left: 0;
}

&:nth-child(4n) {
padding-right: 0;
}
}

@media (max-width: $landscape-width) and (min-width: ($tablet-width + 1)) {
flex-basis: 33.33%;

&:nth-child(1n - 1) {
padding-left: 0;
}

&:nth-child(3n) {
padding-right: 0;
}
}

@media (max-width: $tablet-width) and (min-width: 661px) {
flex-basis: 50%;
padding: ($base-fontsize) ($base-fontsize * 2);

&:nth-child(odd) {
padding-left: 0;
}

&:nth-child(even) {
padding-right: 0;
}
}

@media (max-width: 660px) {
flex-basis: 100%;
padding: ($base-fontsize * 0.75) 0;
}

.business-name-line {
font-size: $base-fontsize * 1.5;
}
}

&.locations-dark {
background-color: $background-color;

.locations-heading {
color: $light-pink;
}

p {
color: $white;
}

.location-item {
span {
color: $white;
}

.business-name-line {
color: $accent-color;
}

.contact-label {
color: $light-pink;
}

.fa-icon {
color: $light-pink;
}
}
}
}
33 changes: 1 addition & 32 deletions src/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,36 +45,5 @@
}

.locations {
.locations-heading {
color: $primary-color;
font-weight: 900;
border-bottom: $border;
padding-bottom: 8px;
margin-bottom: 16px;
}

.location-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
}

.location-item {
@include elr-address-block;
flex-basis: 25%;
padding: 32px 48px;

&:nth-child(1n - 1) {
padding-left: 0;
}

&:nth-child(4n) {
padding-right: 0;
}

.business-name-line {
font-size: 24px;
}
}
@include elr-locations-list;
}
169 changes: 166 additions & 3 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@
</head>

<body>
<div class="wrapper">
<main class="wrapper">
<div class="content-holder">
<h1 class="main-heading">Address Block Demo</h1>
<h1 class="main-heading">Location Styles Demo</h1>
<div class="demo-content">
<h2 class="subheading">Address Block</h2>
<div class="address-block">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
Expand All @@ -42,6 +43,7 @@ <h1 class="main-heading">Address Block Demo</h1>
</address>
</div>
<div class="demo-content">
<h2 class="subheading">Locations List</h2>
<section class="locations">
<h2 class="locations-heading">Our Locations</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum atque praesentium ea optio iste? Vitae harum architecto voluptas. Molestias accusantium est in harum ducimus minima dolore placeat repudiandae officia. Beatae?</p>
Expand Down Expand Up @@ -201,11 +203,172 @@ <h2 class="locations-heading">Our Locations</h2>
</ul>
</section>
</div>
<div class="demo-content">
<h2 class="subheading">Locations List - Dark Background</h2>
<section class="locations locations-dark">
<h2 class="locations-heading">Our Locations</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum atque praesentium ea optio iste? Vitae harum architecto voluptas. Molestias accusantium est in harum ducimus minima dolore placeat repudiandae officia. Beatae?</p>
<ul class="location-list">
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
<li class="location-item">
<address class="address">
<span class="business-name-line">Wildfire Publishing</span>
<span class="address-line">1234 Somewhere Lane</span>
<span class="address-line">#4321</span>
<span class="address-line">Austin TX 77000</span>
<span class="address-line">United States</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-envelope-square"></i></span> Email:
</span> info@wildfiredigital.design
</span>
<span class="contact-line">
<span class="contact-label">
<span class="fa-icon"><i class="fa fa-phone-square"></i></span> Main Phone:
</span> 512-555-5555
</span>
</address>
</li>
</ul>
</section>
</div>
<!-- TODO: location block -->
<!-- TODO: location block with image -->
<!-- TODO: location block with map -->
</div>
</div>
</div>
</main>
</body>
</html>

0 comments on commit 9a6e819

Please sign in to comment.