Breakout some scss

This commit is contained in:
Alexander Bass 2022-06-24 14:16:55 -04:00
parent d88bb557dc
commit 04ace65942
9 changed files with 156 additions and 137 deletions

2
buildstyle.sh Normal file
View file

@ -0,0 +1,2 @@
scss client/scss/main.scss dist/www/style.css
rm -rf .sass-cache

11
client/scss/canvas.scss Normal file
View file

@ -0,0 +1,11 @@
canvas {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}

View file

@ -0,0 +1,42 @@
span.button > img {
pointer-events: none;
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
width: 70px;
height: 70px;
transform: translate(0, 10px);
background: lightgray;
}
span.button.wide {
width: 128px;
height: 128px;
}
span.button.wide > img {
width: 108px;
height: 108px;
}
span.button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
background: lightgray;
width:90px;
height:90px;
margin: 5px 5px 5px 5px;
border-radius: 1px;
cursor: pointer;
}
span.button:hover {
background: gray;
}

9
client/scss/font.scss Normal file
View file

@ -0,0 +1,9 @@
@font-face {
font-family: "moderndos";
src: url('fonts/moderndos.woff2') format('woff2'),
url('fonts/moderndos.ttf') format('truetype');
}
* {
font-family: moderndos;
}

14
client/scss/joinGame.scss Normal file
View file

@ -0,0 +1,14 @@
input.codeInput {
width: inherit !important;
text-align: center;
padding-top: 20px !important;
padding-bottom: 20px !important;
border-radius: 2px;
outline: solid gray 2px;
font-size: 4.8em;
}
.codeContainer > button {
max-width: auto !important;
width: inherit !important;
}

View file

@ -1,13 +1,9 @@
@font-face { @import "createGame.scss";
/* font-weight: 500; */ @import "font.scss";
font-family: "moderndos"; @import "canvas.scss";
src: url('fonts/moderndos.woff2') format('woff2'), @import "slider.scss";
url('fonts/moderndos.ttf') format('truetype'); @import "joinGame.scss";
}
* {
font-family: moderndos;
}
h1, h2, h3 { h1, h2, h3 {
margin: 0px; margin: 0px;
@ -91,61 +87,8 @@ input {
text-align: center; text-align: center;
} }
input.codeInput {
width: inherit !important;
text-align: center;
padding-top: 20px !important;
padding-bottom: 20px !important;
border-radius: 2px;
outline: solid gray 2px;
font-size: 4.8em;
}
.codeContainer > button {
max-width: auto !important;
width: inherit !important;
}
.sliderNumber {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: black;
font-size: 1.7em;
pointer-events: none;
}
.sliderContainer {
display: flex;
align-items: center;
justify-content: center;
}
.slider {
-webkit-appearance: none;
appearance: none;
height: 55px;
width: 300px;
background-color: lightgray;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 60px;
background: #f1f8t6;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 60px;
border-radius: 0px;
background: #f1f8t6;
cursor: pointer;
}
input[type=button], button, .buttonLink { input[type=button], button, .buttonLink {
width: 50%; width: 50%;
@ -156,94 +99,28 @@ input[type=button], button, .buttonLink {
border: none; border: none;
cursor: pointer; } cursor: pointer; }
input[type=number], input[type=text] { input[type=number], input[type=text] {
/* width: 100%; */ /* width: 100%; */
width: 300px; width: 300px;
display: inline-block;
padding: 12px 20px;
margin: 3px 0;
border: none;
box-sizing: border-box;
background-color: lightgray; }
span.button > img {
pointer-events: none;
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
width: 70px;
height: 70px;
transform: translate(0, 10px);
background: lightgray;
}
span.button.wide {
width: 128px;
height: 128px;
}
span.button.wide > img {
width: 108px;
height: 108px;
}
span.button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block; display: inline-block;
background: lightgray; padding: 12px 20px;
width:90px; margin: 3px 0;
height:90px; border: none;
margin: 5px 5px 5px 5px; box-sizing: border-box;
border-radius: 1px; background-color: lightgray; }
cursor: pointer;
}
span.button:hover {
background: gray;
}
.canvas1{
z-index: 0;
}
.canvas3 {
z-index: 2;
}
.canvasStack { .canvasStack {
/* top: 50px; */
background: darkslategray; background: darkslategray;
} }
main { main {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
canvas {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.hidden { .hidden {

40
client/scss/slider.scss Normal file
View file

@ -0,0 +1,40 @@
.sliderNumber {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: black;
font-size: 1.7em;
pointer-events: none;
}
.sliderContainer {
display: flex;
align-items: center;
justify-content: center;
}
.slider {
-webkit-appearance: none;
appearance: none;
height: 55px;
width: 300px;
background-color: lightgray;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 60px;
background: #f1f8t6;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 60px;
border-radius: 0px;
background: #f1f8t6;
cursor: pointer;
}

23
package-lock.json generated
View file

@ -10,6 +10,7 @@
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"express": "^4.18.1", "express": "^4.18.1",
"rollup": "^2.75.7",
"sass": "^1.52.3", "sass": "^1.52.3",
"socket.io": "^4.5.0", "socket.io": "^4.5.0",
"ts-node": "^10.8.1", "ts-node": "^10.8.1",
@ -901,6 +902,20 @@
"node": ">=8.10.0" "node": ">=8.10.0"
} }
}, },
"node_modules/rollup": {
"version": "2.75.7",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
"integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
"bin": {
"rollup": "dist/bin/rollup"
},
"engines": {
"node": ">=10.0.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/safe-buffer": { "node_modules/safe-buffer": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@ -1905,6 +1920,14 @@
"picomatch": "^2.2.1" "picomatch": "^2.2.1"
} }
}, },
"rollup": {
"version": "2.75.7",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
"integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
"requires": {
"fsevents": "~2.3.2"
}
},
"safe-buffer": { "safe-buffer": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",

View file

@ -16,6 +16,7 @@
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"express": "^4.18.1", "express": "^4.18.1",
"rollup": "^2.75.7",
"sass": "^1.52.3", "sass": "^1.52.3",
"socket.io": "^4.5.0", "socket.io": "^4.5.0",
"ts-node": "^10.8.1", "ts-node": "^10.8.1",