This tiny JavaScript (no jQuery etc. required) looks for every data attribute data-max-width
and records its value (that you set, in pixels). Example:
<div data-max-width="1000" class="my-container">
...
</div>
<!-- | |
Just put this at the inside your closing </body> tag. | |
Vanilla JavaScript. | |
--> | |
<div id="vp" style="position: fixed; bottom: 0.5rem; right: 0.5rem; z-index: 999; display: inline-block; background: #555; color: #ffffff; padding: 0 0.5rem 0.125rem; border-radius: 0.25rem;"></div> | |
<script> | |
var vp = document.body.querySelector('#vp'); | |
var viewportWidth = window.innerWidth + 'px'; |
/** | |
* Iterating from Andy Bell's full-bleed CSS utility (https://hankchizljaw.com/wrote/creating-a-full-bleed-css-utility/) | |
* simply set a max-width for those blocks you want to be wider than your centered prose column. | |
* Useful if you have an image (or background image) that doesn't look good on massively wide viewports. | |
*/ | |
.partial-bleed { | |
width: 100vh; | |
max-width: 1200px; /* example assumes your main prose max-width is e.g. 800px */ | |
margin-left: 50%; |
// Example: Set your color variables | |
$color--gray: #888888; | |
$color--blue: #3366FF; | |
$color--teal: #43E7F9; | |
$color--green: #5BD642; | |
$color--orange: #ffae18; | |
$color--red: #FF4732; | |
// Example: Set a color shade step interval |
.container-responsive { | |
width: 100%; | |
max-width: 1140px; | |
padding-right: 15px; | |
padding-left: 15px; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
.navbar > .container-responsive { |
/* Responsive Container (because Bootstrap 4.0.0 doesn't have this) */ | |
.container-responsive { | |
width: 100%; | |
max-width: 1140px; | |
padding-right: 15px; | |
padding-left: 15px; | |
margin-right: auto; | |
margin-left: auto; | |
} |
.sticky { | |
position: absolute; | |
right: 0; | |
z-index: 150; | |
transform: rotate(5deg); | |
width: 200px; | |
min-height: 150px; | |
margin: -10px 10px 10px; | |
padding: 10px; | |
font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; |
.hero-background-image[style] { | |
height: 340px !important; | |
background-color: #888 !important; | |
background-size: auto 340px !important; | |
@media (min-width: 768px) { | |
height: 440px !important; | |
background-size: auto 440px !important; | |
} | |
@media (min-width: 1024px) { | |
height: 500px !important; |
<?php $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?> | |
<div class="hero-background-image" style="background: url('<?php echo $hero['0'];?>') center top no-repeat;"> | |
<!-- Put your loop <header> in here. --> | |
</div> |