Home Esplora Aiuto
Accedi
cturan
/
vendure
mirror da https://github.com/vendure-ecommerce/vendure
1
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

feat(docs): Numerous style tweaks to blog & landing page

Michael Bromley 7 anni fa
parent
abbf20f6f2
commit
69e955e175
11 ha cambiato i file con 113 aggiunte e 21 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 16 2
      docs/assets/styles/_blog.scss
  2. 34 0
      docs/assets/styles/_landing-page.scss
  3. 14 2
      docs/assets/styles/_markdown.scss
  4. 2 2
      docs/content/docs/getting-started.md
  5. 2 0
      docs/layouts/blog/baseof.html
  6. 3 3
      docs/layouts/blog/single.html
  7. 31 3
      docs/layouts/index.en.html
  8. 8 8
      docs/layouts/partials/intro.html
  9. 1 1
      docs/layouts/partials/top-bar.html
  10. 1 0
      docs/static/svg/clr-icon-book-light.svg
  11. 1 0
      docs/static/svg/clr-icon-check-brand.svg

+ 16 - 2
docs/assets/styles/_blog.scss
Vedi File 

@@ -8,6 +8,9 @@
 
         font-size: 2em;
 
         font-weight: 400;
 
     }
 
+    h5 {
 
+        margin-top: -24px;
 
+    }
 
     p {
 
         line-height: 1.4em;
 
     }
 
@@ -18,17 +21,28 @@
 
     margin: auto;
 
 
     header {
 
-        padding-top: 30px;
 
+        overflow: hidden;
 
+        border-bottom: 1px dashed $gray-300;
 
         h1 {
 
             font-family: $brand-font-face;
 
             font-size: 3em;
 
             font-weight: 400;
 
             color: $brand-color;
 
         }
 
+        .date-author {
 
+            // font-size: 14px;
 
+            color: $gray-700;
 
+        }
 
     }
 
 
-    p:first-child {
 
+    .markdown > p:first-child {
 
         font-size: 22px;
 
         color: $gray-700;
 
     }
 
+
 
+    figure {
 
+        img {
 
+            max-width: 100%;
 
+        }
 
+    }
 
 }

+ 34 - 0
docs/assets/styles/_landing-page.scss
Vedi File 

@@ -58,6 +58,13 @@
 
         color: $gray-300;
 
         @include texture-bg;
 
 
+        .vimeo-player {
 
+            width: 100%;
 
+            height: 40vw;
 
+            max-height: 80vh;
 
+            margin-bottom: 30px;
 
+        }
 
+
 
         .stack-logos {
 
             display: flex;
 
             align-items: center;
 
@@ -134,6 +141,33 @@
 
     }
 
 
     .section-3 {
 
+        .features {
 
+            column-width: 600px;
 
+            margin: 0 auto;
 
+        }
 
+
 
+        ul.feature-list {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style-type: none;
 
+            font-size: 18px;
 
+            li {
 
+                color: $gray-700;
 
+                &:not(:first-child) {
 
+                    margin-top: 12px;
 
+                }
 
+                img {
 
+                    width: 24px;
 
+                    height: 24px;
 
+                    margin-right: 6px;
 
+                }
 
+            }
 
+        }
 
+        small {
 
+        }
 
+    }
 
+
 
