Add basic styles for AMP

techulus · Jan 20, 2024 · 026c21d · 026c21d
1 parent bed060b
commit 026c21d
Showing 1 changed file with 59 additions and 2 deletions.
diff --git a/src/theme/amp.hbs b/src/theme/amp.hbs
@@ -91,14 +91,71 @@
       }
     </style>
   </noscript>
+
+  <style amp-custom>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      margin: 8px;
+      padding: 16px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 16px 0;
+    }
+
+    p {
+      margin: 8px 0;
+    }
+
+    a {
+      color: #007bff;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    ul, ol {
+      margin: 8px 0;
+      padding-inline-start: 20px;
+    }
+
+    code {
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+      background-color: #f4f4f4;
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+
+    pre {
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+      background-color: #f4f4f4;
+      padding: 8px;
+      border-radius: 4px;
+      overflow-x: auto;
+    }
+
+    blockquote {
+      border-left: 2px solid #007bff;
+      margin: 0;
+      padding-left: 16px;
+      font-style: italic;
+    }
+
+    img, amp-img {
+      max-width: 100%;
+      height: auto;
+      margin: 8px 0;
+    }
+  </style>
 </head>
 
 <body>
   <main class="container">
 
     <hgroup class="blog-title-container">
       <h1 class="blog-title">{{title}}</h1>
-      <h2>{{description}}</h2>
     </hgroup>
 
     {{{content}}}
@@ -116,4 +173,4 @@
   </footer>
 </body>
 
-</html>
+</html>