Style Refresh (part 1): Fonts, colors

assets/css/devportal.css

@@ -1,14 +1,5 @@
 /* Generic styles and colors not in the bootstrap files --------------------- */
 
-body {
-  font-family: Roboto, sans-serif;
-}
-
-code,
-pre {
-  font-family: "Roboto Mono", monospace;
-}
-
 td {
   border: 1px solid #dbdde2;
   padding: 0.2em;
@@ -206,10 +197,7 @@ th {
 
 /* Footer ------------------------------------------------------------------- */
 .ripple-footer {
-  z-index: 2;
-  color: #999999;
   font-size: 14px;
-  background: #28282a url(../img/ripple_footer_v2.jpg) repeat-x center center;
   background-position-y: -60px;
 }
 
@@ -250,6 +238,18 @@ th {
   font-size: 14px;
 }
 
+.foot-nav-col {
+  border-left: 1px solid #eae7e6;
+  border-right: 1px solid #eae7e6;
+}
+
+.foot-nav-col:first-of-type {
+  border-left: 0;
+}
+.foot-nav-col:last-of-type {
+  border-right: 0;
+}
+
 /* Callouts ----------------------------------------------------------------- */
 
 .devportal-callout {
@@ -943,8 +943,7 @@ a.current {
 }
 
 .splash-head {
-  background-color: #102b3e;
+  background-color: transparent;
-  background-image: url("../img/splash-map.svg");
   background-size: cover;
   background-position: center center;
   color: white;

tool/ripple.scss

@@ -4,51 +4,58 @@
 // source files.
 
 
-// Override some Bootstrap variables
+// Set theme colors used by Bootstrap styles
-$primary:       #1db4ff; // "Ripple Blue" (aka "Blue-1")
+$theme-colors: (
-$secondary:     #0A93EB; // "Blue-2"
+"primary":       #1B1818, // XRP Black
-$light:         #e1e4e8; // "Black-20"
+"secondary":     #676463, // Gray
-$dark:          #2b3e51; // "Background Navy"
+"light":         #EBE8E7, // light tan?
+"dark":          #1B1818, // XRP Black again
+"success":       #2BCB96, // light green
+"caution":       #D0DB60, // yellowish
+//"info":          todo // currently bluish
+"warning":       #AA4949, // wine red
+);
 $code-color:    #3B4147; // "Black-80"
 $navbar-padding-y: 0;
 $navbar-nav-link-padding-x: 1rem;
 
 // Font face stuff from Google
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url("../font/Roboto-Light.woff2") format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url("../font/Roboto-Regular.woff2") format('woff2');
+  src: url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'), url("../font/Roboto-Regular.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: url("../font/Roboto-Bold.woff2") format('woff2');
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'), url("../font/Roboto-Bold.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: 'Roboto Mono';
+  font-family: 'Space Mono';
   font-style: normal;
   font-weight: 400;
-  src: url("../font/Roboto-Mono.woff2") format('woff2');
+  src: local('Space Mono'), local('SpaceMono-Regular'), url(https://fonts.gstatic.com/s/spacemono/v4/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Space Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Space Mono Bold'), local('SpaceMono-Bold'), url(https://fonts.gstatic.com/s/spacemono/v4/i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.woff2) format('woff2'), url("../font/Roboto-Regular.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+$font-family-monospace: 'Space Mono', monospace;
+$font-family-sans-serif: 'Roboto', sans-serif;
 
 // Bootstrap v4
-@import "node_modules/bootstrap/scss/bootstrap";
+@import "node_modules/bootstrap/scss/bootstrap.scss";
 
-// CSS overrides
+h1, h2, h3, h4, h5 {
-:root {
+  font-family: 'Space Mono', monospace;
-  --font-family-sans-serif: 'Roboto', sans-serif;
+  font-weight: 700;
-  --font-family-monospace: 'Roboto Mono', monospace;
 }

tool/template-base.html

@@ -21,13 +21,12 @@
     <link rel="shortcut icon" href="favicon.ico">
     <meta name="msapplication-TileColor" content="#1db4ff">
     <meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
-    <meta name="theme-color" content="#1db4ff">
+    <meta name="theme-color" content="#1db4ff"><!-- TODO: replace. Black? -->
 
     <!-- jQuery -->
     <script src="assets/vendor/jquery-1.11.1.min.js"></script>
 
-    <!-- Custom Stylesheets. ripple.css includes bootstrap, font stuff -->
+    <!-- Custom Stylesheets. -->
-    <!-- <link href="assets/css/ripple.css" rel="stylesheet" /> -->
     <link href="assets/vendor/bootstrap.css" rel="stylesheet" />
     <link href="assets/css/devportal.css" rel="stylesheet" />