Исправления CSS и макросов

cinder.tw2

@@ -97,8 +97,7 @@ cinder_equip.tw2
 <section class="scene sect-cont">
 <div class="cont-w-nav">
 <div class="walk-nav">
-<span class="w-u" title="Зал">[[Зал->The hall]]</span>
+<span class="w-u" title="Зал">[[Зал->The hall]]</span><span class="w-r inactive" title="Право">Идти на юг</span><span class="w-l inactive" title="Left">Налево</span><span class="w-d inactive" title="Вниз">Спуститься</a>
-<span class="w-r inactive" title="Право">Идти на юг</span><span class="w-l inactive" title="Left">Налево</span><span class="w-d inactive" title="Вниз">Спуститься</a>
 </div>
 </div> 
 (if: $hasMap is "yes")[
@@ -470,8 +469,7 @@ cinder_equip.tw2
 [[Идти на балкон->balcony-chand]]
 ](replace: ?KBwindow)[<span class="w-r" title="Right">[[balcony-chand]]</span>]
 ]]
-]
+](else:)[
-(else:)[
 <div class="cont-w-nav">
 <div class="walk-nav no-rotate">
 <span class="w-u" title="Up">(link: "walk")[(if: $door is 0)[(goto: "North of KB")](else:)[(goto: "NKB-door-c")]]</span>(if: $KBseen is "balcony")[<span class="w-r" title="Right">[[Балкон->The Balcony]]</span>](else:)[|KBwindow>[<span class="w-r inactive" title="Right">Go right</span>]]<span class="w-l inactive" title="Left">Go left</span><span class="w-d" title="Down">[[tunnel-r]]</a>
@@ -511,8 +509,7 @@ cinder_equip.tw2
 </section>
 <section class="scene">
 <div class="sect-cont">
-(if: $passageFound is 0)
+(if: $passageFound is 0)|beddesc>[
-|beddesc>[
 <div class="cont-w-nav">
 <div class="walk-nav">
 <span class="w-u inactive" title="Up">Up</span><span class="w-r" title="Right">[[Игроки->card-players]]</span><span class="w-l" title="Left">[[Южный угол->South Corner]]</span><span class="w-d inactive" title="Down">Go Down</a>
@@ -525,17 +522,13 @@ cinder_equip.tw2
 </div>
 </div>
 <span class="block">Около кровати спрятан проход.</span>
-]]
+]]](else:)[
-]
-(else:)[
 <div class="cont-w-nav">
 <div class="walk-nav">
 <span class="w-u" title="Up">[[Тайный проход->Secret tunnel]]</span><span class="w-r" title="Right">[[Игроки->card-players]]</span><span class="w-l" title="Left">[[Южный угол->South Corner]]</span><span class="w-d inactive" title="Down">Go Down</a>
 </div>
 </div>
-]
+]|stooldesc>[](link: "Осмотреть стулья")[(replace: ?stooldesc)[<span class="block">Места для зрителей. Очаровательно.</span>]]
-|stooldesc>[]
-(link: "Осмотреть стулья")[(replace: ?stooldesc)[<span class="block">Места для зрителей. Очаровательно.</span>]]
 (set: $mapPos to "qb")
 (if: $hasMap is "yes")[
 []<maplink|

cinder_css.tw2

@@ -1,4 +1,15 @@
-::StoryCSS [stylesheet]
+::StoryCSS [scss stylesheet]
+@mixin transform($transforms) {
+	   -moz-transform: $transforms;
+	     -o-transform: $transforms;
+	    -ms-transform: $transforms;
+	-webkit-transform: $transforms;
+          transform: $transforms;
+}
+// rotate
+@mixin rotate ($deg) {
+  @include transform(rotate(#{$deg}deg));
+}
 body {margin:0;}
 
 /*Supress page-to-page transitions*/
@@ -32,9 +43,11 @@ body {margin:0;}
 }
 
 .pull-right {
-	float: right;}
+  float: right;
+}
 .pull-left {
-	float: left;}
+  float: left;
+}
 .hidden {
   display: none;
 }
