add max width and improve design

chrishrb · Oct 10, 2024 · cf0b32d · cf0b32d
1 parent 59152be
commit cf0b32d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 4 deletions.
diff --git a/static/css/github-markdown-dark.css b/static/css/github-markdown-dark.css
@@ -1,3 +1,25 @@
+/* custom dark */
+.container {
+ max-width: 896px;
+ margin: 0 auto;
+}
+
+.container-inner {
+ padding: 32px;
+ border-width: 1px;
+ border-color: #30363d;
+ border-style: solid;
+ border-radius: 6px;
+ margin-top: 20px;
+ margin-bottom: 6px;
+}
+
+.footer {
+ padding-top: 10px;
+ padding-bottom: 20px;
+ text-align: center;
+}
+
 /* dark */
 .markdown-body {
  color-scheme: dark;

diff --git a/static/css/github-markdown-light.css b/static/css/github-markdown-light.css
@@ -1,3 +1,25 @@
+/* custom light */
+.container {
+ max-width: 896px;
+ margin: 0 auto;
+}
+
+.container-inner {
+ padding: 32px;
+ border-width: 1px;
+ border-color: #d0d7de;
+ border-style: solid;
+ border-radius: 6px;
+ margin-top: 20px;
+ margin-bottom: 6px;
+}
+
+.footer {
+ padding-top: 10px;
+ padding-bottom: 20px;
+ text-align: center;
+}
+
 /* light */
 .markdown-body {
  color-scheme: light;

diff --git a/templates/layout.html b/templates/layout.html
@@ -10,11 +10,14 @@
  <link rel="stylesheet" href="/static/css/github-markdown-light.css">
  {{end}}
 </head>
-<body class="markdown-body entry-content container-lg">
- <div style="padding: 32px;">
- <div class="">
- {{ .Content }}
+<body class="markdown-body">
+ <div class="container">
+ <div class="container-inner">
+  {{ .Content }}
  </div>
  </div>
+ <footer class="container footer">
+ Made with &hearts; by chrishrb
+ </footer>
 </body>
 </html>