myWebLog theme (#16)

* Add myWebLog theme

* Remove Nuxt version

* Remove Azure link from README

theme/wwwroot/style.css

@@ -0,0 +1,372 @@
+:root {
+  --heading-fonts: Oswald, "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  --accent-color: navy;
+  --app-color: maroon;
+  --edge-color: lightgray;
+  --bkg-color: #fffafa;
+}
+html {
+  background-color: var(--edge-color);
+}
+body {
+  margin: 0;
+  font-family: Raleway, "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
+  background-color: var(--bkg-color);
+}
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+}
+a:hover {
+  border-bottom: dotted 1px var(--accent-color);
+}
+a img {
+  border: 0;
+}
+acronym {
+  border-bottom: dotted 1px black;
+}
+header, h1, h2, h3, .footer-by a {
+  font-family: var(--heading-fonts);
+}
+h1 {
+  text-align: center;
+  margin: 1.4rem 0;
+  font-size: 2rem;
+}
+h1.project-title {
+  line-height: 1.2;
+}
+h2 {
+  margin: 1.2rem 0;
+}
+h3 {
+  margin: 1rem 0;
+}
+h2, h3 {
+  border-bottom: solid 2px var(--accent-color);
+  width: 95%;
+}
+@media all and (min-width: 40rem) {
+  h1 {
+    margin: 0 0 1.4rem 0;
+  }
+  h2, h3 {
+    width: 80%;
+  }
+}
+p {
+  margin: 1rem 0;
+}
+code, pre {
+  font-family: "JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  font-size: 80%;
+}
+code {
+  background-color: rgba(0, 0, 0, .1);
+  padding: 0 .25rem;
+  white-space: pre;
+}
+pre {
+  background-color: rgba(0, 0, 0, .9);
+  color: rgba(255, 255, 255, .9);
+  padding: .5rem;
+  border-radius: .5rem;
+  overflow: auto;
+}
+pre > code {
+  background-color: unset;
+}
+div[style="color:#DADADA;background-color:#1E1E1E;"] {
+  background-color: unset !important;
+}
+#content {
+  margin: 0 1rem;
+}
+.content {
+  font-size: 1.1rem;
+  padding: 0 .5rem;
+}
+.auto {
+  margin: 0 auto;
+}
+@media all and (min-width: 68rem) {
+  .content {
+    width: 66rem;
+    padding: 0 1rem;
+  }
+}
+.hdr {
+  font-size: 14pt;
+  font-weight: bold;
+}
+.strike {
+  text-decoration: line-through;
+}
+.alignleft {
+  float: left;
+  padding-right: 5px;
+}
+ul {
+  padding-left: 1.5rem;
+}
+li {
+  list-style-type: disc;
+}
+.app-info {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  justify-content: center;
+}
+abbr[title] {
+  text-decoration: none;
+  border-bottom: dotted 1px rgba(0, 0, 0, .5)
+}
+/* Page header */
+.site-header {
+  height: 100px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-image: linear-gradient(to bottom, var(--edge-color), var(--bkg-color));
+}
+.site-header a, .site-header a:visited {
+  color: black;
+}
+.site-header a:hover {
+  border-bottom: none;
+}
+.header-title {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 100px;
+  text-align: center;
+}
+.header-spacer {
+  flex-grow: 3;
+}
+.header-social {
+  padding: 25px .8rem 0 0;
+}
+.header-social img {
+  width: 50px;
+  height: 50px;
+}
+@media all and (max-width: 40rem) {
+  .site-header {
+    height: auto;
+    flex-direction: column;
+    align-items: center;
+  }
+  .header-title {
+    line-height: 3rem;
+  }
+  .header-spacer {
+    display: none;
+  }
+}
+/* Home page */
+@media all and (min-width: 80rem) {
+  .home {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    justify-content: space-around;
+  }
+}
+.home-lead {
+  font-size: 1.3rem;
+  text-align: center;
+}
+.app-sidebar {
+  text-align: center;
+  border-top: dotted 1px var(--edge-color);
+  padding-top: 1rem;
+  font-size: .9rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+}
+.app-sidebar > div {
+  width: 20rem;
+  padding-bottom: 1rem;
+}
+@media all and (min-width: 68rem) {
+  .app-sidebar {
+    width: 66rem;
+    margin: auto;
+  }
+}
+@media all and (min-width: 80rem) {
+  .app-sidebar {
+    width: 12rem;
+    border-top: none;
+    border-left: dotted 1px var(--edge-color);
+    padding-top: 0;
+    padding-left: 2rem;
+    flex-direction: column;
+  }
+  .app-sidebar > div {
+    width: auto;
+  }
+}
+.app-sidebar a {
+  font-size: 10pt;
+  font-family: sans-serif;
+}
+.app-sidebar-head {
+  font-family: var(--heading-fonts);
+  font-weight: bold;
+  color: var(--app-color);
+  margin-bottom: .8rem;
+  padding: 3px 12px;
+  border-bottom: solid 2px var(--edge-color);
+  font-size: 1rem;
+}
+.app-sidebar-name, .app-sidebar-description {
+  margin: 0;
+  padding: 0;
+}
+.app-sidebar-description {
+  font-style: italic;
+  color: #555555;
+  padding-bottom: .6rem;
+}
+/* All solution page */
+.app-name {
+  font-family: var(--heading-fonts);
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: var(--app-color);
+}
+/* Individual solution pages */
+h1.solution-header {
+  line-height: 1;
+}
+.app-info aside {
+  float: right;
+  background-color: #FFFAFA;
+  padding-left: .5rem;
+}
+@media all and (max-width: 40rem) {
+  .app-info aside {
+    float: none;
+    text-align: center;
+    padding-left: 0;
+  }
+}
+.app-info aside > img {
+  overflow: hidden;
+  border: dotted 1px darkgray;
+  border-radius: .5rem;
+}
+.tech-stack p {
+  margin-bottom: 0;
+}
+.tech-stack ul {
+  margin-top: 0;
+}
+blockquote {
+  border-left: solid 1px darkgray;
+  margin-left: 25px;
+  padding-left: 15px;
+}
+.quote {
+  font-style: italic;
+}
+.source {
+  text-align: right;
+  padding-right: 60px;
+}
+.app-info h3:hover {
+  cursor: hand;
+  cursor: pointer;
+}
+.app-info .arrow {
+  font-size: .75rem;
+  padding-left: 1rem;
+}
+.collapse-panel {
+  max-height: 0;
+  transition: max-height .5s ease-in-out;
+  overflow: hidden;
+}
+.collapse-panel.shown {
+  max-height: 25rem;
+  overflow: auto;
+}
+.collapse-panel p:first-of-type {
+  margin-top: 0;
+}
+/* Footer */
+.project-footer {
+  padding-top: 1rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+footer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  padding: 20px 15px 10px 15px;
+  font-size: 1rem;
+  color: black;
+  clear: both;
+  background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color));
+}
+footer a:link, footer a:visited {
+  color: black;
+}
+/* htmx "Loading" overlay */
+.load-overlay {
+  position: fixed;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  width: 95%;
+  margin-left: 2.5%;
+  height: 0;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, .5);
+  border-radius: 1rem;
+  animation: fadeOut .25s ease-in-out;
+  overflow: hidden;
+}
+.load-overlay h1 {
+  color: white;
+  background-color: rgba(0, 0, 0, .75);
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 1rem;
+  width: 50%;
+  padding: 1rem;
+}
+.load-overlay.htmx-request {
+  height: 80vh;
+  animation: fadeIn .25s ease-in-out;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    height: 80vh;
+  }
+  100% {
+    opacity: 1;
+    height: 80vh;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    height: 80vh;
+  }
+  99% {
+    opacity: 0;
+    height: 80vh;
+  }
+  100% {
+    opacity: 0;
+    height: 0;
+  }
+}