Carlos Araya caraya
🙈
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrap"> | |
| <div class='full-bleed'> | |
| <img src="images/typography.jpg" alt="imagfe showing multiple typefaces being written in several directios" class='header-image'> | |
| </div> | |
| <div class="main-content"> | |
| <h1>Learning to play with typography</h1> | |
| <p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental and <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria</p> | |
| <p>But it wasn't until fluent that I got a better idea of why typography is important.I got the chance to talk with both Eric Meyer, one of my early web design influences, and Jason Pamental, the author of Responsive Typography and a very good presenter.</p> |
caraya
/ SassMeister-input-HTML.html
Last active
August 29, 2015 14:21
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrap"> | |
| <div class="main-content"> | |
| <div class='full-bleed'> | |
| <img src="https://github.com/caraya/books-as-apps/blob/master/images/typography.jpg" alt="image showing multiple typefaces being written in several directions" class='header-image'> | |
| <p>Image licensed under CC Attribution by <a href="https://www.flickr.com/photos/tarale/2897185492/">Taryn</a></p> | |
| </div> | |
| <h1>Learning to play with typography</h1> | |
| <p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental and <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria</p> |
caraya
/ A article post with summary
Last active
August 29, 2015 14:26
— forked from yulijia/A article post with summary
[Jekyll] How to create post summary in Freshman21 theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| published: true | |
| title: how to create post summary | |
| layout: post | |
| summary: This post show us how to create a post summary step by step. | |
| author: Yu | |
| category: howto | |
| tags: | |
| - summary | |
| --- |
caraya
/ alternatives.html
Created
August 7, 2015 20:58
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!-- | |
| This is how I would like to use athena-document | |
| --> | |
| <html> | |
| <head> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, minimum-scale=1.0, initial-scale=1.0, | |
| user-scalable=yes"> |
caraya
/ _media32.scss
Last active
August 29, 2015 14:27
A Sass 3.2 mixin for dealing with Media Queries
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Here are some variables, then a mixin and then an application of the mixin - this will only compile using Sass 3.2 | |
| //variables | |
| $XS: 12.5em; // 200px; | |
| $S: 18.75em; // 300px | |
| $SM: 35em; // 560px | |
| $M: 47.5em; // 760px | |
| $L: 63em; // 1008px | |
| $XL: 110em; // 1760px | |
| $XXL: 180em; // 2880px |
caraya
/ figure-related css
Created
August 19, 2015 20:02
caraya
/ Text Align with Image Border
Last active
August 29, 2015 14:27
— forked from anonymous/Text Align with Image Border
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <style type='text/css'> | |
| /* | |
| We can leave the figcaption without doing anything to its width :) | |
| */ | |
| p.caption { | |
| font-family: "ArnoPro-Caption"; | |
| font-size: .6em; |
caraya
/ base.css
Last active
August 31, 2015 21:59
— forked from planetoftheweb/base.css
Base CSS document with google fonts, Eric Meyer's reset.css, Ethan Schoonover's solarized palette and some basic responsive code.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700|Exo+2:300,600); | |
| /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ | |
| html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} | |
| /* Solarized Palette - http://ethanschoonover.com/solarized --------- | |
| lightgray : #819090; | |
| gray : #70 |
caraya
/ _solarized.scss
Created
August 31, 2015 22:04
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Include this file early in your Sass project to | |
| * get access to Solarized colors and functions. | |
| * | |
| * Adapted from the outstanding work by Ethan Schoonover: | |
| * http://ethanschoonover.com/solarized | |
| */ | |
| $base03: rgb(0, 43, 54); | |
| $base02: rgb(7, 54, 66); |
caraya
/ athena-video-1.html
Created
November 8, 2015 23:38
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <athena-video height='320' width='480' controls poster='images/poster.png'> | |
| <video-source formats='mp4 webm'></video-source> | |
| <video-subtitle languages='en es fr de' type='subtitle'></video-subtitle> | |
| <video-track language='en es' type='caption'></video-subtitle> | |
| <video-track language='en' type='chapter'></video-track> | |
| <video-track language='es' type='description'></video-track> | |
| </athena-video> |