a bunch of work I did earlier, finally commited

css/basic-layout.css

@@ -1,23 +1,15 @@
-/* line 1, ../sass/basic-layout.scss */
 htm, body {
   margin: 0;
-  padding: 0;
-}
+  padding: 0; }
 
-/* line 5, ../sass/basic-layout.scss */
 main {
   width: 80%;
-  margin: 2em auto;
-}
+  margin: 2em auto; }
 
-/* line 9, ../sass/basic-layout.scss */
 section {
-  margin: 100px 0;
-}
+  margin: 100px 0; }
 
-/* line 12, ../sass/basic-layout.scss */
 footer {
   text-align: center;
   margin: 3em 0 3em 0;
-  clear: both;
-}
+  clear: both; }

css/home.css

@@ -0,0 +1,71 @@
+body {
+  margin: 0 0 100px;
+  padding: 0;
+  background: #eee; }
+
+header {
+  background: #63BDD2;
+  display: flex;
+  height: 100vh;
+  min-height: 250px;
+  color: white;
+  font-style: italic; }
+
+h1 {
+  font-size: 8vw;
+  margin: auto;
+  color: white; }
+
+ul {
+  margin-left: 2em;
+  padding: 0; }
+
+ul.demo-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8vw 0 0 0;
+  align-items: center;
+  justify-content: space-around; }
+
+li.demo {
+  width: 20vw;
+  height: 20vw;
+  background: #fff;
+  border-radius: 50%;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: wrap; }
+
+li.demo:first-child {
+  width: 12vw;
+  height: 12vw; }
+
+li.demo:nth-child(2) {
+  width: 24vw;
+  height: 24vw; }
+
+li.demo:nth-child(3) {
+  width: 21vw;
+  height: 21vw; }
+
+li.demo:nth-child(4) {
+  width: 18vw;
+  height: 18vw; }
+
+li.demo:last-child {
+  width: 20vw;
+  height: 20vw; }
+
+h2 {
+  width: 10vw;
+  font-size: 1.8vw;
+  color: black; }
+
+a {
+  color: black; }
+
+p {
+  text-align: center; }

css/shapes.css

@@ -1,45 +1,31 @@
-/* line 2, ../sass/shapes.scss */
 img {
   float: left;
   margin-right: 30px;
   margin-bottom: 30px;
-  width: 50%;
-}
+  width: 50%; }
 
-/* line 9, ../sass/shapes.scss */
 p {
-  margin: 0;
-}
+  margin: 0; }
 
-/* line 13, ../sass/shapes.scss */
 section {
-  clear: both;
-}
+  clear: both; }
 
-/* line 17, ../sass/shapes.scss */
 .second-example img {
   -webkit-shape-outside: circle();
-  shape-outside: circle();
-}
+  shape-outside: circle(); }
 
-/* line 22, ../sass/shapes.scss */
 .third-example img {
   -webkit-shape-outside: elipse(50% 50%);
-  shape-outside: ellipse(50% 50%);
-}
+  shape-outside: ellipse(50% 50%); }
 
-/* line 27, ../sass/shapes.scss */
 .fourth-example img {
   border-radius: 100px;
   -webkit-shape-outside: border-box;
   -webkit-shape-margin: 30px;
   shape-outside: border-box;
-  shape-margin: 30px;
-}
+  shape-margin: 30px; }
 
-/* line 36, ../sass/shapes.scss */
 .fifth-example img {
   width: 60%;
   -webkit-shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-}
+  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

css/styles.css

@@ -0,0 +1,5 @@
+.one {
+  background: red; }
+
+main {
+  font-size: 200%; }

css/typography.css

@@ -1,89 +1,67 @@
-/* line 23, ../sass/typography.scss */
 body {
   font-family: "pt-sans", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.35em;
   font-size: 16px;
   color: #444;
-  background: white;
-}
+  background: white; }
 
-/* line 39, ../sass/typography.scss */
 h1 {
   font-family: "magistral-web", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.15em;
   font-weight: bold;
   margin: 0.5em 0;
   color: #555;
-  font-size: 48px;
-}
+  font-size: 48px; }
 
-/* line 43, ../sass/typography.scss */
 h2 {
   font-family: "magistral-web", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.15em;
   font-weight: bold;
   margin: 0.5em 0;
   color: #555;
-  font-size: 36px;
-}
+  font-size: 36px; }
 
-/* line 47, ../sass/typography.scss */
 h3 {
   font-family: "magistral-web", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.15em;
   font-weight: bold;
   margin: 0.5em 0;
   color: #555;
-  font-size: 32px;
-}
+  font-size: 32px; }
 
-/* line 51, ../sass/typography.scss */
 h4 {
   font-family: "magistral-web", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.15em;
   font-weight: bold;
   margin: 0.5em 0;
   color: #555;
-  font-size: 24px;
-}
+  font-size: 24px; }
 
-/* line 55, ../sass/typography.scss */
 h5 {
   font-family: "magistral-web", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.15em;
   font-weight: bold;
   margin: 0.5em 0;
   color: #555;
-  font-size: 18px;
-}
+  font-size: 18px; }
 
-/* line 59, ../sass/typography.scss */
 h6 {
   font-family: "magistral-web", Verdana, Tahoma, "DejaVu Sans", sans-serif;
   line-height: 1.15em;
   font-weight: bold;
   margin: 0.5em 0;
   color: #555;
-  font-size: 16px;
-}
+  font-size: 16px; }
 
-/* line 63, ../sass/typography.scss */
 p {
-  margin: 1em 0;
-}
+  margin: 1em 0; }
 
-/* line 66, ../sass/typography.scss */
 a {
-  color: #1078C2;
-}
+  color: #1078C2; }
 
-/* line 76, ../sass/typography.scss */
 .alt main {
   font-family: "minion-pro", Georgia, "Times New Roman", "DejaVu Serif", serif;
-  color: #000;
-}
-/* line 80, ../sass/typography.scss */
+  color: #000; }
 .alt h1, .alt h2, .alt h3, .alt h4, .alt h5, .alt h6 {
   font-family: "minion-pro", Georgia, "Times New Roman", "DejaVu Serif", serif;
-  color: #000;
-}
+  color: #000; }

css/viewportunits.css

@@ -1,34 +1,22 @@
-/* line 1, ../sass/viewportunits.scss */
 * {
-  box-sizing: border-box;
-}
+  box-sizing: border-box; }
 
-/* line 5, ../sass/viewportunits.scss */
 htm, body {
   margin: 0;
-  padding: 0;
-}
+  padding: 0; }
 
-/* line 10, ../sass/viewportunits.scss */
 img {
   float: left;
   margin-right: 2em;
   width: 50vw;
-  height: 100vh;
-}
+  height: 100vh; }
 
-/* line 17, ../sass/viewportunits.scss */
 div {
-  padding: 2em;
-}
+  padding: 2em; }
 
-/* line 21, ../sass/viewportunits.scss */
 h1 {
   margin-top: 0;
-  font-size: 6vw;
-}
+  font-size: 6vw; }
 
-/* line 26, ../sass/viewportunits.scss */
 footer {
-  text-align: center;
-}
+  text-align: center; }