demo updates

SoulisTech · Nov 25, 2018 · 3aa2216 · 3aa2216
1 parent cb3c9f3
commit 3aa2216
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -18,7 +18,7 @@ These guidelines were written to inform you about all the things needed for icon
    - you'll need to `yarn install` or `npm install` first
    - get [yarn](https://yarnpkg.com/en/) or [npm](https://www.npmjs.com/)
 4. define icons' main colors in `webfont/cryptocoins-colors.css`
-5. add the icons (manually) to `docs/icons-demo.html` preview
+5. add the icons (manually) to `icons-demo.html` preview
    - make sure the webfont displays newly icons added correctly (some editors output not-quite-compatible SVGs unfortunately)
 6. add info about all the newly added icons to `docs/changelog.md`'s updates section at the bottom
    - feel free to add your username as credit (see update v2.7)

diff --git a/README.md b/README.md
@@ -8,15 +8,15 @@
 
 Available in webfont & SVG format for taking advantage of small file sizes and unlimited scalability, Cryptocoins are perfect for usage on the web – right where they belong. Use them all or just the ones you need.
 
-Quick links: **[Demo](docs/icons-demo)** • **[Installation](docs/installation)** • [Contributing Guidelines](CONTRIBUTING.md) • [Changelog](docs/changelog.md)
+Quick links: **[Demo](icons-demo)** • **[Installation](docs/installation)** • [Contributing Guidelines](CONTRIBUTING.md) • [Changelog](docs/changelog.md)
 
 ![Cryptocoins Preview](docs/cryptocoins-preview.png)
 
 ----
 
 ## Docs & Demo
 
-* **Demo**: [Overview of all icons](docs/icons-demo) contains simple webfont-based demo
+* **Demo**: [Overview of all icons](icons-demo) contains simple webfont-based demo
 * **Download**: clone or [download ZIP](https://github.com/allienworks/cryptocoins/archive/master.zip) directly from GitHub
 
 

diff --git a/docs/icons-demo.html → icons-demo.html b/docs/icons-demo.html → icons-demo.html
@@ -5,15 +5,15 @@
    <title>Cryptocoins Webfont Demo</title>
 
    <!-- CSS defining icons (required) -->
-   <link rel="stylesheet" href="../webfont/cryptocoins.css">
+   <link rel="stylesheet" href="webfont/cryptocoins.css">
 
    <!-- CSS defining icon/coin colors (optional) -->
    <!--link rel="stylesheet" href="webfont/cryptocoins-colors.css"-->
 
 </head>
 <body>
 
-<h1>Demo</h1>
+<h1><a href="README.md">Cryptocoins</a> Demo</h1>
 
 <p>Overview of all included coins/icons.</p>
 <p>Check the HTML if you're not sure how to include the icons to your project.</p>
@@ -403,12 +403,34 @@ <h2>Z</h2>
    <i class="cc ZRX-alt" title="ZRX"></i>
 </div>
 
+
 <style>
-   .icons {
-      margin: 3rem 0;
-   }
-   i.cc { font-size: 4rem; display: inline-block; margin: 0 1.3rem 1.3rem 0; transition: 0.1s ease all; }
-   i.cc:hover { color: #0060BD; transform: rotate(-20deg); transform-origin: 0.49em 0.7em; }
+  body {
+    font-family: "Inter UI", "Helvetica", "Arial", sans-serif;
+    width: 100%;
+    max-width: 72rem;
+    padding: 1rem 2rem;
+    margin: 0 auto; }
+  a {
+    color: #0060BD; }
+  a:hover {
+    text-decoration: none; }
+  code {
+    color: #0060BD;
+    background: #deefff;
+    padding: 2px 5px;
+    border-radius: 4px; }
+  .icons {
+    margin: 3rem 0; }
+  i.cc {
+    font-size: 4rem;
+    display: inline-block;
+    margin: 0 1.3rem 1.3rem 0;
+    transition: 0.1s ease all; }
+  i.cc:hover {
+    color: #0060BD;
+    transform: rotate(-20deg);
+    transform-origin: 0.49em 0.55em; }
 </style>
 
 </body>