Initial commit (80492af0) · Commits · examples / Learning Sass Syntactically Awesome StyleSheets

Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 1/No Work Files.rtf

0 → 100755

+7 −0

Changes for Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 1/No Work Files.rtf: 7 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350
		{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
		{\colortbl;\red255\green255\blue255;}
		\margl1440\margr1440\vieww9000\viewh8400\viewkind0
		\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

		\f0\fs24 \cf0 No work files for this lesson...}
		No newline at end of file

Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 2/No Work Files.rtf

0 → 100755

+7 −0

Changes for Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 2/No Work Files.rtf: 7 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350
		{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
		{\colortbl;\red255\green255\blue255;}
		\margl1440\margr1440\vieww9000\viewh8400\viewkind0
		\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

		\f0\fs24 \cf0 No work files for this lesson...}
		No newline at end of file

Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 3/css/.sass-cache/c5bd98bdee955ef4ef627ea772a8381c1c98823c/style.scssc

0 → 100755

+39.8 KiB

File added.

No diff preview for this file type.

View file

Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 3/css/style.css

0 → 100755

+103 −0

Changes for Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 3/css/style.css: 103 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		/* sidebar width has to account for right/left padding of sidebar and of main content section */
		/! this comment will show even in compressed style /
		body {
		background-image: url(../img/shattered.png);
		background-repeat: repeat; }

		a {
		color: #cc0000;
		text-decoration: none; }

		#wrapper {
		width: 90%;
		margin: 2em auto; }

		header[role="banner"] {
		padding: 1% 2.5%;
		background-color: rgba(255, 255, 255, 0.4); }
		header[role="banner"] a {
		color: red;
		text-decoration: none; }
		header[role="banner"] a:hover {
		color: black; }
		header[role="banner"] h2 {
		font-size: 20px;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 200; }
		header[role="banner"] h3 {
		font-size: 16px;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 200; }

		section[role="main"] {
		padding: 0.5% 2.5%;
		margin: 1em 0;
		width: 68%;
		float: left;
		background-color: rgba(255, 255, 255, 0.4); }
		section[role="main"] article {
		color: #333333;
		font-size: 14px;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 200; }
		section[role="main"] article h1 {
		color: #990000;
		font-size: 36px;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 200;
		font-border-bottom: 1px solid #ccc; }
		section[role="main"] article p {
		font: 14px/20px Helvetica; }
		section[role="main"] article p.highlighted {
		font-style: italic; }
		section[role="main"] article p.highlighted-special {
		font-weight: bold; }

		aside.sidebar {
		margin: 1em 0;
		padding: 0.5% 2.5%;
		width: 21%;
		float: right; }
		aside.sidebar ul {
		padding: 0;
		margin: 0;
		list-style: none; }
		aside.sidebar ul li {
		margin: 0;
		padding: 0;
		text-align: right;
		margin-bottom: 0.7em; }
		aside.sidebar ul li a {
		display: block;
		padding: 0.5em;
		background-color: #ccc;
		background-image: url(../img/icons/28-star.png);
		background-position: 5% center;
		background-repeat: no-repeat;
		font-size: 16px;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 200; }
		aside.sidebar ul li a:hover {
		color: #fff;
		background-color: #999;
		background-image: url(../img/icons/63-runner.png); }

		footer[role="contentinfo"] {
		clear: both;
		padding: 0.5% 2.5%;
		background-color: rgba(255, 255, 255, 0.4); }
		footer[role="contentinfo"] p {
		color: #999999;
		font-size: 14px;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 200; }
		footer[role="contentinfo"] p#sitetitle {
		float: left;
		width: 74.21053%; }
		footer[role="contentinfo"] p#siteinfo {
		float: left;
		width: 21%; }
		footer[role="contentinfo"] p#copyright {
		clear: both;
		padding-top: 1em;
		border-top: 1px solid #666; }

Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 3/css/style.scss

0 → 100755

+218 −0

