Skip to content

Instantly share code, notes, and snippets.

@andrewjstone

andrewjstone/scss_stuff.scss

Created January 27, 2012 00:04
Show Gist options
  • Save andrewjstone/1686015 to your computer and use it in GitHub Desktop.
Save andrewjstone/1686015 to your computer and use it in GitHub Desktop.
Download ZIP
scss
Raw
scss_stuff.scss
$publisher_color: null;
$accent_color: null;
$publisher_title_font: "'Georgia'";
$title_font: "'Georgia'";
$publisher_body_font: null;
$body_font: null;
$arrow: url(data:image/gif;base64,R0lGODlhBQAJAIABAAAAAP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5Mzc1RjU1M0Q4Njk1Rjg3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkEzQUU3MkU2MEUzNTExRTFCMDY0QTMyMjVBQjRGMDE0IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkEzQUU3MkU1MEUzNTExRTFCMDY0QTMyMjVBQjRGMDE0IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUuMSBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMjgwMTE3NDA3MjA2ODExOTM3NUY1NTNEODY5NUY4NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTM3NUY1NTNEODY5NUY4NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAAFAAkAAAIMjAMHidsLXTRQMVoAADs=);
$arrowinverted: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzE0LzExUOnYqQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAzSURBVAiZfY3BDcAgDMRg0jibZPK4v0ogwF+ffLOqHC8Ad7pbVcDr6JenUmaebwEjYpEfZYNDRn5fiSgAAAAASUVORK5CYII=);
$tweet: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAUCAYAAABxnDbHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzE0LzExUOnYqQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAD3SURBVEiJ7ZXRTcNAEAXHiN+4haQDI6UAKIEOoJR0QAlQAUkHSDRAKkhCA4BSQIYPn9HlEpuzsCJF4kmrs9f2G++urStUTq2LkxP/oT1UAeXQ0LLD9BFYAq99oahdMVE/1Se1ivL37utFLX/x+omcm54T87G69lCzXOhlRjO2gEAB3ACbpkkh16x3Ib8EFn9pL+pI/VJ3IYzWVBv1doj2oj6oHy2gRmv1OscvF4r1B5VWGR9nz7TtwjiYTMJ5pc5tb+tbj5fvrPQqqi5WCp5bz30QKNb/3kxdHYEvzJxhGoVmb20lMAVWwHvuQ8fUBzqYznKXOR/oN7p5DpXPj2p6AAAAAElFTkSuQmCC);
$video: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzE0LzExUOnYqQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAJSSURBVGiB5ZoxbttAEABnL70eEFgfsFInsGoXqY1A/kAeIMB9ivSB/QB9wIbjF6QWEffWB6QX6AOb4pYHiaEoUrwjxWSqMyAuZ8/kafdOQktUdQxMgStgDEyAUclHt8AbsAYyYCki6xPuF8Zygm8e5BaY4aVPJQOeROSxwX3DuLG8qt4Bt8BF02sr2ACPIvKjxv3DuLa8qk6BB+JKF9kAcxFZVniEcS15Vf0OfG2tVp+FiHw74BLGlfKqOgJegMuoavVYATcisi04hbE7dGXP4th9X8yjlFL5MxDPqUyg9LFR1V/0L77LSkSu4chjYy/nOYkDXJrXHnszb8vhc2dKzfkChGW0KP9K2nW8LRvgY/7Hu3xg35yf+zBqQP7iZrAz8wOY9Zww+w5CkRVT/ClirCIX+NoqrDazmNFFZE7aBGYAYvX475iRReQ9gKo+EHlidvjk8I1EEhL/B6aOds3EURImcOXwrVtSEiUwdvieMzkJEpg4ypvlJEROYHSwnk9FzAQ6l4d4CfQib83Fh7ZxOpeP2aU5/E5WJ6jqBHglTrOzdfgtuOSY+E/irW5vDr93mBSrWmOKA6wdVtinwsTvif99kjl2esLYWHd2nyj80tk2c/TZt3L4LnZcI8MeG4hcNCWu48F8h9/DGrU3+HsmeA5636ZYHsy7dWnMnt+evJ1ILDrVqc+ieGLyb+0SGzf4k4lzYIX3+YtSeTtKOYcESo92cg7W82eQQKU4HGlGRGRrz1rXL/FCRK6rxOF/OIctXDy8E/CSIMP77UFJsN5+9fEHv3j+139CYyAAAAAASUVORK5CYII=);
#home #posts li.entry > .entryContent .byline .dateline .time_elapsed { display: none; }
/* table of contents styles */
#home {
background: #fff;
-webkit-perspective: 1000;
font-family: 'Helvetica';
/*HEADER*/
header {
height: 60px;
h1 {
padding: 15px;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
font-family: Helvetica;
color: #000;
}
img {
height: 37px;
width: auto;
}
}
/*CATEGORIES*/
#categories {
background: #000;
position: absolute;
-webkit-transform: translate3d(100%, 0, 0);
-webkit-transition: -webkit-transform .375s ease;
top: 60px;
right: 0;
bottom: 0;
z-index: 1;
&.hot {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
color: #000;
}
li {
border-bottom: solid #999 1px;
padding: 10px 7px;
position: relative;
float: left;
clear: both;
right: 0;
z-index: 2;
background-color: rgba(0,0,0,1);
width: 250px;
color: #fff;
padding: 10px 15px;
font-weight: bold;
text-align: left;
font-size: 22px;
&.hot {
background-color: #fff;
color: #000;
border-color: #fff;
}
&:first-child {
border-top: 1px solid #000;
&:before {
content: 'View all';
}
}
}
}
#currCategory {
position: absolute;
right: 0px;
top: 10px;
height: 40px;
background: $arrow right no-repeat;
z-index: 1;
text-align: right;
color: #333;
line-height: 40px;
font-size: 14px;
padding-right: 20px;
margin-right: 20px;
&[data-category=""]:before {
content: 'Sections';
}
}
/*POSTS*/
#postsContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 60px 0 40px 15px;
opacity: 1;
-webkit-transition: -webkit-transform 500ms ease, opacity 500ms ease;
&.categoryChanging {
#posts {
li {
pointer-events: none;
-webkit-transform: scale3d(1.5,1.5,1.5);
opacity: 0;
}
}
}
#posts {
width: 100%;
height: 100%;
-webkit-column-gap: 0;
li.entry {
position: relative;
float: left;
width: 20%;
height: 33.33%;
-webkit-transition: -webkit-transform .25s ease, opacity 500ms ease;
-webkit-backface-visibility: visible;
.entryContent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 10px 10px 0;
padding: 9px 10px;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
color: #fff;
z-index: 0;
.hed {
position: absolute;
left: 0;
bottom: 0;
right: 0;
line-height: 140%;
font-size: 14px;
.byline {
display: none;
.author {
display: none;
}
}
.title {
color: #000;
padding: 7px;
font-weight: bold;
}
}
ul.sections,
ul.sections li {
display: inline;
}
ul.sections li:nth-child(n+2) {
display:none;
}
ul.sections,
.category, .inset, .dek {
display: none;
}
}
}
li.entry.picture {
.entryContent {
.hed {
background: #fff;
.title {
border-top: solid #000 1px;
border-bottom: solid #000 1px;
margin-top: 7px;
min-height: 58px;
bottom: 0;
}
}
}
}
li.entry.article.pictureless {
.entryContent {
.hed {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
.title {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 18px;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
margin-top: 0;
line-height: 135%;
}
}
}
}
li.entry.video {
.entryContent {
background: #000;
background-image: none !important;
.inset {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
background-size: cover;
background-position: 50% 50%;
display: block;
}
ul.sections,
ul.sections li {
display: inline;
}
ul.sections li:nth-child(n+2) {
display:none;
}
ul.sections,
.category {
color: transparent;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent $video 50% 40% no-repeat;
display: block;
z-index: 1;
}
.hed {
.byline {
display: none;
}
.title {
position: absolute;
color: #fff;
bottom: 0;
border: none;
z-index: 1;
min-height: 0;
}
}
}
}
li.entry.photo {
.entryContent {
.hed {
display: none;
}
}
}
li.entry.quote.pictureless {
.entryContent {
font-size: 21px;
background: #000;
@if $publisher_color != null {background-color: $publisher_color;};
ul.sections,
ul.sections li {
display: inline;
}
ul.sections li:nth-child(n+2) {
display:none;
}
ul.sections,
.category {
display: block;
position: absolute;
bottom: 3px;
left: 0;
color: transparent;
background: transparent $tweet 0 0 no-repeat;
width: 29px;
height: 20px;
}
.hed {
top: 8px;
bottom: auto;
display: -webkit-box;
color: #fff;
.byline {
display: block;
border-top: solid #fff 1px;
font-size: 11px;
position: absolute;
color: #fff;
top: 0;
left: 7px;
right: 7px;
padding-top: 2px;
height: 2em;
overflow: hidden;
}
.title {
font-size: 14px;
font-weight: bold;
margin-top: 25px;
color: #fff;
}
}
}
.dek {
display: none;
}
}
}
}
/*PAGINATION*/
footer {
height: 20px;
padding: 17px 0;
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
-webkit-transition: -webkit-transform .375s ease;
.pagination {
display: inline-block;
list-style: none;
overflow: hidden;
li {
float: left;
display: inline-block;
text-indent: -3000px;
width: 8px;
height: 8px;
margin: 8px;
background: #ccc;
text-align: center;
&.hot {
background-color: #000;
}
}
}
}
#peelHelper {
width: 50px;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
}
}
@media all and (orientation: portrait) {
#home #postsContainer #posts {
li.entry {
height: 25%;
width: 33%;
}
}
#home #postsContainer.uncategorized #posts {
li.entry {
&:nth-child(8n+1),
&:nth-child(8n+2)
{
height: 50%;
width: 50%;
.entryContent {
margin: 0 15px 15px 0;
}
}
}
li.entry.article, li.entry.video {
&:nth-child(8n+1),
&:nth-child(8n+2) {
.entryContent {
.hed {
margin: 220px 40px 0 0;
position: static;
background: transparent;
padding: 27px 0 0 0;
.byline {
display: block;
position: absolute;
top: 228px;
left: 0px;
font-size: 11px;
background: #000;
width: 70%;
height: 25px;
line-height: 25px;
overflow: hidden;
margin: 0;
padding: 0 12px;
white-space: nowrap;
}
.title {
font-size: 20px;
border: none;
padding: 4px 0;
background-color: #fff;
display: inline;
line-height: 130%;
-webkit-box-shadow: -10px 0 0 #fff, 20px 0 0 #fff;
position: relative;
left: 0px;
}
}
}
}
}
li.entry.photo {
&:nth-child(8n+1),
&:nth-child(8n+2) {
.entryContent {
.hed {
display: none;
}
}
}
}
li.entry.article.pictureless {
&:nth-child(8n+1),
&:nth-child(8n+2) {
.entryContent {
background: #000;
@if $publisher_color != null {background-color: $publisher_color;};
.hed {
padding-top: 27px;
}
}
}
}
li.entry.quote.pictureless {
&:nth-child(8n+1),
&:nth-child(8n+2) {
.entryContent {
background: #000;
@if $publisher_color != null {background-color: $publisher_color;};
.hed {
top: 28px;
display: -webkit-box;
left: 10px;
right: 10px;
.title {
font-size: 30px;
line-height: 130%;
}
.byline {
border-top: none;
border-bottom: solid #fff 1px;
display: -webkit-box;
-webkit-box-orient: horizontal;
.author {
display: block;
-webkit-box-ordinal-group: 2;
padding-left: 27px;
background: transparent $tweet 0 40% no-repeat;
}
time {
display: block;
-webkit-box-ordinal-group: 1;
}
}
}
ul.sections,
ul.sections li {
display: inline;
}
ul.sections li:nth-child(n+2) {
display:none;
}
ul.sections,
.category {
display: none;
}
}
}
}
}
}
@media all and (orientation: landscape) {
#home #postsContainer #posts {
li.entry {
height: 33.34%;
width: 20%;
margin-right: -1px;
}
}
#home #postsContainer.uncategorized #posts {
li.entry {
background: transparent;
&:nth-child(8n+1),
&:nth-child(8n+2),
&:nth-child(8n+3) {
width: 33.33%;
height: 67%;
margin-bottom: 1px;
.entryContent {
margin: 0 15px 15px 0;
}
}
&:nth-child(8n+4),
&:nth-child(8n+5),
&:nth-child(8n+6),
&:nth-child(8n+7),
&:nth-child(8n+8) {
height: 33%;
}
}
li.entry.article, li.entry.video {
&:nth-child(8n+1),
&:nth-child(8n+2),
&:nth-child(8n+3) {
.entryContent {
.hed {
margin: 200px 40px 0 0;
position: static;
background: transparent;
padding: 27px 0 0 0;
.byline {
display: block;
position: absolute;
top: 208px;
left: 0px;
font-size: 11px;
background: #000;
width: 70%;
height: 25px;
line-height: 25px;
overflow: hidden;
margin: 0;
padding: 0 12px;
white-space: nowrap;
}
.title {
font-size: 20px;
border: none;
padding: 4px 0;
background-color: #fff;
display: inline;
line-height: 130%;
-webkit-box-shadow: -10px 0 0 #fff, 20px 0 0 #fff;
position: relative;
left: 0px;
}
}
}
}
}
li.entry.photo {
&:nth-child(8n+1),
&:nth-child(8n+2),
&:nth-child(8n+3) {
.entryContent {
.hed {
display: none;
}
}
}
}
li.entry.article.pictureless {
&:nth-child(8n+1),
&:nth-child(8n+2),
&:nth-child(8n+3) {
.entryContent {
background: #000;
@if $publisher_color != null {background-color: $publisher_color;};
.hed {
padding-top: 27px;
}
}
}
}
li.entry.quote.pictureless {
&:nth-child(8n+1),
&:nth-child(8n+2),
&:nth-child(8n+3) {
.entryContent {
background: #000;
@if $publisher_color != null {background-color: $publisher_color;};
.hed {
top: 28px;
display: -webkit-box;
left: 10px;
right: 10px;
.title {
font-size: 30px;
line-height: 130%;
}
.byline {
border-top: none;
border-bottom: solid #fff 1px;
display: -webkit-box;
-webkit-box-orient: horizontal;
.author {
display: block;
-webkit-box-ordinal-group: 2;
padding-left: 27px;
background: transparent $tweet 0 40% no-repeat;
}
time {
display: block;
-webkit-box-ordinal-group: 1;
}
}
}
ul.sections,
ul.sections li {
display: inline;
}
ul.sections li:nth-child(n+2) {
display:none;
}
ul.sections,
.category {
display: none;
}
}
}
}
}
}
$quote: url(data:image/png;base64,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);
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: normal;
src: local("Oswald "), local("Oswald"), url("http://themes.googleusercontent.com/font?kit=Y_TKV6o8WovbUd3m_X9aAA") format("truetype"); }
#post { background: white; overflow: hidden; }
#post .artwork { display: none; }
#post header { height: 70px; margin: 0 10px; border-bottom: 1px solid black; }
#post header h1 { padding: 10px; margin: auto; font-size: 40px; letter-spacing: -1px; }
#post header img { height: 50px; display: block; margin: auto; }
#post #breadcrumbs { display: none; }
#post #articlesContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
#post #articlesContainer * { pointer-events: auto; }
#post #articlesContainer article {
position: absolute; top: 0; left: 0; bottom: 0; margin: 79px 0 50px 0; padding: 21px;
font: 15px Georgia; overflow: hidden;
}
#post #articlesContainer article.article { background: white; color: black; }
#post #articlesContainer article.article .hed { margin-bottom: 20px; }
#post #articlesContainer article.article .hed .category { display: none; }
#post #articlesContainer article.article .hed h2 { font: normal 40px "Oswald", "Georgia"; line-height: 44px; }
#post #articlesContainer article.article .hed .byline { font: 14px "Georgia"; color: gray; padding: 10px 0 5px; }
#post #articlesContainer article.article .hed .byline .author:before { content: "By "; }
#post #articlesContainer article.article .hed .byline .dateline:before { content: "on " }
#post #articlesContainer article.article .text { -webkit-column-gap: 42px; height: 100%; line-height: 23px; }
#post #articlesContainer article.article p + p { text-indent: 1.5em; margin-top: 0; }
#post #articlesContainer article.article .imgContainer { display: inline-block; width: 100%; height: 200px; overflow: hidden; margin: 15px 0; }
#post #articlesContainer article.article .imgContainer img { display: block; width: 100%; height: auto; }
#post #articlesContainer article.article .endSign { height: .75em; width: auto; margin-left: .5em; }
#post #articlesContainer article.quote { bottom: 0;}
#post #articlesContainer article.quote .text { margin: 75px 100px; }
#post #articlesContainer article.quote .text .hed { }
#post #articlesContainer article.quote .text .hed .byline { padding: 25px 10px; margin-top: 5px; }
#post #articlesContainer article.quote .text .hed .byline .avatar { float: left; padding-right: 15px; }
#post #articlesContainer article.quote .text .hed .byline .author { font-size: 20px; }
#post #articlesContainer article.quote .text .hed .byline .author:before {content: "";}
#post #articlesContainer article.quote .text .hed .byline .dateline { display: block; }
#post #articlesContainer article.quote .text .content {position: relative; padding: 40px; font: 35px Georgia; text-overflow: ellipsis; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); background-color: #fff; }
#post #articlesContainer article.quote .text .content:after {display: block; position: absolute; bottom: -25px; left: 30px; content: ''; height: 25px; width: 50px; background: transparent $quote top left no-repeat; }
#post #articlesContainer article.photo { right: 0; }
#post #articlesContainer article.photo .media { background: black; position: absolute; top: 0; right: 0; bottom: 40%; left: 0; }
#post #articlesContainer article.photo .media img { display: block; width: auto; height: auto; margin: auto; -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, .5))); }
#post #articlesContainer article.photo .text { background: white; position: absolute; top: 60%; right: 0; bottom: 0; left: 0; padding: 30px; }
#post #articlesContainer article.photo .text .hed { margin-bottom: 20px; }
#post #articlesContainer article.photo .text .hed .category { display: none; }
#post #articlesContainer article.photo .text .hed h2 { font-size: 40px; font-weight: normal; }
#post #articlesContainer article.photo .text .content { font-size: 13px; }
#post #articlesContainer article.video { right: 0; }
#post #articlesContainer article.video .media { background: black; position: absolute; top: 0; right: 0; bottom: 40%; left: 0; overflow: hidden; }
#post #articlesContainer article.video .media video,
#post #articlesContainer article.video .media iframe { display: block; width: auto; margin: auto; width: auto; height: auto; -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, .5))); }
#post #articlesContainer article.video .text { background: white; position: absolute; top: 60%; right: 0; bottom: 0; left: 0; padding: 30px; }
#post #articlesContainer article.video .text .hed { margin-bottom: 20px; }
#post #articlesContainer article.video .text .hed .category { display: none; }
#post #articlesContainer article.video .text .hed h2 { font-size: 40px; font-weight: normal; }
#post #articlesContainer article.video .text .content { font-size: 13px; }
@media all and (orientation: portrait) {
#post #articlesContainer article.photo .media img,
#post #articlesContainer article.video .media video { max-width: 100%; min-height: 100%; }
#post #articlesContainer article.video .media iframe { width: 425px; height: 349px; }
}
@media all and (orientation: landscape) {
#post #articlesContainer article.photo .media { right: 40%; bottom: 0; }
#post #articlesContainer article.photo .text { top: 0; left: 60%; }
#post #articlesContainer article.photo .media img { max-width: 100%; min-height: 50%; }
#post #articlesContainer article.video .media { right: 40%; bottom: 0; }
#post #articlesContainer article.video .text { top: 0; left: 60%; }
#post #articlesContainer article.video .media video { max-width: 100%; max-height: 100%; min-width: 100%; min-height: 50%; }
#post #articlesContainer article.video .media iframe { width: 425px; height: 349px; }
}
#post footer { height: 35px; padding: 17px 0; position: absolute; width: 100%; bottom: 0; text-align: center; -webkit-transition: -webkit-transform .375s ease; }
#post footer.categoryChanging { -webkit-transform: translate3d(0, 500px, 0); }
#post footer .pagination { display: inline-block; list-style: none; overflow: hidden; }
#post footer .pagination li { float: left; display: inline-block; text-indent: -3000px; -webkit-border-radius: 5px; width: 6px; height: 6px; margin: 8px; border: 1px solid #b7b7b7; text-align: center; }
#post footer .pagination li.hot { background: #b7b7b7; }
#post div.ad{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@if $publisher_color != null {
#post footer .pagination li.hot { background: $publisher_color; border: 1px solid $publisher_color; }
#post #articlesContainer article .text a { color: $publisher_color; }
}
@if $publisher_title_font != null {
#post #articlesContainer article.article .hed h2 { font-family: $publisher_title_font; }
}
#post #articlesContainer article.article .content h1,
#post #articlesContainer article.article .content h2,
#post #articlesContainer article.article .content h3 {
font-size: 20px;
line-height: 30px;
text-transform: uppercase;
font-weight: bold;
}
#post #articlesContainer article.article .content h4 {
text-transform: uppercase;
font-size: 16px;
line-height: 24px;
font-weight: bold;
}
#post #articlesContainer article.article .content h5 {
font-size: 16px;
line-height: 20px;
font-weight: bold;
}
#post #articlesContainer article.article .content h6 {
font-size: 14px;
line-height: 17px;
text-transform: uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment