some views refactoring and nearly complete event header

app/assets/stylesheets/web/application.scss

@@ -5,6 +5,7 @@
 // =require foundation
 // =require web/foundation/application
 // =require web/welcome
+// =require web/events
 // =require web/news
 @import "foundation/functions";
 
@@ -13,23 +14,31 @@
   src: font-url('PFSquareSansPro-Medium.ttf');
 }
 @font-face {
-  font-family: 'mic-beau-reg';
-  src: font-url('PFBeauSansPro-Reg.ttf');
+  font-family: 'mic-square-thin';
+  src: font-url('PFSquareSansPro-Thin.ttf');
 }
 @font-face {
-  font-family: 'mic-thin';
-  src: font-url('PFSquareSansPro-Thin.ttf');
+  font-family: 'mic-square-reg';
+  src: font-url('PFSquareSansPro-Regular.ttf');
+}
+@font-face {
+  font-family: 'mic';
+  src: font-url('PFBeauSansPro-Light.ttf');
+}
+@font-face {
+  font-family: 'mic-beau-sebold';
+  src: font-url('PFBeauSansPro-SeBold.ttf');
+}
+@font-face {
+  font-family: 'mic-beau-reg';
+  src: font-url('PFBeauSansPro-Reg.ttf');
 }
 h1,h2,h3,h4,h5,h6 {
   font-family: 'mic-bold';
 }
 h3,h4,h5 {
   margin: 0.5rem 0;
 }
