<figure class="badge">
<img src="https://www.fillmurray.com/44/44" alt="Bill Murray" class="badge__image">
<figcaption class="badge__caption">
<h1 class="badge__heading">Bill Murray</h1>
<p class="badge__description">for president 2020</p>
</figcaption>
</figure>
<button class="btn" id="btn">Toggle Grid</button>
<link href="https://fonts.googleapis.com/css2?family=Lato:[email protected];400;700&display=swap" rel="stylesheet">
/** Our system will use a 4px base vertical rhythm */
$verticalRhythmBase: 4;
/** Our system's base font size */
$baseFontSize: 16;
/**
* Calculate the type offset for a given font
*
* @param {number} $lh - the font's base line height
* @param {number} $fontSize - the font's size
* @param {number} $descenderHeightScale - the font's descender height as a ratio
* @return {number} the offset to be added to a transformY to keep the text in place
*/
@function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) {
$lineHeightScale: $lh / $fontSize;
@return ($lineHeightScale - 1) / 2 + $descenderHeightScale;
}
/**
* The basekick base function
*
* @param {number} $typeSizeModifier - a multiplier to determine the font size
* @param {number} $typeRowSpan - how many rows of our vertical rhythm should the type span
* @param {number} $descenderHeightScale - the height of the descender expressed as a ratio of the font
* @param {number} $capHeight - the font's cap height expressed as a ratio of the font
*/
@mixin basekick($typeSizeModifier, $typeRowSpan, $descenderHeightScale, $capHeight) {
$fontSize: $typeSizeModifier * $baseFontSize;
$lineHeight: $typeRowSpan * $verticalRhythmBase;
$typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale);
$topSpace: $lineHeight - $capHeight * $fontSize;
$heightCorrection: 0;
@if $topSpace > $verticalRhythmBase {
$heightCorrection: $topSpace - ($topSpace % $verticalRhythmBase);
}
$preventCollapse: 1;
font-size: #{$fontSize}px;
line-height: #{$lineHeight}px;
transform: translateY(#{$typeOffset}em);
padding-top: #{$preventCollapse}px;
&::before {
content: "";
margin-top: #{-($heightCorrection + $preventCollapse)}px;
display: block;
height: 0;
}
}
/**
* The Lato mixin to apply basekick styles
*
* @param {number} $typeSizeModifier - a multiplier for our system's $baseFontSize
* @param {number} $typeRowSpan - the height of the descender expressed as a ratio of the font
*/
@mixin Lato($typeSizeModifier, $typeRowSpan) {
$latoDescenderHeightScale: 0.11;
$latoCapHeight: 0.75;
@include basekick($typeSizeModifier, $typeRowSpan, $latoDescenderHeightScale, $latoCapHeight);
font-family: Lato;
}
// The most basic of CSS resets
* {
// box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
padding: 16px;
}
$eigengrau: #16161d;
.badge {
background: #ffffff;
box-shadow: inset 0px 0px 1px 1px $eigengrau;
border-radius: 4px;
color: $eigengrau;
display: inline-flex;
padding: 8px;
&__caption {
margin-left: 8px;
& > * + * {
margin-top: $verticalRhythmBase * 2px;
}
}
&__heading {
@include Lato(2, 10);
}
&__description {
@include Lato(1, 6);
}
}
.btn {
background: tomato;
border-radius: 4px;
color: white;
cursor: pointer;
display: flex;
font-size: 16px;
line-height: 1;
height: 44px;
margin-top: 16px;
padding: 0 16px;
transition: background 0.1s ease-in;
&:hover {
background: darken(tomato, 10%);
}
&:active {
background: darken(tomato, 20%);
}
}
.grid::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: 100%;
z-index: 3000000;
opacity: .75;
background-size: 4px 4px;
background-position: 0px 0px;
pointer-events: none;
mix-blend-mode: difference;
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 93.749%, #00ffff 93.75%, #00ffff 100%), linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 93.749%, #00ffff 93.75%, #00ffff 100%);
}
View Compiled
'use strict';
const btn = document.getElementById('btn');
function toggleGrid() {
document.body.classList.toggle('grid');
}
btn.addEventListener('click', toggleGrid);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.