Lint Readme with markdownlint

[github/bastienwirtz/homer.git] / app.scss

diff --git a/app.scss b/app.scss
index 476ee09121170ab970a4d2ba9f22b2115f872769..51110e1d239a43fbd66fe528ecec9e8ecbb2ed26 100644 (file)
--- a/app.scss
+++ b/app.scss
@@ -68,12 +68,27 @@ $theme-dark: (
     }
   }
 
+  .message {
+    background-color: map-get($theme, "card-background");
+    .message-body {
+      color: map-get($theme, "text");
+    }
+  }
+
   .footer {
     background-color:  map-get($theme, "card-background");
     box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
   }
 }
 
+
+@mixin ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
 html { 
   height: 100%; 
 }
@@ -175,7 +190,7 @@ body {
         }
       }
     }
-    .navbar {
+    .navbar, .navbar-menu {
       background-color: $secondary-color;
 
       a {
@@ -186,6 +201,9 @@ body {
         }
       }
     }
+    .navbar-end {
+      text-align: right;
+    }
   }
 
   #main-section {
@@ -195,17 +213,17 @@ body {
     h2 {
       border-bottom: 1px dashed #ccc;
       padding-bottom: 10px;
+      @include ellipsis();
     }
 
     .title {
       font-size: 1.1em;
+      @include ellipsis();
     }
 
     .subtitle {
       font-size: .9em;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis();
     }
 
     .container {
@@ -227,7 +245,8 @@ body {
   }
 
   .media-content {
-    overflow: inherit;
+    overflow: hidden;
+    text-overflow: inherit;
   }
 
   .tag {
@@ -302,6 +321,16 @@ body {
     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
   }
 
+  .no-footer {
+    #main-section {
+      margin-bottom: 0;
+    }
+    
+    .footer {
+      display: none;
+    }
+  }
+
   .search-bar {
     position: relative;
     display: inline-block;
@@ -310,7 +339,7 @@ body {
       background-color: lighten( $secondary-color, 6% );
       border-radius: 5px;
       padding: 2px 12px 2px 30px;
-      margin: 10px 0;
+      margin: 0 0 0 12px;
       transition: all 100ms linear;
       color: #ffffff;
       height: 30px;
@@ -327,12 +356,13 @@ body {
     .search-label::before {
       font-family: 'Font Awesome 5 Free';
       position: absolute;
-      top: 12px;
-      left: 8px;
+      top: 4px;
+      left: 16px;
       content: "\f002";
       font-weight: 900;
       width: 20px;
       height: 20px;
+      color: #ffffff;
     }
 
       &:focus-within .search-label::before {
@@ -342,6 +372,7 @@ body {
 
   .icon-button {
     display: inline-block;
+    padding: 0 12px;
   }
 
   .offline-message {