Merge pull request #2871 from canonical-web-and-design/one-site

One site to rule them all

.prettierignore

@@ -1,2 +1,2 @@
 # ignore html files in docs not to mess up with template formatting
-docs/**/*.html
+site/**/*.html

Dockerfile

@@ -43,7 +43,7 @@ ENV PATH="/root/.local/bin:${PATH}"
 ADD . .
 RUN rm -rf package.json yarn.lock .babelrc webpack.config.js
 COPY --from=build-vanilla /srv/package.json package.json
-COPY --from=build-vanilla /srv/build docs/static/build
+COPY --from=build-vanilla /srv/build build
 
 # Set revision ID
 ARG BUILD_ID

README.md

@@ -9,7 +9,7 @@
 
 Vanilla Framework is a simple extensible CSS framework, built using [Sass](http://sass-lang.com/) and is designed to be used either directly or by using themes to extend or supplement its patterns.
 
-[Documentation](https://docs.vanillaframework.io) |
+[Documentation](https://vanillaframework.io/docs) |
 [Join the mailing list](http://canonical.us3.list-manage2.com/subscribe?u=56dac47c206ba0f58ec25f314&id=36f7d8394e)
 
 ## Hotlinking
@@ -69,7 +69,7 @@ The simplest way to run Vanilla framework is to first [install Docker](https://d
 
 ### Viewing documentation
 
-The documentation for the latest version of Vanilla framework is hosted at <https://docs.vanillaframework.io>.
+The documentation for the latest version of Vanilla framework is hosted at <https://vanillaframework.io/docs>.
 
 The documentation markdown files live in the [`docs` folder](/docs), and you can view this documentation in the browser by running:
 

scss/site/_patterns_grid.scss

@@ -0,0 +1,13 @@
+@mixin vfio-p-grid {
+  .mobile-col-2:nth-of-type(2n + 1) {
+    @media (max-width: $breakpoint-small - 1px) {
+      margin-left: 0;
+    }
+  }
+
+  .tablet-col-2:nth-of-type(3n + 1) {
+    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium - 1px) {
+      margin-left: 0;
+    }
+  }
+}

scss/site/_patterns_icons.scss

@@ -0,0 +1,37 @@
+@mixin vfio-p-icons {
+  .p-icon--chrome {
+    @extend %icon;
+    background-image: url('#{$assets-path}09a6a50e-vf.io-chrome.png');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--firefox {
+    @extend %icon;
+    background-image: url('#{$assets-path}a45d30aa-vf.io-firefox.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--safari {
+    @extend %icon;
+    background-image: url('#{$assets-path}a030d872-vf.io-safari.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--ie {
+    @extend %icon;
+    background-image: url('#{$assets-path}165a2220-vf.io-ie.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--edge {
+    @extend %icon;
+    background-image: url('#{$assets-path}de0673bb-vf.io-edge.svg');
+    margin-right: $sph-inner;
+  }
+
+  .p-icon--opera {
+    @extend %icon;
+    background-image: url('#{$assets-path}74738acc-vf.io-opera.svg');
+    margin-right: $sph-inner;
+  }
+}

scss/site/_patterns_syntax-highlight.scss

@@ -0,0 +1,65 @@
+// sass-lint:disable no-color-literals class-name-format
+@mixin vfio-p-syntax-highlight {
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-comment {
+    color: #595e62;
+  }
+
+  .hljs-string {
+    color: #183691;
+  }
+
+  .hljs-number {
+    color: #e95420;
+  }
+
+  .hljs-name {
+    color: #63a35c;
+  }
+
+  .hljs-selector-tag {
+    color: #63a35c;
+  }
+
+  .hljs-link {
+    color: #183691;
+  }
+
+  .hljs-keyword {
+    color: #a71d5d;
+  }
+
+  .hljs-attribute {
+    color: #a71d5d;
+  }
+
+  .hljs-attr {
+    color: #795da3;
+  }
+
+  .hljs-built_in {
+    color: #77216f;
+  }
+
+  .hljs-title {
+    color: #795da3;
+  }
+
+  .hljs-section {
+    color: #183691;
+    font-weight: bold;
+  }
+
+  .hljs-meta {
+    color: #183691;
+    font-weight: bold;
+  }
+}
+// sass-lint:enable no-color-literals class-name-format

scss/site/_settings_breakpoints.scss

@@ -0,0 +1 @@
+$breakpoint-medium: 820px;

scss/site/_settings_colors.scss

@@ -0,0 +1 @@
+$color-brand: #111;

scss/site/main.scss

@@ -0,0 +1,39 @@
+@charset 'utf-8';
+
+// import settings
+@import 'settings_breakpoints';
+@import 'settings_colors';
+$sticky-footer: true;
+
+// import vanilla
+@import '../build';
+
+@import 'patterns_syntax-highlight';
+@include vfio-p-syntax-highlight;
+
+@import 'patterns_icons';
+@include vfio-p-icons;
+
+@import 'patterns_grid';
+@include vfio-p-grid;
+
+$color-hero: #e95420;
+
+// Local website styles
+.vfio-hero {
+  background-color: $color-hero;
+  background-image: url('#{$assets-path}775cc62b-vanilla-grad-background.png');
+  background-position: 75% 50%;
+}
+
+.p-list__icon--github {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='24' width='24'%3E%3Cdefs%3E%3Cpath id='a' d='M0 23.831h23.695V0H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23181616' mask='url%28%23b%29' d='M11.847 0C5.304 0 0 5.47 0 12.218c0 5.397 3.394 9.976 8.102 11.592.593.112.81-.265.81-.589 0-.29-.011-1.059-.017-2.078-3.295.738-3.99-1.638-3.99-1.638-.54-1.411-1.316-1.787-1.316-1.787-1.076-.758.081-.742.081-.742 1.19.086 1.815 1.259 1.815 1.259 1.057 1.867 2.773 1.327 3.448 1.015.108-.79.413-1.328.752-1.633-2.63-.309-5.397-1.357-5.397-6.039 0-1.333.462-2.423 1.22-3.278-.122-.309-.529-1.55.116-3.233 0 0 .995-.328 3.258 1.253a10.997 10.997 0 0 1 2.966-.411c1.006.004 2.02.139 2.966.41 2.262-1.58 3.255-1.252 3.255-1.252.647 1.682.24 2.924.118 3.233.759.855 1.218 1.945 1.218 3.278 0 4.694-2.77 5.727-5.41 6.029.426.377.805 1.123.805 2.263 0 1.632-.015 2.95-.015 3.351 0 .327.213.707.815.588 4.704-1.619 8.096-6.195 8.096-11.591C23.696 5.47 18.39 0 11.847 0'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.p-list__icon--twitter {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-9.813-5.596c-1.062.322-2.084 1.754-1.764 3.376-3.524-.213-5.08-2.1-6.017-3.003-.954 1.683.025 3.318.88 3.847-.452.025-.997-.17-1.268-.339-.103 1.552 1.163 2.628 2.24 2.907-.344.102-.668.117-1.223.034.472 1.561 1.74 1.979 2.686 2.047-1.217 1.055-2.678 1.285-4.267 1.208 4.12 2.518 8.28.969 10.305-1.008 1.7-1.659 2.461-4.144 2.487-6.368.389-.315 1.176-.985 1.39-1.51-.311.12-.925.404-1.565.43.528-.346 1.132-1.038 1.196-1.58-.585.318-1.261.594-1.84.681-1.091-1.052-2.154-1.052-3.24-.722z' fill='%231DA1F2' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+.p-list__icon--slack {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='124' viewBox='0 0 124 124'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E01E5A' d='M26.4 13.2C26.4 20.3 20.6 26.1 13.5 26.1 6.4 26.1.6 20.3.6 13.2.6 6.1 6.4.3 13.5.3L26.4.3 26.4 13.2zM32.9 13.2C32.9 6.1 38.7.3 45.8.3 52.9.3 58.7 6.1 58.7 13.2L58.7 45.5C58.7 52.6 52.9 58.4 45.8 58.4 38.7 58.4 32.9 52.6 32.9 45.5L32.9 13.2z' transform='translate(0 65)'/%3E%3Cpath fill='%2336C5F0' d='M45.8 26.4C38.7 26.4 32.9 20.6 32.9 13.5 32.9 6.4 38.7.6 45.8.6 52.9.6 58.7 6.4 58.7 13.5L58.7 26.4 45.8 26.4zM45.8 32.9C52.9 32.9 58.7 38.7 58.7 45.8 58.7 52.9 52.9 58.7 45.8 58.7L13.5 58.7C6.4 58.7.6 52.9.6 45.8.6 38.7 6.4 32.9 13.5 32.9L45.8 32.9z'/%3E%3Cpath fill='%232EB67D' d='M32.6 45.8C32.6 38.7 38.4 32.9 45.5 32.9 52.6 32.9 58.4 38.7 58.4 45.8 58.4 52.9 52.6 58.7 45.5 58.7L32.6 58.7 32.6 45.8zM26.1 45.8C26.1 52.9 20.3 58.7 13.2 58.7 6.1 58.7.3 52.9.3 45.8L.3 13.5C.3 6.4 6.1.6 13.2.6 20.3.6 26.1 6.4 26.1 13.5L26.1 45.8z' transform='translate(65)'/%3E%3Cpath fill='%23ECB22E' d='M13.2 32.6C20.3 32.6 26.1 38.4 26.1 45.5 26.1 52.6 20.3 58.4 13.2 58.4 6.1 58.4.3 52.6.3 45.5L.3 32.6 13.2 32.6zM13.2 26.1C6.1 26.1.3 20.3.3 13.2.3 6.1 6.1.3 13.2.3L45.5.3C52.6.3 58.4 6.1 58.4 13.2 58.4 20.3 52.6 26.1 45.5 26.1L13.2 26.1z' transform='translate(65 65)'/%3E%3C/g%3E%3C/svg%3E");
+}

site/404.html

@@ -0,0 +1,19 @@
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
+  <div class="row">
+    <div class="col 12">
+      <h1 class="u-no-margin--bottom">404 - Page not found</h1>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-shallow">
+  <div class="row">
+    <div class="col 12">
+      <p>Sorry, we can't find the page you're looking for. If you think this is an error on our site, please <a class="p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/issues/new">file a bug on GitHub.</a></p>
+    </div>
+  </div>
+</div>
+{% endblock %}

site/500.html

@@ -0,0 +1,19 @@
+{% extends "_layouts/site.html" %}
+
+{% block content %}
+<div id="main-content" class="p-strip--image is-dark vfio-hero">
+  <div class="row">
+    <div class="col 12">
+      <h1 class="u-no-margin--bottom">500 - Internal server error</h1>
+    </div>
+  </div>
+</div>
+
+<div class="p-strip is-shallow">
+  <div class="row">
+    <div class="col 12">
+      <p>Something went wrong on our end. If you have the time, please help us out by <a class="p-link--external" href="https://github.com/canonical-websites/vanillaframework.io/issues/new">filing a bug.</a></p>
+    </div>
+  </div>
+</div>
+{% endblock %}