Add publish plasma widgets tutorial

styles/styles.css

@@ -0,0 +1,78 @@
+* {
+   padding: 0;
+   margin: 0;
+}
+
+:root {
+   --theme-color: #f69b46;
+}
+
+a {
+   color: var(--theme-color);
+}
+
+@media (prefers-color-scheme: dark) {
+   body {
+      background-color: #222;
+      color: #ddd;
+   }
+}
+
+/* Footer styles */
+.footer {
+   padding: 1rem;
+   display: grid;
+   grid-template-columns: auto auto;
+   background-color: #222;
+   color: #fff;
+   border-bottom: solid .4rem var(--theme-color);
+   font-family: "Nunito", "Times New Roman", Times, serif;
+   overflow: auto;
+}
+
+.footer h2 {
+   position: relative;
+   margin: 1rem .75rem .75rem 2.5rem;
+   font-size: 1.5rem;
+   transition: .2s;
+}
+
+.footer h2::before {
+   content: "";
+   position: absolute;
+   top: .5rem;
+   left: -.6rem;
+   height: 1rem;
+   width: .25rem;
+   border-radius: 5rem;
+   background-color: var(--theme-color);
+   transition: .2s;
+}
+
+.footer h2:hover {
+   margin: 1rem .75rem .75rem 3rem;
+}
+
+.footer h2:hover::before {
+   left: -1.1rem;
+}
+
+.footer p {
+   margin: .5rem 2rem;
+}
+
+.faded-footer {
+   color: #bbb;
+}
+
+@media only screen and (max-width: 750px) {
+   .footer {
+      grid-template-columns: auto;
+   }
+}
+
+@media (prefers-color-scheme: dark) {
+   .footer {
+      background-color: #000;
+   }
+}