use scss for global css
This commit is contained in:
Nolan Lawson
parent
f783f1414c
commit
f78be6a032
|
|
@ -4,3 +4,4 @@ node_modules
|
|||
yarn.lock
|
||||
cypress/screenshots
|
||||
templates/.*
|
||||
assets/*.css
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue