Add publish plasma widgets tutorial

styles/thoughts.css

@@ -0,0 +1,76 @@
+body {
+   background-color: #FEFDFA;
+}
+
+.home {
+   margin: 1.8rem 2rem 0 0;
+   float: right;
+   color: #888;
+   text-decoration: none;
+   font-weight: 700;
+   font-size: 1.5rem;
+   font-family: monospace;
+}
+
+.content {
+   font-family: "Ubuntu Mono", monospace;
+   line-height: 1.7rem;
+   transition: .2s;
+}
+
+.article {
+   margin: 2rem auto 4rem auto;
+   padding: 0 2rem;
+   max-width: 700px;
+}
+
+.article h2 {
+   color: #888;
+}
+
+.article p {
+   margin-bottom: .4rem;
+   text-indent: 1rem;
+   line-height: 1.3rem;
+   font-size: 1.1rem;
+   font-family: serif;
+   transition: .2s;
+}
+
+.tempAlert {
+   position: fixed;
+   bottom: -10rem;
+   right: .5rem;
+   transition: .2s;
+   opacity: 0;
+   background-color: #222;
+   color: #eee;
+   font-family: monospace;
+   font-size: 1.2rem;
+   padding: 1rem 2rem;
+   border-radius: 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+   body {
+      background-color: #232326;
+      color: #ddd;
+   }
+   .tempAlert {
+      background-color: #FEFDFA;
+      color: #222;
+   }
+}
+
+@media only screen and (min-width: 400px) {
+   .content { padding: 0 0.1rem; }
+   .article { padding: 0 1rem; }
+}
+
+@media only screen and (min-width: 600px) {
+   .content { padding: 0 2rem; }
+}
+
+@media only screen and (min-width: 900px) {
+   .content { padding: 0 6rem; }
+}