Blog : Article Template (Responsive)

blog-article-template-responsive.markdown

Blog : Article Template (Responsive)

Responsive design, based on the Harward Business Review 2015 website design. Using commercially free fonts, icons and library code.

Incorporates some basic responsive design based on device max-width display capabilities.

This template uses 100% width and is intended to fit into a larger website structure that poses limits on max width.

A Pen by Carl V Lewis on CodePen.

License.

index.html

<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Playfair+Display:700,400,900,400italic,700italic,900italic|Merriweather:400,300,700,900,300italic,400italic,700italic,900italic|Anonymous+Pro:400,700,400italic,700italic|Roboto:400,700' />
<link rel='stylesheet' type='text/css' href='https://cdn.rawgit.com/google/code-prettify/master/styles/desert.css' />
<link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' />

<div id="blog">
  <!-- Title section -->
  <div id="title">
    <div class="pubdate">16 May 2017<span class='pubtime' expr:title='data:post.timestampISO8601' itemprop='datePublished'>17:49</span><hr/></div>
    <h1>Resisting Trickle-Down Federal Open Data Policy in U.S. Cities </h1>
    <div class="byline">by Carl V. Lewis</div>
    <div class="topic">Open Urbanism</div>
  </div>
  
  <!-- Action bar --> 
  <div id="actions">
    <ul>
      <li><a id="BtnShare" href="#" title="Share"><i class="fa fa-share-alt"></i><span>Share</span></a></li>
      <li><a id="BtnComment" href="#" title="Comment"><i class="fa fa-comments"></i><span>Comment</span></a></li>
      <li><a id="BtnPrint" title="Print via PrintFriendly" href="http://www.printfriendly.com" onclick="window.print();"><i class="fa fa-print"></i><span>Print</span></a></li>
      <li><a id="BtnSave" title="Save to Pocket" href="https://getpocket.com/save" data-lang="en" data-save-url="{Permalink}"  data-pocket-count="none" data-pocket-align="left"><i class="fa fa-get-pocket"></i><span>Save</span></a></li>
      <li><a id="BtnBookmark" href="#" title="Bookmark"><i class="fa fa-bookmark"></i><span>Bookmark</span></a></li>
    </ul>
  </div>
  
  <!-- Article text -->
  <a class="named_anchor" name="2549202418499648455"></a>
  <div id="article">
    <div id="content">
      <p>More than ever before in our nation's entire history, cities have taken center-stage on issues typically decided outside of their municipal boundaries. So imagine how many unspoken ones course through our minds. Most of them are not facts but evaluations and judgments <a href="#">entwined</a> with emotions—some positive and helpful <i>(I’ve worked hard and I can ace this presentation; This issue is worth speaking up about; The new VP seems approachable), others negative and less so (He’s purposely ignoring me; I’m going to make a fool of myself; I’m a fake)</i>.
      </p>
      <blockquote>The transition property is a shorthand property <a href="#">habitasse</a> used to represent up <i>to</i> four transition-related longhand properties</blockquote>
      <p>The prevailing wisdom says that difficult thoughts and feelings have no <b>place at the office</b>: Executives, and particularly leaders, should be either stoic or cheerful; they must project confidence and damp down any negativity bubbling up inside them. But that goes against basic biology. All healthy human beings have an inner stream of thoughts and feelings that include criticism, doubt, and fear. That’s just our minds doing the job they were designed to do: trying to anticipate and solve problems and avoid potential pitfalls.
</p><em>That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition</em><pre class="prettyprint">
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

namespace RectifyLib.Correct
{
    public class Corrector : AsyncBackgroundProcessor<CorrectionResults, CorrectorProgressArgs, FileAnalysis[]>
    {
        protected override Func<CorrectionResults> CreateAsyncProcess(FileAnalysis[] selectedFiles, CancellationToken cancellationToken)
        {
            return () => CorrectFileLocations(selectedFiles);
        }

