Browse Source

improved card header styling

Bachir Soussi Chiadmi 4 years ago
parent
commit
5d57f0e32a

File diff suppressed because it is too large
+ 0 - 0
web/themes/custom/materiotheme/assets/dist/main.js


+ 20 - 6
web/themes/custom/materiotheme/assets/styles/main.scss

@@ -241,22 +241,36 @@ article.node--type-frontpage{
 .card{
   position: relative;
   width:210px; height:295px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.2);
+  // focused
+  // box-shadow: 0 0 7px rgba(0,0,0,0.9);
   header{
     position: absolute;
     bottom:0;
     z-index:10;
-    color: #fff;
-    background-color: rgba(0,0,0,0.5);
+    color: #000;
+    background-color: rgba(255,255,255,0.8);
+    padding: 0.3em 0.3em;
+    box-sizing:border-box;
     width:100%;
     h1, h4{ margin:0; padding:0; }
     h1{
-      font-size: 1.5em;
+      font-size: 1.3em;
+      font-weight: 700;
+      line-height: 0.8;
+      margin-bottom: 0.2em;
     }
     h4{
-      font-size: 1em;
-      font-weight: normal;
+      font-size: 0.882em;
+      font-weight: 300;
+      line-height: 1;
+      // margin-bottom: 0.1em;
+    }
+    span.ref{
+      font-size: 0.693em;
+      font-weight: 300;
+      line-height: 1;
     }
-
   }
   section.images{
     position: relative;

+ 1 - 0
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -3,6 +3,7 @@
     <header>
       <h1>{{ item.title }}</h1>
       <h4>{{ item.description }}</h4>
+      <span class="ref">{{ item.reference }}</span>
     </header>
     <section class="images" v-switcher>
       <figure

Some files were not shown because too many files changed in this diff