Pavel Popeskul / savelovsky

Go to a project
Toggle navigation Toggle navigation pinning
Pavel Popeskul
1c876fd4 1 parent b79d0285

mobile last

Expand all
Inline Side-by-side
Showing 24 changed files with 308 additions and 34 deletions
...@@ -20,5 +20,8 @@ ...@@ -20,5 +20,8 @@
20 "bootstrap": "^3.3.6", 20 "bootstrap": "^3.3.6",
21 "jquery": "^2.2.1", 21 "jquery": "^2.2.1",
22 "bootstrap-select": "1.12.2" 22 "bootstrap-select": "1.12.2"
23 + },
24 + "devDependencies": {
25 + "sidr": "^2.2.1"
23 } 26 }
24 } 27 }
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 <div class="header__nav "> 9 <div class="header__nav ">
10 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 10 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
11 11
12 + <div class="header__nav__wrapper">
12 <ul class="nav nav--header"> 13 <ul class="nav nav--header">
13 <li><a href="about.html">О совете депутатов</a></li> 14 <li><a href="about.html">О совете депутатов</a></li>
14 <li><a href="candidates.html">Кандидаты</a></li> 15 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -17,6 +18,11 @@ ...@@ -17,6 +18,11 @@
17 <li><a href="vote.html">Как проголосовать</a></li> 18 <li><a href="vote.html">Как проголосовать</a></li>
18 </ul> 19 </ul>
19 </div> 20 </div>
21 + </div>
22 +
23 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
24 +
25 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
20 26
21 <div class="header__do"> 27 <div class="header__do">
22 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 28 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 <div class="header__nav "> 23 <div class="header__nav ">
24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
25 25
26 + <div class="header__nav__wrapper">
26 <ul class="nav nav--header"> 27 <ul class="nav nav--header">
27 <li><a href="about.html">О совете депутатов</a></li> 28 <li><a href="about.html">О совете депутатов</a></li>
28 <li><a href="candidates.html">Кандидаты</a></li> 29 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -31,6 +32,11 @@ ...@@ -31,6 +32,11 @@
31 <li><a href="vote.html">Как проголосовать</a></li> 32 <li><a href="vote.html">Как проголосовать</a></li>
32 </ul> 33 </ul>
33 </div> 34 </div>
35 + </div>
36 +
37 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
38 +
39 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
34 40
35 <div class="header__do"> 41 <div class="header__do">
36 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 42 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 <div class="header__nav "> 23 <div class="header__nav ">
24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
25 25
26 + <div class="header__nav__wrapper">
26 <ul class="nav nav--header"> 27 <ul class="nav nav--header">
27 <li><a href="about.html">О совете депутатов</a></li> 28 <li><a href="about.html">О совете депутатов</a></li>
28 <li><a href="candidates.html">Кандидаты</a></li> 29 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -31,6 +32,11 @@ ...@@ -31,6 +32,11 @@
31 <li><a href="vote.html">Как проголосовать</a></li> 32 <li><a href="vote.html">Как проголосовать</a></li>
32 </ul> 33 </ul>
33 </div> 34 </div>
35 + </div>
36 +
37 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
38 +
39 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
34 40
35 <div class="header__do"> 41 <div class="header__do">
36 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 42 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
This diff is collapsed. Click to expand it.
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 <div class="header__nav "> 23 <div class="header__nav ">
24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
25 25
26 + <div class="header__nav__wrapper">
26 <ul class="nav nav--header"> 27 <ul class="nav nav--header">
27 <li><a href="about.html">О совете депутатов</a></li> 28 <li><a href="about.html">О совете депутатов</a></li>
28 <li><a href="candidates.html">Кандидаты</a></li> 29 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -31,6 +32,11 @@ ...@@ -31,6 +32,11 @@
31 <li><a href="vote.html">Как проголосовать</a></li> 32 <li><a href="vote.html">Как проголосовать</a></li>
32 </ul> 33 </ul>
33 </div> 34 </div>
35 + </div>
36 +
37 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
38 +
39 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
34 40
35 <div class="header__do"> 41 <div class="header__do">
36 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 42 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
21 <a href="/" class="icon icon__logo"></a> 21 <a href="/" class="icon icon__logo"></a>
22 </div> 22 </div>
23 23
24 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
25 +
26 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
27 +
24 <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div> 28 <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div>
25 29
26 <br> 30 <br>
...@@ -31,7 +35,7 @@ ...@@ -31,7 +35,7 @@
31 35
32 <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button> 36 <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button>
33 37
34 - <div class="promo__nav"> 38 + <div class="promo__nav header__nav__wrapper">
35 <ul class="nav nav--promo"> 39 <ul class="nav nav--promo">
36 <li><a href="about.html">О совете депутатов</a></li> 40 <li><a href="about.html">О совете депутатов</a></li>
37 <li><a href="#">Кандидаты</a></li> 41 <li><a href="#">Кандидаты</a></li>
......
This diff is collapsed. Click to expand it.
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 <div class="header__nav "> 23 <div class="header__nav ">
24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
25 25
26 + <div class="header__nav__wrapper">
26 <ul class="nav nav--header"> 27 <ul class="nav nav--header">
27 <li><a href="about.html">О совете депутатов</a></li> 28 <li><a href="about.html">О совете депутатов</a></li>
28 <li><a href="candidates.html">Кандидаты</a></li> 29 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -31,6 +32,11 @@ ...@@ -31,6 +32,11 @@
31 <li><a href="vote.html">Как проголосовать</a></li> 32 <li><a href="vote.html">Как проголосовать</a></li>
32 </ul> 33 </ul>
33 </div> 34 </div>
35 + </div>
36 +
37 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
38 +
39 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
34 40
35 <div class="header__do"> 41 <div class="header__do">
36 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 42 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 <div class="header__nav "> 23 <div class="header__nav ">
24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 24 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
25 25
26 + <div class="header__nav__wrapper">
26 <ul class="nav nav--header"> 27 <ul class="nav nav--header">
27 <li><a href="about.html">О совете депутатов</a></li> 28 <li><a href="about.html">О совете депутатов</a></li>
28 <li><a href="candidates.html">Кандидаты</a></li> 29 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -31,6 +32,11 @@ ...@@ -31,6 +32,11 @@
31 <li><a href="vote.html">Как проголосовать</a></li> 32 <li><a href="vote.html">Как проголосовать</a></li>
32 </ul> 33 </ul>
33 </div> 34 </div>
35 + </div>
36 +
37 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
38 +
39 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
34 40
35 <div class="header__do"> 41 <div class="header__do">
36 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 42 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 <div class="header__nav "> 9 <div class="header__nav ">
10 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> 10 <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
11 11
12 + <div class="header__nav__wrapper">
12 <ul class="nav nav--header"> 13 <ul class="nav nav--header">
13 <li><a href="about.html">О совете депутатов</a></li> 14 <li><a href="about.html">О совете депутатов</a></li>
14 <li><a href="candidates.html">Кандидаты</a></li> 15 <li><a href="candidates.html">Кандидаты</a></li>
...@@ -17,6 +18,11 @@ ...@@ -17,6 +18,11 @@
17 <li><a href="vote.html">Как проголосовать</a></li> 18 <li><a href="vote.html">Как проголосовать</a></li>
18 </ul> 19 </ul>
19 </div> 20 </div>
21 + </div>
22 +
23 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
24 +
25 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
20 26
21 <div class="header__do"> 27 <div class="header__do">
22 <button type="button" class="btn btn-default btn__attention">Поддержать</button> 28 <button type="button" class="btn btn-default btn__attention">Поддержать</button>
......
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
9 <a href="/" class="icon icon__logo"></a> 9 <a href="/" class="icon icon__logo"></a>
10 </div> 10 </div>
11 11
12 + <!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
13 +
14 + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
15 +
12 <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div> 16 <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div>
13 17
14 <br> 18 <br>
...@@ -19,7 +23,7 @@ ...@@ -19,7 +23,7 @@
19 23
20 <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button> 24 <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button>
21 25
22 - <div class="promo__nav"> 26 + <div class="promo__nav header__nav__wrapper">
23 <ul class="nav nav--promo"> 27 <ul class="nav nav--promo">
24 <li><a href="about.html">О совете депутатов</a></li> 28 <li><a href="about.html">О совете депутатов</a></li>
25 <li><a href="#">Кандидаты</a></li> 29 <li><a href="#">Кандидаты</a></li>
......
This diff is collapsed. Click to expand it.
1 +
2 +$(document).ready(function() {
3 + $('#right-menu').sidr({
4 + name: 'sidr-right',
5 + side: 'right',
6 + source: '.header__nav__wrapper',
7 + onOpen: function() {
8 + $('.mobile-menu').addClass('active');
9 + },
10 + onClose: function() {
11 + $('.mobile-menu').removeClass('active');
12 + }
13 + });
14 +});
15 +
16 +$(document).mouseup(function (e){
17 + var container = $("#sidr-right");
18 +
19 + if (!container.is(e.target)
20 + && container.has(e.target).length === 0) {
21 + $.sidr('close', 'sidr-right');
22 + }
23 +});
...\ No newline at end of file ...\ No newline at end of file
......
1 1
2 .btn { 2 .btn {
3 outline: none; 3 outline: none;
4 + white-space: normal;
4 5
5 &:active, &:focus { 6 &:active, &:focus {
6 outline: none; 7 outline: none;
...@@ -17,13 +18,16 @@ ...@@ -17,13 +18,16 @@
17 border: 1px solid #fb1e42; 18 border: 1px solid #fb1e42;
18 color: white; 19 color: white;
19 20
20 - &:hover, &:focus { 21 + &:hover, &:focus, &:active {
21 background-color: #fb1e42; 22 background-color: #fb1e42;
22 border: 1px solid #fb1e42; 23 border: 1px solid #fb1e42;
23 color: white; 24 color: white;
25 + }
24 26
27 + &:hover {
25 &:active { 28 &:active {
26 background-color: #fb1e42; 29 background-color: #fb1e42;
30 + border: 1px solid #fb1e42;
27 color: white; 31 color: white;
28 } 32 }
29 } 33 }
...@@ -32,13 +36,16 @@ ...@@ -32,13 +36,16 @@
32 background-color: #125f8e; 36 background-color: #125f8e;
33 border: 1px solid #125f8e; 37 border: 1px solid #125f8e;
34 38
35 - &:hover, &:focus { 39 + &:hover, &:focus, &:active {
36 background-color: #125f8e; 40 background-color: #125f8e;
37 border: 1px solid #125f8e; 41 border: 1px solid #125f8e;
38 color: white; 42 color: white;
43 + }
39 44
45 + &:hover {
40 &:active { 46 &:active {
41 background-color: #125f8e; 47 background-color: #125f8e;
48 + border: 1px solid #125f8e;
42 color: white; 49 color: white;
43 } 50 }
44 } 51 }
...@@ -56,24 +63,22 @@ ...@@ -56,24 +63,22 @@
56 letter-spacing: 0.09em; 63 letter-spacing: 0.09em;
57 transition: all 0.2s ease; 64 transition: all 0.2s ease;
58 text-transform: uppercase; 65 text-transform: uppercase;
59 - 66 + @media(@xs){
60 - &:hover { 67 + width: 100%;
61 - background-color: rgba(18, 95, 142, 0.8); 68 + font-size: 12px;
62 - color: white; 69 + padding: 10px 0px;
63 } 70 }
64 71
65 - &:focus { 72 + &:hover, &:focus, &:active {
66 - text-decoration: none; 73 + background-color: rgba(18, 95, 142, 0.8);
67 - background-color: #125f8e; 74 + border: 1px solid rgba(18, 95, 142, 0.8);
68 color: white; 75 color: white;
69 } 76 }
70 77
78 + &:hover {
71 &:active { 79 &:active {
72 background-color: rgba(18, 95, 142, 0.8); 80 background-color: rgba(18, 95, 142, 0.8);
73 - color: white; 81 + border: 1px solid rgba(18, 95, 142, 0.8);
74 -
75 - &:focus {
76 - background-color: rgba(18, 95, 142, 0.8);
77 color: white; 82 color: white;
78 } 83 }
79 } 84 }
...@@ -91,8 +96,18 @@ ...@@ -91,8 +96,18 @@
91 background: #fb1e42; 96 background: #fb1e42;
92 color: white; 97 color: white;
93 98
94 - &:hover, &:focus { 99 + &:hover, &:focus, &:active {
100 + background-color: #fb1e42;
101 + border: 1px solid #fb1e42;
102 + color: white;
103 + }
104 +
105 + &:hover {
106 + &:active {
107 + background-color: #fb1e42;
108 + border: 1px solid #fb1e42;
95 color: white; 109 color: white;
96 } 110 }
97 } 111 }
112 + }
98 } 113 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
2 .content { 2 .content {
3 min-height: 500px; 3 min-height: 500px;
4 padding: 30px 0px; 4 padding: 30px 0px;
5 + @media(@md){
6 + padding: 20px 0px;
7 + min-height: inherit;
8 + }
5 9
6 &__container { 10 &__container {
7 .container(); 11 .container();
...@@ -15,12 +19,22 @@ ...@@ -15,12 +19,22 @@
15 height: 150px; 19 height: 150px;
16 position: relative; 20 position: relative;
17 overflow: hidden; 21 overflow: hidden;
22 + @media(@sm){
23 + height: inherit;
24 + width: 100%;
25 + }
18 26
19 img { 27 img {
20 position: absolute; 28 position: absolute;
21 left: 50%; 29 left: 50%;
22 top: 50%; 30 top: 50%;
23 transform: translate(-50%, -50%); 31 transform: translate(-50%, -50%);
32 + @media(@sm){
33 + position: relative;
34 + left: inherit;
35 + top: initial;
36 + transform: none;
37 + }
24 } 38 }
25 } 39 }
26 } 40 }
...@@ -186,7 +200,6 @@ ...@@ -186,7 +200,6 @@
186 } 200 }
187 } 201 }
188 202
189 -
190 .progress { 203 .progress {
191 position: relative; 204 position: relative;
192 205
......
1 1
2 body, html{ 2 body, html{
3 - min-width: 970px; 3 + //min-width: 970px;
4 } 4 }
5 5
6 .head-h1 { 6 .head-h1 {
......
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
8 //background-color: #D7D7D7; 8 //background-color: #D7D7D7;
9 background: #125f8e; 9 background: #125f8e;
10 color: white; 10 color: white;
11 + @media(@md){
12 + padding: 20px 0px;
13 + }
11 14
12 &__container { 15 &__container {
13 .container(); 16 .container();
...@@ -15,14 +18,19 @@ ...@@ -15,14 +18,19 @@
15 18
16 &__left { 19 &__left {
17 float: left; 20 float: left;
21 + @media(@md){
22 + width: 100%;
23 + text-align: center;
24 + margin-bottom: 20px;
25 + }
18 } 26 }
19 27
20 &__right { 28 &__right {
21 float: right; 29 float: right;
30 + @media(@md){
31 + width: 100%;
32 + text-align: center;
22 } 33 }
23 -
24 - p {
25 - //color: ;
26 } 34 }
27 } 35 }
28 36
......
...@@ -14,20 +14,37 @@ ...@@ -14,20 +14,37 @@
14 14
15 &__logo { 15 &__logo {
16 .make-xs-column(2); 16 .make-xs-column(2);
17 + width: initial;
17 } 18 }
18 19
19 &__title { 20 &__title {
20 font-size: 18px; 21 font-size: 18px;
21 font-weight: bold; 22 font-weight: bold;
22 margin-top: 10px; 23 margin-top: 10px;
24 + @media(@md){
25 + font-size: 14px;
26 + margin-top: 0;
27 + }
23 } 28 }
24 29
25 &__nav { 30 &__nav {
26 .make-xs-column(18.5); 31 .make-xs-column(18.5);
32 + @media(@md){
33 + float: none;
34 + width: 100%;
35 + padding: 0px 60px 0px 67px;
36 + }
37 +
38 + &__wrapper {
39 + @media(@md){
40 + display: none;
41 + }
42 + }
27 } 43 }
28 44
29 &__do { 45 &__do {
30 - .make-xs-column(3.5); 46 + .make-md-column(24);
47 + .make-lg-column(3.5);
31 margin-top: 15px; 48 margin-top: 15px;
32 text-align: right; 49 text-align: right;
33 50
...@@ -37,6 +54,76 @@ ...@@ -37,6 +54,76 @@
37 } 54 }
38 } 55 }
39 56
57 +.mobile-menu {
58 + position: absolute;
59 + top: 20px;
60 + right: 10px;
61 + width: 43px;
62 + height: 40px;
63 + color: #345;
64 + border: 2px solid white;
65 + background: #125f8e;
66 + z-index: 2;
67 + cursor: pointer;
68 + font-size: 20px;
69 + display: none;
70 +
71 + @media(@md){
72 + display: block;
73 + }
74 +
75 + span {
76 + position: relative;
77 + background-color: white;
78 + height: 2px;
79 + display: block;
80 + width: 22px;
81 + margin: 17px auto 0;
82 + //transition: all 0.4s;
83 + //transition-delay: 0.3s;
84 +
85 + &:before,
86 + &:after {
87 + content: '';
88 + position: absolute;
89 + display: block;
90 + width: 20px;
91 + height: 0;
92 + left: 1px;
93 + top: 50%;
94 + margin-top: -7px;
95 + //transition: all 0.3s 0.3s;
96 + }
97 +
98 + &:before {
99 + box-shadow: 0 14px 0 1px white;
100 + }
101 +
102 + &:after {
103 + box-shadow: 0 0 0 1px white;
104 + }
105 + }
106 +
107 + &.active {
108 + span {
109 + background-color: transparent;
110 +
111 + &:before {
112 + transform: rotate(-45deg);
113 + }
114 +
115 + &:after {
116 + transform: rotate(45deg);
117 + }
118 +
119 + &:before,
120 + &:after {
121 + margin-top: 0;
122 + box-shadow: 0 0 0 1px white;
123 + }
124 + }
125 + }
126 +}
40 127
41 .nav { 128 .nav {
42 &--promo { 129 &--promo {
...@@ -89,3 +176,5 @@ ...@@ -89,3 +176,5 @@
89 } 176 }
90 } 177 }
91 } 178 }
179 +
180 +
......
...@@ -6,5 +6,10 @@ ...@@ -6,5 +6,10 @@
6 width: 60px; 6 width: 60px;
7 height: 68px; 7 height: 68px;
8 background-size: cover; 8 background-size: cover;
9 +
10 + @media(@md){
11 + width: 45px;
12 + height: 50px;
13 + }
9 } 14 }
10 } 15 }
...\ No newline at end of file ...\ No newline at end of file
......
1 @import "../../bower_components/bootstrap/less/bootstrap"; 1 @import "../../bower_components/bootstrap/less/bootstrap";
2 @import "../../bower_components/bootstrap-select/less/bootstrap-select"; 2 @import "../../bower_components/bootstrap-select/less/bootstrap-select";
3 +@import (inline)"../../bower_components/sidr/dist/stylesheets/jquery.sidr.dark.css";
3 4
4 @import "fonts"; 5 @import "fonts";
5 @import "variables"; 6 @import "variables";
......
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
3 text-align: center; 3 text-align: center;
4 padding: 30px 0px; 4 padding: 30px 0px;
5 color: #125f8e; 5 color: #125f8e;
6 + @media(@md){
7 + padding: 0;
8 + }
6 9
7 &__row { 10 &__row {
8 .row; 11 .row;
...@@ -11,19 +14,36 @@ ...@@ -11,19 +14,36 @@
11 &__logo { 14 &__logo {
12 margin-bottom: 30px; 15 margin-bottom: 30px;
13 display: inline-block; 16 display: inline-block;
17 + @media(@md){
18 + margin-bottom: 10px;
19 + }
14 } 20 }
15 21
16 &__title { 22 &__title {
17 .head-h1; 23 .head-h1;
24 + @media(@md){
25 + font-size: 20px;
26 + }
27 + @media(@xs){
28 + font-size: 18px;
29 + }
18 } 30 }
19 31
20 &__nav { 32 &__nav {
21 margin-top: 30px; 33 margin-top: 30px;
34 + @media(@md){
35 + display: block;
36 + }
22 37
23 li { 38 li {
24 - margin: 0px 10px; 39 + margin: 0px 10px 10px 10px;
40 + @media(@xs){
41 + width: 100%;
42 + margin: 0px 0px 10px 0px;
43 + }
25 44
26 a { 45 a {
46 + display: inline-block;
27 color: #125f8e; 47 color: #125f8e;
28 font-size: 19px; 48 font-size: 19px;
29 border-bottom: 1px rgba(18, 95, 142, 0.5) dashed; 49 border-bottom: 1px rgba(18, 95, 142, 0.5) dashed;
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 27
28 // Large screen / wide desktop 28 // Large screen / wide desktop
29 //** Deprecated `@screen-lg` as of v3.0.1 29 //** Deprecated `@screen-lg` as of v3.0.1
30 -@screen-lg: 970px; 30 +@screen-lg: 990px;
31 @screen-lg-min: @screen-lg; 31 @screen-lg-min: @screen-lg;
32 //** Deprecated `@screen-lg-desktop` as of v3.0.1 32 //** Deprecated `@screen-lg-desktop` as of v3.0.1
33 @screen-lg-desktop: @screen-lg-min; 33 @screen-lg-desktop: @screen-lg-min;
...@@ -58,12 +58,12 @@ ...@@ -58,12 +58,12 @@
58 //## Define the maximum width of `.container` for different screen sizes. 58 //## Define the maximum width of `.container` for different screen sizes.
59 59
60 // Small screen / tablet 60 // Small screen / tablet
61 -@container-tablet: (950px + @grid-gutter-width); 61 +@container-tablet: (100%);
62 //** For `@screen-sm-min` and up. 62 //** For `@screen-sm-min` and up.
63 @container-sm: @container-tablet; 63 @container-sm: @container-tablet;
64 64
65 // Medium screen / desktop 65 // Medium screen / desktop
66 -@container-desktop: (950px + @grid-gutter-width); 66 +@container-desktop: (100%);
67 //** For `@screen-md-min` and up. 67 //** For `@screen-md-min` and up.
68 @container-md: @container-desktop; 68 @container-md: @container-desktop;
69 69
......
...@@ -6,17 +6,29 @@ ...@@ -6,17 +6,29 @@
6 padding: 20px 20px; 6 padding: 20px 20px;
7 7
8 &__map { 8 &__map {
9 - .make-xs-column(10); 9 + .make-xs-column(24);
10 + .make-lg-column(10);
11 + @media(@md){
12 + padding: 0;
13 + }
10 14
11 &__iframe { 15 &__iframe {
12 width: 100%; 16 width: 100%;
13 height: 200px; 17 height: 200px;
18 + @media(@md){
19 + height: 300px;
20 + }
14 } 21 }
15 } 22 }
16 23
17 &__description { 24 &__description {
18 - .make-xs-column(12); 25 + .make-xs-column(24);
26 + .make-lg-column(12);
19 margin-top: 80px; 27 margin-top: 80px;
28 + @media(@md){
29 + margin-top: 20px;
30 + padding: 0;
31 + }
20 } 32 }
21 33
22 &__label { 34 &__label {
...@@ -57,8 +69,7 @@ ...@@ -57,8 +69,7 @@
57 } 69 }
58 70
59 &__block { 71 &__block {
60 - float: left; 72 + margin: 0px -10px;
61 - margin: 0px -20px;
62 margin-bottom: 20px; 73 margin-bottom: 20px;
63 74
64 &:last-child { 75 &:last-child {
...@@ -68,28 +79,64 @@ ...@@ -68,28 +79,64 @@
68 79
69 &__profile { 80 &__profile {
70 .make-xs-column(24); 81 .make-xs-column(24);
82 + padding: 0;
71 margin-bottom: 20px; 83 margin-bottom: 20px;
84 + @media(@sm){
85 + padding: 0;
86 + }
72 87
73 &__wrapper { 88 &__wrapper {
74 - .make-xs-column(15); 89 + .make-xs-column(24);
90 + .make-md-column(15);
75 } 91 }
76 92
77 &__img { 93 &__img {
78 - .make-xs-column(9); 94 + .make-xs-column(24);
95 + .make-md-column(9);
96 + padding: 0;
97 + @media(@sm){
98 + text-align: center;
99 + //padding: 0;
100 + }
79 } 101 }
80 102
81 &__description { 103 &__description {
82 - .make-xs-column(15); 104 + .make-xs-column(24);
105 + .make-md-column(15);
106 + padding: 0;
107 + @media(@sm){
108 + //padding: 0;
109 + }
83 110
84 &__wrapper { 111 &__wrapper {
85 .make-xs-column(15); 112 .make-xs-column(15);
86 } 113 }
114 +
115 + p {
116 + @media(@sm){
117 + font-size: 18px;
118 + }
119 + }
87 } 120 }
88 } 121 }
89 122
90 &__description { 123 &__description {
91 - .make-xs-column(8); 124 + .make-xs-column(24);
92 .pull-right; 125 .pull-right;
126 + @media(@sm){
127 + padding: 0;
128 + }
129 +
130 + p {
131 + @media(@sm){
132 + font-size: 18px;
133 + }
134 + }
135 +
136 + &__wrapper {
137 + .make-sm-column(24);
138 + .make-md-column(9);
139 + }
93 } 140 }
94 } 141 }
95 142
......