switch to using scss for better variable support
This commit is contained in:
parent
8fccf114f5
commit
3f9dea8467
1231
package-lock.json
generated
1231
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -25,9 +25,11 @@
|
|||
"html-webpack-inline-source-plugin": "0.0.10",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"json-loader": "^0.5.7",
|
||||
"node-sass": "^4.13.1",
|
||||
"raw-loader": "^4.0.0",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.1.3",
|
||||
"url-loader": "^3.0.0",
|
||||
"webpack": "^4.41.6",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react"
|
||||
import "./styles/home.css"
|
||||
import "./styles/home.scss"
|
||||
|
||||
class Home extends React.Component
|
||||
constructor: (props) ->
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react"
|
||||
import ReactDOM from "react-dom"
|
||||
import "./styles/index.css"
|
||||
import "./styles/index.scss"
|
||||
import Home from "./home"
|
||||
|
||||
elem = document.createElement "div"
|
||||
|
|
|
@ -1,28 +0,0 @@
|
|||
.content-wrapper {
|
||||
width: 100vw;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
background-image: url('../assets/spikes.png');
|
||||
background-repeat: repeat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
background-color: #FFFFFF;
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 800 = 600 + 200
|
||||
*/
|
||||
@media screen and ( min-height: 800px ) {
|
||||
.content-wrapper {
|
||||
max-height: 100vh;
|
||||
padding-top: calc((100vh - 600px) / 2);
|
||||
padding-bottom: calc((100vh - 600px) / 2);
|
||||
}
|
||||
}
|
33
src/web/styles/home.scss
Normal file
33
src/web/styles/home.scss
Normal file
|
@ -0,0 +1,33 @@
|
|||
$content-padding: 100px;
|
||||
$content-width: 1000px;
|
||||
$content-height: 600px;
|
||||
$content-total-height: $content-height + 2 * $content-padding;
|
||||
|
||||
.content-wrapper {
|
||||
width: 100vw;
|
||||
padding-top: $content-padding;
|
||||
padding-bottom: $content-padding;
|
||||
background-image: url('../assets/spikes.png');
|
||||
background-repeat: repeat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
background-color: #FFFFFF;
|
||||
width: $content-width;
|
||||
height: $content-height;
|
||||
box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* when screen is higher than content + padding
|
||||
*/
|
||||
@media screen and ( min-height: $content-total-height ) {
|
||||
.content-wrapper {
|
||||
max-height: 100vh;
|
||||
padding-top: calc((100vh - #{$content-height}) / 2);
|
||||
padding-bottom: calc((100vh - #{$content-height}) / 2);
|
||||
}
|
||||
}
|
|
@ -27,8 +27,8 @@ module.exports = {
|
|||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [ 'style-loader', 'css-loader' ]
|
||||
test: /\.scss$/,
|
||||
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/,
|
||||
|
|
Loading…
Reference in a new issue