Try porting Minimal Mistakes's CSS

layouts/partials/head/css.html

@@ -11,6 +11,11 @@
 <link rel="stylesheet" href="{{ $bundle.Permalink }}" integrity="{{ $bundle.Data.Integrity }}" media="screen">
 {{ end }}
 
+<!-- Staticman CSS -->
+{{- if .Site.Params.staticman -}}
+  <link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
+{{- end -}}
+
 <!-- Custom css -->
 {{ range .Site.Params.customCSS -}}
     {{ $style := resources.Get . }}

static/css/staticman.css

+/*
+   .form-group
+   ========================================================================== */
+
+.form-group {
+  margin-bottom: 5px;
+  padding: 0;
+  border-width: 0;
+  textarea {
+    width: 100%;
+  }
+}
+
+/*
+   Comments
+   ========================================================================== */
+
+.page__comments {
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+  clear: both;
+}
+
+.page__comments-title {
+  margin-top: 2rem;
+  margin-bottom: 10px;
+  padding-top: 2rem;
+  font-size: 20px;
+  border-top: 1px solid grey;
+  text-transform: uppercase;
+}
+
+.page__comments-form {
+  &.disabled {
+    input,
+    button,
+    textarea,
+    label {
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: alpha(opacity=65);
+      box-shadow: none;
+      opacity: 0.65;
+    }
+  }
+}
+
+.comment {
+  margin: 1em 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid grey;
+  }
+}
+
+.comment__avatar-wrapper {
+  float: left;
+  width: 60px;
+  height: 60px;
+}
+
+.comment__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.comment__content-wrapper {
+  float: right;
+  width: calc(100% - 60px);
+}
+
+.comment__author {
+  margin: 0;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.comment__date {
+  margin: 0;
+
+  a {
+    text-decoration: none;
+  }
+}