<div class="wrapper" data-theme="none">
<nav>
<ul>
<li><a href="#food">Food</a></li>
<li><a href="#lifestyle">Lifestyle</a></li>
<li><a href="#travel">Travel</a></li>
</ul>
</nav>
<main>
<section id="food">
<h1 class="section-title">Food</h1>
<div class="articles">
<article class="primary-block">
<div class="text-block">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Sed tempus arcu vitae facilisis rutrum. Suspendisse a commodo odio, vel ultrices lorem. Nulla lobortis,
tellus non egestas tempor, ante nisl placerat elit, vitae cursus magna metus ac lorem. </p>
</div>
<div class="img-block" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/214996/food-large.jpg)"></div>
</article>
<article class="secondary-block">
<div class="text-block">
<h2>Heading</h2>
<p>Nam semper pharetra molestie. Sed accumsan nibh sed vehicula convallis. Aliquam sagittis ac dui eget
lacinia.</p>
</div>
<div class="img-block" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/214996/food-small.jpg)"></div>
</article>
</div>
</section>
<section id="lifestyle">
<h1 class="section-title">Lifestyle</h1>
<div class="articles">
<article class="primary-block">
<div class="text-block">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Sed tempus arcu vitae facilisis rutrum. Suspendisse a commodo odio, vel ultrices lorem. Nulla lobortis,
tellus non egestas tempor, ante nisl placerat elit, vitae cursus magna metus ac lorem. </p>
</div>
<div class="img-block" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/214996/lifestyle-large.jpg)"></div>
</article>
<article class="secondary-block">
<div class="text-block">
<h2>Heading</h2>
<p>Nam semper pharetra molestie. Sed accumsan nibh sed vehicula convallis. Aliquam sagittis ac dui eget
lacinia.</p>
</div>
<div class="img-block" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/214996/lifestyle-small.jpg)"></div>
</article>
</div>
</section>
<section id="travel">
<h1 class="section-title">Travel</h1>
<div class="articles">
<article class="primary-block">
<div class="text-block">
<h2>Heading</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Sed tempus arcu vitae facilisis rutrum. Suspendisse a commodo odio, vel ultrices lorem. Nulla lobortis,
tellus non egestas tempor, ante nisl placerat elit, vitae cursus magna metus ac lorem. </p>
</div>
<div class="img-block" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/214996/travel-large.jpg)"></div>
</article>
<article class="secondary-block">
<div class="text-block">
<h2>Heading</h2>
<p>Nam semper pharetra molestie. Sed accumsan nibh sed vehicula convallis. Aliquam sagittis ac dui eget
lacinia.</p>
</div>
<div class="img-block" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/214996/travel-small.jpg)"></div>
</article>
</div>
</section>
</main>
<aside>
<p>All pictures are from <a href="https://unsplash.com/">Unsplash</a> and under the <a href="https://unsplash.com/license">Unsplash License</a>:</p>
<ul>
<li>
<a href="https://unsplash.com/photos/8dXad1em74g">Zion National Park</a> by <a href="https://unsplash.com/@pthom__">Peter Thomas</a>
</li>
<li>
<a href="https://unsplash.com/photos/LpsZEjdqZoY">Machu Picchu</a> by <a href="https://unsplash.com/@abeosorio">Abraham Osorio</a>
</li>
<li>
<a href="https://unsplash.com/photos/-YHSwy6uqvk">Cooked dish on gray bowl</a> by <a href="https://unsplash.com/@lvnatikk">Lily Banse</a>
</li>
<li>
<a href="https://unsplash.com/photos/N_Y88TWmGwA">Gourmet meal and white wine</a> by <a href="https://unsplash.com/@jaywennington">Jay Wennington</a> </li>
<li>
<a href="https://unsplash.com/photos/f8egRYt5RGk">Hive Coworking Space</a> by <a href="https://unsplash.com/@warfeous">Michael Warf</a>
</li>
<li>
<a href="https://unsplash.com/photos/xBFTjrMIC0c">Fruit Mojitos</a> by <a href="https://unsplash.com/@kobbymendez">Kobby Mendez</a>
</li>
</ul>
</aside>
</div>
// variable definitons on the .wrapper element
.wrapper {
// number of themes, hue of first color, hue-step to next hue
--theme-count: 3;
--first-hue: 180;
--hue-step: calc(360 / var(--theme-count));
// number of shades, steps of lightness
--shade-count: 6;
--lgt-step: 10%;
// lightness definitions
--lgt-1: var(--lgt-step);
--lgt-2: calc(var(--lgt-1) + var(--lgt-step));
--lgt-3: calc(var(--lgt-2) + var(--lgt-step));
--lgt-4: calc(var(--lgt-3) + var(--lgt-step));
--lgt-5: calc(var(--lgt-4) + var(--lgt-step));
--lgt-6: calc(var(--lgt-5) + var(--lgt-step));
}
// hue definitions
.wrapper[data-theme="travel"] {
--hue: var(--first-hue);
}
.wrapper[data-theme="lifestyle"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step)));
}
.wrapper[data-theme="food"] {
--hue: calc(var(--first-hue) + calc(var(--hue-step) * 2));
}
// fallback
.wrapper {
--hue: var(--first-hue);
}
h1 {
color: hsl(var(--hue), 100%, var(--lgt-2));
}
.primary-block {
background: hsl(var(--hue), 100%, var(--lgt-2));
h2 {
color: hsl(var(--hue), 100%, var(--lgt-5));
}
}
.secondary-block {
h2 {
color: hsl(var(--hue), 100%, var(--lgt-2));
}
}
[data-theme="food"] {
[href="#food"] {
border-color: hsl(var(--hue), 100%, var(--lgt-2));
}
}
[data-theme="lifestyle"] {
[href="#lifestyle"] {
border-color: hsl(var(--hue), 100%, var(--lgt-2));
}
}
[data-theme="travel"] {
[href="#travel"] {
border-color: hsl(var(--hue), 100%, var(--lgt-2));
}
}
/**************************************************
* Everything below here concerns the layout only
* and is irrelevant for the color themes.
**************************************************/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
html {
font-size: 62.5%;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font: 1.4rem/1.4 'Inter', sans-serif;
background: white;
color: #333;
margin: 0;
}
.wrapper {
max-width: 128rem;
margin: auto;
}
nav {
position: fixed;
top: 0;
background: #fff;
ul {
display: flex;
list-style: none;
padding: 0;
}
a {
display: block;
padding: .3rem 2rem;
color: currentColor;
text-decoration: none;
border-bottom: .3rem solid transparent;
margin: .1rem;
}
}
section {
padding-top: 70px;
display: block;
.articles {
display: flex;
justify-content: space-between;
}
}
[data-theme="food"] {
section:not(#food) {
display:none;
}
}
[data-theme="lifestyle"] {
section:not(#lifestyle) {
display:none;
}
}
[data-theme="travel"] {
section:not(#travel) {
display:none;
}
}
article {
border: .1rem #ddd solid;
}
img {
display: block;
max-width: 100%;
}
h2 {
margin: 0 0 .6rem 0;
}
h3 {
margin: 0 0 .6rem 0;
}
p {
margin: 0 0 .6rem 0;
}
h1 {
margin: 0 0 .6rem 1.5rem;
}
.text-block {
padding: 1.5rem;
}
.primary-block {
display: flex;
width: 75%;
.text-block {
width: 34%;
}
h2 {
font-size: 2.3rem;
text-shadow: 1px 1px 0px rgba(0,0,0,.3);
}
h3 {
font-size: 1.5rem;
color: #eee;
font-weight: 600;
font-variation-settings: 'wght' 600
}
p {
font-size: 1.4rem;
color: #eee;
}
.img-block {
width: 67%;
}
}
.img-block {
background: {
color: #ddd;
repeat: no-repeat;
position: center;
size: cover
}
}
.secondary-block {
width: 24%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
p {
font-size: 1.3rem;
}
h2 {
font-size: 2.0rem;
}
.img-block {
height: 45%;
}
}
aside {
margin-top: 4rem;
padding: 1.5rem;
font-size: 1.1rem;
ul {
column-count: 3;
}
}
@media only screen and (max-width: 980px) {
.primary-block {
width: 64%;
.text-block {
width: 46%;
}
.img-block {
width: 54%;
}
}
.secondary-block {
width: 35%;
}
aside {
ul {
column-count: 2;
}
}
}
@media only screen and (max-width: 860px) {
.primary-block, .secondary-block {
flex-direction: column-reverse;
justify-content: flex-end;
.text-block, .img-block {
width: 100%;
}
p {
font-size: 1.3rem;
}
h2 {
font-size: 2.0rem;
}
.img-block {
height: 10rem;
margin-bottom: .7rem;
}
}
}
@media only screen and (max-width: 660px) {
section {
.articles {
display: flex;
flex-direction: column;
}
}
.primary-block, .secondary-block {
margin-bottom: .7rem;
width: 100%;
}
}
View Compiled
// Toggle the themes, on a real site with multiple pages
// it might make more sense to do this on the server side.
const wrapper = document.querySelector('.wrapper');
document.querySelector("nav").addEventListener('click', e => {
wrapper.dataset.theme = e.target.getAttribute('href').substr(1);
})
// progressive enhancement:
// without JavaScript all sections are displayed, the theme is only set when the page loads
wrapper.dataset.theme = wrapper.querySelector('section').id;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.