        private CorrectionResults CorrectFileLocations(FileAnalysis[] selectedFiles)
        {
            // Some code I want to execute on a background thread...
        }
    }
}
</pre>   
<a class="tryme" href="#">Open the webapp now</a>
<p>
In our people-strategy consulting practice advising companies around the world, we see leaders stumble not because they have undesirable thoughts and feelings—that’s inevitable—but because they get hooked by them, like fish caught on a line. This happens in one of two ways. They buy into the thoughts, treating them like facts (It was the same in my last job…I’ve been a failure my whole career), and avoid situations that evoke them (I’m not going to take on that new challenge). Or, usually at the behest of their supporters, they challenge the existence of the thoughts and try to rationalize them away (I shouldn’t have thoughts like this…I know I’m not a total failure), and perhaps force themselves into similar situations, even when those go against their core values and goals (Take on that new assignment—you’ve got to get over this). In either case, they are paying too much attention to their internal chatter and allowing it to sap important cognitive resources that could be put to better use.
</p>
<a class="tryme" href="#">Open the webapp now</a>
<h3>Act on your values</h3>
<p>
<em>avoid situations that evoke them (I’m not going to take on that new challenge). Or, usually at the behest of their supporters, they challenge the existence of the thoughts and try to rationalize them away (I shouldn’t have thoughts like this…I know I’m not a total failure), and perhaps force themselves into similar </em>This is a common problem, often perpetuated by popular self-management strategies. We regularly see executives with recurring emotional challenges at work—anxiety about priorities, jealousy of others’ success, fear of rejection, distress over perceived slights—who have devised techniques to “fix” them: positive affirmations, prioritized to-do lists, immersion in certain tasks. But when we ask how long the challenges have persisted, the answer might be 10 years, 20 years, or since childhood.
</p><p>
Clearly, those techniques don’t work—in fact, ample research shows that attempting to minimize or ignore thoughts and emotions serves only to amplify them. In a famous study led by the late Daniel Wegner, a Harvard professor, participants who were told to avoid thinking about white bears had trouble doing so; later, when the ban was lifted, they thought about white bears much more than the control group did. Anyone who has dreamed of chocolate cake and french fries while following a strict diet understands this phenomenon.
      </p>
    </div>
  </div>
</div>

