extended and refined

theme/static/css/custom.css

@@ -34,7 +34,37 @@ a {
 
 
 /*
- * Regular CSS
+ * Settings specific to breakpoints
+ */
+@media screen and (min-width: 768px) {
+  .card {
+    max-width: calc(50% - var(--pico-block-spacing-horizontal));
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .card {
+    max-width: calc(33% - var(--pico-block-spacing-horizontal));
+  }
+}
+
+@media screen and (min-width: 1536px) {
+  .card {
+    max-width: calc(25% - var(--pico-block-spacing-horizontal));
+  }
+}
+
+/*
+ * Helper classes
+ */
+.shadow {
+  /*  box-shadow: var(--pico-card-box-shadow); */
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+
+
+/*
+ * Specific elements on the page
  */
 
 /* Jumbotron */
@@ -44,7 +74,7 @@ a {
   h1 {
     font-size: 3rem;
     font-weight: 500;
-    margin-bottom: 10px;
+    margin-bottom: calc(var(--pico-spacing) * 0.5);
 
     a {
       color: var(--pico-h1-color);
@@ -55,14 +85,65 @@ a {
 #jumbotron-subtitle h2 {
   font-size: 2.1rem;
   font-weight: 500;
-  margin-top: 10px;
+  margin-top: calc(var(--pico-spacing) * 0.5);
 }
 
-/* site navbar */
-#site-navbar>div>ul {
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-
-  a {
+/* Navbar */
+#site-navbar a {
   font-weight: bold;
 }
+
+/* Main content */
+#main-content {}
+
+#main-header {
+  /*   margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+  margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+  padding: var(--pico-block-spacing-horizontal) var(--pico-block-spacing-vertical);
+  text-align: center; */
+}
+
+.cards {
+  display: flex;
+  flex-flow: row wrap;
+  list-style-type: none;
+  padding-left: inherit;
+  column-gap: var(--pico-block-spacing-horizontal);
+}
+
+.card {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1 0;
+  list-style-type: none;
+  padding-left: calc(var(--pico-spacing) * 0.5);
+  padding-right: calc(var(--pico-spacing) * 0.5);
+  box-shadow: var(--pico-card-box-shadow);
+}
+
+.article-header {
+  flex: 0 0 3.5lh;
+  margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+  margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+
+  h3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: auto;
+  }
+}
+
+.article-body {
+
+  img {
+    height: 270px;
+  }
+}
+
+.article-footer {
+  margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
+  margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
 }