_article.css.scss in styleus-0.0.5

- old
+ new

@@ -1,56 +1,54 @@
-@mixin component {
-  overflow: hidden;
-  position: relative;
-  top: 0; left: 0;
-}
-
-@mixin ambient-font {
-  font-family: 'Didact Gothic';
-  color: $soft-text;
-}
-
-@mixin ambient-headline {
-  @include ambient-font;
-  font-size: 1.2em;
-  font-weight: bold;
-}
-
 @mixin article-side-padding {
   @include box-sizing(border-box);
   padding-left: 1em;
   padding-right: 1em;
 }
 
 .__sg_article {
   @include border-radius(3px);
   @include box-shadow(0 2px 3px 0 #cdcdcd);
   @include component;
+  @include default-side-margin;
   background: $content_background;
   margin-bottom: 1em;
   min-height: 3em;
   padding-top: 1em;
 
   > h3 {
     @include ambient-headline;
     @include article-side-padding;
     margin-bottom: 0.5em;
     text-align: right;
+    color: #ccc;
   }
 
   .__sg_component, .CodeRay, .__code_note {
     @include article-side-padding;
   }
 
+  .__sg_component {
+    padding-top: 0.3em;
+    padding-bottom: 1em;
+  }
+
   .__code_note {
+    @include background(linear-gradient(bottom, #b5b5b5, #e4e4e4));
+    @include border-radius(6px 0 0 0);
     @include ambient-font;
-    text-align: right;
-    margin-top: 0.5em;
-    margin-bottom: 0.3em;
+    border-top: 1px solid #cacaca;
+    border-bottom: 1px solid #999;
+    text-align: center;
+    //margin-top: 0.5em;
+    line-height: 1.5em;
   }
 
   .CodeRay {
     @include border-radius(0 0 3px 3px);
-    padding-top: 1em;
-    padding-bottom: 1em;
   }
-}
\ No newline at end of file
+}
+
+// hide highligthed code for default, if js is enabled
+.js {
+  [data-subject*=representation] { display: none; }
+  [data-subject*=representation].enabled { display: block; }
+}