initial commit

1 files changed, 104 insertions, 0 deletions

diff --git a/static/index.css b/static/index.css
new file mode 100644
index 0000000..fd8d87b
--- /dev/null
+++ b/static/index.css
@@ -0,0 +1,104 @@
+:root {
+    --heading: #FFBA80;
+    --heading-mobile: #FF9A80;
+    --heading-hover: #FFD0A0;
+    --radius: 5px;
+    --radius-mobile: 2px;
+    --pre-background: rgba(0, 0, 0, .15);
+}
+
+input[type='checkbox'] {
+    display: none;
+}
+
+@viewport {
+  width: device-width ;
+  zoom: 1.0 ;
+} 
+
+.lbl-toggle {
+    display: block;
+    background: var(--heading);
+    cursor: pointer;
+    border-radius: var(--radius);
+    /* resemble h2 */
+    font-weight: bold;
+    font-size: x-large;
+}
+
+.lbl-toggle:hover {
+    background-color: var(--heading-hover);
+}
+
+/* add the triangle */
+.lbl-toggle::before {
+  content: ' ';
+  display: inline-block;
+
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+
+  vertical-align: middle;
+  margin-right: .7rem;
+  transform: translateY(-2px);
+
+  transition: transform .2s ease-out;
+}
+
+.content .content-inner {
+  background: rgba(200, 180, 128, .2);
+  border-bottom: 1px solid var(--heading);
+
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+  padding: .5rem 1rem;
+}
+
+.content {
+  max-height: 0px;
+  overflow: hidden;
+
+  transition: max-height .25s ease-in-out;
+}
+
+.toggle:checked + .lbl-toggle + .content {
+  max-height: 100vh;
+}
+.toggle:checked + .lbl-toggle::before {
+  transform: rotate(90deg) translateX(-3px);
+}
+
+.toggle:checked + .lbl-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.content pre {
+  background: var(--pre-background);
+  border: 1px solid;
+}
+
+/* For narrow screens (probably mobile devices)
+ * which works because html includes meta viewport.
+ */
+@media screen and (max-width: 500px) {
+
+  .lbl-toggle {
+    background: var(--heading-mobile);
+    border-radius: var(--radius-mobile);
+    font-weight: normal;
+  }
+  .content pre {
+    /* wrap long text and urls */
+    white-space: pre; /* CSS 2.0 */
+    white-space: pre-wrap; /* CSS 2.1 */
+    white-space: pre-line; /* CSS 3.0 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    white-space: -moz-pre-wrap; /* Mozilla */
+    word-wrap: break-word; /* IE 5+ */
+  }
+
+}
+/* vim: set ts=2 sw=2 sts=2 et: */