<header class="padding-two grid">
<div class="logo flex">
<button onclick="toggleTheme()" class='btn'>
Change Theme
</button>
</div>
<nav class="flex">
<ul class="flex">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="wrapper flex">
<main>
<div class="post-img">
<img src="https://images.unsplash.com/photo-1651513862521-7165e0fb7c9c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQxMTQ1OTQ&ixlib=rb-1.2.1&q=80" alt="woman wearing leather and screaming" />
</div>
<h1 class="padding-two">Post Heading</h1>
<div class="post-meta padding-two">
<p class="small"> By: Yours Truly<br>
Posted: Today's Date</p>
</div>
<div class="post-content padding-two">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Ornare quam viverra orci sagittis. Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Quis imperdiet massa tincidunt nunc pulvinar. Et malesuada fames ac turpis egestas integer eget. Molestie a iaculis at erat pellentesque adipiscing. Adipiscing vitae proin sagittis nisl rhoncus. Cursus mattis molestie a iaculis at erat. Vel fringilla est ullamcorper eget nulla facilisi etiam. Quis ipsum suspendisse ultrices gravida dictum fusce.</p>
<p>Dignissim diam quis enim lobortis scelerisque fermentum. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Ut ornare lectus sit amet est. Ultrices dui sapien eget mi proin sed libero enim sed. Sed libero enim sed faucibus turpis. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Lobortis mattis aliquam faucibus purus in massa tempor. Diam vulputate ut pharetra sit amet aliquam. Quam quisque id diam vel quam elementum pulvinar. Lacus vestibulum sed arcu non.</p>
<p>Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Dolor sit amet consectetur adipiscing elit ut aliquam. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Aliquam ultrices sagittis orci a scelerisque purus. Pellentesque habitant morbi tristique senectus et netus et. Eget arcu dictum varius duis at consectetur lorem donec. Amet consectetur adipiscing elit ut. Et netus et malesuada fames ac turpis egestas integer. Dolor magna eget est lorem. Pharetra sit amet aliquam id. Maecenas sed enim ut sem viverra aliquet eget sit amet. Molestie ac feugiat sed lectus.</p>
<p>Lectus urna duis convallis convallis tellus id interdum velit laoreet. Sed libero enim sed faucibus turpis in eu mi. Orci ac auctor augue mauris augue neque gravida in fermentum. Tortor at auctor urna nunc id. Tortor vitae purus faucibus ornare suspendisse sed nisi. Faucibus ornare suspendisse sed nisi. Ut porttitor leo a diam sollicitudin tempor id. Hendrerit dolor magna eget est lorem ipsum. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Dapibus ultrices in iaculis nunc sed. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Vitae et leo duis ut diam quam.</p>
<p>Viverra tellus in hac habitasse platea. Sit amet consectetur adipiscing elit. Habitasse platea dictumst quisque sagittis purus sit amet. Ullamcorper eget nulla facilisi etiam dignissim diam. Sed turpis tincidunt id aliquet risus feugiat in ante metus. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Euismod lacinia at quis risus sed vulputate odio ut enim. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Urna condimentum mattis pellentesque id nibh. Odio ut enim blandit volutpat. Aenean pharetra magna ac placerat vestibulum lectus. Nec dui nunc mattis enim ut tellus elementum sagittis. Egestas sed tempus urna et. Donec et odio pellentesque diam volutpat commodo. Purus sit amet luctus venenatis lectus. Duis at consectetur lorem donec massa sapien faucibus et molestie. Tristique risus nec feugiat in.</p>
<div>
</main>
<aside class="padding-two flex">
<div class="sidebar-img padding-two">
<img src="https://images.unsplash.com/photo-1651489337165-f0f62bc3fc9e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQxMTU1MDk&ixlib=rb-1.2.1&q=80" alt="woman standing in cherry blossom tree" />
</div>
</aside>
</section>
<footer>
</footer>/**
CSS Layers
**/
@layer layout {
body {
background-image: var(--background-svg);
}
header {
width: var(--full-width);
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
border-bottom: .5px solid var(--accent-color);
background: var(--light-color);
color: #444;
}
.logo {
grid-column: 1 /span 1;
grid-row: 1;
justify-self: left;
margin: var(--one-per);
}
nav {
grid-column: 2 /span 1;
grid-row: 1;
justify-content: flex-end;
}
nav ul {
justify-content: space-evenly;
width: var(--part-width);
}
nav li {
list-style: none;
}
.wrapper {
flex-flow: row nowrap;
margin: var(--two-per) var(--one-per);
}
aside {
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
width: var(--quart-width);
margin-left: var(--one-per);
margin-right: var(--one-per);
background: var(--light-color);
}
main {
width: var(--full-width);
max-width: calc(100% - 33%);
min-height: 600px;
background: var(--light-color);
}
footer {
min-height: 100px;
background: var(--light-color);
border-top: .5px solid var(--accent-color);
}
img {
max-width: var(--full-width);
}
.post-img {
margin: 0 auto;
margin-top: var(--two-per);
max-width: calc(100% - 4%);
max-height: 400px;
overflow: hidden;
}
.sidebar-img {
max-width: calc(100% - var(--two-per));
max-height: 300px;
overflow: hidden;
}
}
@layer utilities {
.flex {
display: flex;
}
.grid {
display: grid;
}
.padding-one {
padding: var(--one-per);
}
.padding-two {
padding: var(--two-per);
}
.btn {
background-color: var(--light-color);
border-radius: var(--border);
border: 2px solid var(--accent-color);
}
}
@layer typography {
* {
font-family: var(--font);
font-size: 16px;
}
h1 {
color: black;
font-size: 24px;
}
.small {
font-size: 14px;
}
}
@layer femmeTheme {
/***
The Femme theme variables:
****/
:root {
--full-width: 100%;
--part-width: 40%;
--quart-width: 26%;
--two-per: 2%;
--one-per: 1%;
--light-color: white;
--accent-color: hotpink;
--font: 'Trebuchet MS', sans-serif;
--border: 10px;
--background-svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 28" width="56" height="28"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z"%3E%3C/path%3E%3C/svg%3E');
}
h1 {
color: var(--accent-color);
border-bottom: 2px solid var(--accent-color);
}
header {
border-bottom: 2px solid var(--accent-color);
}
}
/**
Define Image src attribute values
**/
const mascSidebar = 'https://images.unsplash.com/photo-1653587091419-ddcbdd574b80?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQxMjM5NTU&ixlib=rb-1.2.1&q=80;0';
const mascPost = 'https://images.unsplash.com/photo-1653460655240-14a4d7aeea4a?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQxMjM5NTU&ixlib=rb-1.2.1&q=80';
/**
Define the Masc theme
**/
const mascTheme = `
<style id="masc-theme">
/***
Base Theme
The variables asigned to the root scope are overwritten by the changeTheme layer.
***/
* {
--light-color: #efefef;
--accent-color: #333;
--font: "Arial", sans-serif;
--border: 0px;
--background-svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.4" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
h1 {
font-size: 28px;
border-bottom: none;
}
</style>
`;
/***
femme images
***/
const femmePost = `https://images.unsplash.com/photo-1651513862521-7165e0fb7c9c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQxMTQ1OTQ&ixlib=rb-1.2.1&q=80" alt="woman wearing leather and screaming`;
const femmeSidebar = `https://images.unsplash.com/photo-1651489337165-f0f62bc3fc9e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTQxMTU1MDk&ixlib=rb-1.2.1&q=80" alt="woman standing in cherry blossom tree`;
/**
Store DOM elements as variables
**/
const button = document.querySelector('.btn');
const mainImage = document.querySelector('.post-img img');
const sideImage = document.querySelector('.sidebar-img img');
const mascID = document.getElementById('masc-theme');
/**
When the button is clicked the theme will change
***/
const toggleTheme = function() {
document.body.insertAdjacentHTML('afterbegin', mascTheme);
mainImage.setAttribute( 'src', mascPost);
sideImage.setAttribute( 'src', mascSidebar);
button.setAttribute( 'onclick', 'femmTheme()' );
}
const femmTheme = function() {
console.log('femmtheme works');
mainImage.setAttribute( 'src', femmePost);
sideImage.setAttribute( 'src', femmeSidebar);
document.getElementById('masc-theme').remove();
button.setAttribute( 'onclick', 'toggleTheme()' );
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.