Create light.sass

themes/light.sass

@@ -0,0 +1,132 @@
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap")
+
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap")
+
+\:root
+  --color-bg:#fffff4
+  --color-text:#000
+  --gap-l:2.5rem
+
+body
+  margin: var(--gap-l) auto
+  max-width: 610px
+  line-height: 1.6
+  background: var(--color-bg)
+  color: var(--color-text)
+  padding: 0 10px
+  line-height: 28px
+  font-family: "Lora"
+  font-weight: 500
+  box-sizing: border-box
+
+  /* Smooth the font a little bit, it's a
+   *bit too bold on retina screens
+  -webkit-font-smoothing: antialiased
+
+/* ---------------------------------------------------
+/* Make a nice input form with rounded corners and hover
+ *animations
+/* ---------------------------------------------------
+
+input
+  padding: 10px 16px
+  margin: 2px 0
+  box-sizing: border-box
+  border: 2px solid #dabebe
+  border-radius: 6px
+  background: #fffff4
+  color: #3a1616
+  font-size: 16px
+  -webkit-transition: 0.5s
+  transition: 0.5s
+  outline: none
+
+  &:focus
+    border: 2px solid #3a1616
+
+/* ---------------------------------------
+/* The button is very similar to the input
+/* ---------------------------------------
+
+.button
+  background-color: #fffff4
+  border: none
+  color: black
+  padding: 6px 14px
+  text-align: center
+  text-decoration: none
+  display: inline-block
+  font-size: 16px
+  margin: 4px 2px
+  transition-duration: 0.4s
+  cursor: pointer
+  border: 2px solid #3a1616
+  border-radius: 6px
+
+  &:hover
+    background-color: #3a1616
+    color: white
+
+/* -----------------------------------------------
+/* Various classes for messages of different kinds
+/* -----------------------------------------------
+
+.isa_info, .isa_success, .isa_warning, .isa_error
+  width: 90%
+  margin: 10px 0px
+  padding: 12px
+
+.isa_info
+  color: #00529b
+  background-color: #bde5f8
+
+.isa_success
+  color: #4f8a10
+  background-color: #dff2bf
+
+.isa_warning
+  color: #9f6000
+  background-color: #feefb3
+
+.isa_error
+  color: #d8000c
+  background-color: #ffd2d2
+
+h1, h2, h3
+  line-height: 1.2
+  font-family: "Lora"
+
+img
+  width: 500px
+  max-width: 100%
+  border-radius: 10px
+  text-align: center
+
+/* ---------------------------------------------
+/* Bold hover animations on links and clickables
+/* ---------------------------------------------
+
+a
+  cursor: pointer
+  color: #217ab7
+  line-height: inherit
+  transition: .14s
+
+  &:hover
+    color: white
+    background-color: #3297d3
+
+  &:visited
+    color: #43458b
+    border-color: #43458b
+
+    &:hover
+      color: white
+      background-color: #9251ac
+
+pre
+  font-family: "Inconsolata", monospace
+
+\::selection
+  color: white
+  background: #ff4081