CSS updates for signature list page (#7)

* All requested design tweaks to Manifesto site. • Better link styling • Custom styles on signatures full page • Removing and cleaning up inline CSS • Tweaks to signatures view • Add “watch:sass” script for watching SASS and compiling via node-sass * Update footer styles
sdd-manifesto · Nov 27, 2018 · 8906e1f · 8906e1f
1 parent f52cce8
commit 8906e1f
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 107 deletions.
diff --git a/app/public/css/main.css b/app/public/css/main.css
diff --git a/app/sass/base/_base.scss b/app/sass/base/_base.scss
@@ -1,3 +1,16 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-overflow-scrolling: touch;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
 body {
 	font-family: $base-font-family;
 	font-size: rem-calc(18px);

diff --git a/app/sass/base/_typography.scss b/app/sass/base/_typography.scss
@@ -31,6 +31,15 @@ h6 { font-size: rem-calc(14px); line-height: rem-calc(20px); }
   h6 { font-size: rem-calc(14px); line-height: rem-calc(20px); }
 }
 
+a {
+  color: $brand-primary;
+  text-decoration: none;
+
+  &:visited {
+    color: $brand-primary;
+  }
+}
+
 p {
   margin-top: 0;
 }

diff --git a/app/sass/globals/_footer.scss b/app/sass/globals/_footer.scss
@@ -2,7 +2,7 @@ footer.footer {
 	background-color: $brand-primary;
 	color: #9CA3C3;
 	font-size: rem-calc(14px);
-	padding: 40px 30px 60px 30px;
+	padding: 40px 30px 40px 30px;
 	text-align: center;
 
 	@media (#{$larger-than-tablet}) {
@@ -11,6 +11,7 @@ footer.footer {
 
 	a {
 		color: #9CA3C3;
+		text-decoration: none;
 	}
 
 	.footer-links {

diff --git a/app/sass/pages/_signatures.scss b/app/sass/pages/_signatures.scss
@@ -1,18 +1,64 @@
-.totop {
-}
-.totop a {
-  display: none;
+ul#signatures {
+	float: left;
+	display: block;
+	width: 100%;
+	list-style: none;
+	margin: 15px 0;
+	padding: 0;
+
+	li {
+		border-bottom: 1px solid $gray-200;
+		float: left;
+		display: block;
+		margin-bottom: 15px;
+		padding: 0 10px 10px 45px;
+		position: relative;
+		width: 100%;
+
+		.list-avatar {
+			border-radius: 2px;
+			height: 25px;
+			position: absolute;
+			top: 0px;
+			left: 10px;
+			width: 25px;
+
+			@media (#{$larger-than-tablet}) {
+
+			}
+		}
+
+		.signer-name {
+			display: inline-block;
+			float: left;
+			font-size: rem-calc(16px);
+			line-height: rem-calc(25px);
+			width: 100%;
+
+			@media (#{$larger-than-tablet}) {
+				width: auto;
+			}
+		}
+
+		.list-ago {
+			color: $gray-600;
+			display: block;
+			float: left;
+			font-size: rem-calc(11px);
+			line-height: 1;
+
+			@media (#{$larger-than-tablet}) {
+				display: inline-block;
+				float: right;
+				line-height: rem-calc(25px);
+			}
+		}
+	}
 }
 
-.list_avatar {
-  border-radius: 2px;
-  margin: 0 10px 10px 0;
-  height: 25px;
-  width: 25px;
-  vertical-align: middle;
+.totop {
 }
 
-.list_ago {
-  color: $gray-800;
-  font-size: 11px;
+.totop a {
+	display: none;
 }
diff --git a/app/views/layouts/main.handlebars b/app/views/layouts/main.handlebars
@@ -1,115 +1,113 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>The Software Defined Delivery Manifesto</title>
+	<meta charset="utf-8">
+	<meta http-equiv="x-ua-compatible" content="ie=edge">
+	<title>The Software Defined Delivery Manifesto</title>
 
-    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
+	<link rel="icon" href="favicon.ico" type="image/x-icon"/>
 
-    <!-- Open Graph data -->
-    <meta property="og:type" content="website"/>
-    <meta property="og:site_name" content="The Software Defined Delivery Manifesto"/>
-    <meta property="og:title" content="The Software Defined Delivery Manifesto"/>
-    <meta property="og:description"
-          content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
-    <meta property="og:url" content="https://sdd-manifesto.org"/>
-    <meta property="og:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
-    <!-- Twitter Card data -->
-    <meta name="twitter:card" content="summary"/>
-    <meta name="twitter:site" content="@SDDManifesto"/>
-    <meta name="twitter:creator" content="@SDDManifesto"/>
-    <meta name="twitter:title" content="The Software Defined Delivery Manifesto"/>
-    <meta name="twitter:description"
-          content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
-    <meta name="twitter:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
+	<!-- Open Graph data -->
+	<meta property="og:type" content="website"/>
+	<meta property="og:site_name" content="The Software Defined Delivery Manifesto"/>
+	<meta property="og:title" content="The Software Defined Delivery Manifesto"/>
+	<meta property="og:description"
+		  content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
+	<meta property="og:url" content="https://sdd-manifesto.org"/>
+	<meta property="og:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
+	<!-- Twitter Card data -->
+	<meta name="twitter:card" content="summary"/>
+	<meta name="twitter:site" content="@SDDManifesto"/>
+	<meta name="twitter:creator" content="@SDDManifesto"/>
+	<meta name="twitter:title" content="The Software Defined Delivery Manifesto"/>
+	<meta name="twitter:description"
+		  content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
+	<meta name="twitter:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
 
-    <!-- Google Tag Manager -->
-    <script>(function (w, d, s, l, i) {
-        w[l] = w[l] || [];
-        w[l].push({
-            'gtm.start':
-                    new Date().getTime(), event: 'gtm.js'
-        });
-        var f = d.getElementsByTagName(s)[0],
-                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
-        j.async = true;
-        j.src =
-                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-        f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-PCN8GWQ');</script>
-    <!-- End Google Tag Manager -->
+	<!-- Google Tag Manager -->
+	<script>(function (w, d, s, l, i) {
+		w[l] = w[l] || [];
+		w[l].push({
+			'gtm.start':
+					new Date().getTime(), event: 'gtm.js'
+		});
+		var f = d.getElementsByTagName(s)[0],
+				j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
+		j.async = true;
+		j.src =
+				'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+		f.parentNode.insertBefore(j, f);
+	})(window, document, 'script', 'dataLayer', 'GTM-PCN8GWQ');</script>
+	<!-- End Google Tag Manager -->
 
-    <link rel="stylesheet" href="css/main.css"/>
-    <link rel="stylesheet" href="https://use.typekit.net/htr8isk.css"/>
+	<link rel="stylesheet" href="css/main.css"/>
+	<link rel="stylesheet" href="https://use.typekit.net/htr8isk.css"/>
 
-    <script src="js/vendor/modernizr-3.6.0.min.js"></script>
-    <script src="js/vendor/jquery-3.3.1.min.js"></script>
-    <script src="js/plugins.js"></script>
-    <script src="js/main.js"></script>
+	<script src="js/vendor/modernizr-3.6.0.min.js"></script>
+	<script src="js/vendor/jquery-3.3.1.min.js"></script>
+	<script src="js/plugins.js"></script>
+	<script src="js/main.js"></script>
 
 </head>
 <body>
 
 <!-- Google Tag Manager (noscript) -->
 <noscript>
-    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCN8GWQ"
-            height="0" width="0" style="display:none;visibility:hidden"></iframe>
+	<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCN8GWQ"
+			height="0" width="0" style="display:none;visibility:hidden"></iframe>
 </noscript>
 <!-- End Google Tag Manager (noscript) -->
 
 <header class="site-header">
-    <div class="container">
-        <div class="ten offset-one text-center">
-            <a href="/"><img src="img/sdd_seal.png" alt="Software Defined Delivery Manifesto Seal"></a>
-            <h1>The Software Defined Delivery Manifesto</h1>
-            {{#if date}}
-                <div class="last-updated">Last Updated: {{date}} - v{{version}}</div>
-            {{/if}}
-        </div>
-    </div>
+	<div class="container">
+		<div class="ten offset-one text-center">
+			<a href="/"><img src="img/sdd_seal.png" alt="Software Defined Delivery Manifesto Seal"></a>
+			<h1>The Software Defined Delivery Manifesto</h1>
+			{{#if date}}
+				<div class="last-updated">Last Updated: {{date}} - v{{version}}</div>
+			{{/if}}
+		</div>
+	</div>
 </header>
 
 <section class="content-section">
-    <div class="container">
-        <div class="row">
-            <div class="eight offset-two">
-                {{{body}}}
-            </div>
-        </div>
-    </div>
+	<div class="container">
+		<div class="row">
+			<div class="eight offset-two">
+				{{{body}}}
+			</div>
+		</div>
+	</div>
 </section>
 
 <footer class="footer">
-    <div class="container">
-        <div class="row">
-            <div class="ten offset-one">
-                <div class="row">
-                    <div class="six">&copy; Copyight 2018. All Rights Reserved.</div>
-                    <div class="six footer-links">
-                        <a href="/cookie-policy.html">Cookie Policy</a> |
-                        <a href="/privacy-policy.html">Privacy Policy</a>
-                        {{#if user}}
-                            {{#unless user.signed}}
-                                | <a href="/signout"> Remove your Signature</a>
-                            {{/unless}}
-                            | <a href="/logout">Log out</a>
-                        {{/if}}
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="twelve" style="text-align: center">
-                        <img src="img/twitter.png" width="22" alt="@SDDManifesto on Twitter"
-                             style="vertical-align: text-bottom;padding-right: 5px"><a
-                            href="http://twitter.com/SDDManifesto">@SDDManifesto</a>
-                        | <a href="https://twitter.com/search?q=%23DeliverInCode">#DeliverInCode</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div class="container">
+		<div class="row">
+			<div class="eight offset-two">
+				<div class="row">
+					<div class="five">
+						<img src="img/twitter.png" width="22" alt="@SDDManifesto on Twitter"
+							 style="vertical-align: text-bottom;padding-right: 5px"><a
+							href="http://twitter.com/SDDManifesto">@SDDManifesto</a>
+						&nbsp;|&nbsp; <a href="https://twitter.com/search?q=%23DeliverInCode">#DeliverInCode</a>
+					</div>
+					<div class="seven footer-links">
+						<a href="/cookie-policy.html">Cookie Policy</a>&nbsp;|&nbsp;
+						<a href="/privacy-policy.html">Privacy Policy</a>
+						{{#if user}}
+							{{#unless user.signed}}
+                                &nbsp;|&nbsp;<a href="/signout"> Remove Signature</a>
+							{{/unless}}
+                            &nbsp;|&nbsp;<a href="/logout">Log out</a>
+						{{/if}}
+                        <br>&copy; Copyight 2018. All Rights Reserved.
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </footer>
 
 </body>

diff --git a/app/views/signatures.handlebars b/app/views/signatures.handlebars
@@ -1,12 +1,12 @@
-{{count}} people already signed (Go back to the <a href="/">Manifesto</a>)
+<p>{{count}} people already signed (Go back to the <a href="/">Manifesto</a>)</p>
 
-<ul id="signatures" style="list-style: none">
+<ul id="signatures">
 </ul>
 
 <button class="button primary" id="load_more">Load More</button>
 
 <p class="totop">
-    <a href="#top" id="top">Back to top</a>
+    <a href="#top" id="top">&uarr; Back to top</a>
 </p>
 
 <script>
@@ -19,7 +19,7 @@
             const items = [];
             $.each(data.signatures, function (key, val) {
                 items.push(`<li style="display: none">
-    <img src="${val.avatar}" class="list_avatar" />${val.name} <span class="list_ago">signed ${val.ago} via ${val.connection} - v${val.version}</span>
+    <img src="${val.avatar}" class="list-avatar" /><div class="signer-name">${val.name}</div> <div class="list-ago">signed ${val.ago} via ${val.connection} - v${val.version}</div>
 </li>`);
             });
             $("#signatures").append(items);

diff --git a/package.json b/package.json
@@ -99,7 +99,8 @@
     "lint": "tslint --config tslint.json --format verbose --project .",
     "lint:fix": "npm run lint -- --fix",
     "heroku-postbuild": "npm run build",
-    "start": "node app/index.js"
+    "start": "node app/index.js",
+    "watch:sass": "node-sass --watch app/sass/main.scss -o app/public/css"
   },
   "engines": {
     "node": ">=8.1.0",