wwwroot/css/app.css

@@ -0,0 +1,74 @@
+
+ul{
+  padding:0;
+}
+
+.gz-list, .list-unstyled{
+  list-style: none;
+}
+
+.gz-content{
+  margin-top:64px;
+}
+
+.gz-larger{
+  font-size: larger;
+}
+
+.gz-smaller{
+  font-size: smaller;
+}
+
+@media screen and (max-width: 576px){ /* bump up font on smaller screen */
+  html{font-size: 20px}
+
+  .gz-content{
+    margin-top:80px;
+  }
+}
+
+/*App specific styles*/
+/* .peck-list{
+  max-width: 550px;
+  background-color: linen;
+} */
+
+.new-item{
+  width:100%;
+}
+
+.pl-toggle{
+  font-size:36px;
+}
+
+.pl-done > span{
+  text-decoration: line-through;
+  font-weight: lighter;
+  font-size:12px; 
+}
+
+.pl-long-item{
+  font-size:smaller;
+}
+
+.pl-short-item{
+  font-size:larger;
+}
+
+
+/*
+MAKE SCREEN SIZE AVAILABLE TO JS
+Large is considered above 768px wide
+and is the Bootstrap 4 breakpoint for medium screens and up
+*/
+
+body::after {
+  content: 'app-small-mode';
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  body::after {
+      content: 'app-large-mode';
+      display: none;
+  }
+}

wwwroot/css/mdi-bs4-compat.css

@@ -0,0 +1,40 @@
+.alert.mdi::before {
+    margin: 0 3px 0 -3px;
+  }
+  
+  .btn.mdi:not(:empty)::before {
+    margin: 0 3px 0 -3px;
+  }
+  
+  .breadcrumb-item a.mdi::before, .breadcrumb-item span.mdi::before {
+    margin: 0 2px 0 -2px;
+  }
+  
+  .dropdown-item.mdi::before {
+    margin: 0 8px 0 -10px;
+  }
+  
+  .list-group-item.mdi::before {
+    margin: 0 6px 0 -6px;
+  }
+  
+  .modal-title.mdi::before {
+    margin: 0 4px 0 0;
+  }
+  
+  .nav-link.mdi::before {
+    margin: 0 4px 0 -4px;
+  }
+  
+  .navbar-brand.mdi::before {
+    margin: 0 4px 0 0;
+  }
+  
+  .popover-title.mdi::before {
+    margin: 0 4px 0 -4px;
+  }
+  
+  .btn.mdi-chevron-up.collapsed::before {
+    content: '\f140';
+  }
+