+    .section-4 {
 
         .getting-started {
 
             display: flex;
 
             @media all and (max-width: $sm-breakpoint){

+ 14 - 2
docs/assets/styles/_markdown.scss
Vedi File 

@@ -83,12 +83,24 @@ $block-border-radius: 4px;
 
     }
 
 
     blockquote {
 
-        border-left: $padding-1*2 solid $gray-300;
 
         margin: 0;
 
-        padding: $padding-1 $padding-16;
 
+        padding: $padding-16 $padding-16;
 
+        position: relative;
 
+        font-size: 22px;
 
+        color: $gray-700;
 
 
         :first-child { margin-top: 0; }
 
         :last-child { margin-bottom: 0; }
 
+
 
+        ::before {
 
+            content: '“';
 
+            position: absolute;
 
+            font-family: Georgia, 'Times New Roman', Times, serif;
 
+            font-size: 48px;
 
+            top: 0px;
 
+            left: -6px;
 
+            color: $gray-500;
 
+        }
 
     }
 
 
     table {

+ 2 - 2
docs/content/docs/getting-started.md
Vedi File 

@@ -55,10 +55,10 @@ $ yarn add --dev ts-node
 
 ### Install Vendure
 
 
 ```bash
 
-$ npm install @vendure/core
 
+$ npm install @vendure/core@alpha
 
 
 # or with Yarn
 
-$ yarn add @vendure/core
 
+$ yarn add @vendure/core@alpha
 
 ```
 
 
 ### Initialize with the Vendure CLI

+ 2 - 0
docs/layouts/blog/baseof.html
Vedi File 

@@ -4,6 +4,8 @@
 
 
 <head>
 
     {{ partial "docs/html-head" . }}
 
+    {{ template "_internal/opengraph.html" . }}
 
+    {{ template "_internal/twitter_cards.html" . }}
 
 </head>
 
 
 <body>

+ 3 - 3
docs/layouts/blog/single.html
Vedi File 

@@ -3,9 +3,9 @@
 
 <div class="blog-post">
 
     <header>
 
         <h1>{{ .Title }}</h1>
 
-        <h5>
 
-            <strong>{{ .Date.Format "January 2, 2006" }}</strong>
 
-        </h5>
 
+        <div class="date-author">
 
+            <strong>{{ .Date.Format "January 2, 2006" }}</strong> by {{ .Params.author }}
 
+        </div>
 
     </header>
 
     <article class="markdown">
 
         {{- .Content -}}

+ 31 - 3
docs/layouts/index.en.html
Vedi File 

@@ -10,7 +10,11 @@
 
 <div class="section-1">
 
     <div class="content">
 
         <h2>E-commerce for the Modern Web</h2>
 
-        <p class="lead">Vendure is a new e-commerce framework built for the developers who are building the modern web.</p>
 
+        <p class="lead">Vendure is a new e-commerce framework built for the developers who are building the modern web.<br> 
+            <img src="{{ "svg/clr-icon-book-light.svg" | absURL }}" alt="check icon"> Read: <a href="{{ "blog/introducing-vendure" | absURL }}">Introducing Vendure</a></p>
 
+        <iframe src="https://player.vimeo.com/video/315862294" 
+            title="intro video"
 
+            class="vimeo-player" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 
         <div class="stack-logos">
 
             <div class="stack-logo ts-logo">
 
                 <img src="{{ "logo/ts-logo.svg" | absURL }}">
 
@@ -78,16 +82,40 @@
 
     </div>
 
 </div>
 
 <div class="section-3">
 
+    <div class="content">
 
+        <h2>Features</h2>
 
+        <div class="features">
 
+        <ul class="feature-list">
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Products & variants</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Stock management</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">On-the-fly image resize & crop</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Product facets & faceted search</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Product categories / collections</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Extensible product search via Elastic, Algolia etc.</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Payment provider integrations</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Shipping provider integrations</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Tax calculations based on category and zone</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Discounts and promotions</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Multiple administrators with fine-grained permissions</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Built-in admin interface</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Multi-language support</li>
 
+            <li><img src="{{ "svg/clr-icon-check-brand.svg" | absURL }}" alt="check icon">Guest checkouts</li>
 
+        </ul>
 
+        </div>
 
+        <p><small>The above features are either already implemented or planned for the beta release</small></p>
 
+    </div>
 
+</div>
 
+<div class="section-4">
 
     <div class="content">
 
         <h2>Get Started</h2>
 
         <div class="getting-started">
 
             <div class="install-code">
 
                 <div class="highlight">
 
-            <pre class="chroma"><code class="language-bash" data-lang="bash">$ npm install @vendure/core
 
+            <pre class="chroma"><code class="language-bash" data-lang="bash">$ npm install @vendure/core@alpha
 
 
 <span class="c1"># or</span>
 
 
-$ yarn add @vendure/core</code>
 
+$ yarn add @vendure/core@alpha</code>
 
             </pre>
 
                 </div>
 
             </div>

+ 8 - 8
docs/layouts/partials/intro.html
Vedi File 

@@ -73,15 +73,15 @@
 
             </div>
 
         </div>
 
         <div class="intro-controls">
 
-            <button id="replay"><img src="{{ "svg/clr-icon-replay-all.svg" | absURL }}"></button>
 
+            <button id="replay" title="replay animation"><img src="{{ "svg/clr-icon-replay-all.svg" | absURL }}"></button>
 
             <div class="jump">
 
-                <button id="scene-0-button"></button>
 
-                <button id="scene-1-button"></button>
 
-                <button id="scene-2-button"></button>
 
-                <button id="scene-3-button"></button>
 
-                <button id="scene-4-button"></button>
 
-                <button id="scene-5-button"></button>
 
-                <button id="scene-6-button"></button>
 
+                <button id="scene-0-button" title="jump to animation scene 0"></button>
 
+                <button id="scene-1-button" title="jump to animation scene 1"></button>
 
+                <button id="scene-2-button" title="jump to animation scene 2"></button>
 
+                <button id="scene-3-button" title="jump to animation scene 3"></button>
 
+                <button id="scene-4-button" title="jump to animation scene 4"></button>
 
+                <button id="scene-5-button" title="jump to animation scene 5"></button>
 
+                <button id="scene-6-button" title="jump to animation scene 6"></button>
 
             </div>
 
         </div>
 
         <div class="intro-title">

+ 1 - 1
docs/layouts/partials/top-bar.html
Vedi File 

@@ -1,7 +1,7 @@
 
 <div class="top-bar {{ if .isLandingPage }}landing-page{{ end }}" >
 
     <div class="top-bar-content">
 
         <div class="left">
 
-            <a class="logo" href="/">
 
+            <a class="logo" href="/" title="back to landing page">
 
                 <img src="{{ "logo.png" | absURL }}" />
 
                 {{ if not .isLandingPage }}<div class="logotype">vendure</div>{{ end }}
 
             </a>

+ 1 - 0
docs/static/svg/clr-icon-book-light.svg
Vedi File 

@@ -0,0 +1 @@
 
+<svg version="1.1" class="has-solid " viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true" role="img" width="32" height="32" fill="#ccc"><rect class="clr-i-outline clr-i-outline-path-1" x="10" y="5.2" width="18" height="1.55"/><rect class="clr-i-solid clr-i-solid-path-1" x="10" y="5.2" width="18" height="1.55" style="display:none"/><path class="clr-i-outline clr-i-outline-path-2" d="M29,8H9.86A1.89,1.89,0,0,1,8,6,2,2,0,0,1,9.86,4H29a1,1,0,0,0,0-2H9.86A4,4,0,0,0,6,6a4.14,4.14,0,0,0,0,.49,1,1,0,0,0,0,.24V30a4,4,0,0,0,3.86,4H29a1,1,0,0,0,1-1V9.25s0-.06,0-.09,0-.06,0-.09A1.07,1.07,0,0,0,29,8ZM28,32H9.86A2,2,0,0,1,8,30V9.55A3.63,3.63,0,0,0,9.86,10H28Z"/><path class="clr-i-solid clr-i-solid-path-2" d="M29,8H9.86A1.89,1.89,0,0,1,8,6,2,2,0,0,1,9.86,4H29a1,1,0,1,0,0-2H9.86A4,4,0,0,0,6,6a4.14,4.14,0,0,0,0,.49,1,1,0,0,0,0,.24V30a4,4,0,0,0,3.86,4H29a1,1,0,0,0,1-1V9.25s0-.06,0-.09,0-.06,0-.09A1.07,1.07,0,0,0,29,8Z" style="display:none"/></svg>

+ 1 - 0
docs/static/svg/clr-icon-check-brand.svg
Vedi File 

@@ -0,0 +1 @@
 
+<svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true" role="img" width="32" height="32" fill="#13b7f3"><path class="clr-i-outline clr-i-outline-path-1" d="M13.72,27.69,3.29,17.27a1,1,0,0,1,1.41-1.41l9,9L31.29,7.29a1,1,0,0,1,1.41,1.41Z"/></svg>