Code snippet style changes in the docs + 404 page (#1052)

* homepage and support pages stackoverflow changes * typography changes for readme section * initial dropdown styling * code cleanup for dropdown component * further code cleanup for dropdowns * added comments * new loading page * code mirror background colour change * select state in code mirror colour change * table heading spacing change and transaction button alignment fix * header padding changes * notification typography changes * minor updates to the code section styling in the docs. * new 404 page and styles + homepage callout width fix

Author: winslet

packages/composer-website/jekylldocs/404.html

@@ -4,18 +4,10 @@
 category: 404
 ---
 
-<div class="container">
-
- <div class="info">
- <h1>Hey - looks like someone turned the lights off!</h1>
- <p>Sorry, but the page you were trying to view does not exist.</p>
- <p>It looks like this was the result of either:</p>
- <ul>
- <li>a mistyped address</li>
- <li>an out-of-date link</li>
- </ul>
-
- <p><a href="/">Try going back to the main site</a></p>
+<div class="pageproblem-container">
+ <div class="pageproblem-info">
+ <img src="{{ site.baseurl }}/assets/img/404.svg"/>
+ <h1>Oh no!…there’s no blockchain here :(</h1>
+ <p>If you fancy telling us about this <a href="https://github.com/hyperledger/composer">please raise an issue on our Github</a></p>
  </div>
-
 </div>

packages/composer-website/jekylldocs/_includes/head.html

@@ -20,7 +20,7 @@
  {% endif %}
 
  {% if page.category == 404 %}
- <link href="{{site.baseurl}}/assets/css/404.css" rel="stylesheet">
+ <link href="{{site.baseurl}}/assets/css/404.min.css" rel="stylesheet">
  {% else %}
  <link href="{{site.baseurl}}/assets/css/normalize.css" rel="stylesheet">
  <link href="{{site.baseurl}}/assets/css/main.css" rel="stylesheet">

packages/composer-website/jekylldocs/assets/css/404.min.css

@@ -0,0 +1,90 @@
+// imports from main scss
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600');
+
+$font-stack: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$display-font: 'Open Sans';
+$primary-text: #19273C;
+$secondary-text: #8C9696;
+$first-highlight: #3F55AF;
+$second-highlight: #5068C2;
+$third-highlight: #F9F9F9;
+$fourth-highlight: #F1F3F7;
+$fifth-highlight: #B8C1C1;
+$sixth-highlight: #2D3D7D;
+$error-colour-1: #FF5C49;
+$error-colour-2: #F7E6E6;
+$success-colour: #40d5bb;
+$keyline-highlight: #E3ECEC;
+$white: #FDFDFD;
+$black: #000000;
+$callout: #FFD640;
+
+
+html {
+ font-family: $font-stack;
+ font-size: 16px;
+ height: 100%;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font-family: $font-stack;
+ padding-bottom: 0;
+}
+
+h1 {
+ font-family: $display-font;
+ font-weight: 300;
+ font-size: 2.50rem;
+ color: $first-highlight;
+ margin-bottom: 0rem;
+}
+
+h2 {
+ font-family: $font-stack;
+ font-weight: 300;
+ font-size: 1.35rem;
+ line-height: 130%;
+ color: $first-highlight;
+}
+
+p {
+ font-family: $font-stack;
+ color: $primary-text;
+ font-weight: 400;
+ font-size: 0.9rem;
+}
+
+// 404 styles
+
+.content-chunk {
+ height: 94vh;
+ background-color: rgba( $fourth-highlight, .5 );
+ border-radius: 5px;
+ margin: 2rem;
+ .pageproblem-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ .pageproblem-info {
+ display: inline-block;
+ vertical-align: top;
+ text-align: left;
+ a {
+ text-decoration: none;
+ border-bottom: 1px solid $primary-text;
+ color: $primary-text;
+ transition: all 0.2s ease-in-out;
+ &:hover {
+ border-bottom: 1px solid $primary-text;
+ padding-bottom: 3px;
+ }
+ }
+ }
+ }
+}

packages/composer-website/jekylldocs/assets/css/404.scss

@@ -320,15 +320,17 @@ li {
  box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.20);
  .callout-copy {
  margin: auto;
- width: 70vh;
+ // width: 70vh;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  a {
  text-decoration: none;
  border-bottom: 1px solid $primary-text;
  color: $primary-text;
+ transition: all 0.2s ease-in-out;
  &:hover {
  border-bottom: 1px solid $primary-text;
+ padding-bottom: 3px;
  }
  }
  }
@@ -922,6 +924,14 @@ nav {
  border: 1px solid $keyline-highlight;
  }
 
+ code {
+ border-radius: 2px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ }
+
  ul {
  list-style: none;
  padding-left: 2em;
@@ -965,3 +975,10 @@ nav {
  // bottom: 0;
  background-color: $sixth-highlight;
  }
+
+ // 404 page
+.container {
+ .404-info {
+
+ }
+}