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-inline-source-plugin": "0.0.10",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"json-loader": "^0.5.7",
|
"json-loader": "^0.5.7",
|
||||||
|
"node-sass": "^4.13.1",
|
||||||
"raw-loader": "^4.0.0",
|
"raw-loader": "^4.0.0",
|
||||||
"react": "^16.12.0",
|
"react": "^16.12.0",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^16.12.0",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
"style-loader": "^1.1.3",
|
"style-loader": "^1.1.3",
|
||||||
"url-loader": "^3.0.0",
|
"url-loader": "^3.0.0",
|
||||||
"webpack": "^4.41.6",
|
"webpack": "^4.41.6",
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import "./styles/home.css"
|
import "./styles/home.scss"
|
||||||
|
|
||||||
class Home extends React.Component
|
class Home extends React.Component
|
||||||
constructor: (props) ->
|
constructor: (props) ->
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import ReactDOM from "react-dom"
|
import ReactDOM from "react-dom"
|
||||||
import "./styles/index.css"
|
import "./styles/index.scss"
|
||||||
import Home from "./home"
|
import Home from "./home"
|
||||||
|
|
||||||
elem = document.createElement "div"
|
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: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.scss$/,
|
||||||
use: [ 'style-loader', 'css-loader' ]
|
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif)$/,
|
test: /\.(png|jpg|gif)$/,
|
||||||
|
|
Loading…
Reference in a new issue