Revamp soudan

assets/sass/soudan.sass

@@ -1,6 +1,10 @@
 .soudan-comment
   display: flex
   gap: 0.5em
+  .description
+    font-weight: 300
+  p:first-of-type
+    margin-top: 0;
   & > div
     width: 100%
 @keyframes

assets/sass/style.sass

@@ -1,5 +1,6 @@
 @import "syntax.scss"
 @import "stork.sass"
+@import "soudan.sass"
 @import "_everforest.sass"
 @import "_topography.sass"
 
@@ -13,6 +14,7 @@ $dim: $ef-bg5
 $fg: $ef-fg
 $primary: $ef-green
 $padding: 1rem
+$shadow-size: 4px
 
 html
   color: $fg
@@ -58,11 +60,11 @@ a
   color: $primary
   &:not(:hover)
     text-decoration: none
-pre, #_content
-  box-shadow: 4px 4px $shadow
-img
+pre, .page
+  box-shadow: $shadow-size $shadow-size $shadow
+img, button, input[type=submit]
   max-width: 100%
-  box-shadow: 4px 4px $bg0
+  box-shadow: $shadow-size $shadow-size $bg0
   border: 2px solid $bg0
 header
   h2
@@ -103,5 +105,30 @@ nav
 .disabled, footer
   color: $dim
 footer
-  margin-top: 2em;
+  margin-top: 2em
   text-align: center
+button, input[type=submit]
+  border: none
+  cursor: pointer
+  background: $dim
+  color: $fg
+  padding: 0.125em 0.5em
+  &:active
+    box-shadow: none;
+    transform: translate($shadow-size, $shadow-size)
+form
+  display: flex
+  flex-direction: column
+  gap: 0.5em
+textarea, input
+  font-size: inherit
+  font-family: inherit
+  color: inherit
+textarea, input[type=text], input[type=email], input[type=number]
+  border: none
+  background: $bg0
+  padding: 0.5em
+  &:focus
+    outline: 1px solid $primary
+textarea
+  resize: vertical