Changes for Learning Sass - Syntactically Awesome StyleSheets - Working Files/Chapter 3/css/style.scss: 218 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		$bright-red: #f00;
		$medium-red: #c00;
		$dark-black: #000;
		$dark-grey: #333;
		$light-grey: #999;
		$half-opaque-white: rgba(255,255,255,0.4);

		$default-link-color: $medium-red;
		$header-title-color: $bright-red;
		$header-rollover-color: $dark-black;
		$page-title-color: darken($medium-red, 10%);
		$body-font-color: $dark-grey;
		$footer-font-color: $light-grey;

		$text-weight: 200;

		$site-title-size: 20px;
		$tagline-size: 16px;
		$page-title-size: 36px;
		$body-font-size: 14px;
		$body-line-height: 20px;
		$sidebar-font-size: 16px;

		$rightleft-padding: 2.5%;
		$tall-topbottom-padding: 1%;
		$narrow-topbottom-padding: 0.5%;

		$site-width: 90%;
		$main-content-width: 68%;

		/* sidebar width has to account for right/left padding of sidebar and of main content section */
		$sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding);

		// this single line comment won't show in output

		/! this comment will show even in compressed style /

		$top-element-margin: 1em;

		body {
		background: {
		image: url(../img/shattered.png);
		repeat: repeat;
		}
		}

		a {
		color: $default-link-color;
		text-decoration: none;
		}

		#wrapper {
		width: $site-width;
		margin: 2em auto;
		}

		header[role="banner"] {
		padding: $tall-topbottom-padding $rightleft-padding;

		background: {
		color: $half-opaque-white;
		}

		a {
		color: $header-title-color;

		text-decoration: none;

		&:hover {
		color: $header-rollover-color;
		}
		}

		h2 {
		font: {
		size: $site-title-size;
		family: Helvetica, Arial, sans-serif;
		weight: $text-weight;
		}
		}

		h3 {
		font: {
		size: $tagline-size;
		family: Helvetica, Arial, sans-serif;
		weight: $text-weight;
		}
		}
		}

		section[role="main"] {
		padding: $narrow-topbottom-padding $rightleft-padding;

		margin:1em 0;

		width: $main-content-width;

		float:left;

		background: {
		color: $half-opaque-white;
		}

		article {
		color: $body-font-color;

		font: {
		size: $body-font-size;
		family: Helvetica, Arial, sans-serif;
		weight: $text-weight;
		}

		h1 {
		color: $page-title-color;
		font: {
		size: $page-title-size;
		family: Helvetica, Arial, sans-serif;
		weight: $text-weight;
		border-bottom:1px solid #ccc;
		}
		}

		p {
		font: #{$body-font-size}/#{$body-line-height} Helvetica;
		}

		p.highlighted {
		font-style: italic;

		&-special {
		font-weight:bold;
		}
		}
		}
		}

		aside.sidebar {
		margin:1em 0;

		padding: $narrow-topbottom-padding $rightleft-padding;

		width: $sidebar-width;

		float: right;

		ul {
		padding: 0;
		margin: 0;
		list-style: none;

		li {
		margin: 0;
		padding: 0;
		text-align: right;
		margin-bottom: 0.7em;

		a {
		display: block;
		padding: 0.5em;
		background: {
		color: #ccc;
		image: url(../img/icons/28-star.png);
		position: 5% center;
		repeat: no-repeat;
		}

		font: {
		size: $sidebar-font-size;
		family: Helvetica, Arial, sans-serif;
		weight: $text-weight;
		}

		&:hover {
		color: #fff;
		background: {
		color: #999;
		image: url(../img/icons/63-runner.png);
		}
		}
		}
		}
		}
		}

		footer[role="contentinfo"] {
		clear: both;

		padding: $narrow-topbottom-padding $rightleft-padding;

		background: {
		color: $half-opaque-white;
		}

		p {
		color:$footer-font-color;
		font: {
		size: $body-font-size;
		family: Helvetica, Arial, sans-serif;
		weight: $text-weight;
		}

		&#sitetitle {
		float: left;
		width: percentage(($main-content-width + $rightleft-padding) / (100% - (2 * $rightleft-padding)));
		}

		&#siteinfo {
		float: left;
		width: $sidebar-width;
		}

		&#copyright {
		clear: both;
		padding-top: 1em;
		border-top: 1px solid #666;
		}
		}
		}
		No newline at end of file