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

#painter{
background-color: $canvas-bg-color;
width:100%;
height:100%;
}

+ 24
- 0
sass/core.scss View File

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

.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


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 /* NOTE: Modal styles were borrowed from
* https://www.w3schools.com/howto/howto_css_modals.asp * https://www.w3schools.com/howto/howto_css_modals.asp
* and modified. * and modified.
border: 1px solid #888; border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */ width: 80%; /* Could be more or less, depending on screen size */
} }




+ 7
- 0
sass/nespalette.scss View File

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

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

+ 12
- 0
sass/style.scss View File


// Variables and Mixins
@import 'variables';

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



+ 10
- 0
sass/variables.scss View File


$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



const sass = require("sass"); const sass = require("sass");
const SASS_PATH = path.join(__dirname, "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}); const watcher = require("chokidar").watch(SASS_PATH, {ignored: /[\/\\]\./, persistent: true});


var sslCertPath = process.env.SSLCERTPATH || null; var sslCertPath = process.env.SSLCERTPATH || null;
var sslCaPath = process.env.SSLCAPATH || 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 // Simple helper function
}; };
} }


var generateCSS = debounce(function(src, dst, cb){
var generateCSS = debounce(function(src, cb){
sass.render({file: src}, (err, res)=>{ sass.render({file: src}, (err, res)=>{
if (err){ if (err){
cb("Failed to generate css - " + err.toString()); cb("Failed to generate css - " + err.toString());
// ---------------------------------------------------- // ----------------------------------------------------
// Watching for any needed file updates (to minimize the need to restart the server. // Watching for any needed file updates (to minimize the need to restart the server.
watcher.on('ready', () => { 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) => { 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) if (err)
console.log("WARNING: " + err); console.log("WARNING: " + err);
}); });

Loading…
Cancel
Save