diff --git a/index.css b/index.css index 9e0acdec87..b2c060f492 100644 --- a/index.css +++ b/index.css @@ -157,6 +157,9 @@ pre, code { background: rgb(30,30,30); } +pre > code + { background: none } + code { margin: 0 0.5em; padding: 0 0.5em; @@ -165,7 +168,11 @@ code { pre { overflow: scroll; text-align: center; - margin: 0 6em 1.612em; + margin: 0 2em 1.612em; + background: rgb(30,30,30); + border: 32px double #4d4d4d; + border-radius: 0 4.0em 4.0em 4.0em; + box-shadow: 0em .1em 1em rgba(20,20,20,0.9); } section#installation pre em.comment @@ -206,13 +213,12 @@ section#installation pre em.comment /* HOLY GRAIL */ body { display: flex; flex-flow: column } -body > main, body > aside { flex: 1 } @media (orientation: landscape) { body { flex-flow: row wrap } - body > main { margin-left: 20vw; flex-basis: 55vw } - body > aside { flex-basis: 25vw } + body > main { margin-left: 20vw; flex-basis: 55vw; max-width: 55vw; } + body > aside { flex-basis: 24vw } /* This should be 25 WTF? */ body > nav { top: 0; left: 0; diff --git a/index.html b/index.html index a1315b8e93..4beba43040 100644 --- a/index.html +++ b/index.html @@ -352,22 +352,13 @@ <h2 slot=header> <section view id=installation> <h1>Easy Installation</h1> - <p>No need for Node.js, Webpack, Babel, or Gulp. - - <p><strong>snuggsiツ</strong> works in production or in a plain 'ol HTML file! - <p>Simply place the following script within your webpage:</p> <pre><code> - <em class=comment><!-- http(s): protocol required to run locally --></em> - <script src=//unpkg.com/snuggsi></script> + <script src=https://unpkg.com/snuggsi></script> </pre></code> - <p class=center>Et Voila <em>(that's it!)</em> ツ - - <p class=center>See - <a target=github href=https://github.com/devpunks/snuggsi/wiki/Module-Imports>ECMAScript Module Imports</a> - for<code> <script type=module></code> support! + <p><strong>snuggsiツ</strong> works in production or in a plain 'ol HTML file! </section>