Spaces:

aletrn
/

driver.js

Running

kamrify commited on Mar 3, 2018

Commit

c8e4236

1 Parent(s): ebda3a6

Minor demo styles

Files changed (9) hide show

assets/scripts/src/sholo.js CHANGED Viewed

	@@ -1 +1 @@
1	- console.log('~~hello!~~');


1	+ console.log('heeloo');

assets/styles/scss/base.scss CHANGED Viewed

@@ -5,6 +5,7 @@ $global-font-size-h3: 20px;
 $global-font-size-h4: 18px;
 $global-font-size-h5: 16px;
 $global-font-size-h6: 14px;
 /*=============================================
 =            Generic styling                  =
@@ -30,8 +31,8 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 16px;
   line-height: 1.4;
-  color: #FFFFFF;
-  background-color: #333;
   overflow-x: hidden;
 }
@@ -58,7 +59,7 @@ hr {
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: $global-guttering/2;
-  font-weight: 400;
   line-height: 1.2;
 }

 $global-font-size-h4: 18px;
 $global-font-size-h5: 16px;
 $global-font-size-h6: 14px;
+$heading-font-weight: 700;
 /*=============================================
 =            Generic styling                  =
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 16px;
   line-height: 1.4;
+  color: #000000;
+  background-color: #FFFFFF;
   overflow-x: hidden;
 }
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: $global-guttering/2;
+  font-weight: $heading-font-weight;
   line-height: 1.2;
 }

assets/styles/scss/demo.scss ADDED Viewed

+@import "base";
+$container-width: 500px !default;
+$button-font-size: 13px !default;
+$dark-button-bg: #2d2d2d !default;
+$dark-button-text: #ffffff !default;
+$light-button-bg: #f5f5f5 !default;
+$light-button-text: #2d2d2d !default;
+.page-wrap {
+  width: $container-width;
+  margin: auto;
+}
+.btn {
+  font-size: $button-font-size;
+  padding: 7px 10px;
+  border-radius: 3px;
+  &.btn__dark {
+    background: $dark-button-bg;
+    color: $dark-button-text;
+  }
+  &.btn__light {
+    background: $light-button-bg;
+    color: $light-button-text;
+  }
+}
+section {
+  margin-bottom: 35px;
+}
+.section__header {
+  margin: 80px 0 60px;
+  text-align: center;
+}

assets/styles/scss/sholo.scss DELETED Viewed

	@@ -1 +0,0 @@
1	- @import "base";

index.html CHANGED Viewed

@@ -5,25 +5,24 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Sholo</title>
-    <link rel="stylesheet" href="./assets/styles/css/sholo.css">
 </head>
 <body>
 <div class="page-wrap">
-    <section class="header">
         <h1>Sholo</h1>
         <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
-        <a href="#" class="btn btn-dark">Show an Example</a>
-        <a href="#" class="btn btn-light">Learn More</a>
     </section>
-    <section class="main-content">
         <h1>Whats does it do?</h1>
         <p>Let's you bring any component on the page into the spotlight.</p>
         <p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can use it to make powerful introduction for different features of your application or for example if you want to highlight some component that needs user attention.</p>
-        <pre>
-    const sholo = new Sholo();
-    sholo.highlight(".header");
-</pre>
     </section>
 </div>

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Sholo</title>
+    <link rel="stylesheet" href="./assets/styles/css/demo.css">
 </head>
 <body>
 <div class="page-wrap">
+    <section class="section__header">
         <h1>Sholo</h1>
         <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
+        <a href="#" class="btn btn__dark">Show an Example</a>
+        <a href="#" class="btn btn__light">Learn More</a>
     </section>
+    <section>
         <h1>Whats does it do?</h1>
         <p>Let's you bring any component on the page into the spotlight.</p>
         <p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can use it to make powerful introduction for different features of your application or for example if you want to highlight some component that needs user attention.</p>
+    </section>
+    <section>
+        <h1>How does it do that?</h1>
+        <p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some element</p>
     </section>
 </div>

package.json CHANGED Viewed

@@ -29,9 +29,9 @@
     "style-loader": "^0.20.2",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.10",
-    "webpack-dev-server": "^3.1.0"
   },
   "dependencies": {
-    "extract-text-webpack-plugin": "next"
   }
 }

     "style-loader": "^0.20.2",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0",
+    "extract-text-webpack-plugin": "next"
   },
   "dependencies": {
   }
 }

server.js CHANGED Viewed

@@ -2,7 +2,7 @@ const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const opn = require('opn');
-const config = require('./webpack.dev.config');
 const PORT = 3000;
 const HOST = 'localhost';

 const WebpackDevServer = require('webpack-dev-server');
 const opn = require('opn');
+const config = require('./webpack.config.dev');
 const PORT = 3000;
 const HOST = 'localhost';

webpack.config.dev.js CHANGED Viewed

@@ -6,7 +6,7 @@ module.exports = {
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     './assets/scripts/src/sholo.js',
-    './assets/styles/scss/sholo.scss',
   ],
   output: {
     path: path.join(__dirname, '/assets'),
@@ -43,7 +43,7 @@ module.exports = {
   },
   plugins: [
     new ExtractTextPlugin({
-      filename: 'styles/css/sholo.css',
       allChunks: true,
     }),
   ],

   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     './assets/scripts/src/sholo.js',
+    './assets/styles/scss/demo.scss',
   ],
   output: {
     path: path.join(__dirname, '/assets'),
   },
   plugins: [
     new ExtractTextPlugin({
+      filename: 'styles/css/demo.css',
       allChunks: true,
     }),
   ],

webpack.config.prod.js CHANGED Viewed

@@ -5,7 +5,7 @@ module.exports = {
   mode: 'production',
   entry: [
     './assets/scripts/src/sholo.js',
-    './assets/styles/scss/sholo.scss',
   ],
   output: {
     path: path.join(__dirname, '/assets'),

   mode: 'production',
   entry: [
     './assets/scripts/src/sholo.js',
+    './assets/styles/scss/demo.scss',
   ],
   output: {
     path: path.join(__dirname, '/assets'),