Skip to content

Instantly share code, notes, and snippets.

@garyrozanc

garyrozanc/browsers-devices-fonts-website.markdown

Last active December 2, 2018 19:10
Show Gist options
  • Save garyrozanc/52dd9a92bb38da3c5d6a2ba398625886 to your computer and use it in GitHub Desktop.
Save garyrozanc/52dd9a92bb38da3c5d6a2ba398625886 to your computer and use it in GitHub Desktop.
Download ZIP
Browsers, Devices, & Fonts: Website
Raw
index.html
<nav>
<div class="nav-wrap">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#author">Author</a></li>
</ul>
<h1>Browsers, Devices, & Fonts</h1>
</div>
</nav>
<main>
<!-- Begin Carousel -->
<div id="home" class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/bdf-images-01.jpg">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/bdf-images-02.jpg">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/bdf-images-03.jpg">
</div>
<input class="carousel-open" type="radio" id="carousel-4" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/bdf-images-04.jpg">
</div>
<label for="carousel-1" class="carousel-control prev control-4"></label>
<label for="carousel-1" class="carousel-control next control-2"></label>
<label for="carousel-2" class="carousel-control prev control-1"></label>
<label for="carousel-2" class="carousel-control next control-3"></label>
<label for="carousel-3" class="carousel-control prev control-2"></label>
<label for="carousel-3" class="carousel-control next control-4"></label>
<label for="carousel-4" class="carousel-control prev control-3"></label>
<label for="carousel-4" class="carousel-control next control-1"></label>
<ol class="carousel-indicators">
<span class="carousel-indicators-background">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-4" class="carousel-bullet">•</label>
</li>
</span>
</ol>
</div>
</div>
<!-- End Carousel -->
<section class="home-text">
<div>
<p>Part technical and part theoretical, <i>Browsers, Devices, & Fonts: A designer’s guide to fonts and how they function on the web</i>, helps designers understand how the typographic choices they make in layout and prototyping programs behave once they are turned into live code. Through a series of demos, this book teaches designers how to create typographic dominant webpages by learning just enough HTML and CSS to be able to view the content in different browsers, devices, and operating systems.</p>
<p>With live webpages to evaluate, designers will learn how to test those pages for supported features and performance, ensuring font choices look as good in the browser as it does in their layout program, delivering a speedy experience to the users.</p>
<ul>
<li>Demonstrates the optimal amount of HTML and CSS necessary to create webpages to evlauate typographic choices in the browser.</li>
<li>Discusses responsive web design and how to evaluate and test those choices for performance and usability prior to front-end development.</li>
<li>Demonstrates how to review your own typographic, image, and layout choices in the browser through a series of demos.</li>
</ul>
<a id="resources"></a>
<a href="https://amzn.to/2PdaV7e" target="_blank" class="amazon">Buy on Amazon</a
</div>
<section class="resources">
<h1>Resources + Links</h1>
<div class="collapse-wrap">
<a href="#collapse-tools" id="collapse-tools" class="toggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM86 42.5v15c0 0.8-0.8 1.5-1.6 1.5H59v25.4c0 0.8-0.7 1.6-1.5 1.6H42.5C41.7 86 41 85.2 41 84.4V59H15.6C14.8 59 14 58.3 14 57.5V42.5c0-0.8 0.8-1.5 1.6-1.5H41V15.6c0-0.8 0.7-1.6 1.5-1.6h15c0.8 0 1.5 0.8 1.5 1.6V41h25.4C85.2 41 86 41.7 86 42.5z"/></svg><h2>Tools</h2></a>
<a href="#collapse" class="untoggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM80.7 70.1L70.1 80.7c-0.6 0.6-1.5 0.6-2.1 0L50 62.7 32 80.7c-0.6 0.6-1.5 0.6-2.1 0L19.3 70.1c-0.6-0.6-0.6-1.5 0-2.1L37.3 50 19.3 32c-0.6-0.6-0.6-1.5 0-2.1l10.6-10.6c0.6-0.6 1.5-0.6 2.1 0L50 37.3l18-18c0.6-0.6 1.5-0.6 2.1 0l10.6 10.6c0.6 0.6 0.6 1.5 0 2.1L62.7 50l18 18C81.3 68.6 81.3 69.5 80.7 70.1z"/></svg><h2>Tools</h2></a>
<div class="animate">
<ul>
<li><a href="https://fonts.adobe.com/typekit/" target="_blank">Adobe Fonts</a> (Formerly TypeKit)</li>
<li><a href="http://brackets.io/" target="_blank">Brackets</a></li>
<li><a href="https://www.browsersync.io/" target="_blank">Browsersync</a></li>
<li><a href="https://codepen.io" target="_blank">CodePen</a></li>
<li><a href="https://codepen.io/browsersdevicesfonts/" target="_blank">CodePen</a> (Pens listed in the Book)</li>
<li><a href="https://crossbrowsertesting.com/" target="_blank">Cross Browser Testing</a></li>
<li><a href="https://fonts.google.com/" target="_blank">Google Fonts</a></li>
<li><a href="https://imageoptim.com" target="_blank">ImageOptim</a> (macOS only)</li>
<li><a href="http://www.steelbytes.com/?mid=30" target="_blank">JPEG & PNG Stripper</a> (Windows only)</li>
<li><a href="https://www.theleagueofmoveabletype.com/" target="_blank">League of Movable Type</a></li>
<li><a href="https://nodejs.org/en/" target="_blank">Node.js</a></li>
<li><a href="https://browsersdevicesfonts.com/performance" target="_blank">Performance Test Server</a></li>
<li><a href="https://www.webpagetest.org/" target="_blank">Web Page Test</a></li>
</ul>
</div>
</div>
<div class="collapse-wrap">
<a href="#collapse-2" id="collapse-2" class="toggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM86 42.5v15c0 0.8-0.8 1.5-1.6 1.5H59v25.4c0 0.8-0.7 1.6-1.5 1.6H42.5C41.7 86 41 85.2 41 84.4V59H15.6C14.8 59 14 58.3 14 57.5V42.5c0-0.8 0.8-1.5 1.6-1.5H41V15.6c0-0.8 0.7-1.6 1.5-1.6h15c0.8 0 1.5 0.8 1.5 1.6V41h25.4C85.2 41 86 41.7 86 42.5z"/></svg><h2>Chapter 02</h2></a>
<a href="#collapse" class="untoggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM80.7 70.1L70.1 80.7c-0.6 0.6-1.5 0.6-2.1 0L50 62.7 32 80.7c-0.6 0.6-1.5 0.6-2.1 0L19.3 70.1c-0.6-0.6-0.6-1.5 0-2.1L37.3 50 19.3 32c-0.6-0.6-0.6-1.5 0-2.1l10.6-10.6c0.6-0.6 1.5-0.6 2.1 0L50 37.3l18-18c0.6-0.6 1.5-0.6 2.1 0l10.6 10.6c0.6 0.6 0.6 1.5 0 2.1L62.7 50l18 18C81.3 68.6 81.3 69.5 80.7 70.1z"/></svg><h2>Chapter 02</h2></a>
<div class="animate">
<h3>Footnotes</h3>
<ol>
<li>Wired.com. 2014. Great Expectations: 47% of Consumers Want a Web Page to Load in 2 Seconds or Less. <a href="http://insights.wired.com/profiles/blogs/47-of-consumers-expect-a-web-page-to-load-in-2-seconds-or-less/" target="_blank">http://insights.wired.com/profiles/blogs/47-of-consumers-expect-a-web-page-to-load-in-2-seconds-or-less/</a> (accessed April 22, 2018).</li>
<li>Eaton, Kit. 2012. How One Second Could Cost Amazon $1.6 Billion In Sales. <a href="https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales" target="_blank">https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales</a> (accessed April 21, 2018).</li>
</ol>
</div>
</div>
<div class="collapse-wrap">
<a href="#collapse-3" id="collapse-3" class="toggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM86 42.5v15c0 0.8-0.8 1.5-1.6 1.5H59v25.4c0 0.8-0.7 1.6-1.5 1.6H42.5C41.7 86 41 85.2 41 84.4V59H15.6C14.8 59 14 58.3 14 57.5V42.5c0-0.8 0.8-1.5 1.6-1.5H41V15.6c0-0.8 0.7-1.6 1.5-1.6h15c0.8 0 1.5 0.8 1.5 1.6V41h25.4C85.2 41 86 41.7 86 42.5z"/></svg><h2>Chapter 03</h2></a>
<a href="#collapse" class="untoggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM80.7 70.1L70.1 80.7c-0.6 0.6-1.5 0.6-2.1 0L50 62.7 32 80.7c-0.6 0.6-1.5 0.6-2.1 0L19.3 70.1c-0.6-0.6-0.6-1.5 0-2.1L37.3 50 19.3 32c-0.6-0.6-0.6-1.5 0-2.1l10.6-10.6c0.6-0.6 1.5-0.6 2.1 0L50 37.3l18-18c0.6-0.6 1.5-0.6 2.1 0l10.6 10.6c0.6 0.6 0.6 1.5 0 2.1L62.7 50l18 18C81.3 68.6 81.3 69.5 80.7 70.1z"/></svg><h2>Chapter 03</h2></a>
<div class="animate">
<h3>Page 27</h3>
<ul>
<li>Chrome: <a href="https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb" target="_blank">The QR Code Extension</a></li>
<li>Firefox: <a href="https://addons.mozilla.org/en-US/firefox/addon/generate-qr-code/?src=api" target="_blank">QR Code Image</a></li>
<li>Opera: <a href="https://addons.opera.com/en/extensions/details/qr-box/?display=en" target="_blank">QR Box</a></li>
<li>Safari: <a href="https://safari-extensions.apple.com/details/?id=de.retiolum.safari.qrify-RSADU6MKX9" target="_blank">QRify</a></li>
</ul>
<h3>Page 30</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/rvOLxw" target="_blank">https://codepen.io/browsersdevicesfonts/pen/rvOLxw</a></li>
</ul>
<h3>Page 45</h3>
<ul>
<li><a href="http://browsersdevicesfonts.com/exercise-files/03-getting-started.zip" target="_blank">http://browsersdevicesfonts.com/exercise-files/03-getting-started.zip</a></li>
</ul>
<h3>Page 49</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/yjYJvX" target="_blank">https://codepen.io/browsersdevicesfonts/pen/yjYJvX</a></li>
</ul>
<h3>Page 51</h3>
<ul>
<li><a href="https://browsersdevicesfonts.com/performance" target="_blank">https://browsersdevicesfonts.com/performance</a></li>
</ul>
<h3>Footnotes</h3>
<ol>
<li>StatCounter. 2018. Browser Market Share United States Of America. <a href="http://gs.statcounter.com/browser-market-share/all/united-states-of-america" target="_blank">http://gs.statcounter.com/browser-market-share/all/united-states-of-america</a> (accessed July 20, 2018).</li>
<li>W3 Schools. 2018. Browser Statistics. <a href="https://www.w3schools.com/browsers/default.asp" target="_blank">https://www.w3schools.com/browsers/default.asp</a> (accessed April 21, 2018).</li>
<li>Hogan, Lara, and Montague, Destiny. 2015. Building a Device Lab. <a href="http://buildingadevicelab.com/" target="_blank">http://buildingadevicelab.com</a> (accessed April 21, 2018).</li>
<li>Open Device Labs. 2018. Find the right Open Device Lab for your mission and location. <a href="https://opendevicelab.com/" target="_blank">https://opendevicelab.com</a> (accessed April 21, 2018).</li>
<li>thunder::tech. 2018. Digital Marketing Agency & Web Design Firm. <a href="https://www.thundertech.com/" target="_blank">https://www.thundertech.com</a> (accessed April 21, 2018).></li>
<li>thunder::tech. 2018. User Experience Lab. <a href="http://uxlab.thundertech.com/" target="_blank">http://uxlab.thundertech.com</a> (accessed April 21, 2018).</li>
<li>Meyer, Eric. 2014. Rebeccapurple. <a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ " target="_blank">https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple</a> (accessed April 21, 2018).</li>
</ol>
</div>
</div>
<div class="collapse-wrap">
<a href="#collapse-4" id="collapse-4" class="toggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM86 42.5v15c0 0.8-0.8 1.5-1.6 1.5H59v25.4c0 0.8-0.7 1.6-1.5 1.6H42.5C41.7 86 41 85.2 41 84.4V59H15.6C14.8 59 14 58.3 14 57.5V42.5c0-0.8 0.8-1.5 1.6-1.5H41V15.6c0-0.8 0.7-1.6 1.5-1.6h15c0.8 0 1.5 0.8 1.5 1.6V41h25.4C85.2 41 86 41.7 86 42.5z"/></svg><h2>Chapter 04</h2></a>
<a href="#collapse" class="untoggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM80.7 70.1L70.1 80.7c-0.6 0.6-1.5 0.6-2.1 0L50 62.7 32 80.7c-0.6 0.6-1.5 0.6-2.1 0L19.3 70.1c-0.6-0.6-0.6-1.5 0-2.1L37.3 50 19.3 32c-0.6-0.6-0.6-1.5 0-2.1l10.6-10.6c0.6-0.6 1.5-0.6 2.1 0L50 37.3l18-18c0.6-0.6 1.5-0.6 2.1 0l10.6 10.6c0.6 0.6 0.6 1.5 0 2.1L62.7 50l18 18C81.3 68.6 81.3 69.5 80.7 70.1z"/></svg><h2>Chapter 04</h2></a>
<div class="animate">
<h3>Page 61</h3>
<ul>
<li><a href="https://fonts.google.com/specimen/Passion+One" target="_blank">https://fonts.google.com/specimen/Passion+One</a></li>
</ul>
<h3>Page 63</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/erZbMM" target="_blank">https://codepen.io/browsersdevicesfonts/pen/erZbMM</a></li>
</ul>
<h3>Page 64</h3>
<ul>
<li><a href="http://browsersdevicesfonts.com/exercise-files/04-01-font-specimen-evaluation-page.zip
" target="_blank">http://browsersdevicesfonts.com/exercise-files/04-01-font-specimen-evaluation-page.zip
</a></li>
</ul>
<h3>Page 68</h3>
<ul>
<li><a href="https://typekit.com/fonts/eldwin-script but" target="_blank">https://typekit.com/fonts/eldwin-script but</a></li>
</ul>
<h3>Page 69</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/erZbMM" target="_blank">https://codepen.io/browsersdevicesfonts/pen/erZbMM</a></li>
</ul>
<h3>Page 70</h3>
<ul>
<li><a href="http://browsersdevicesfonts.com/exercise-files/04-01-font-specimen-evaluation-page.zip" target="_blank">http://browsersdevicesfonts.com/exercise-files/04-01-font-specimen-evaluation-page.zip</a></li>
</ul>
<h3>Page 71</h3>
<ul>
<li><a href="https://www.theleagueofmoveabletype.com/league-gothic" target="_blank">https://www.theleagueofmoveabletype.com/league-gothic</a></li>
</ul>
<h3>Page 72</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/erZbMM" target="_blank">https://codepen.io/browsersdevicesfonts/pen/erZbMM</a></li>
</ul>
<h3>Page 74</h3>
<ul>
<li><a href="http://browsersdevicesfonts.com/exercise-files/04-01-font-specimen-evaluation-page.zip" target="_blank">http://browsersdevicesfonts.com/exercise-files/04-01-font-specimen-evaluation-page.zip</a></li>
</ul>
<h3>Page 77</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/YLpQZG" target="_blank">https://codepen.io/browsersdevicesfonts/pen/YLpQZG</a></li>
</ul>
<h3>Page 80</h3>
<ul>
<li><a href="https://browsersdevicesfonts.com/exercise-files/04-02-typographic-hierarchy-page-template.zip" target="_blank">https://browsersdevicesfonts.com/exercise-files/04-02-typographic-hierarchy-page-template.zip</a></li>
</ul>
<h3>Footnotes</h3>
<ol>
<li>Sutter, Brian. 2017. Vrooom! Why Website Speed Matters. <a href="https://www.entrepreneur.com/article/281986" target="_blank">https://www.entrepreneur.com/article/281986</a> (accessed April 27, 2018).</li>
<li>Everts, Tammy. 2016. Google: 53% of mobile users abandon sites that take longer than 3 seconds to load. <a href="https://www.soasta.com/blog/google-mobile-web-performance-study/" target="_blank">https://www.soasta.com/blog/google-mobile-web-performance-study/</a> (accessed April 22, 2018).</li>
<li>Dunham, Ethan. 2018. Font Squirrel Webfont Generator. <a href="https://www.fontsquirrel.com/tools/webfont-generator/" target="_blank">https://www.fontsquirrel.com/tools/webfont-generator/</a> (accessed April 27, 2018).</li>
<li>Reichenstein, Oliver. 2006. Web Design is 95% Typography. <a href="https://ia.net/topics/the-web-is-all-about-typography-period/" target="_blank">https://ia.net/topics/the-web-is-all-about-typography-period/</a> (accessed April 22, 2018).</li>
<li>Scrivens, Paul. 2012. One More Time: Typography is the Foundation of Web Design. <a href="https://www.smashingmagazine.com/2012/07/one-more-time-typography-is-the-foundation-of-web-design/" target="_blank">https://www.smashingmagazine.com/2012/07/one-more-time-typography-is-the-foundation-of-web-design</a> (accessed April 22, 2018).</li>
<li>W3C, 2017. Detecting the ambient light level: the light-level feature. <a href="https://drafts.csswg.org/mediaqueries-5/#light-level" target="_blank">https://drafts.csswg.org/mediaqueries-5/#light-level</a> (accessed April 27, 2018).</li>
<li>Coyier, Chris. 2012. Viewport Sized Typography. <a href="https://css-tricks.com/viewport-sized-typography/" target="_blank">https://css-tricks.com/viewport-sized-typography/</a> (accessed April 23, 2018).</li>
<li>Shadeed, Ahmad. 2016. Building Resizeable Components with Relative CSS Units. <a href="https://css-tricks.com/building-resizeable-components-relative-css-units/" target="_blank">https://css-tricks.com/building-resizeable-components-relative-css-units</a> (accessed April 23, 2018).</li>
<li>Graham, Geoff. 2017. Fluid Typography. <a href="https://css-tricks.com/snippets/css/fluid-typography/" target="_blank">https://css-tricks.com/snippets/css/fluid-typography</a> (accessed April 23, 2018).</li>
</ol>
</div>
</div>
<div class="collapse-wrap">
<a href="#collapse-5" id="collapse-5" class="toggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM86 42.5v15c0 0.8-0.8 1.5-1.6 1.5H59v25.4c0 0.8-0.7 1.6-1.5 1.6H42.5C41.7 86 41 85.2 41 84.4V59H15.6C14.8 59 14 58.3 14 57.5V42.5c0-0.8 0.8-1.5 1.6-1.5H41V15.6c0-0.8 0.7-1.6 1.5-1.6h15c0.8 0 1.5 0.8 1.5 1.6V41h25.4C85.2 41 86 41.7 86 42.5z"/></svg><h2>Chapter 05</h2></a>
<a href="#collapse" class="untoggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM80.7 70.1L70.1 80.7c-0.6 0.6-1.5 0.6-2.1 0L50 62.7 32 80.7c-0.6 0.6-1.5 0.6-2.1 0L19.3 70.1c-0.6-0.6-0.6-1.5 0-2.1L37.3 50 19.3 32c-0.6-0.6-0.6-1.5 0-2.1l10.6-10.6c0.6-0.6 1.5-0.6 2.1 0L50 37.3l18-18c0.6-0.6 1.5-0.6 2.1 0l10.6 10.6c0.6 0.6 0.6 1.5 0 2.1L62.7 50l18 18C81.3 68.6 81.3 69.5 80.7 70.1z"/></svg><h2>Chapter 05</h2></a>
<div class="animate">
<h3>Page 114</h3>
<ul>
<li><a href="https://browsersdevicesfonts.com/05-01-image-optimization.zip" target="_blank">https://browsersdevicesfonts.com/05-01-image-optimization.zip</a></li>
</ul>
<h3>Page 123</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/RyRbwr" target="_blank">https://codepen.io/browsersdevicesfonts/pen/RyRbwr</a></li>
<li><a href="https://codepen.io/browsersdevicesfonts/exercise-files/05-02-layout-evaluation-images.zip" target="_blank">https://codepen.io/browsersdevicesfonts/exercise-files/05-02-layout-evaluation-images.zip</a></li>
<li><a href="https:// browsersdevicesfonts.com/exercise-files/05-03-layout-evaluation-template.zip" target="_blank">https:// browsersdevicesfonts.com/exercise-files/05-03-layout-evaluation-template.zip</a></li>
</ul>
<h3>Page 150</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/ZoOmbd" target="_blank">https://codepen.io/browsersdevicesfonts/pen/ZoOmbd</a></li>
<li><a href="https:// browsersdevicesfonts.com/exercise-files/05-04-layout-evaluation-picture-element-demo.zip" target="_blank">https:// browsersdevicesfonts.com/exercise-files/05-04-layout-evaluation-picture-element-demo.zip</a></li>
</ul>
<h3>Page 162</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/NMreXx" target="_blank">https://codepen.io/browsersdevicesfonts/pen/NMreXx</a></li>
</ul>
<h3>Footnotes</h3>
<ol>
<li>W3 Schools. 2018. How TO - Typical Device Breakpoints. <a href="https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp" target="_blank">https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp</a> (accessed April 29, 2018).</li>
<li>Marcotte, Ethan. 2010. Responsive Web Design. <a href="https://alistapart.com/article/responsive-web-design/" target="_blank">https://alistapart.com/article/responsive-web-design</a> (accessed April 27, 2018).</li>
</ol>
</div>
</div>
<div class="collapse-wrap">
<a href="#collapse-6" id="collapse-6" class="toggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM86 42.5v15c0 0.8-0.8 1.5-1.6 1.5H59v25.4c0 0.8-0.7 1.6-1.5 1.6H42.5C41.7 86 41 85.2 41 84.4V59H15.6C14.8 59 14 58.3 14 57.5V42.5c0-0.8 0.8-1.5 1.6-1.5H41V15.6c0-0.8 0.7-1.6 1.5-1.6h15c0.8 0 1.5 0.8 1.5 1.6V41h25.4C85.2 41 86 41.7 86 42.5z"/></svg><h2>Chapter 06</h2></a>
<a href="#collapse" class="untoggler"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50s50-22.4 50-50C100 22.4 77.6 0 50 0zM80.7 70.1L70.1 80.7c-0.6 0.6-1.5 0.6-2.1 0L50 62.7 32 80.7c-0.6 0.6-1.5 0.6-2.1 0L19.3 70.1c-0.6-0.6-0.6-1.5 0-2.1L37.3 50 19.3 32c-0.6-0.6-0.6-1.5 0-2.1l10.6-10.6c0.6-0.6 1.5-0.6 2.1 0L50 37.3l18-18c0.6-0.6 1.5-0.6 2.1 0l10.6 10.6c0.6 0.6 0.6 1.5 0 2.1L62.7 50l18 18C81.3 68.6 81.3 69.5 80.7 70.1z"/></svg><h2>Chapter 06</h2></a>
<div class="animate">
<h3>Page 172</h3>
<ul>
<li><a href="https://styleguide.io" target="_blank">https://styleguide.io</a></li>
</ul>
<h3>Page 179</h3>
<ul>
<li><a href="https://codepen.io/browsersdevicesfonts/pen/YLqozx" target="_blank">https://codepen.io/browsersdevicesfonts/pen/YLqozx</a></li>
<li><a href="https://browsersdevicesfonts.com/exercise-files/06-typographic-hierarchy-page-template.zip" target="_blank">https://browsersdevicesfonts.com/exercise-files/06-typographic-hierarchy-page-template.zip</a></li>
</ul>
</div>
<a id="author"></a>
</div>
</section>
<section class="author">
<!--<h1>Gary Rozanc</h1>-->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/gary-rozanc.jpg" alt="Gary Rozanc Headshot">
<p><a href="https://garyrozanc.com/" target="_blank"><b>Gary Rozanc</b></a> researches the best practices for teaching interactive and user experience design, specifically finding the ideal balance of visual design, user experience, and front-end development skills for the emerging interactive designer. To support his research, in May 2014, Gary’s proposal <a href="https://gary.is/decaward" target="_blank">“Web Designer Competencies Inventory and Recommendations for Inclusion in Design Curricula”</a> was awarded the AIGA DEC Design Faculty Research Grant.</p>
<p>This research evolved into interviews with design practitioners to determine, contextualize, and prioritize these competencies, and is distributed via Gary’s award winning podcast series <a href="https://designedu.today" target="_blank">Design Edu Today</a>. Nationally recognized by the AIGA Design Educators Community, Design Incubation, and UCDA, Design Edu Today contributes to discovering the ideal balance between design disciplines that he brings back to the classroom.</p>
<p>Gary presents his research at international and national peer-reviewed conferences including AIGA’s bi-annual National Conference “Head, Heart, Hand” and the “International Conference on Design Principles & Practices.” Gary is an Assistant Professor in the <a href="https://art.umbc.edu/visual-arts-at-umbc/faculty-staff/gary-rozanc/" target="_blank">Department of Visual Arts</a> at the University of Maryland, Baltimore County, and received his BA with a concentration in graphic design from Cleveland State University, and his MFA in visual communications from the University of Arizona.</p>
</section>
</main>
Raw
style.scss
@import url("https://use.typekit.net/vei6fvy.css");
@mixin font-body {
font-family: vista-sans, sans-serif;
font-weight: 200;
font-style: normal;
}
@mixin font-body-bold {
font-weight: 500;
font-style: normal;
}
@mixin font-headline {
font-family: mr-eaves-sans, sans-serif;
font-weight: 700;
font-style: italic;
}
$black: #262626;
$purple: #6b1a43;
$white: #f0f0f0;
body {
background-color: $white;
color: $black;
@include font-body;
font-size: 23px;
line-height: 1.4;
padding-bottom: 3rem;
}
nav {
background-color: $purple;
@media (min-width: 800px) {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
h1 {
color: $white;
@include font-headline;
font-size: 2rem;
margin: 0;
text-align: center;
width: 100%;
@media (min-width: 800px) {
font-size: 2.25rem;
margin: 2.5rem 0 .5rem 0;
text-align: left;
}
}
ul {
font-size: 1rem;
list-style-type: none;
padding: .5rem 0 0 0;
margin: 0;
text-align: center;
width: 100%;
@media (min-width: 800px) {
padding: 1rem 0 0 0;
text-align: right;
}
}
li {
display: inline-block;
margin-left: .5rem;
a {
color: $white;
position: relative;
text-decoration: none;
&:hover {
color: $white;
}
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: $white;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
a:hover:before {
visibility: visible;
background-color: #white;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
}
.nav-wrap,
.home-text {
margin: 0 auto;
width: 96%;
@media (min-width: 800px) {
width: 80%;
}
@media (min-width: 1100px) {
width: 70%;
}
@media (min-width: 1400px) {
width: 62%;
}
}
main {
@media (min-width: 800px) {
margin-top: 3rem;
}
}
.carousel {
position: relative;
//box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
//border-radius: 10px;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
cursor: pointer;
display: none;
height: 30px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
text-align: center;
width: 30px;
z-index: 10;
}
.carousel-control.next {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/prev.svg');
left: 1.5%;
}
.carousel-control.next:hover {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/prev-hover.svg');
}
.carousel-control.prev {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/next.svg');
right: 1.5%;
}
.carousel-control.prev:hover {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/135363/next-hover.svg');
}
.carousel-control.prev, .carousel-control.prev:hover,
.carousel-control.next, .carousel-control.next:hover {
transition: background-image 300ms linear;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5,
#carousel-6:checked ~ .control-6 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators-background {
display: inline-block;
height: 20px;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.50);
padding: 0 5px 4px 5px; // Changed this
}
.carousel-indicators li {
display: inline-block;
font-size: .85rem; // Added this
margin-top: -1rem; // Centers dots in background
padding: 0;
line-height: 1;
}
.carousel-bullet {
color: $white;
cursor: pointer;
//display: block;
font-size: 35px;
line-height: 1;
}
.carousel-bullet:hover {
color: $black;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet,
#carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet,
#carousel-5:checked ~ .control-5 ~ .carousel-indicators li:nth-child(5) .carousel-bullet,
#carousel-6:checked ~ .control-6 ~ .carousel-indicators li:nth-child(6) .carousel-bullet {
color: $black;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
.home-text {
ul {
padding-left: 2ch;
li {
margin-bottom: .5rem;
}
}
}
.resources,
.author {
border-top: 1.55px solid $purple;
margin-top: 6rem;
h1 {
color: $purple;
font-size: 2.25rem;
margin: 0;
}
h1 + p {
margin-top: 0;
}
img {
max-width: 100%;
}
}
.author {
border-top: none;
position: relative;
h1 {
position: absolute;
z-index: 100;
}
a {
color: $black;
transition: all 300ms ease-in-out;
&:hover {
color: lighten($black, 40%);
}
}
}
.resources {
h1 {
background-color: $purple;
border-bottom: 1px solid $white;
box-sizing: border-box;
color: $white;
padding-left: .75rem;
width: 100%;
}
h2 {
font-size: 1.75rem;
margin: 0 0 .125rem 0;
}
h3 {
font-size: 1.35rem;
margin-bottom: 0;
}
ul, ol {
line-height: 1.2;
margin-top: 0;
}
}
.amazon {
color: $white;
background-color: $purple;
border: 2px solid $purple;
font-size: 1.75rem;
font-weight: 500;
padding: 2px 4px 4px 4px;
text-decoration: none;
transition: all 300ms ease-in-out;
&:hover {
color: $purple;
background-color: $white;
border: 2px solid $purple;
}
}
/*
.resource-list {
column-count: 2;
column-gap: 2rem;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.resource-list-chapter {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
*/
.toggler, .untoggler {
color: $black !important;
}
.untoggler {
display: none;
}
.toggler:target ~ .untoggler {
display: block;
}
.toggler:target {
display: none;
}
/*
.toggler:before, .untoggler:before {
display: inline-block;
float: left;
margin-left: 5px;
width: 20px;
}
.toggler:before {
content: "+";
}
.untoggler:before {
content: "-";
}
*/
.toggler ~ div {
display: none;
}
.toggler ~ div.animate {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
.toggler:target ~ div {
display: block;
}
.toggler:target ~ div.animate {
max-height: 400vh;
}
.collapse-wrap {
//background-color: $purple;
border-bottom: 2px $purple solid;
.toggler, .untoggler {
text-decoration: none;
&:hover h2 {
color: lighten($black, 40%);
}
&:hover svg {
fill: lighten($black, 40%);
}
}
.toggler h2, .untoggler h2 {
color: $black;
padding: .25rem .75rem;
transition: all 300ms ease-in-out;
}
.animate {
//background-color: $white;
box-sizing: border-box;
padding: 0 .75rem;
a {
color: $black;
transition: all 300ms ease-in-out;
&:hover {
color: lighten($black, 40%);
}
}
ol {
padding-left: 2ch;
li {
margin-bottom: .55em;
}
}
}
svg {
float: left;
fill: $black;
margin: .74rem .5rem 0 .75rem;
transition: all 300ms ease-in-out;
width: 1.5rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment