Skip to content

Instantly share code, notes, and snippets.

@davilious

davilious/SassMeister-input.scss

Created April 24, 2015 06:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davilious/2c17729d080675a88b2b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davilious/2c17729d080675a88b2b to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----
$units: 1;
/* Colors */
$black: #222;
$blue: #0078e7;
$grey: #ccc;
$grey-dark: darken($grey, 20%);
$grey-darker: darken($grey, 50%);
$grey-darkest: darken($grey, 70%);
$grey-lighter: lighten($grey, 20%);
$grey-light: #ddd;
$grey-lightest: #F8F8F8;
$white: #fff;
$orange: #e27b28;
$orange-link: #E26822;
$orange-dark: #BE651E;
$blue-darkest: #262D35;
$blue-darker: #2F353E;
$blue-light: #818D9A;
$blue-lightest: #9BA4AF;
$blue-super-light: #F5F5F6;
$blue-dark: #6E7A86;
$blue-slightly-dark: #3D444D;
/* Buttons */
$button-font-size: 1em;
$button-round: 2px;
$button-padding: 10px;
$button-background: $orange;
$button-color: $white;
$button-background-disabled: $grey;
$button-color-disabled: $white;
/* Fonts */
$base-font-family: "Fedra Sans Book 8", Helvetica !default;
$fedra-font-family: "Fedra Sans Book 8", Helvetica;
$fedra-light-font-family: "Fedra Sans Light 8", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica;
$fedra-demi-font-family: "Fedra Sans Demi 8", Helvetica;
$base-font-size: 16px !default; // Override default set in Compass' Vertical Rhythm partial.
$base-line-height: 24px !default; // Override default set in Compass' Vertical Rhythm partial.
/* Headings */
$h1-font-size: 2 * $base-font-size !default;
$h2-font-size: 1.5 * $base-font-size !default;
$h3-font-size: 1.2 * $base-font-size !default;
$h4-font-size: 1 * $base-font-size !default;
$h5-font-size: $base-font-size - 3 !default;
$h6-font-size: 0.67 * $base-font-size !default;
/* Links */
$link-border-bottom: 2px;
$link-padding-bottom: 2px;
$link-time-transition: 0.3s;
@import "compass";
/* Example @include screen(768, 1280) { background: black; } */
@mixin screen($res-first, $res-last: $res-first) {
@if $res-first == $res-last {
@media screen and ( max-width: if(unitless($res-first), $res-first*$units, $res-first) ) {
@content;
}
} @else if $res-first < $res-last {
@media screen and ( min-width: if(unitless($res-first), $res-first*$units, $res-first) ) and ( max-width: if(unitless($res-last), $res-last*$units, $res-last) ) {
@content;
}
}
}
/* Example: @include min-screen(320) { width: 300px; } */
@mixin min-screen($res) {
@media screen and ( min-width: if(unitless($res), $res*$units, $res) ) {
@content;
}
}
.box {
@include screen(300, 960) {
width: 100%;
}
}
header {
@include screen(520, 960) {
.box {
padding: 0 10px;
}
}
@include screen(300, 768) {
height: auto;
.column.percent {
display: block;
width: 100% !important;
}
.logo {
display: block;
height: auto;
text-align: center;
h1 {
display: inline-block;
}
}
nav {
height: 50px;
}
nav ul {
text-align: center;
}
}
@include screen(300, 520) {
.box {
padding: 0;
}
.logo {
margin-left: 20px;
padding-bottom: 15px;
text-align: left;
}
nav {
height: auto;
}
.menu.inline {
@include transition(all 0.35s ease-out);
max-height: 0;
overflow: hidden;
> li {
background-color: $blue-slightly-dark;
border-bottom: 1px solid $blue-darker;
display: block;
margin: 0;
padding-left: 10px;
> .link-menu {
display: block;
font-size: $base-font-size;
padding: 15px 0;
text-align: left;
.active &,
&:hover {
color: $white;
}
}
}
.active > .link-menu {
color: $white;
}
&.open {
max-height: 400px;
}
}
}
}
.hamburguer {
@include screen(300, 520) {
display: block;
}
}
footer {
@include screen(300, 959) {
padding-left: 10px;
padding-right: 10px;
}
@include screen(520, 640) {
&:before {
background-image: none;
}
h5 {
margin-bottom: 10px;
}
.menu {
display: inline-block;
li {
&, > a {
margin-right: 2px;
margin-bottom: rhythm(0.2);
display:inline-block;
*display:inline;
zoom:1;
}
}
}
.column {
display: block;
float: none;
margin-bottom: rhythm(1);
&.last {
float: none;
margin-bottom: 0;
}
}
}
@include screen(300, 520) {
padding-left: 20px;
padding-right: 20px;
&:before {
background-image: none;
}
.column {
display: block;
float: none;
margin-bottom: 30px;
&.last {
float: none;
margin-bottom: 0;
}
}
.menu {
li {
display: block;
margin-bottom: 10px;
}
}
.icon-tdf {
display: none;
}
}
}
.blog-wrapper {
@include screen(521, 960) {
padding: 0 10px;
}
@include screen(300, 520) {
padding: 0 20px;
}
}
.blog-sidebar {
@include screen(300, 640) {
display: none;
}
}
.blog-content {
@include screen(300, 640) {
border-right: none;
padding-right: 0;
iframe {
max-width: 100%;
}
}
}
Raw
SassMeister-output.css
/* Colors */
/* Buttons */
/* Fonts */
/* Headings */
/* Links */
/* Example @include screen(768, 1280) { background: black; } */
/* Example: @include min-screen(320) { width: 300px; } */
@media screen and (min-width: 300) and (max-width: 960) {
.box {
width: 100%;
}
}
@media screen and (min-width: 520) and (max-width: 960) {
header .box {
padding: 0 10px;
}
}
@media screen and (min-width: 300) and (max-width: 768) {
header {
height: auto;
}
header .column.percent {
display: block;
width: 100% !important;
}
header .logo {
display: block;
height: auto;
text-align: center;
}
header .logo h1 {
display: inline-block;
}
header nav {
height: 50px;
}
header nav ul {
text-align: center;
}
}
@media screen and (min-width: 300) and (max-width: 520) {
header .box {
padding: 0;
}
header .logo {
margin-left: 20px;
padding-bottom: 15px;
text-align: left;
}
header nav {
height: auto;
}
header .menu.inline {
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
max-height: 0;
overflow: hidden;
}
header .menu.inline > li {
background-color: #3d444d;
border-bottom: 1px solid #2f353e;
display: block;
margin: 0;
padding-left: 10px;
}
header .menu.inline > li > .link-menu {
display: block;
font-size: 16px;
padding: 15px 0;
text-align: left;
}
.active header .menu.inline > li > .link-menu, header .menu.inline > li > .link-menu:hover {
color: white;
}
header .menu.inline .active > .link-menu {
color: white;
}
header .menu.inline.open {
max-height: 400px;
}
}
@media screen and (min-width: 300) and (max-width: 520) {
.hamburguer {
display: block;
}
}
@media screen and (min-width: 300) and (max-width: 959) {
footer {
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (min-width: 520) and (max-width: 640) {
footer:before {
background-image: none;
}
footer h5 {
margin-bottom: 10px;
}
footer .menu {
display: inline-block;
}
footer .menu li, footer .menu li > a {
margin-right: 2px;
margin-bottom: 0.3em;
display: inline-block;
*display: inline;
zoom: 1;
}
footer .column {
display: block;
float: none;
margin-bottom: 1.5em;
}
footer .column.last {
float: none;
margin-bottom: 0;
}
}
@media screen and (min-width: 300) and (max-width: 520) {
footer {
padding-left: 20px;
padding-right: 20px;
}
footer:before {
background-image: none;
}
footer .column {
display: block;
float: none;
margin-bottom: 30px;
}
footer .column.last {
float: none;
margin-bottom: 0;
}
footer .menu li {
display: block;
margin-bottom: 10px;
}
footer .icon-tdf {
display: none;
}
}
@media screen and (min-width: 521) and (max-width: 960) {
.blog-wrapper {
padding: 0 10px;
}
}
@media screen and (min-width: 300) and (max-width: 520) {
.blog-wrapper {
padding: 0 20px;
}
}
@media screen and (min-width: 300) and (max-width: 640) {
.blog-sidebar {
display: none;
}
}
@media screen and (min-width: 300) and (max-width: 640) {
.blog-content {
border-right: none;
padding-right: 0;
}
.blog-content iframe {
max-width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment