first commit

sass/parts/_cards.scss

@@ -0,0 +1,75 @@
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-rows: auto;
+    gap: 24px;
+    padding: 12px 0;
+}
+
+.card {
+    min-height: 100px;
+    background: var(--bg-2);
+    border: 2px solid var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.card-info {
+    padding: 0 24px 24px 24px;
+}
+
+.card-title {
+    margin-top: 0.7em;
+}
+
+.card-image {
+    border: unset;
+    width: 100%;
+}
+
+.card-image-placeholder {
+    height: 12px;
+    width: 100%;
+}
+
+.card-description {
+    margin-top: 0.5em;
+    overflow: hidden;
+}
+
+@media all and (max-width:720px) {
+    .cards {
+        gap: 18px;
+    }
+}
+
+.bloglist-table-row{
+    padding:2%;
+    background-color:var(--navbar-color);
+    border-radius: 5px;
+    transition: 300ms;
+    width: 28%;
+    margin-right:1%;
+    margin-top:3%;
+}
+.bloglist-container{
+    display:flex;
+    flex-wrap: wrap;
+}
+.bloglist-table-row:hover{
+    box-shadow: 10px 10px 0px var(--border-color);
+}
+.bloglist-links{
+    text-decoration:none;
+}
+.bloglist-table-row-data{
+    padding:10px;
+}
+.bloglist-table-row-date{
+    font-size:12px;
+}
+@media only screen and (max-width:600px) {
+    .bloglist-table-row{
+      width:100%;
+    }
+  }