use scss for global css

This commit is contained in:
Nolan Lawson 2018-01-12 08:36:31 -08:00
parent f783f1414c
commit f78be6a032
6 changed files with 1243 additions and 110 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ node_modules
yarn.lock
cypress/screenshots
templates/.*
assets/*.css

View File

@ -1,105 +0,0 @@
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
font-size: 14px;
line-height: 1.2;
color: #333;
background: #ebeffb;
}
#svelte {
display: flex;
flex-direction: column;
}
main {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
max-width: 800px;
padding: 15px 15px;
box-sizing: border-box;
margin: 85px auto;
background: white;
border: 1px solid #ededed;
border-radius: 1px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
line-height: 1.2;
}
h1 {
font-size: 2em;
}
a {
color: royalblue;
text-decoration: none;
}
a:visited {
color: royalblue;
}
a:hover {
text-decoration: underline;
}
input {
border: 1px solid #dadada;
padding: 5px;
}
button {
font-size: 1.2em;
background: #ededed;
border-radius: 2px;
padding: 10px 15px;
border: 1px solid #ededed;
}
button {
cursor: pointer;
}
button:hover {
background: #ddd;
}
button:active {
background: #fafafa;
}
button.primary {
border: 1px solid #1e3066;
background: #668cff;
color: white;
}
button.primary:hover {
background: #446add;
}
button.primary:active {
background: #99b3ff;
}
p, label, input {
font-size: 1.3em;
}
ul, li, p {
padding: 0;
margin: 0;
}
@media (max-width: 767px) {
main {
padding: 5px 5px;
margin: 75px auto;
}
}

1132
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,15 +3,18 @@
"description": "TODO",
"version": "0.0.1",
"scripts": {
"dev": "node server.js",
"build": "sapper build",
"dev": "concurrently --kill-others \"npm run build-sass-watch\" \"node server.js\"",
"build": "npm run build-sass && sapper build",
"start": "cross-env NODE_ENV=production node server.js",
"build-sass": "node-sass scss -o assets",
"build-sass-watch": "npm run build-sass && node-sass -w scss -o assets",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"compression": "^1.7.1",
"concurrently": "^3.5.1",
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"express": "^4.16.2",
@ -20,6 +23,7 @@
"glob": "^7.1.2",
"idb-keyval": "^2.3.0",
"node-fetch": "^1.7.3",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"sapper": "^0.3.1",
"serve-static": "^1.13.1",

105
scss/global.scss Normal file
View File

@ -0,0 +1,105 @@
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
font-size: 14px;
line-height: 1.2;
color: #333;
background: #ebeffb;
}
#svelte {
display: flex;
flex-direction: column;
}
main {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
max-width: 800px;
padding: 15px 15px;
box-sizing: border-box;
margin: 85px auto;
background: white;
border: 1px solid #ededed;
border-radius: 1px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
line-height: 1.2;
}
h1 {
font-size: 2em;
}
a {
color: royalblue;
text-decoration: none;
}
a:visited {
color: royalblue;
}
a:hover {
text-decoration: underline;
}
input {
border: 1px solid #dadada;
padding: 5px;
}
button {
font-size: 1.2em;
background: #ededed;
border-radius: 2px;
padding: 10px 15px;
border: 1px solid #ededed;
}
button {
cursor: pointer;
}
button:hover {
background: #ddd;
}
button:active {
background: #fafafa;
}
button.primary {
border: 1px solid #1e3066;
background: #668cff;
color: white;
}
button.primary:hover {
background: #446add;
}
button.primary:active {
background: #99b3ff;
}
p, label, input {
font-size: 1.3em;
}
ul, li, p {
padding: 0;
margin: 0;
}
@media (max-width: 767px) {
main {
padding: 5px 5px;
margin: 75px auto;
}
}

0
scss/theme-default.scss Normal file
View File