Commit 86be923f authored by Michael Henretty's avatar Michael Henretty
Browse files

cleaning up cssnext errors and warnings, disabling custom property warning

parent 2c7e6dd6
...@@ -68,7 +68,14 @@ function compileCSS() { ...@@ -68,7 +68,14 @@ function compileCSS() {
var cssnext = require('postcss-cssnext'); var cssnext = require('postcss-cssnext');
var cssnano = require('cssnano'); var cssnano = require('cssnano');
var plugins = [ var plugins = [
cssnext({ browsers: ['last 2 versions' ]}), cssnext({
browsers: ['last 2 versions' ],
features: {
customProperties: {
warnings: false
}
},
}),
cssnano({ autoprefixer: false }) cssnano({ autoprefixer: false })
]; ];
return gulp.src(PATH_CSS) return gulp.src(PATH_CSS)
......
...@@ -23,13 +23,14 @@ ...@@ -23,13 +23,14 @@
--record-background-image: url("/img/wave-red-large.png"); --record-background-image: url("/img/wave-red-large.png");
--record-background-image-mobile: url("/img/wave-red-mobile.png"); --record-background-image-mobile: url("/img/wave-red-mobile.png");
--page-margin: 1rem; --page-margin: 1rem;
--standard-margin: 0.3rem;
--hamburger: calc(var(--header-height) * 0.7); --hamburger: calc(var(--header-height) * 0.7);
--transition-default: 0.3s; --transition-default: 0.3s;
--desktop-width: 50rem; --desktop-width: 50rem;
--hero-height: 15.3rem; --hero-height: 15.3rem;
--hero-height-mobile: 12.5rem; --hero-height-mobile: 12.5rem;
--robot-height: 19rem; --robot-height: 19rem;
--robot-height-mobile: 10rem; --robot-height-mobile: 16rem;
--spinner-height: 10rem; --spinner-height: 10rem;
--bounce-curve: cubic-bezier(0.000, 1.430, 0.700, 0.940); --bounce-curve: cubic-bezier(0.000, 1.430, 0.700, 0.940);
--shadow-overhang: 0 1px 0 rgba(12,13,14,0.1), --shadow-overhang: 0 1px 0 rgba(12,13,14,0.1),
...@@ -61,12 +62,6 @@ ...@@ -61,12 +62,6 @@
--bottom-z-index: 0; --bottom-z-index: 0;
} }
@media (max-width: 600px) {
:root {
--robot-height: 16rem;
}
}
html { html {
font-family: var(--base-font-family); font-family: var(--base-font-family);
font-size: var(--base-font-size); font-size: var(--base-font-size);
...@@ -243,9 +238,8 @@ input:invalid { ...@@ -243,9 +238,8 @@ input:invalid {
/* Listen Box Component */ /* Listen Box Component */
.listen-box { .listen-box {
--space-between: 0.3rem;
display: flex; display: flex;
margin-bottom: var(--space-between); margin-bottom: var(--standard-margin);
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
} }
...@@ -305,7 +299,7 @@ input:invalid { ...@@ -305,7 +299,7 @@ input:invalid {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: var(--space-between); margin-right: var(--standard-margin);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
...@@ -331,7 +325,7 @@ input:invalid { ...@@ -331,7 +325,7 @@ input:invalid {
} }
.delete-box { .delete-box {
margin-left: var(--space-between); margin-left: var(--standard-margin);
} }
.vote-box { .vote-box {
...@@ -977,6 +971,12 @@ body:not(.ios) .recording #background-container { ...@@ -977,6 +971,12 @@ body:not(.ios) .recording #background-container {
transform: translate(0,0) scale(0); transform: translate(0,0) scale(0);
} }
@media (max-width: 600px) {
.robot {
height: var(--robot-height-mobile);
}
}
.robot > img { .robot > img {
height: 100% height: 100%
} }
...@@ -1083,6 +1083,12 @@ body:not(.ios) .recording #background-container { ...@@ -1083,6 +1083,12 @@ body:not(.ios) .recording #background-container {
transition: transform 0.2s var(--bounce-curve); transition: transform 0.2s var(--bounce-curve);
} }
@media (max-width: 600px) {
.robot .bubble {
top: calc(var(--robot-height-mobile) / 4);
}
}
.robot .bubble:hover { .robot .bubble:hover {
transform: scale(1.05); transform: scale(1.05);
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment