Browse Source

Broke out the nespaint.scss into a number of sub-styles and renamed nespaint.scss to style.scss . Updated Server for these changes.

dev-bank
Bryan Miller 5 years ago
parent
commit
454765bb39
8 changed files with 80 additions and 70 deletions
  1. +5
    -0
      sass/canvas.scss
  2. +24
    -0
      sass/core.scss
  3. +10
    -0
      sass/header.scss
  4. +0
    -49
      sass/modal.scss
  5. +7
    -0
      sass/nespalette.scss
  6. +12
    -0
      sass/style.scss
  7. +10
    -0
      sass/variables.scss
  8. +12
    -21
      server.js

+ 5
- 0
sass/canvas.scss View File

@@ -0,0 +1,5 @@
#painter{
background-color: $canvas-bg-color;
width:100%;
height:100%;
}

+ 24
- 0
sass/core.scss View File

@@ -0,0 +1,24 @@
body{
background-color: $main-bg-color;
font-family: $sys-font;
color: $main-text-color;
}

.content-wrapper{
width:100%;
height:100%;
overflow:hidden;
}

.simple-padding{
padding-top: 4px;
padding-left: 8px;
padding-right: 8px;
}

.text-align-right{
text-align: right;
}




+ 10
- 0
sass/header.scss View File

@@ -0,0 +1,10 @@
.pure-menu{
background-color: $menu-bg-color;
color: $menu-text-color;
}


span.color-NES-06{
background-color:#000;
color:#A80020;
}

sass/nespaint.scss → sass/modal.scss View File

@@ -1,49 +1,3 @@

body{
background-color:#303030;
font-family: 'Roboto', sans-serif;
}

.pure-menu{
background-color:#6200EE;
color:#FFF;
}

#painter{
background-color:#212121;
width:100%;
height:100%;
}

.content-wrapper{
width:100%;
height:100%;
overflow:hidden;
}

.simple-padding{
padding-top: 4px;
padding-left: 8px;
padding-right: 8px;
}

.text-align-right{
text-align: right;
}

div.NES-palette{
font-size:0.55em;
}

.NES-palette button{
width:2rem;
}

span.color-NES-06{
background-color:#000;
color:#A80020;
}

/* NOTE: Modal styles were borrowed from
* https://www.w3schools.com/howto/howto_css_modals.asp
* and modified.
@@ -74,6 +28,3 @@ span.color-NES-06{
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}




+ 7
- 0
sass/nespalette.scss View File

@@ -0,0 +1,7 @@
div.NES-palette{
font-size:0.55em;
}

.NES-palette button{
width:2rem;
}

+ 12
- 0
sass/style.scss View File

@@ -0,0 +1,12 @@

// Variables and Mixins
@import 'variables';

// Site components
@import 'core';
@import 'header';
@import 'canvas';
@import 'nespalette';
@import 'modal';



+ 10
- 0
sass/variables.scss View File

@@ -0,0 +1,10 @@

$sys-font: 'Roboto', sans-serif;

$main-bg-color: #303030;
$main-text-color: #EFEFEF;

$menu-bg-color: #6200EE;
$menu-text-color: #FFFFFF;

$canvas-bg-color: #212121;

+ 12
- 21
server.js View File

@@ -12,7 +12,7 @@ const https = require("https");

const sass = require("sass");
const SASS_PATH = path.join(__dirname, "sass");
const CSS_PATH = path.join(__dirname, "app/css");
const SASS_FILE = "style.scss";

const watcher = require("chokidar").watch(SASS_PATH, {ignored: /[\/\\]\./, persistent: true});

@@ -27,8 +27,7 @@ var sslKeyPath = process.env.SSLKEYPATH || null;
var sslCertPath = process.env.SSLCERTPATH || null;
var sslCaPath = process.env.SSLCAPATH || null;


var css_output = "" // Used to hold dynamic css.
var css_output = ""; // Used to hold dynamic css.

// -------------------------------------------------------
// Simple helper function
@@ -44,7 +43,7 @@ function debounce(func, delay, scope){
};
}

var generateCSS = debounce(function(src, dst, cb){
var generateCSS = debounce(function(src, cb){
sass.render({file: src}, (err, res)=>{
if (err){
cb("Failed to generate css - " + err.toString());
@@ -98,25 +97,17 @@ app.get('/', function(req, res){
// ----------------------------------------------------
// Watching for any needed file updates (to minimize the need to restart the server.
watcher.on('ready', () => {
var dst = path.join(CSS_PATH, "nespaint.css");
fs.access(dst, fs.constants.F_OK, (err) => {
// Only try generating a new CSS if one doesn't already exists, or FORCECSSREGEN is true
if (err || forceCSSRegen){
generateCSS(path.join(SASS_PATH, "nespaint.scss"), path.join(CSS_PATH, "nespaint.css"), (err) => {
if (err){
console.log("ERROR: " + err);
exit();
} else {
startServer();
}
});
} else {
startServer();
}
});
generateCSS(path.join(SASS_PATH, SASS_FILE), (err) => {
if (err){
console.log("ERROR: " + err);
exit();
} else {
startServer();
}
});
});
watcher.on('change', (fpath) => {
generateCSS(path.join(SASS_PATH, "nespaint.scss"), path.join(CSS_PATH, "nespaint.css"), (err) => {
generateCSS(path.join(SASS_PATH, SASS_FILE), (err) => {
if (err)
console.log("WARNING: " + err);
});

Loading…
Cancel
Save