Main Page.css: Difference between revisions

← Older edit Newer edit →

@@ Line 324: / Line 324: @@
 .crw-site-notice:empty{
    display: none;
+}
+/* */
+.crw-card-grid{
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 0.75em;
+}
+.crw-card{
+  border: 1px solid #004080;
+  background: #FDFDFD;
+  overflow: hidden;
+  border-radius: 8px;
+}
+.crw-card-link{
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+.crw-card-img{
+  height: 120px;
+  overflow: hidden;
+  background: rgba(0,64,128,0.06);
+}
+.crw-card-img img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.crw-card-body{
+  padding: 0.7em 0.8em;
+}
+.crw-card-title{
+  font-weight: 800;
+  color: #004080;
+  line-height: 1.15;
+}
+.crw-card-desc{
+  margin-top: 0.35em;
+  font-size: 0.95em;
+  line-height: 1.25;
+  color: var(--color-base, #202122);
+}
+.crw-card-desc:empty{
+  display: none;
+}
+.crw-card-link:hover .crw-card-title,
+.crw-card-link:focus .crw-card-title{
+  text-decoration: underline;
+}
+.crw-card-more{
+  margin-top: 0.75em;
+  font-weight: 600;
+}
+/* Dark mode */
+@media screen{
+  html.skin-theme-clientpref-night .crw-card{
+    background: #121c32;
+    border-color: #004080;
+  }
+  html.skin-theme-clientpref-night .crw-card-title{
+    color: #b9dcff;
+  }
+  html.skin-theme-clientpref-night .crw-card-desc{
+    color: #e5e7eb;
+  }
+  html.skin-theme-clientpref-night .crw-card-img{
+    background: rgba(0,64,128,0.14);
+  }
+}
+@media screen and (prefers-color-scheme: dark){
+  html.skin-theme-clientpref-os .crw-card{
+    background: #121c32;
+    border-color: #004080;
+  }
+  html.skin-theme-clientpref-os .crw-card-title{
+    color: #b9dcff;
+  }
+  html.skin-theme-clientpref-os .crw-card-desc{
+    color: #e5e7eb;
+  }
+  html.skin-theme-clientpref-os .crw-card-img{
+    background: rgba(0,64,128,0.14);
+  }
 }