USG-Website-Templates#2 - Initial changes to leverage scss. Updated d…

…efault template to refer to local resources (though I think we need a variable here for ghpages branches). Created placeholder includes.
shawnjohnson · Aug 15, 2014 · 9422583 · 9422583
1 parent 8d1d61c
commit 9422583
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 _site
 _components
 node_modules
+
+.project
diff --git a/_config.yml b/_config.yml
@@ -4,3 +4,5 @@ pygments: true
 safe: true
 baseurl: /
 exclude: ['.ruby-version', 'node_modules', 'package.json', 'bower.json']
+sass:
+  sass_dir: static/_sass
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,15 +6,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
   <title>API documentation - [Agency] Open Tech</title>
-  <link rel="stylesheet" href="http://usg-website-templates.github.io/developer-hub/static/css/normalize.css">
-  <link rel="stylesheet" href="http://usg-website-templates.github.io/developer-hub/static/css/style.css">
+  <link rel="stylesheet" href="static/css/normalize.css">
+  <link rel="stylesheet" href="static/css/style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!--[if lt IE 9]>
   <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
 
   <!--[if IE]>
-  <link rel="stylesheet" href="http://usg-website-templates.github.io/developer-hub/static/css/for-ie-only.css">
+  <link rel="stylesheet" href="static/css/for-ie-only.css">
   <![endif]-->
 </head>
 <body>
@@ -42,7 +42,7 @@
         {% include footer.html %}
       </div>
     </footer>
-  <script src="http://usg-website-templates.github.io/developer-hub/static/js/docs.min.js"></script>
-  <script type="text/javascript" src="http://usg-website-templates.github.io/developer-hub/static/js/expandables.js"></script>
+  <script src="static/js/docs.min.js"></script>
+  <script type="text/javascript" src="static/js/expandables.js"></script>
 </body>
 </html>
diff --git a/static/css/style.css → static/_sass/_base.scss b/static/css/style.css → static/_sass/_base.scss
@@ -360,15 +360,15 @@ nav a:visited {
 
 nav li:hover {
     color: #75787b;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     border-bottom: 1px solid #d0d0ce;
     padding-left: 0;
 }
 
 nav li:active {
     color: #75787b;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     border-bottom: 1px solid #d0d0ce;
     padding-left: 0;
@@ -391,47 +391,47 @@ nav li {
 #overview a.overview {
     color: #101820;
     border-bottom: none;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     margin-left: -4px;
 }
 
 #basics a.basics {
     color: #101820;
     border-bottom: none;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     margin-left: -4px;
 }
 
 #console a.console {
     color: #101820;
     border-bottom: none;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     margin-left: -4px;
 }
 
 #queries a.queries {
     color: #101820;
     border-bottom: none;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     margin-left: -4px;
 }
 
 #fields a.fields {
     color: #101820;
     border-bottom: none;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     margin-left: -4px;
 }
 
 #contribute a.contribute {
     color: #101820;
     border-bottom: none;
-    border-left: 4px solid #2CB34A;
+    border-left: 4px solid $nav-color;
     background-color: transparent;
     margin-left: -4px;
 }
@@ -497,7 +497,7 @@ ul.repo-list.no-padding {
 }
 
 .header {
-    border-bottom: 4px solid #2CB34A;
+    border-bottom: 4px solid $nav-color;
     width: 100%;
     background-color: #fff;
     /*position: fixed;*/
@@ -935,7 +935,7 @@ input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
-button:: -moz-focus-inner, input::-moz-focus-inner {
+button::-moz-focus-inner, input::-moz-focus-inner {
     border:0;
     padding:0;
 }
@@ -1110,7 +1110,7 @@ del {
     thead {display: table-header-group; } /* Repeat header row at top of each printed page */
     tr, img {page-break-inside: avoid; }
     img {max-width: 100% !important; }
-    @page {margin: 0.5cm}
+    page {margin: 0.5cm}
     p, h2, h3 {orphans: 3; widows: 3}
     h2, h3{page-break-after: avoid}
 }
@@ -1167,6 +1167,7 @@ del {
 
 .open .expandable-button:before {
   content: "\f056";
+}
 
 /* custom class as .hidden is already used in the guide */
 .expandable-hidden {

diff --git a/static/_sass/_custom.scss b/static/_sass/_custom.scss
diff --git a/static/_sass/_variables.scss b/static/_sass/_variables.scss
@@ -0,0 +1 @@
+$nav-color: #09c;
diff --git a/static/css/style.scss b/static/css/style.scss
@@ -0,0 +1,5 @@
+---
+---
+@import 'variables';
+@import 'base';
+@import 'custom';