Merge pull request #204 from aragon/update-minor-css-changes

Update minor css changes

components/home/modules/ROOT/pages/index.adoc

@@ -1,14 +1,14 @@
 = Documentation
 
-Explore our guides and examples to learn how. test  dsfasfasfzz
+Explore our guides and examples to learn how. TODO
 
 == The modular governance stack
 
-Explanation here
+TDOO Explanation here
 
 === Aragon OSx
 
-Docs here
+TODO Docs here
 
 === Plugin marketplace
 
@@ -17,10 +17,15 @@ Governance logic is encapsulated in reusable contracts called _plugins_.
 Plugins are granted specific permissions depending what you want them to do. In practice, they often act as governing bodies or decision-making processes. For example, a token voting plugin or multisig plugin define all of their unique governance logic within the plugin itself. This “separation of concerns” keeps the protocol focused and ultimately more flexible.
 
 The core plugins currently supported by Aragon are:
-* *Token Voting*: Proposals are created for token holders and delegates to vote on proposals, with execution decided using a simple majority rule.
-* *Multisig*: Proposals are created for designated addresses to approve, with execution decided by whether a minimum number of approvers is met.
-* *Admin*: Proposals are created by designated addresses and immediately executed.
-* *Staged Proposal Processor*: Proposals are created and progress through any number of stages, with other plugins either voting to approve or veto the proposal. The SPP plugin is essentially a cross-plugin state manager that enables governance processes with multiple stages and multiple governing bodies.
+
+  * *Token Voting*: Proposals are created for token holders and delegates to vote on proposals, with execution decided using a simple majority rule.
+
+  * *Multisig*: Proposals are created for designated addresses to approve, with execution decided by whether a minimum number of approvers is met.
+
+  * *Admin*: Proposals are created by designated addresses and immediately executed.
+
+  * *Staged Proposal Processor*: Proposals are created and progress through any number of stages, with other plugins either voting to approve or veto the proposal. The SPP plugin is essentially a cross-plugin state manager that enables governance processes with multiple stages and multiple governing bodies.
+
 
 [.card-section]
 

package.json

@@ -9,7 +9,7 @@
     "serve:all-optimized": "yarn && yarn optimize-svg && yarn build && yarn serve",
     "optimize-svg": "svgo -rf ./static/img -o ./static/optimized-svg",
     "build:theme": "yarn --cwd ui build",
-    "serve": "live-server build/site",
+    "serve": "yarn build && live-server build/site",
     "watch:local": "fgbg 'nodemon -e yml,adoc,css,scss,js -w components -w ui --ignore ui/theme/dist -x sh scripts/watch-local-build.sh' 'live-server build/site'",
     "typecheck": "tsc",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"

playbook-local-only.yml

@@ -1,19 +1,51 @@
 site:
   title: Aragon Docs
-  url: https://docs.aragon.org
+  url: http://localhost/
   start_page: ROOT::index.adoc
   keys:
     google_analytics: 'UA-85043059-1'
+    gtm: 'GTM-W9X5Q6F'
 content:
   sources:
     - url: .
-      branches: HEAD
+      branches: feature/new-way
       start_path: components/home
+    - url: https://github.com/aragon/multisig-plugin
+      branches: feature/docs
+      start_path: packages/contracts/docs
+    - url: https://github.com/aragon/token-voting-plugin
+      branches: feature/docs
+      start_path: packages/contracts/docs
+    - url: https://github.com/aragon/admin-plugin
+      branches: feat/docs
+      start_path: packages/contracts/docs
+    - url: /Users/claubar/Projects/Aragon/osx/
+      branches: feat/docs-add-missing-pages
+      start_path: packages/contracts/docs
+    - url: https://github.com/aragon/osx-commons
+      branches: feature/docs
+      start_path: contracts/docs
+    - url: https://github.com/aragon/staged-proposal-processor-plugin
+      branches: feature/docs
+      start_path: docs
+    - url: https://github.com/aragon/gov-ui-kit
+      branches: feat/documentation-antora
+      start_path: docs
+    - url: https://github.com/aragon/gov-app-template
+      branches: feat/documentation-antora
+      start_path: docs
+
 ui:
   bundle:
     url: ./ui/theme
 asciidoc:
   attributes:
     idprefix: ''
+antora:
+  extensions:
+    - require: './lunr-tokenizer'
+    - require: '@antora/lunr-extension'
+      index_latest_only: true
 urls:
-  redirect_facility: netlify
+  html_extension_style: drop
+  redirect_facility: netlify

ui/preview/model.yml

@@ -1,7 +1,7 @@
 antoraVersion: '1.0.0'
 env: []
 site:
-  title: OpenZeppelin Docs
+  title: Aragon Docs
   ui:
     url: /_
   components:

ui/src/css/article.scss

@@ -1,5 +1,8 @@
 .article {
   padding-bottom: var(--guk-space-5); /* matches nav padding */
+  max-width: 900px;
+  margin:0 auto; 
+  padding: 40px; 
 
   .listingblock {
     position: relative;
@@ -37,6 +40,10 @@
 
   img {
     max-width: 100%;
+    height: auto;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   aside {
@@ -262,13 +269,12 @@
 
     a {
       text-decoration: none;
-    /*  text-transform: uppercase; */
       font-size: var(--guk-font-size-base);
       color: var(--guk-color-neutral-500);
     }
 
     a:hover {
-    color: var(--guk-color-neutral-800);
+      color: var(--guk-color-primary-400);
     }
 
     &.btn-next {

ui/src/css/globals/_typography.scss

@@ -37,7 +37,6 @@ h6 {
  /* font-weight: var(--guk-font-weight-semibold); /* 600 */
   line-height: var(--guk-line-height-tight); /* 1.25 */
   margin-bottom: var(--guk-space-4); /* Consistent spacing */
-  margin-top: var(--guk-space-8);
 }
 
 /*
@@ -130,9 +129,6 @@ a {
     color: var(--guk-color-primary-400);
   }
 
-  .admonitionblock & {
-    color: inherit;
-  }
 }
 
 /* Preformatted Text */

ui/src/css/header.scss

@@ -2,7 +2,6 @@
 
 .header {
   border-bottom: solid 1px var(--guk-color-neutral-200); /* Replaces #e2e2e7 */
-  padding:1em 0em 1em 0em;
 }
 
 .navbar {
@@ -76,9 +75,8 @@
 }
 
 .navbar-search-input {
-  margin-right: 8px;
   font-size: var(--guk-font-size-base); /* 1rem */
-  background-color: var(--guk-color-neutral-0); /* Replaces var(--aluminum-1) */
+  background-color: var(--guk-color-neutral-50); /* Replaces var(--aluminum-1) */
   color: var(--guk-color-neutral-500);
   border-radius: var(--guk-border-rounded);
   border: 1px solid var(--guk-color-neutral-200); /* Replaces var(--aluminum-3) */

ui/src/css/layout.scss

@@ -9,9 +9,20 @@
   overflow-y: auto;
   position: sticky;
   top: 0;
-  width: 20%;
-  max-width: 300px;  
   flex: 0 0 auto;
+  width: 300px; // default narrow width
+
+  @media (min-width: 1000px) {
+    width: 300px; // medium screens
+  }
+
+  @media (min-width: 1400px) {
+    width: 350px; // middle screens
+  }
+
+  @media (min-width: 1800px) {
+    width: 400px; // larger screens
+  }
 }
 
 .nav-heading {
@@ -108,6 +119,7 @@ button.collapse-toggle {
 
 .navbar, .article-wrapper {
   margin: 0 var(--side-margin);
+  max-width : 1280px;
 }
 
 .navbar {
@@ -138,11 +150,11 @@ button.collapse-toggle {
 .navbar-search {
   position: relative;
   display: flex;
- /*  flex-grow: 1; */
+  flex-grow: 1;
 }
 
 .navbar-search-input {
- /* flex-grow: 1; */
+  flex-grow: 1;
   width: 20em;
   padding: .5rem !important;
 }
@@ -180,12 +192,27 @@ button.collapse-toggle {
   margin-left: var(--lg);
   flex-grow: 0;
   flex-shrink: 0;
-  width: 20%;
-  max-width: 300px;  
   max-height: 80vh;
   position: sticky;
   top: 10vh;
   overflow-y: auto;
+  padding: 1rem;
+  padding-left: 0;
+  width: 300px;
+
+  @media (min-width: 1000px) {
+    width: 250px; // medium screens
+  }
+
+  @media (min-width: 1500px) {
+    width: 300px; // medium screens
+  }
+
+
+  @media (min-width: 1800px) {
+    width: 350px; // larger screens
+  }
+
 
   @media (max-width: math.div($mobile-breakpoint * 2, 3)) {
     display: none;

ui/theme/partials/header.hbs

@@ -6,25 +6,11 @@
         <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
       </svg>
     </button>
-    <!--
     <div class="navbar-logo">
       <a href="{{@root.site.url}}">
-        <svg width="209px" height="24px" viewBox="0 0 209 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
-          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g id="home-[TBD]" transform="translate(-360.000000, -26.000000)">
-              <g id="navbar" transform="translate(299.000000, 0.000000)">
-                <g id="Group-5" transform="translate(61.000000, 26.000000)">
-                  <g id="Group-7-Copy-4" transform="translate(-0.000000,
-                    -0.000000)">
-        <path fill="currentColor" fill-rule="evenodd" d="M16.704 2.334 14.66.108c3.08-.407 11.202.115 19.066 5.458.102.738.08 1.474.08 1.474l.206.114c.375.516.807 1.484 1.064 2.683.257 1.196.328 2.567.031 3.873a9.204 9.204 0 0 1-1.428 3.21c-.571.816-1.095 1.277-1.26 1.376l-.053.032c-.971.18-2.312.893-2.857 2.685-1.594.992-4.287 2.08-7.948 2.08-3.245 0-6.549-.94-9.025-2.749-2.462-1.798-4.108-4.452-4.108-7.948 0-2.774 1.243-4.944 2.831-6.547 1.6-1.616 3.79-2.923 5.042-3.352l.31-.106-.018-.016.113-.04ZM30.24 6.697c-.62.693-1.198 1.025-1.363 1.115-3.615-.826-4.918-2.834-4.918-2.834 3.41-.022 6.488.848 8.74 2.321 0 0-1.22-.424-2.46-.602Z" clip-rule="evenodd"></path><path fill="currentColor" d="M13.445 2.713C5.776 4.544 0 11.563 0 20.005 0 30.954 9.254 40 20.67 40c8.524 0 15.62-5.212 19.33-12.185-4.826 1.144-10.569-.821-10.852-5.164l.026-.103c-1.801.917-4.372 1.72-7.614 1.72-3.452 0-7.009-.996-9.718-2.975-2.725-1.99-4.59-4.979-4.59-8.897 0-3.159 1.425-5.61 3.171-7.374h.001c.815-.815 1.868-1.592 2.836-2.195l.185-.114Z"></path><path fill="currentColor" d="M7.44 12.396c0-3.097 1.395-5.504 3.117-7.242.996-.996 2.361-1.94 3.483-2.571-1.122.63-2.487 1.575-3.483 2.571C8.835 6.892 7.44 9.3 7.44 12.396Zm26.51 6.073c.352.144.567.334.68.453.271.287.95 1.15.136 2.514 1.694-.287 4.34-2.011 4.54-6.392.133-2.912-1.39-5.037-3.398-6.617.121.366.228.756.316 1.164.283 1.32.372 2.869.028 4.38a10.377 10.377 0 0 1-1.611 3.622 9.425 9.425 0 0 1-.692.876Zm81.32-8.206c2.928 0 4.768.828 6.511 2.313l-1.888 2.265c-1.307-1.12-2.614-1.802-4.744-1.802-3.098 0-5.495 2.728-5.495 5.99l.002.204c.066 3.428 2.349 5.934 5.759 5.934 1.622 0 3.05-.512 4.091-1.291V20.71l2.88-2.63v7.16c-1.694 1.436-4.066 2.654-7.068 2.654-5.301 0-8.786-3.799-8.786-8.767l.001-.204c.078-4.705 3.661-8.66 8.737-8.66Zm19.169 0c5.203 0 8.834 3.97 8.834 8.767l-.001.202c-.078 4.706-3.734 8.662-8.882 8.662-5.204 0-8.834-3.97-8.834-8.767l.001-.202c.078-4.706 3.734-8.662 8.882-8.662Zm-75.034.17 7.455 17.169h-3.03l-5.853-13.589-5.81 13.589h-2.976l7.455-17.169h2.76Zm38.398 0 7.455 17.169h-3.031l-5.852-13.589-5.81 13.589H87.59l7.455-17.169h2.759Zm51.442.122 9.076 11.787V10.555h2.929v17.047h-2.493l-9.343-12.128v12.128h-2.929V10.555h2.76ZM134.39 13.04c-3.364 0-5.712 2.679-5.712 5.99l.001.195c.069 3.246 2.421 5.894 5.76 5.894 3.364 0 5.712-2.679 5.712-5.99l-.002-.195c-.068-3.246-2.42-5.894-5.759-5.894Zm-56.373-2.777c2.135 0 3.808.644 4.9 1.733.897.965 1.406 2.228 1.406 3.738v.142c-.036 2.73-1.627 4.395-3.873 5.108l-.153.047 4.584 6.56H81.34l-4.171-6.04h-2.19l1.537-2.699h1.283c2.086 0 3.43-1.063 3.49-2.775l.002-.12v-.116c-.03-1.839-1.311-2.806-3.516-2.806h-4.341v5.357h-.003v3.864l.003-.002v5.337h-2.983V10.263h7.567Z"></path>
-        </g>
-              </g>
-            </g>
-          </g>
-          </g>
-        </svg>
+        <img src="{{@root.site.url}}{{@root.site.ui.url}}/images/aragon.svg" style="width: 170px; height: auto">
       </a>
-    </div> -->
+    </div> 
     <div id="search-field" class="navbar-search" >
       <input class="navbar-search-input" id="search-input" type="text" placeholder="{{#if (eq @root.page.component.name "ROOT")}}Search{{else}}Search {{@root.page.component.title}}{{/if}}">
       {{#unless (eq @root.page.component.name "ROOT")}}

ui/theme/partials/layout.hbs

@@ -1,9 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+
+    <link rel="icon" sizes="32x32" href="{{@root.site.url}}{{@root.site.ui.url}}/images/favicon.ico"/>
+    <link rel="icon" type="image/png" sizes="16x16" href="{{@root.site.url}}{{@root.site.ui.url}}/theme/images/favicon-16x16.png"/>
+    <link rel="icon" type="image/png" sizes="32x32" href="{{@root.site.url}}{{@root.site.ui.url}}/theme/images/favicon-32x32.png"/>
+    <link rel="apple-touch-icon" href="{{@root.site.url}}{{@root.site.ui.url}}/theme/images/apple-touch-icon.png" />
+
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta property="og:image" content="{{@root.site.url}}{{@root.site.ui.url}}/images/Aragon_OSx_Thumbnail.png">
     {{#if keywords}}
       <meta name="keywords" content="{{keywords}}">
     {{/if}}
@@ -19,16 +26,11 @@
 
     <title>{{#if page.title}}{{{page.title}}} - {{/if}}{{site.title}}</title>
     <meta name="twitter:card" content="summary">
-    <meta property="og:title" content="{{#if page.title}}{{{page.title}}} - {{/if}}{{site.title}}">
-    <meta property="og:image" content="{{@root.site.url}}{{@root.site.ui.url}}/images/social.png">
+    <meta property="og:title" content="{{#if page.title}}{{{page.title}}} - {{/if}}{{site.title}}">  
     {{#if description}}
       <meta name="description" content="{{description}}">
       <meta property="og:description" content="{{description}}">
     {{/if}}
-    <link rel="icon" type="image/png" sizes="16x16" href="{{@root.site.ui.url}}/images/favicon-16x16.png"/>
-    <link rel="icon" type="image/png" sizes="32x32" href="{{@root.site.ui.url}}/images/favicon-32x32.png"/>
-    <link rel="icon" type="image/png" sizes="96x96" href="{{@root.site.ui.url}}/images/favicon-96x96.png"/>
-    <link rel="icon" type="image/png" sizes="192x192"  href="{{@root.site.ui.url}}/images/favicon-192x192.png"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap"/>
   </head>
   <body class="{{page-attribute-classes 'notoc'}}">

ui/theme/partials/navigation.hbs

@@ -7,8 +7,6 @@
     </svg>
   </button>
 
-    <a href="/"><img src="../../../../../../../_/images/aragon.svg" height="38" style="margin-top: 0px; margin-bottom: 24px; margin-left: 8px;"></a>
-
   {{#if (eq @root.page.component.name "ROOT")}}
   <div class="nav-components">