To Do
- Text blend-mode: difference
- Font-size MAX
- Disable show image tags on hover
- CSS @media – portrait landscape orientation and usage with image height/width
- Scroll animations
- Image show text on hover
- Implement font-size MAX on landing page
- Implement global CSS styles inc. font-size MAX where required
Text blend-mode: difference
.blend-test {
mix-blend-mode: difference;
z-index: 3;
filter: invert(1);
}
Here is a title
Font-size Max
REM1.5:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
VH2:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
MAX: VH2-1.5REM:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
MAX: VH2-1.5REM=Spacing:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.max-1
{
font-size: max(2vw, 1.5rem);
}
25px:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
EM1.5:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Hide Image Title on Hover
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
function custom_remove_title_script() {
?>
<script>
(function($){
$("*").hover(function(){
$(this).removeAttr("title");
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_remove_title_script');