@@ -62,29 +75,37 @@ div.sect-img img{
 }/*tw-passage has pre-wrap as its setting, creates whitespace*/
 
 .row {
-	display: table-row; 
+  display: block;
   width: 100%;
-}
+  margin: 0;
-.col400 {
+  line-height: 0;
-    flex: 1 auto;
+  tw-link,
-}
+  .link,
-.col240 {
+  .enchantment-link,
-    flex: 1 240px;
+  tw-hook {
-}
-.row tw-link, .row .link, .row .enchantment-link {
     margin: 0;
     padding: 0;
     line-height: 0;
     border: 0;
   }
-
+  &::before,
-.row::before, .row::after {
+  &::after {
     display: table;
     line-height: 0;
   }
-.row::after {
+  &::after {
     clear: both;
   }
+}
+.col400 {
+  float: left;
+  width: 60%;
+}
+.col240 {
+  float: left;
+  width: 20%;
+}
+
 .btn100 {
   height: 100px;
   display:block;
@@ -108,17 +129,21 @@ a.btn:visited {
   color: #ffffff;
 }
 
-.enchantment-link:hover, tw-link:hover, .btn:hover {
+.enchantment-link,
+tw-link,
+.btn {
+  &:hover {
     background-color: #be1a00;
     border-color: #be1a00;
     color: #fff;
     text-decoration: none;
   }
-.enchantment-link:focus, tw-link:focus, .btn:focus,
+  &:focus,
-.enchantment-link:active, tw-link:active, .btn:active,
+  &:active,
-.enchantment-link:visited, tw-link:visited, .btn:visited {
+  &:visited {
     color: #000;
   }
+}
 .s-dark tw-link, 
 .s-dark .link, 
 .s-dark .enchantment-link {
@@ -143,9 +168,7 @@ a.btn:visited {
     border: 0;
 }
 
-.visited {
+.visited,
-	color: #fff;
-}
 .visited:hover {
   color: #fff;
 }
@@ -160,79 +183,52 @@ a.btn:visited {
 .walk-nav {
   width:200px;
   height:200px;
-	transform:rotate(45deg);
-	-moz-transform:rotate(45deg);
-	-webkit-transform:rotate(45deg);
-	-o-transform:rotate(45deg);
-	-ms-transform:rotate(45deg);
-	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
   line-height: 0;
-}
+  @include rotate(45);
-.no-rotate {
+  span,
-	transform:rotate(0deg);
+  tw-link {
-	-moz-transform:rotate(0deg);
-	-webkit-transform:rotate(0deg);
-	-o-transform:rotate(0deg);
-	-ms-transform:rotate(0deg);
-	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-}
-
-.walk-nav tw-expression tw-link,
-.walk-nav tw-link{
     display: inline-block;
     width: 100px;
     height:100px;
     padding: 0;
     margin: 0;
     border: none;
+    overflow: hidden;
+  }
+}
+.no-rotate {
+  @include rotate(0);
+}
+
+.walk-nav tw-expression tw-link,
+.walk-nav tw-link{
   background-color: #000;
   background: url(walk-arrow.svg) 0 0 no-repeat;
   text-indent: -10000px;
-	overflow: hidden;
   cursor: pointer;
-}
+  &:hover {
-.walk-nav tw-expression tw-link:hover,
-.walk-nav tw-link:hover {
     background-color: #cadbaa;
     background: url(walk-arrow-h.svg) 0 0 no-repeat;
   }
+}
 .walk-nav .w-r tw-expression tw-link,
 .walk-nav .w-r tw-link,
 .walk-nav .inactive.w-r {
-	transform:rotate(90deg);
+  @include rotate(90);
-	-moz-transform:rotate(90deg);
-	-webkit-transform:rotate(90deg);
-	-o-transform:rotate(90deg);
-	-ms-transform:rotate(90deg);
-	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 }
 .walk-nav .w-d tw-expression tw-link,
 .walk-nav .w-d tw-link, 
 .walk-nav .inactive.w-d{
-	transform:rotate(180deg);
+  @include rotate(180);
-	-moz-transform:rotate(180deg);
-	-webkit-transform:rotate(180deg);
-	-o-transform:rotate(180deg);
-	-ms-transform:rotate(180deg);
-	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 }
 .walk-nav .w-l tw-expression tw-link,
 .walk-nav .w-l tw-link,
 .walk-nav .inactive.w-l {
-	transform:rotate(270deg);
+  @include rotate(270);
-	-moz-transform:rotate(270deg);
-	-webkit-transform:rotate(270deg);
-	-o-transform:rotate(270deg);
-	-ms-transform:rotate(270deg);
-	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 .walk-nav .inactive {
   background: url(walk-arrow-off.svg) 0 0 no-repeat;
-	display: inline-block;
-	width: 100px;
-	height:100px;
   text-indent: -10000px;
-	overflow: hidden;
 } 
 .walk-nav .inactive:hover {
   background: url(walk-arrow-off.svg) 0 0 no-repeat;
@@ -265,7 +261,6 @@ a.btn:visited {
   background-color: #39d2fe;
 }
 
-
 /*Inventory*/
 .inventory-content {
   width: 210px;