Guest User

_responsive.scss & _defaults.scss

a guest
May 19th, 2014
204
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. _responsive.scss
  2.  
  3.  
  4. @include media-query('desk'){
  5.   .sidebar {
  6.     padding-top: 0.8em;
  7.   }
  8.   #main-logo .brand {
  9.     background-position: bottom left;
  10.   }    
  11. }
  12.  
  13. @include media-query('portable') {
  14.   nav .nav {
  15.     text-align: center;
  16.   }
  17.   #main-logo .brand{
  18.     background-position: top center;
  19.   }
  20.  
  21.   #header_area {
  22.     margin-bottom: 2em;
  23.   }
  24. }
  25.  
  26. @include media-query('palm') {
  27.   .page {
  28.     padding-left: 1em;
  29.     padding-right: 1em;
  30.   }
  31.   .sidebar aside {
  32.     text-align: center;
  33.   }
  34.   .entry-title {
  35.     font-size: 1.8rem;
  36.   }
  37.  
  38.   #main_navigation {
  39.     margin-top: 15px;
  40.     li {
  41.       display: block;
  42.       width: 100%;
  43.       margin-bottom: 10px;
  44.       a {
  45.         width: 100%;
  46.       }
  47.     }
  48.   }
  49. }
  50.  
  51.  
  52. _defaults.scss
  53.  
  54. /*------------------------------------*\
  55.     $DEFAULTS
  56.  * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
  57.  * in the inuit.css-web-template) to override them.
  58.  */
  59.  
  60.  
  61. /*------------------------------------*\
  62.     $DEBUG
  63.  * Debug mode will visually highlight any potential markup/accessibility quirks
  64.  * in the browser. Set to `true` or `false`.
  65.  */
  66. $debug-mode:        false!default;
  67.  
  68.  
  69. /*------------------------------------*\
  70.     $BORDER-BOX
  71.  * Do you want all elements to adopt `box-sizing:border-box;` as per
  72.  * paulirish.com/2012/box-sizing-border-box-ftw ?
  73.  */
  74. $global-border-box: true!default;
  75.  
  76.  
  77. /*------------------------------------*\
  78.     $BASE
  79.  * Base stuff
  80.  */
  81. $base-font-size:    16px!default;
  82. $base-line-height:  $base-font-size * 1.6;
  83.  
  84. /**
  85.  * Base font-family.
  86.  */
  87. $base-font-family:  'Lato', 'Lucida Grande', 'Lucida Sans', sans-serif;
  88.  
  89. /**
  90.  * Default colour for objects’ borders etc.
  91.  */
  92. $base-ui-color:     #ccc!default;
  93.  
  94.  
  95. /*------------------------------------*\
  96.     $RESPONSIVE
  97.  * Responsiveness?
  98.  */
  99. $responsive:        true!default;
  100.  
  101. /**
  102.  * Responsiveness for widescreen/high resolution desktop monitors and beyond?
  103.  * Note: `$responsive` variable above must be set to true before enabling this.
  104.  */
  105. $responsive-extra:  true;
  106.  
  107. /**
  108.  * Responsive push and pull produce a LOT of code, only turn them on if you
  109.  * definitely need them.
  110.  */
  111. $push:              false!default;
  112. /**
  113.  * Note: `$push` variable above must be set to true before enabling these.
  114.  */
  115. $palm-push:         false!default;
  116. $lap-push:          false!default;
  117. $lap-and-up-push:   false!default;
  118. $portable-push:     false!default;
  119. $desk-push:         false!default;
  120.  
  121. $pull:              false!default;
  122. /**
  123.  * Note: `$pull` variable above must be set to true before enabling these.
  124.  */
  125. $palm-pull:         false!default;
  126. $lap-pull:          false!default;
  127. $lap-and-up-pull:   false!default;
  128. $portable-pull:     false!default;
  129. $desk-pull:         false!default;
  130.  
  131. /**
  132.  * Tell inuit.css when breakpoints start.
  133.  */
  134. $lap-start:         481px!default;
  135. $desk-start:        1024px!default;
  136. $desk-wide-start:   1200px!default;
  137.  
  138.  
  139. /*------------------------------------*\
  140.     $FONT-SIZES
  141. \*------------------------------------*/
  142. /**
  143.  * Font-sizes (in pixels). Refer to relevant sections for their implementations.
  144.  */
  145. $giga-size:         96px!default;
  146. $mega-size:         72px!default;
  147. $kilo-size:         48px!default;
  148.  
  149. $h1-size:           36px!default; // .alpha
  150. $h2-size:           30px!default; // .beta
  151. $h3-size:           24px!default; // .gamma
  152. $h4-size:           20px!default; // .delta
  153. $h5-size:           16px!default; // .epsilon
  154. $h6-size:           14px!default; // .zeta
  155.  
  156. $milli-size:        12px!default;
  157. $micro-size:        10px!default;
  158.  
  159.  
  160. /*------------------------------------*\
  161.     $QUOTES
  162. \*------------------------------------*/
  163. /**
  164.  * English quote marks?
  165.  */
  166. $english-quotes:    true!default;
  167.  
  168. /**
  169.  * If you want English quotes then please do not edit these; they’re only here
  170.  * because Sass needs them.
  171.  */
  172. $open-quote:    null;
  173. $close-quote:   null;
  174.  
  175. /**
  176.  * If you need non-English quotes, please alter the following values accordingly:
  177.  */
  178. @if $english-quotes != true{
  179.     $open-quote:    \00AB;
  180.     $close-quote:   \00BB;
  181. }
  182.  
  183.  
  184. /*------------------------------------*\
  185.     $BRAND
  186. \*------------------------------------*/
  187. /**
  188.  * Brand stuff
  189.  */
  190. $brand-color:       #4a8ec2!default;
  191. $brand-face:        "Helvetica Neue", sans-serif!default;
  192.  
  193. /**
  194.  * How big would you like round corners to be by default?
  195.  */
  196. $brand-round:        3px;
  197.  
  198.  
  199. /*------------------------------------*\
  200.     $OBJECTS AND ABSTRACTIONS
  201. \*------------------------------------*/
  202. /**
  203.  * Which objects and abstractions would you like to use?
  204.  */
  205. $use-grids:         true;
  206. $use-flexbox:       false!default;
  207. $use-columns:       false!default;
  208. $use-nav:           true;
  209. $use-options:       false!default;
  210. $use-pagination:    false!default;
  211. $use-breadcrumb:    false!default;
  212. $use-media:         false!default;
  213. $use-marginalia:    false!default;
  214. $use-island:        false!default;
  215. $use-block-list:    true;
  216. $use-matrix:        false!default;
  217. $use-split:         false!default;
  218. $use-this-or-this:  false!default;
  219. $use-link-complex:  false!default;
  220. $use-flyout:        false!default;
  221. $use-arrows:        false!default;
  222. $use-sprite:        false!default;
  223. $use-icon-text:     false!default;
  224. $use-beautons:      false!default;
  225. $use-lozenges:      false!default;
  226. $use-rules:         false!default;
  227. $use-stats:         false!default;
  228. $use-greybox:       false!default;
  229.  
  230.  
  231. /*------------------------------------*\
  232.     $FRAMEWORK
  233. \*------------------------------------*/
  234. /**
  235.  * inuit.css will work these next ones out for use within the framework.
  236.  *
  237.  * Assign our `$base-line-height` to a new spacing var for more transparency.
  238.  */
  239. $base-spacing-unit: $base-line-height!default;
  240. $half-spacing-unit: $base-spacing-unit / 2!default;
  241. $line-height-ratio: $base-line-height / $base-font-size;
RAW Paste Data