Style article content

cesko-digital · Jul 18, 2024 · 64abb59 · 64abb59
1 parent 95777cc
commit 64abb59
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 34 deletions.
diff --git a/app/[...path]/page.tsx b/app/[...path]/page.tsx
@@ -68,9 +68,8 @@ const PostBody = ({ post, author }: { post: BlogPost; author: Author }) => {
         {formatDate(post.date)}
         <a href={`mailto:${author.email}`}>{author.name}</a>
       </div>
-
       <h1 className="typo-title">{post.title}</h1>
-      <p>{post.description}</p>
+      <p className="text-xl">{post.description}</p>
     </Fragment>
   );
 
@@ -81,7 +80,6 @@ const PostBody = ({ post, author }: { post: BlogPost; author: Author }) => {
     >
       {/* TBD: Replace with next/image */}
       <img src={post.coverImageUrl} alt="" loading="lazy" width="100%" />
-
       <div className="flex flex-col gap-4 p-5">
         <PostMetadata />
         <div

diff --git a/app/global.css b/app/global.css
@@ -58,70 +58,72 @@ body {
   color: #21262c;
 }
 
-/* Post Content */
+/*
+ * Content Styling
+ */
 
 .post-content {
   font-family: "Fira Sans", sans-serif;
+  font-size: 18px;
   font-style: normal;
-  /* or 26px */
-  color: #000000;
 }
 
+/* Headings */
+
 .post-content h1,
 .post-content h2,
 .post-content h3 {
   font-family: "Cesko Digital", sans-serif;
+  font-weight: bold;
+  margin-top: 2ex;
+  margin-bottom: 1ex;
+  line-height: 140%;
 }
 
 .post-content h1 {
-  margin-top: 1.5em;
+  font-size: 2rem;
 }
 
-.post-content p {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 20px;
-  color: #080831;
+.post-content h2 {
+  font-size: 1.5rem;
 }
 
-.post-content p,
-li {
-  line-height: 30px;
+.post-content h3 {
+  font-size: 1.2rem;
 }
 
+/* Block Content */
+
 .post-content ul,
-ol {
-  padding-left: 1.2em;
-  font-size: 20px;
+.post-content ol,
+.post-content p {
+  margin-top: 2ex;
+  margin-bottom: 2ex;
+}
+
+.post-content ul {
+  list-style: disc outside;
+  margin-left: 1em;
 }
 
+.post-content iframe {
+  width: 100%;
+}
+
+/* Inline Content */
+
 .post-content img {
   border-radius: 10px;
   max-width: 100%;
 }
 
-.post-content .picture-note {
-  margin-top: -15px;
-  margin-left: 5px;
-  font-size: 16px;
-  line-height: 150%;
-  opacity: 0.5;
-}
-
 .post-content a {
   border-bottom: 2px solid rgba(0, 0, 255, 0.25);
   color: #0000ff;
   text-decoration: none;
 }
 
-.post-content a:hover {
-  transition: all 200ms ease-in-out;
-  border-bottom: none;
-}
-
-.post-content h2 {
-  margin-top: 50px;
-}
+/* Volunteer Banners */
 
 .post-content .volunteers {
   display: flex;