<!-- Scripts --> 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js"></script>
<!-- Script for pocket button -->
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<!-- Print friendly -->
<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if ('https:' === document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script>
<!-- Share button / http://sharebutton.co
<script src="https://cdn.rawgit.com/carrot/share-button/master/src/share-button.js"></script>-->

script.js

// Shorthand for $( document ).ready()
$(function() {
  // Format the code in the article if any
  PR.prettyPrint();

  // Install the bookmarking functionality
  InstallBookmark('#BtnBookmark');

  // Enable when hosting on a real website
  //InstallShareButton('#BtnShare');
});

function InstallShareButton(elementSelector) {
  var share = new ShareButton();
  $(elementSelector).click(function(e) {
    share.toggle();
  });
}

//https://www.thewebflash.com/how-to-add-a-cross-browser-add-to-favorites-bookmark-button-to-your-website/
function InstallBookmark(elementSelector) {
  $(elementSelector).click(function(e) {
    var bookmarkURL = window.location.href;
    var bookmarkTitle = document.title;

    if ('addToHomescreen' in window && window.addToHomescreen.isCompatible) {
      // Mobile browsers
      addToHomescreen({
        autostart: false,
        startDelay: 0
      }).show(true);
    } else if (window.sidebar && window.sidebar.addPanel) {
      // Firefox version < 23
      window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
      // Firefox version >= 23 and Opera Hotlist
      $(this).attr({
        href: bookmarkURL,
        title: bookmarkTitle,
        rel: 'sidebar'
      }).off(e);
      return true;
    } else if (window.external && ('AddFavorite' in window.external)) {
      // IE Favorite
      window.external.AddFavorite(bookmarkURL, bookmarkTitle);
    } else {
      // Other browsers (mainly WebKit - Chrome/Safari)
      // Due to security reasons it is not possible to add a bookmark in Google Chrome using Javascript
      alert('Press ' + (/Mac/i.test(navigator.userAgent) ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
    }

    return false;
  });
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.rawgit.com/carrot/share-button/master/src/share-button.js"></script>

style.scss

@import "compass/reset";
@import "compass";
@import "compass/css3";

$font_text: 'Merriweather', serif; // The closest to Guardian font I found
$font_title: 'Playfair Display', serif; // The closest to the National font I found
$font_clear: 'Roboto', sans-serif; // Used for clear display of numbers (e.g. dates) and clickable "button" type elements

$font_code: 'Anonymous Pro', monospace; // Used for code examples, monospace font

$color_highlight: #c82502; // Highlight color in the template, this case dark red
$color_faded: #888;  // Un-emphasis color, grayish, e.g. used for date and button labels 
$color_callout: #c88;  // Faded color for gutter-callout element (<em>)
$color_actionbar_border: #d5d7d8; // Border color for the action button bar

$em_callout_width: 11em;  // Width of the out-side-of-text callout element 
$em_callout_width_article_right_margin: 14em; // The spacing given to callout element by main text
$em_callout_width_article_right_margin_default: 1em; // The default right margin for the article (optional, should be controlled by container)

// Controls responive design constraints for modern mobile devices
// See: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
// And: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
$media_mobile_phone_width: 500px;
$media_mobile_tablet_width: 800px;

body {
  //font: font-style font-variant font-weight font-size/line-height font-family
  font: normal normal 400 1em $font_text;
  
  min-width:360px; // Reasonable minimum size for modern mobile devices
  
  // Temporary development constraints, remove in prod
  margin:50px 10px;
  @media (max-width: $media_mobile_tablet_width) {
    margin:0;
  }
}

#blog
{
  //font: font-style font-variant font-weight font-size/line-height font-family
  font: normal normal 400 1em $font_text;
  
  min-width:360px; // Reasonable minimum size for modern mobile devices
  
  // Temporary development constraints, remove in prod
  //min-width: 600px;
  
  display: block; // Ensure that the div fills the parent space
  width: auto!important; // 'auto' is important, otherwise the div elements will be to large and clipped by the column layout
  min-width: 360px;
  overflow: hidden; // Necessary to ensure that the associated images don't overlap ajacent posts
  
  // Avoid entries breaking between columns within an entry
  // from: http://stackoverflow.com/a/7785711/779521
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
  -moz-column-break-inside:avoid;     /* Theoretically FF 20+ */
  -moz-page-break-inside:avoid;       /* Theoretically FF 20+ */
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* IE 11 */
  
  // Default anchor styling is same as text
  // this is to avoid named anchors to inherit style
  a, a.named_anchor {
    text-decoration: inherit;
    font-style: inherit;
    color: inherit;
  }
  
}

#title {
  h1 {
    font: normal normal 700 4em $font_title;
    letter-spacing: -0.06em;
    margin-bottom: 0.05em;
    line-height: 1em;
  }
  .byline {
    font: normal normal 400 1.3em $font_title;
    margin-bottom: .8em;
    letter-spacing: -0.04em;
  }
  .pubdate {
    font: normal normal 400 1em $font_clear;
    color: $color_faded;
    text-transform: uppercase;
    margin-bottom: 1em;
    .pubtime:before
    {
      font-family: 'FontAwesome';
      font-size: .8em;
      content:'\f054';
      margin: 0em .5em;
      color: $color_highlight;
    }
    hr {
      border: 0;
      border-bottom: 4px double $color_faded;
      //height: 0.15em;
      //@include background-image( linear-gradient(to right, #000, #fff));
    }
  }
  .topic {
    font: normal normal 900 .8em $font_text;
    text-transform: uppercase;
    color: $color_highlight;
    margin-bottom: 1em;
  }
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
    h1 { font-size: 3em; }
    .byline { font-size: 1em; }
    .topic { font-size: 0.8em; }
    .pubdate {font-size: 0.8em; }
  }
  
  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
    h1 { font-size: 2.5em; }
    .byline { font-size: 0.8em; }
    .topic { font-size: 0.6em; }
    .pubdate {font-size: 0.6em; }
  }  
}

#actions{
  font-family: $font_clear;
  padding: 0.5em;
  margin: 1.5em 0em;
  border-top: $color_actionbar_border 1px solid;
  border-bottom: $color_actionbar_border 1px solid;
  
  a:link {
    font-size: 0.8em;
    text-transform: uppercase;
    text-decoration:none;
    @include transition(color 300ms ease-out);
    line-height: inherit;
    color: $color_faded;
    
    &:hover { color: black; }
  }
  
  // The icons
  .fa{
    font-size: 1.3em;
    color: $color_highlight;
  }
  
  ul{
    margin: 0;
  }
  
  li:first-child {
    border-left: 0;
  }
    
  li{
    vertical-align: middle;
    border-left: $color_actionbar_border 1px solid;
    display:inline-block;
    padding: 0.2em 1.5em;
    line-height: 1.2em;
    text-align: center!important;
   
    // Breaks the text to a new line
    span:before{ 
      content:"\A"; 
      white-space:pre;
    }
  }
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
    margin: 1.5em 0em;
    .fa{ font-size: 1em; &:hover { color: black; } }
    li span{display:none;}
  }
  
  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
    margin: 1em 0em;
    .fa{ font-size: 0.9em; &:hover { color: black; } }
    li span{display:none;}
  }  
}

// Code segments
.prettyprint
{
  font: normal normal 400 1em/1em $font_code;
  padding: 0.8em;
  margin-bottom:2em;
  @include border-radius(8px);
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
    font-size: 0.8em;
    padding: 0.5em;
    margin-bottom:1em;
    @include border-radius(0px);
  }
  
  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
    font-size: 0.75em;
    padding: 0.2em;
  } 
}

#article {
  font: normal normal 400 1em/2em $font_text;
  line-height: 2em;
  margin-right: $em_callout_width_article_right_margin;
  min-width:360px;

  a, a:link {
    text-decoration: none;
    background: #eee;
    cursor: pointer;
    padding: 0 0.2em;
    color: $color_highlight;
    
    &:hover{
     color: #666;
    }
    
    // The "Try Me" demo button style
    &.tryme {
      font: normal normal 700 1.0em $font_clear;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #fff;
      background: #a22;            
      display:inline-block;
      padding: .8em 1.8em;
      margin-bottom: .8em;
      text-decoration: none;
      
      &:after
      {
        font: normal normal 400 1em FontAwesome;
        vertical-align: middle;
        margin-left: 0.75em;
        text-align: bottom;
        color: yellow;
        content: '\f054'; // Chevron right
      }
      
      // Show three chevrons when mouse is hovering
      &:hover, &:active {
        &:after { content: '\f054 \f054 \f054'; }
      }
    }
  }
   
  #content 
  {    
    h1, h2, h3, h4 { font-weight: 900; font-size: 1.25em; }
    i { font-style:italic; }
    b { font-weight: 900; }
    p { 
      margin-bottom:2em; 
      line-height: 2em;
    }
    
    // Drop cap the first letter in each paragraph
    p:first-child:first-letter { 
      font-weight: 900;
      float: left; 
      font-size: 5em; 
      line-height: 1em; 
      padding: 0.1em 0.1em 0.1em 0em; //top, right, bottom, left
    }
  }
  
  /* em in text will cause a floating box*/
  em {
    border-top: .4em solid $color_callout;
    padding: 1em;
    font-size: 0.9em;
    line-height:1.5em;
    color: $color_faded;
    width: $em_callout_width;
    position:absolute;
    right: 2em;
    letter-spacing: -0.07em;
  }
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
    font-size: 0.8em;
    line-height: 1.5em;
    a.tryme { @include border-radius(3px);}
    #content {
      p:first-child:first-letter { font-size: 3.7em; }
      p { margin-bottom:1em; }
    }
  }
  
  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
    font-size: 0.7em;
    line-height: 1.3em;
    a.tryme { @include border-radius(2px);}
    #content {
      p:first-child:first-letter { font-size: 2.1em; }
      p { margin-bottom:1em; }
    }
    // Hide the callouts in the smallest screen format
    em {display:none;}
    margin-right: $em_callout_width_article_right_margin_default;
  } 
}

/*
Individual styles
*/

blockquote{
  box-sizing: inherit;
  padding: 0;
  display:block;
  margin: 1em 3em;
  position: relative;
  
  /*Font*/
  font: normal normal 300 1.6em/1.3em $font_text;
  letter-spacing: -0.08em;
  color: #666;
  text-align: justify;
  
  i { font-style: italic; }
  
  // Constraints for tablet devices
  @media (max-width: $media_mobile_tablet_width) {
    margin: 2em;
    font-size: 1.2em;
  }
  
  // Constraints for phone devices
  @media (max-width: $media_mobile_phone_width) {
    margin: 1.5em;
    font-size: 1em;
  } 
}