jhogue

// Intent:
// Create a calc() function that dynamically changes the padding-bottom 
// value for a container than wraps an image to force an aspect ratio. 
// For small viewports, the padding bottom value is 56.25% for a 16:9 ratio
// For larger, it goes down to 25% for a really wide, thin image

// This is the way I do it now: 

@mixin maintain-ratio($ratio: 1 1) {
  @if length($ratio) < 2 or length($ratio) > 2 {

jhogue

<?php
    $content = "A long string of text with an important word at the end";

    $posfront = strpos($content, ' ', 10);
    $first = substr($content, 0, $posfront);
    $posend = strrpos($content, ' ', -10);
    $last = substr($content, $posend);
    
    //echo $posfront . '<br>';
    //echo $first . '<br>';

jhogue

// ----
// libsass (v3.3.2)
// ----

$base-font-size: 16px; 
$line-height-ratio: 1.5;
$fontsize-ratio: 1.15; 

$micro: floor($base-font-size/$fontsize-ratio);
$para: $base-font-size;

jhogue

@mixin heydon_rules {
    
    // Adapted from http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
    // I removed the Comic Sans font declaration because, well, I really can't stand it, even in this context
    
    %uglystyle {
        display: block !important;
        background: pink !important;
        padding: 0.5em !important;
        color: #000 !important;

jhogue

/* The idea: 
  One list of breakpoints. 
  One list of type sizes/scales with a corresponding key name. 
  One function that can iterate and output all type sizes.
  One function that can iterate over the breakpoints, find the 
  matching type size array, and output all breakpoint sizes for that element.
  
  Try this in Sassmeister to see the results
 */

jhogue

/* Not widely supported, can't use this yet */
@mixin font-size-adjust {
    -webkit-font-size-adjust: 0.465; /* No support yet */
    font-size-adjust: 0.465; /* Firefox only */
}

/* Define these somewhere if you aren't already */
$font-size-adjust-value: 1.15; 
$base-font-size: 16px; 

jhogue

<div class="widget">
    <h3 class="widget--title">Archives by Date</h3>
    <ul class="widget--list">
        <li><a class="widget--link" href="#">October 2014</a></li>
        <li><a class="widget--link widget--link__selected" href="#">July 2014</a></li>
    </ul>
</div>
<div class="widget widget__alt">
    <h3 class="widget--title">Archives by Date Alt</h3>
    <ul class="widget--list">