Merge pull request #49 from nightah/docker-multiarch-builds

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

diff --git a/app.scss b/app.scss
index 6391c2dad3972b3bacf0d8067abd6cdbefa19b4c..51110e1d239a43fbd66fe528ecec9e8ecbb2ed26 100644 (file)
--- a/app.scss
+++ b/app.scss
@@ -1,11 +1,126 @@
 $primary-color: #3367d6;
 $secondary-color: #4285f4;
 
+
+// /!\ Keep background colors sync with `theme-color` meta info
+$theme-light: (
+  background: #f5f5f5,
+  card-background: #ffffff,
+  text: #363636,
+  text-title: #303030,
+  text-subtitle: #424242,
+  card-shadow: rgba(0, 0, 0, 0.1),
+  a-hover: #363636
+);
+$theme-dark: (
+  background: #131313,
+  card-background: #2b2b2b,
+  text: #eaeaea,
+  text-title: #fafafa,
+  text-subtitle: #f5f5f5,
+  card-shadow: rgba(0, 0, 0, 0.4),
+  a-hover: #ffdd57
+);
+
+/* raleway-regular - latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Raleway'), local('Raleway-Regular'),
+       url('./webfonts/raleway/raleway-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./webfonts/raleway/raleway-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* lato-regular - latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Lato Regular'), local('Lato-Regular'),
+       url('./webfonts/lato/lato-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./webfonts/lato/lato-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@mixin theme($theme) {
+  background-color: map-get($theme, "background");
+  color: map-get($theme, "text");
+  a {
+    &:hover {
+      color: map-get($theme, "a-hover");
+    }
+  }
+  
+  .title {
+    color: map-get($theme, "text-title");
+  }
+  .subtitle {
+    color: map-get($theme, "text-subtitle");
+  }
+
+  .card {
+    background-color: map-get($theme, "card-background");
+    box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
+    &:hover {
+      background-color: map-get($theme, "card-background");
+    }
+  }
+
+  .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%; 
+}
+
 body {
   font-family: 'Raleway', sans-serif;
-  background-color: #F5F5F5;
   height: 100%;
 
+  #app {
+    min-height: 100%;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    // Default theme
+    @include theme($theme-light);
+
+    // System pref theme
+    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+      @include theme($theme-light);
+    }
+    @media (prefers-color-scheme: dark) {
+      @include theme($theme-dark);
+    }
+
+    // User override theme
+    &.is-light {
+      @include theme($theme-light);
+    }
+    &.is-dark {
+      @include theme($theme-dark);
+    }
+  }
+
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Lato', sans-serif;
   }
@@ -16,12 +131,11 @@ body {
 
   h2 {
     font-size: 1.7rem;
-    margin-top: 3rem;
+    margin-top: 2rem;
     margin-bottom: 1rem;
 
-    .fa {
+    .fas, .fab, .far {
       margin-right: 10px;
-      color: $secondary-color;
     }
 
     span {
@@ -61,44 +175,58 @@ body {
         padding: 10px 0;
       }
 
-      img {
+      .logo {
         float: left;
-        max-height: 70px;
-        max-width: 70px;
-        padding: 10px;
+        i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px
+        }
+
+        img {
+          padding: 10px;
+          max-height: 70px;
+          max-width: 70px;
+        }
       }
     }
-    .navbar {
+    .navbar, .navbar-menu {
       background-color: $secondary-color;
 
       a {
-        color: #152138;
-
-        &:hover {
+        color: #ffffff;
+        &:hover, &:focus {
+          color: #ffffff;
           background-color: lighten( $secondary-color, 5% );
         }
       }
     }
+    .navbar-end {
+      text-align: right;
+    }
   }
 
   #main-section {
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     padding: 0;
 
     h2 {
       border-bottom: 1px dashed #ccc;
       padding-bottom: 10px;
+      @include ellipsis();
     }
 
     .title {
       font-size: 1.1em;
+      @include ellipsis();
     }
 
     .subtitle {
       font-size: .9em;
+      @include ellipsis();
     }
 
-    .column {
+    .container {
       padding: 1.2rem .75rem;
     }
 
@@ -117,7 +245,8 @@ body {
   }
 
   .media-content {
-    overflow: inherit;
+    overflow: hidden;
+    text-overflow: inherit;
   }
 
   .tag {
@@ -125,33 +254,59 @@ body {
     background-color: $secondary-color;
     position: absolute;
     top: 1rem;
-    right: -0.3rem;
+    right: -0.2rem;
     width: 3px;
     overflow: hidden;
     transition: all 0.2s ease-out;
     padding: 0;
+    
+    .tag-text {
+      display: none;
+    }
   }
 
   .card {
     border-radius: 5px;
     border: none;
     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
-    transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms
+    transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    a {
+      outline: none;
+    }
   }
 
   .card:hover {
-    background-color: #FFFFFF;
     transform: translate(0, -3px);
 
     .tag {
       width: auto;
       color: #ffffff;
       padding: 0 0.75em;
+      
+      .tag-text {
+        display: block;
+      }
     }
   }
 
   .card-content {
-    height: 110px;
+    height: 85px;
+    padding: 1.3rem;
+  }
+
+  .layout-vertical {
+    .card {
+      border-radius: 0;
+    }
+
+    .column div:first-of-type .card {
+      border-radius: 5px 5px 0 0;
+    }
+
+    .column div:last-child .card {
+      border-radius: 0 0 5px 5px;
+    }
   }
 
   .footer {
@@ -159,20 +314,32 @@ body {
     left: 0;
     right: 0;
     bottom: 0;
-    padding: 1rem 0.5rem;
+    padding: 0.5rem;
     text-align: left;
-    background-color: #fafafa;
-    border-top: 1px solid #F5F5F5;
+    color: #676767;
+    font-size: 0.85rem;
+    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;
     #search {
       border: none;
       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;
@@ -187,13 +354,15 @@ body {
     }
 
     .search-label::before {
-      font-family: 'FontAwesome';
+      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 {
@@ -201,4 +370,26 @@ body {
       }
   }
 
+  .icon-button {
+    display: inline-block;
+    padding: 0 12px;
+  }
+
+  .offline-message {
+      text-align: center;
+      margin: 35px 0;
+
+      i {
+        font-size: 2rem;
+      }
+
+      i.fa-redo-alt {
+        font-size: 1.3rem;
+        line-height: 1rem;
+        vertical-align: middle;
+        cursor: pointer;
+        color: #3273dc;
+      }
+  }
+
 }