-@font-face {
-  font-family: 'mic';
-  src: font-url('PFBeauSansPro-Light.ttf');
-}
 body {
   font-family: 'mic';
   color: #333333;

app/assets/stylesheets/web/elements.scss

@@ -1,3 +1,47 @@
+$button-bg-color: #FC9727;
+$button-bg-hover: #FC9727;
+$button-font-family: 'mic-beau-reg';
+
+@import "foundation/components/buttons";
+
+// h1,h2,h3,h4,h5,h6 надо тоже сюда вытащить
+.mic-label-black {
+		background-color: #FC9727;
+		color: #333;
+		display: inline-block;
+		padding: 3px 20px 0 18px;
+		font-family: 'mic-square-reg';
+}
+
+
+// это плейсфолдер, класс такой не генерится
+%mic-button {
+		@extend .button;
+		padding: rem-calc(13) rem-calc(26);
+		font-size: rem-calc(18);
+}
+.mic-flat-button {
+		@extend %mic-button;
+		&:active {
+				background-color: #D4611B;
+		}
+}
+
+.mic-press-button {
+		@extend %mic-button;
+		$press-height: 7px;
+		border: none;
+		box-shadow: 0 $press-height #D4611B;
+		&:focus {
+				outline: none
+		}
+		&:active {
+				box-shadow: 0 0px #D4611B;
+				transform: translateY($press-height);
+				-ms-transform: translateY($press-height);
+		}
+}
+
 .mic-event {
 		text-align: justify;
 		img {

app/assets/stylesheets/web/events.scss

@@ -0,0 +1,66 @@
+@import "mixins";
+@import "elements";
+@import "icons";
+
+$left-header-margin: 10px;
+.event-container {
+		padding-top: 24px;
+    font-family: 'mic-square-reg';
+}
+.event-header {
+		color: white;
+		max-width: 80rem;
+		.title {
+				margin-left: $left-header-margin/2;
+				color: #ffffff;
+				font-size: 56px;
+				font-family: 'mic-square-reg';
+		}
+		.when-and-where {
+				margin-left: - $left-header-margin;
+				margin-top: 11px;
+				.mic-label-black {
+						font-size: rem-calc(30);
+						width: 100%;
+				}
+				.labels, .texts {
+						display: inline-block;
+				}
+				.where {
+						margin-top: 12px;
+				}
+		}
+		.event-label-text {
+				display: inline-block;
+				font-size: rem-calc(30);
+				margin-left: 35px;
+				vertical-align: baseline;
+		}
+		.event-lead {
+				margin-top: 60px;
+				margin-left: $left-header-margin;
+				font-family: mic;
+				font-size: rem-calc(20);
+				text-align: justify;
+		}
+		.organizers {
+				font-family: mic;
+				margin-top: 48px;
+				margin-left: 2rem;
+				.organizers-title {
+						font-size: rem-calc(28);
+				}
+				.organizers-names {
+						margin-top: 1rem;
+						margin-left: 2rem;
+				}
+				.organizer {
+						font-size: rem-calc(24);
+						line-height: rem-calc(24);
+				}
+		}
+		.join-button {
+				position: absolute;
+				bottom: 0;
+		}
+}

app/assets/stylesheets/web/foundation/main_navbar.scss

@@ -1,7 +1,7 @@
 @import "../mixins";
 
 .main-navbar-container {
-  $topbar-height: rem-calc(97);
+  $topbar-height: rem-calc(86);
   $topbar-bg-color: white;
   $topbar-bg: $topbar-bg-color;
 
@@ -95,6 +95,7 @@
     height: rem-calc(20);
     width: $el-width;
     position: relative;
+		margin-right: 20px;
     .banner {
       width: $el-width;
       background-image: image-url('svg-navbar-fallback.png');
@@ -117,15 +118,17 @@
     }
   }
   .site-logo {
-    $el-width: rem-calc(255);
+    $el-min-width: rem-calc(255);
+    $el-width: 20%;
 
     background: image-url('topbar-logo.png') no-repeat;
     height: rem-calc(80);
-    width: $el-width;
+    min-width: $el-min-width;
+		width: $el-width;
     display: inline-block;
     position: absolute;
-    left: 50%;
-    margin-left: -$el-width/2;
+    left: 50% - $el-width/2;
+		margin-top: 5px;
   }
   a {
     font-family: 'mic-bold';

app/assets/stylesheets/web/icons.scss

@@ -0,0 +1,37 @@
+// нужно сюда ещё иконки из хежера и футера
+.icon-calendar {
+		width: 18px;
+		height: 18px;
+		display: inline-block;
+    background: image-url("calendar-icon.png");
+}
+
+.icon-addition {
+    background: image-url("addon.png");
+		width: 64px;
+		height: 60px;
+}
+
+.icon-download {
+    background: image-url("download-icon.png");
+		width: 14px;
+		height: 16px;
+}
+
+.icon-eye {
+    background: image-url("eye-icon.png");
+		width: 29px;
+		height: 19px;
+}
+
+.icon-tags {
+    background: image-url("tag-icon.png");
+		width: 27px;
+		height: 20px;
+}
+
+.icon-human {
+    background: image-url("human-icon.png");
+		width: 17px;
+		height: 23px;
+}

app/assets/stylesheets/web/news.scss

@@ -1,43 +1,6 @@
 @import "mixins";
 @import "elements";
-
-// сделать файл icons
-.icon-calendar {
-		width: 18px;
-		height: 18px;
-		display: inline-block;
-    background: image-url("calendar-icon.png");
-}
-
-.icon-addition {
-    background: image-url("addon.png");
-		width: 64px;
-		height: 60px;
-}
-
-.icon-download {
-    background: image-url("download-icon.png");
-		width: 14px;
-		height: 16px;
-}
-
-.icon-eye {
-    background: image-url("eye-icon.png");
-		width: 29px;
-		height: 19px;
-}
-
-.icon-tags {
-    background: image-url("tag-icon.png");
-		width: 27px;
-		height: 20px;
-}
-
-.icon-human {
-    background: image-url("human-icon.png");
-		width: 17px;
-		height: 23px;
-}
+@import "icons";
 
 #news-show {
 		margin-top: 50px;

app/assets/stylesheets/web/welcome.scss

@@ -1,4 +1,5 @@
 @import "mixins";
+@import "icons";
 
 .welcome {
 		h3,h4,h5 {

app/views/web/events/show.html.haml

@@ -0,0 +1,43 @@
+.event-container{style: "background-color: grey"}
+  .container
+    .event-header.row.large-collapse{ "data-equalizer" => "" }
+      %h2.title Молодёжная Лесная Школа
+      .small-8.columns{ "data-equalizer-watch" => "" }
+        .when-and-where
+          .labels
+            .when
+              .mic-label-black
+                Когда:
+            .where
+              .mic-label-black
+                Где:
+          .texts
+            .when
+              .event-label-text
+                22-26 августа 2015г.
+            .where
+              .event-label-text
+                Санаторий "Чайка"
+        .event-lead
+          Последней, но крайней неожиданной новостью для нашей общины оказалась
+          полнейшая неготовность с приходу белой лихорадки. Уж казалось бы,
+          кризис пережили как жеребята, а тут такой конфуз!
+          %br
+          Мы с Палычем как полагали - от недостатка это моральных ценностей
+          и попрания всего святого. На жаваскрипте кодить не стоило, вот что!
+          %br
+          А то нынешней молодежы всё нипочем, тащат туда, про что приличные
+          люди и говорить порой стесняются, и окромя явы поганой не туда ничего не кладут,
+          да и то мерзко.
+      .small-3.columns{ "data-equalizer-watch" => "" }
+        .organizers
+          .organizers-title
+            Организаторы:
+          .organizers-names
+            - 3.times do
+              .organizer
+                Павел Калашников
+        .join
+          -#%a.join-button.mic-press-button{ href: "#" }
+          %button.join-button.mic-press-button
+            Учавствовать