Skip to content

Instantly share code, notes, and snippets.

@tonussi
Created August 21, 2012 16:17
Show Gist options
  • Save tonussi/3416960 to your computer and use it in GitHub Desktop.
Save tonussi/3416960 to your computer and use it in GitHub Desktop.
tonussi.sass
@media screen, projection, print {
html, body { font: 300 100.01% "Helvetica Neue", Helvetica, Arial, sans-serif; margin-left: auto; margin-right: auto; width: 100%; height: 100%; line-height:1.1138em; text-rendering: optimizeLegibility; }
a, a * { color: #555; text-decoration: none; }
h, h1, h2, h3, h4, h5 { color: #000; font-size: 1.1em; margin-left: 1em; padding-right: 1.250em; padding-bottom: 2.250em; padding-top: 2.250em; color: #429745; }
p, p1, p2, p3 { display: block; margin-before: 5em; margin-after: 5em; margin-start: 3em; margin-end: .8em; right: .5em; left: .5em; padding: 0.250em; padding-top: 2em; padding-bottom: 1.250em; font-size: .875em; }
strong.very { color: #f00 }
p4, p5, p6 { display: block; margin-before: 5em; margin-after: 5em; margin-start: 3em; margin-end: .8em; right: .5em; left: .5em; padding: 0.250em; padding-top: 2em; padding-bottom: 1.250em; font-size: .875em; }
header { padding-top: 1em; padding-bottom: 1em; height: auto; margin-top: auto; margin-bottom: 1em; bottom: 1em; border-bottom: .375em solid #555; text-align: right; color: #fff; font-weight: 700; font-size: 2em; background: #333; }
footer { padding-left: 1em; padding-right: 1em; position: relative; top: 30em; width:auto; height: auto; font-size: .5em; border-top: .375em solid #555; background: #333; }
nav { padding: 3em 3em 3em 3em; text-align:center; margin-left:auto; margin-right:auto; height: .3565em;}
nav ul.div { font-weight: bold; border-bottom: .275em solid #444; display: inline; position: relative; color: #000; }
nav ul li { border-bottom: .375em solid #444; display: inline; text-align: center; }
nav ul li a:hover, nav ul li a:focus { color: #222; }
nav ul li a { display: inline; padding: .815em; padding: 0.3em 0.3em 0.3em 0.3em;}
nav ul li a:hover span, nav ul li a:focus span { color: #222; padding: 0.3em 0.3em 0.3em 0.3em;}
.canvas { width: 100%; height: 100%; position: relative; }
.canvas .remix { color: #333; background: #fffaaa; }
.canvas:hover .remix { display: block; }
.canvas .remix, .canvas .explain { -webkit-border-top-right-radius: .4em; -webkit-border-bottom-right-radius: .4em; -moz-border-radius-topright: .4em; -moz-border-radius-bottomright: .4em; border-top-right-radius: .4em; border-bottom-right-radius: .4em; -webkit-border-top-left-radius: .4em; -webkit-border-bottom-left-radius: .4em; -moz-border-radius-topleft: .4em; -moz-border-radius-bottomleft: .4em; border-top-left-radius: .4em; border-bottom-left-radius: .4em;
display: none; position: relative; float: right; line-height: 1.1138em; left: -.4em; margin-top: -2.1138em; }
.cw_badge img { padding: 0em 0em 0em 0em; border: 0 none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; -o-box-shadow: none !important; box-shadow: none !important; }
[class*="blog-archives"] { padding: 1.250em 1.250em 1.250em 1.250em; margin-left: auto; margin-right:auto;}
.blog-archives ul li abbr { font-size: .795em; color:#300;}
.blog-posts { margin-right:1em; margin-left:1em; float: right; }
.clear { clear: both; height: 2em; line-height: 0; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.mb40 { margin-bottom: 2.1138em!important; }
.image-box:hover img { transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); }
#erro404 { filter: gray; -webkit-filter: grayscale(100%); margin: 7% auto 0; max-width: 24.375em; min-height: 11.250em; padding: 1.875em 0 .938em; text-align:center; background: url(//www.google.com/images/errors/robot.png) 100% .313em no-repeat; padding-right: 12.813em; }
#desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; -webkit-filter: grayscale(1); }
p7 { color: #80c9ff; display: block; }
.shrink { overflow: hidden; position: relative; }
[class*="col-"] { float: right; padding: 1em 5em 1em 1em; }
.col-2-3 { width: 66.66%; }
.col-1-3 { width: 33.33%; }
.col-1-2 { width: 50%; }
.col-1-4 { width: 25%; }
.col-1-5 { width: 20%; }
.col-1-8 { width: 12.5%; }
pre.code code { color: #657b83; font-size: 0.8em; font-weight: 500; }
pre.code { width: 19.500em; height: 19.500em; -webkit-border-top-right-radius: .5em; -webkit-border-bottom-right-radius: .5em; -moz-border-radius-topright: .5em; -moz-border-radius-bottomright: .5em; border-top-right-radius: .5em; border-bottom-right-radius: .5em; -webkit-border-top-left-radius: .5em; -webkit-border-bottom-left-radius: .5em; -moz-border-radius-topleft: .5em; -moz-border-radius-bottomleft: .5em; border-top-left-radius: .5em; border-bottom-left-radius: .5em; background: #fdf6e3; overflow-y: auto; overflow-x: auto; border-top: 0.8em solid #333; padding-top: -2em; padding-left: 0.5em; padding-bottom: 1em; padding-right: 1em; margin: 1em 1em 1em 1em; }
pre.ariranha code b { color: #e9df8f; font-weight: normal; }
pre.ariranha code i,pre.ariranha code i *,pre.ariranha code i .d { color: #8b9967; font-style: normal; }
pre.ariranha code .s { color: #e7be61; }
pre.ariranha code .d { color: #cf6a4c; }
pre.ariranha code .c,pre.ariranha code .c * { color: #666; }
}
@media screen, projection, print
html, body
font: 300 100.01% "Helvetica Neue", Helvetica, Arial, sans-serif
margin-left: auto
margin-right: auto
width: 100%
height: 100%
line-height: 1.1138em
text-rendering: optimizeLegibility
a
color: #555
text-decoration: none
*
color: #555
text-decoration: none
h, h1, h2, h3, h4, h5
color: #000
font-size: 1.1em
margin-left: 1em
padding-right: 1.250em
padding-bottom: 2.250em
padding-top: 2.250em
color: #429745
p, p1, p2, p3
display: block
margin-before: 5em
margin-after: 5em
margin-start: 3em
margin-end: .8em
right: .5em
left: .5em
padding: 0.250em
padding-top: 2em
padding-bottom: 1.250em
font-size: .875em
strong.very
color: #f00
p4, p5, p6
display: block
margin-before: 5em
margin-after: 5em
margin-start: 3em
margin-end: .8em
right: .5em
left: .5em
padding: 0.250em
padding-top: 2em
padding-bottom: 1.250em
font-size: .875em
header
padding-top: 1em
padding-bottom: 1em
height: auto
margin-top: auto
margin-bottom: 1em
bottom: 1em
border-bottom: .375em solid #555
text-align: right
color: #fff
font-weight: 700
font-size: 2em
background: #333
footer
padding-left: 1em
padding-right: 1em
position: relative
top: 30em
width: auto
height: auto
font-size: .5em
border-top: .375em solid #555
background: #333
nav
padding: 3em 3em 3em 3em
text-align: center
margin-left: auto
margin-right: auto
height: .3565em
ul
&.div
font-weight: bold
border-bottom: .275em solid #444
display: inline
position: relative
color: #000
li
border-bottom: .375em solid #444
display: inline
text-align: center
a
&:hover, &:focus
color: #222
display: inline
padding: .815em
padding: 0.3em 0.3em 0.3em 0.3em
&:hover span, &:focus span
color: #222
padding: 0.3em 0.3em 0.3em 0.3em
.canvas
width: 100%
height: 100%
position: relative
.remix
color: #333
background: #fffaaa
&:hover .remix
display: block
.remix, .explain
-webkit-border-top-right-radius: .4em
-webkit-border-bottom-right-radius: .4em
-moz-border-radius-topright: .4em
-moz-border-radius-bottomright: .4em
border-top-right-radius: .4em
border-bottom-right-radius: .4em
-webkit-border-top-left-radius: .4em
-webkit-border-bottom-left-radius: .4em
-moz-border-radius-topleft: .4em
-moz-border-radius-bottomleft: .4em
border-top-left-radius: .4em
border-bottom-left-radius: .4em
display: none
position: relative
float: right
line-height: 1.1138em
left: -0.4em
margin-top: -2.114em
.cw_badge img
padding: 0em 0em 0em 0em
border: 0 none !important
-moz-box-shadow: none !important
-webkit-box-shadow: none !important
-o-box-shadow: none !important
box-shadow: none !important
[class*="blog-archives"]
padding: 1.250em 1.250em 1.250em 1.250em
margin-left: auto
margin-right: auto
.blog-archives abbr
font-size: .795em
color: #300
.blog-posts
margin-right: 1em
margin-left: 1em
float: right
.clear
clear: both
height: 2em
line-height: 0
display: block
overflow: hidden
visibility: hidden
width: 0
height: 0
.mb40
margin-bottom: 2.1138em!important
.image-box:hover img
transform: rotate(15deg)
-moz-transform: rotate(15deg)
-webkit-transform: rotate(15deg)
#erro404
filter: gray
-webkit-filter: grayscale(100%)
margin: 7% auto 0
max-width: 24.375em
min-height: 11.250em
padding: 1.875em 0 .938em
text-align: center
background: url(//www.google.com/images/errors/robot.png) 100% 0.313em no-repeat
padding-right: 12.813em
#desaturate
filter: grayscale(100%)
-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
-ms-filter: grayscale(100%)
-o-filter: grayscale(100%)
filter: gray
-webkit-filter: grayscale(1)
p7
color: #80c9ff
display: block
.shrink
overflow: hidden
position: relative
[class*="col-"]
float: right
padding: 1em 5em 1em 1em
.col-2-3
width: 66.66%
.col-1-3
width: 33.33%
.col-1-2
width: 50%
.col-1-4
width: 25%
.col-1-5
width: 20%
.col-1-8
width: 12.5%
pre
&.code
code
color: #657b83
font-size: 0.8em
font-weight: 500
width: 19.500em
height: 19.500em
-webkit-border-top-right-radius: .5em
-webkit-border-bottom-right-radius: .5em
-moz-border-radius-topright: .5em
-moz-border-radius-bottomright: .5em
border-top-right-radius: .5em
border-bottom-right-radius: .5em
-webkit-border-top-left-radius: .5em
-webkit-border-bottom-left-radius: .5em
-moz-border-radius-topleft: .5em
-moz-border-radius-bottomleft: .5em
border-top-left-radius: .5em
border-bottom-left-radius: .5em
background: #fdf6e3
overflow-y: auto
overflow-x: auto
border-top: 0.8em solid #333
padding-top: -2em
padding-left: 0.5em
padding-bottom: 1em
padding-right: 1em
margin: 1em 1em 1em 1em
&.ariranha code
b
color: #e9df8f
font-weight: normal
i
color: #8b9967
font-style: normal
*, .d
color: #8b9967
font-style: normal
.s
color: #e7be61
.d
color: #cf6a4c
.c
color: #666
*
color: #666
@media screen, projection, print {
html, body {
font: 300 100.01% "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
line-height: 1.1138em;
text-rendering: optimizeLegibility; }
a {
color: #555;
text-decoration: none;
* {
color: #555;
text-decoration: none; } }
h, h1, h2, h3, h4, h5 {
color: #000;
font-size: 1.1em;
margin-left: 1em;
padding-right: 1.250em;
padding-bottom: 2.250em;
padding-top: 2.250em;
color: #429745; }
p, p1, p2, p3 {
display: block;
margin-before: 5em;
margin-after: 5em;
margin-start: 3em;
margin-end: .8em;
right: .5em;
left: .5em;
padding: 0.250em;
padding-top: 2em;
padding-bottom: 1.250em;
font-size: .875em; }
strong.very {
color: #f00; }
p4, p5, p6 {
display: block;
margin-before: 5em;
margin-after: 5em;
margin-start: 3em;
margin-end: .8em;
right: .5em;
left: .5em;
padding: 0.250em;
padding-top: 2em;
padding-bottom: 1.250em;
font-size: .875em; }
header {
padding-top: 1em;
padding-bottom: 1em;
height: auto;
margin-top: auto;
margin-bottom: 1em;
bottom: 1em;
border-bottom: .375em solid #555;
text-align: right;
color: #fff;
font-weight: 700;
font-size: 2em;
background: #333; }
footer {
padding-left: 1em;
padding-right: 1em;
position: relative;
top: 30em;
width: auto;
height: auto;
font-size: .5em;
border-top: .375em solid #555;
background: #333; }
nav {
padding: 3em 3em 3em 3em;
text-align: center;
margin-left: auto;
margin-right: auto;
height: .3565em;
ul {
&.div {
font-weight: bold;
border-bottom: .275em solid #444;
display: inline;
position: relative;
color: #000; }
li {
border-bottom: .375em solid #444;
display: inline;
text-align: center;
a {
&:hover, &:focus {
color: #222; }
display: inline;
padding: .815em;
padding: 0.3em 0.3em 0.3em 0.3em;
&:hover span, &:focus span {
color: #222;
padding: 0.3em 0.3em 0.3em 0.3em; } } } } }
.canvas {
width: 100%;
height: 100%;
position: relative;
.remix {
color: #333;
background: #fffaaa; }
&:hover .remix {
display: block; }
.remix, .explain {
-webkit-border-top-right-radius: .4em;
-webkit-border-bottom-right-radius: .4em;
-moz-border-radius-topright: .4em;
-moz-border-radius-bottomright: .4em;
border-top-right-radius: .4em;
border-bottom-right-radius: .4em;
-webkit-border-top-left-radius: .4em;
-webkit-border-bottom-left-radius: .4em;
-moz-border-radius-topleft: .4em;
-moz-border-radius-bottomleft: .4em;
border-top-left-radius: .4em;
border-bottom-left-radius: .4em;
display: none;
position: relative;
float: right;
line-height: 1.1138em;
left: -0.4em;
margin-top: -2.114em; } }
.cw_badge img {
padding: 0em 0em 0em 0em;
border: 0 none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: none !important;
box-shadow: none !important; }
[class*="blog-archives"] {
padding: 1.250em 1.250em 1.250em 1.250em;
margin-left: auto;
margin-right: auto; }
.blog-archives abbr {
font-size: .795em;
color: #300; }
.blog-posts {
margin-right: 1em;
margin-left: 1em;
float: right; }
.clear {
clear: both;
height: 2em;
line-height: 0;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.mb40 {
margin-bottom: 2.1138em!important; }
.image-box:hover img {
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg); }
#erro404 {
filter: gray;
-webkit-filter: grayscale(100%);
margin: 7% auto 0;
max-width: 24.375em;
min-height: 11.250em;
padding: 1.875em 0 .938em;
text-align: center;
background: url(//www.google.com/images/errors/robot.png) 100% 0.313em no-repeat;
padding-right: 12.813em; }
#desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1); }
p7 {
color: #80c9ff;
display: block; }
.shrink {
overflow: hidden;
position: relative; }
[class*="col-"] {
float: right;
padding: 1em 5em 1em 1em; }
.col-2-3 {
width: 66.66%; }
.col-1-3 {
width: 33.33%; }
.col-1-2 {
width: 50%; }
.col-1-4 {
width: 25%; }
.col-1-5 {
width: 20%; }
.col-1-8 {
width: 12.5%; }
pre {
&.code {
code {
color: #657b83;
font-size: 0.8em;
font-weight: 500; }
width: 19.500em;
height: 19.500em;
-webkit-border-top-right-radius: .5em;
-webkit-border-bottom-right-radius: .5em;
-moz-border-radius-topright: .5em;
-moz-border-radius-bottomright: .5em;
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
-webkit-border-top-left-radius: .5em;
-webkit-border-bottom-left-radius: .5em;
-moz-border-radius-topleft: .5em;
-moz-border-radius-bottomleft: .5em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
background: #fdf6e3;
overflow-y: auto;
overflow-x: auto;
border-top: 0.8em solid #333;
padding-top: -2em;
padding-left: 0.5em;
padding-bottom: 1em;
padding-right: 1em;
margin: 1em 1em 1em 1em; }
&.ariranha code {
b {
color: #e9df8f;
font-weight: normal; }
i {
color: #8b9967;
font-style: normal;
*, .d {
color: #8b9967;
font-style: normal; } }
.s {
color: #e7be61; }
.d {
color: #cf6a4c; }
.c {
color: #666;
* {
color: #666; } } } } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment