Updated

src/components/Article.astro

@@ -1,5 +1,5 @@
 ---
-// import { Row, Column } from '../../@dasig'
+import { Padding, Column } from '../../@dasig'
 
 interface Props {
   title: string
@@ -13,7 +13,7 @@ interface Props {
 const { title, subtitle, category, date, minutes, content } = Astro.props
 ---
 
-<section>
+<section class="article">
   <span>{category}</span>
   <h1>{title}</h1>
   <h3>{subtitle}</h3>
@@ -22,3 +22,14 @@ const { title, subtitle, category, date, minutes, content } = Astro.props
     <p set:html={content} />
   </div>
 </section>
+
+<style lang="sass">
+  .article
+    display: flex
+    gap: 20px
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: start
+    align-items: center
+    text-align: center
+</style>

src/content/articles/5-tech-icons-and-their-meaning.md

@@ -7,6 +7,17 @@ minutes: 5
 category: Technology
 ---
 
+<style>
+p {
+  text-align: left;
+  padding: 0 10rem
+}
+
+h2 {
+  text-align: left;
+}
+</style>
+
 <picture>
   <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.avif" type="image/avif">
   <source srcset="../../../@dasig/images/5-tech-icons-and-their-meaning.webp" type="image/webp">
@@ -52,8 +63,8 @@ The icon consists of two letters: the initial of his first name “H,” represe
 ## Save Icon
 
 <picture>
-  <source srcset="../../../@dasig/images/bluetooth.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/save.avif" type="image/avif">
-  <source srcset="../../../@dasig/images/bluetooth.webp" type="image/webp">
+  <source srcset="../../../@dasig/images/save.webp" type="image/webp">
   <img alt="5 Tech Icons And Their Meaning">
 </picture>
 
@@ -63,6 +74,18 @@ The icon was designed to represent a floppy disk, the original portable storage
 
 And they looked like this:
 
+<picture>
+  <source srcset="../../../@dasig/images/save-1.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/save-1.webp" type="image/webp">
+  <img alt="5 Tech Icons And Their Meaning">
+</picture>
+
+<picture>
+  <source srcset="../../../@dasig/images/save-2.avif" type="image/avif">
+  <source srcset="../../../@dasig/images/save-2.webp" type="image/webp">
+  <img alt="5 Tech Icons And Their Meaning">
+</picture>
+
 ## RSS Icon
 
 RSS is a method for staying updated on news and content from different websites. Consider it a notification email that keeps you informed whenever a site publishes new content. But to set it up, you’ll need an RSS reader, and the site should provide an RSS feeder.

src/pages/read/[article].astro

@@ -20,9 +20,7 @@ const content = await articleModule.compiledContent()
 
 <Layout title={frontmatter.title}>
   <Page>
-    <Column content="center">
       <ArticleComponent title={frontmatter.title} subtitle={frontmatter.subtitle} category={frontmatter.category} date={frontmatter.date} minutes={frontmatter.minutes} content={content} />
-    </Column>
   </Page>
 </Layout>