created mobile style

src/components/sidebar/Sidebar.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
+import { showSidebar } from "../../actions/show-sidebar";
+
 import './sidebar.scss';
 
 const siteMenu = [
@@ -40,9 +42,9 @@ export class Sidebar extends React.Component {
 
     render() {
         //console.log(this.props)
-	    //const { showProfile } = this.props;
+	    const { showSidebar, showSidebarFlag } = this.props;
         return (
-            <div className="menu">
+            <div className={ !showSidebarFlag ? 'menu close' : 'menu' }>
                 <nav>
                     <div className="logo">
                         <Link to="/">
@@ -77,6 +79,7 @@ export class Sidebar extends React.Component {
                 <div className="menu-skew">
                     <div className="img-bg"></div>
                 </div>
+                <button className={ showSidebarFlag ? 'burgerIcon open' : 'burgerIcon' } type="button" onClick={showSidebar}><span></span></button>
             </div>
         )
     }
@@ -84,10 +87,12 @@ export class Sidebar extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        showProfile: state.login.showProfile
+        showProfile: state.login.showProfile,
+        showSidebarFlag: state.sidebar.showSidebar
     };
 };
 
 export default connect(
-    mapStateToProps
+    mapStateToProps,
+    { showSidebar }
 )(Sidebar);

src/components/sidebar/sidebar.scss

@@ -8,6 +8,7 @@
     max-width: 32rem;
     width: 100%;
     height: 100%;
+    transition: left 0.8s;
 
     &:hover {
         nav {
@@ -126,7 +127,101 @@
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-        opacity: 0;
+        opacity: 1;
         transition: 0.3s;
     }
+
+    .burgerIcon {
+        min-width: 6rem;
+        min-height: 6rem;
+        display: block;
+        border-radius: 50%;
+        background: $color-mint;
+        transition: 0.5s;
+        cursor: pointer;
+        position: fixed;
+        top: 1.5rem;
+        left: 1.5rem;
+        z-index: 100;
+        border: none;
+        opacity: 0.6;
+
+        span {
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translateX(-50%) translateY(-50%);
+            height: 0.4rem;
+            border-radius: 10%;
+            width: 3rem;
+            background: $color-white;
+            transition: background-color 0.5s;
+
+            &::before {
+                width: 3rem;
+                height: 0.4rem;
+                border-radius: 10%;
+                content: "";
+                display: block;
+                position: absolute;
+                background: $color-white;
+                transform: translateY(-10px);
+                transition: transform 0.5s;
+                transform-origin: 50% 50%;
+            }
+
+            &::after {
+                width: 3rem;
+                height: 0.4rem;
+                border-radius: 10%;
+                content: "";
+                display: block;
+                position: absolute;
+                background: $color-white;
+                transform: translateY(10px);
+                transition: transform 0.5s;
+                transform-origin: 50% 50%;
+            }
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &.open {
+            transform: rotate(180deg);
+
+            span {
+                background: transparent;
+
+                &::before {
+                    transform: rotate(45deg);
+                }
+
+                &::after {
+                    transform: rotate(-45deg);
+                }
+            }
+        }
+    }
+
+    @media (min-width: $min-medium) {
+        .img-bg {
+            opacity: 0;
+        }
+        .burgerIcon {
+            display: none;
+        }
+    }
+
+    @media (max-width: $medium) {
+        nav {
+            padding-top: 10rem;
+        }
+
+        &.close {
+            left: -65rem;
+        }
+    }
 }

src/conteiners/eventCard/EventCard.js

@@ -33,30 +33,35 @@ export class EventCard extends React.Component {
                                         }
                                     </p>
                                 </div>
-                                <div>
+                                {/*<div>
                                     <button>Register</button>
-                                </div>
+                                </div>*/}
                             </div>
                             <div className="bg-black"></div>
                         </div>
                     </div>            
                     <div className="container-wrap">
                         <div className="event-card-info">
-                            <p>{event.ageLimit}</p>
-                            <p>{event.aidStations}</p>
-                            <p>{event.awardMedals}</p>
-                            <p>{event.equipmentStorage}</p>
-                            <p>{event.halfmarathoneDistancePrice}</p>
-                            <p>{event.marathoneDistancePrice}</p>
-                            <p>{event.maximumTime}</p>
-                            <p>{event.overview}</p>
-                            <p>{event.parking}</p>
-                            <p>{event.refreshments}</p>
+                            <div>
+                                <p><span>Age limit: </span>{event.ageLimit}</p>
+                                <p>{event.aidStations}</p>
+                                <p>{event.awardMedals}</p>
+                                <p>{event.equipmentStorage}</p>
+                                <p>{event.halfmarathoneDistancePrice}</p>
+                                <p>{event.marathoneDistancePrice}</p>
+                                <p>{event.maximumTime}</p>
+                                <p>{event.overview}</p>
+                                <p>{event.parking}</p>
+                                <p>{event.refreshments}</p>
+
+                                {/*{event.contentVideo}
+                                {event.mainBannerPicture}
+                                {event.map}
+                                */}
+                            </div>
+                            <div>
 
-                            {/*{event.contentVideo}
-                             {event.mainBannerPicture}
-                             {event.map}
-                             */}
+                            </div>
                         </div>
                     </div>
                 </div>

src/conteiners/eventCard/eventCard.scss

@@ -8,20 +8,25 @@
 
     &-img {
         position: absolute;
-        top: 50%;
+        top: 0;
+        bottom: 0;
         left: 0;
         right: 0;
         z-index: -2;
-        transform: translateY(-50%);
 
         img {
-            width: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            bottom: 0;
+            right: 0;
+            transform: translate(-50%,-50%);
         }
     }
 
     &-title {
         position: relative;
-        padding: 6rem 0 4rem;
+        padding: 15rem 0 12rem;
         color: $color-white;
 
         .bg-black {
@@ -77,4 +82,16 @@
             margin-bottom: 1.5rem;
         }
     }
+
+    @media (max-width: $medium) {
+        &-title {
+            padding: 10rem 0 8rem;
+        }
+    }
+
+    @media (max-width: $small) {
+        &-title {
+            padding-bottom: 4rem;
+        }
+    }
 }

src/conteiners/home/Home.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import './home.scss';
+
 import logo from '../../assets/img/logo.png';
 import bgVideo from '../../assets/img/bg-video.mp4';
 import campsite from '../../assets/img/logos/Campsite_logo.svg';

src/conteiners/home/home.scss

@@ -82,7 +82,12 @@
     }
 
     @media (max-width: $medium) {
+        min-height: auto;
+        padding: 10rem 0;
+
         &-logo {
+            justify-content: center;
+
             img {
                 max-width: 20rem;
             }
@@ -98,6 +103,28 @@
 
         h1 {
             font-size: 3.2rem;
+            text-align: center;
+        }
+    }
+
+    @media (max-width: $small) {
+        padding: 5rem 0;
+
+        &-logo {
+            display: block;
+            text-align: center;
+
+            img {
+                max-width: 10rem;
+            }
+
+            h3 {
+                padding-left: 0;
+            }
+        }
+
+        h1 {
+            font-size: 2.4rem;
         }
     }
 }

src/index.scss

@@ -1,4 +1,5 @@
-@import "./styles/base.scss";
+@import "./styles/main.scss";
+
 body {
   margin: 0;
   -webkit-font-smoothing: antialiased;

src/reducers/combineReducers.js

@@ -2,7 +2,7 @@ import { combineReducers } from "redux";
 import { reducer as formReducer } from "redux-form";
 
 import adminMainPageReducer from "./adminMainPageReducer";
-//import Sidebar from "./show-sidebar";
+import sidebar from "./show-sidebar";
 import login from "./login";
 import registration from "./registration";
 import getEvents from "./getAllEvents";
@@ -12,5 +12,6 @@ export default combineReducers({
 	adminMainPageReducer,
     login,
     registration,
-    getEvents
+    getEvents,
+    sidebar
 });

src/reducers/show-sidebar.js

@@ -1,7 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    showSidebar: true
+    showSidebar: false
 }
 
 export default (state = initialState, action) => {

src/styles/base.scss

@@ -1,6 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700&display=swap');
-@import "variables";
-
 *,
 *:after,
 *:before {
@@ -118,48 +115,4 @@ button {
 	cursor: pointer;
     outline: none;
     box-shadow: none;
-}
-
-.button-position-bottom {
-	max-width: 1000px;
-	position: fixed;
-    bottom: 0.5rem;
-    left: 50%;
-    transform: translate(0% -50%);
-	transform: translateX(-50%);
-	z-index: 1;
-}
-
-.container {
-    &-wrap {
-        width: 100%;
-        padding-right: 5rem;
-        padding-left: 32rem;
-    }
-}
-
-.caption-page {
-    padding: 6rem 0;
-
-    h2 {
-        color: $color-white;
-        font-size: 5rem;
-    }
-}
-
-i {
-	font-family: 'FontAwesome';
-}
-
-.bg-black {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    background: $color-black;
-    opacity: 0.6;
-    z-index: 2;
 }

src/styles/custom.scss

@@ -0,0 +1,59 @@
+.button-position-bottom {
+	max-width: 1000px;
+	position: fixed;
+    bottom: 0.5rem;
+    left: 50%;
+    transform: translate(0% -50%);
+	transform: translateX(-50%);
+	z-index: 1;
+}
+
+.container {
+    &-wrap {
+        width: 100%;
+        padding-right: 2rem;
+        padding-left: 2rem;
+
+        @media (min-width: $min-medium) {
+            padding-right: 5rem;
+        padding-left: 32rem;
+        }
+    }
+}
+
+.caption-page {
+    padding: 10rem 0;
+
+    h2 {
+        color: $color-white;
+        font-size: 5rem;
+    }
+}
+
+i {
+	font-family: 'FontAwesome';
+}
+
+.bg-black {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: $color-black;
+    opacity: 0.6;
+    z-index: 2;
+}
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0,0,0,0);
+	border: 0;
+}

src/styles/main.scss

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700&display=swap');
+@import "variables";
+@import "base";
+@import "custom";