finish memos cover

resources/sass/app.scss

@@ -15,6 +15,7 @@
 @import "components/nav";
 @import "components/topbar";
 @import "components/modal";
+@import "components/images";
 @import "components/avatar";
 @import "components/alert_box";
 @import "components/search_box";

resources/sass/components/images.scss

@@ -0,0 +1,10 @@
+.cover {
+    width: 100%;
+    //height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+}
+
+.test {
+    height: 30rem;
+}

resources/sass/pages/memos.scss

@@ -33,6 +33,18 @@
         padding: 0.5rem 1rem;
     }
 
+    &-title {
+        color: $white;
+        text-shadow: 1px 1px 2px $dark;
+        background-image: linear-gradient(transparent, rgba(0,0,0,0.7));
+    }
+
+    &-cover {
+        height: calc(100% - 5px);
+        top: 0;
+        width: 100%;
+    }
+
 }
 
 .memo-edit {

resources/sass/setup/_containers.scss

@@ -8,7 +8,7 @@
 .card {
     background-color: $light;
     display: flex;
-    padding: 1rem;
+    //padding: 1rem;
     box-shadow: 1px 1px 2px $grey;
     border-radius: 2px;
     text-decoration: none;

resources/sass/setup/_positions.scss

@@ -55,6 +55,10 @@ $base: 1rem;
     width: 100%;
 }
 
+.h-100{
+    height: 100%;
+}
+
 .m-auto {
     margin-left: auto;
     margin-right: auto;
@@ -127,6 +131,22 @@ $base: 1rem;
     }
 }
 
+.t-0 {
+    top: 0;
+}
+
+.l-0 {
+    left: 0;
+}
+
+.r-0 {
+    right: 0;
+}
+
+.b-0 {
+    bottom: 0;
+}
+
 .z-10 {
     z-index: 10;
 }