add

README.md

@@ -6,4 +6,9 @@ You can view the sample document created at the link below.
 https://mateus2k2.github.io/blog/en
 
 <!-- https://pypi.org/project/mike/ -->
-<!-- https://squidfunk.github.io/mkdocs-material/plugins/social -->
+<!-- https://squidfunk.github.io/mkdocs-material/plugins/social -->
+
+<!-- https://analytics.google.com/analytics/web/#/a318654020p446644822/admin/streams/table/ -->
+<!-- en = G-EG9FZ3CGSS -->
+<!-- pt = G-QVQFDCGH6E -->
+

docs/en/blog/posts/teste3.md

@@ -0,0 +1,11 @@
+---
+# draft: true 
+date: 2024-01-31 
+categories:
+  - Hello
+  - World
+---
+
+# Hello world!
+
+loremloremloremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremloremloremlorem loremlorem loremlorem loremlorem loremlorem loremlorem   

docs/en/blog/posts/teste4.md

@@ -0,0 +1,11 @@
+---
+# draft: true 
+date: 2024-01-31 
+categories:
+  - Hello
+  - World
+---
+
+# Hello world!
+
+loremloremloremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremloremloremlorem loremlorem loremlorem loremlorem loremlorem loremlorem   

docs/en/index.md

@@ -4,8 +4,10 @@ hide:
 #   - toc
 comments: false
 template: home.html
+description: "Teste"
 ---
 
 # Home
 
+
 Teste

mkdocs.en.yml

@@ -93,6 +93,7 @@ markdown_extensions:
 
 extra_css:
   - assets/stylesheets/extra.css
+  - assets/stylesheets/post-section.css
 
 hooks:
   - overrides/scripts/blogs.py 

mkdocs.pt.yml

@@ -70,7 +70,7 @@ extra:
       lang: en  
   analytics:
     provider: google
-    property: G-EG9FZ3CGSS
+    property: G-QVQFDCGH6E
 
 
 extra_javascript:
@@ -93,6 +93,7 @@ markdown_extensions:
 
 extra_css:
   - assets/stylesheets/extra.css
+  - assets/stylesheets/post-section.css
 
 hooks:
   - overrides/scripts/blogs.py 

overrides/assets/stylesheets/extra.css

@@ -30,4 +30,4 @@
 
 .tags_elements .icon {
   margin-right: 8px;
-}
+}

overrides/assets/stylesheets/post-section.css

@@ -0,0 +1,87 @@
+.services-section {
+  margin: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden; /* Ensures children are contained */
+}
+
+.section-title {
+  text-align: left;
+  margin-bottom: 20px;
+  font-size: 2em;
+  font-weight: bold;
+  padding: 35px;
+}
+
+.service-card-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+.service-card {
+  font-family: 'Overpass', sans-serif;
+  height: auto;
+  width: 100%; /* Use full width of the column */
+  color: darkgray;
+  background-color: #12192c;
+  border-radius: 12px;
+  margin: 10px 0; /* Adjust margin to avoid overflow */
+  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+  transition: all .15s ease;
+  cursor: pointer;
+  padding: 15px;
+  border: 1px solid #ccc;
+  transition: transform 0.2s;
+  box-sizing: border-box; /* Ensures padding and border are included in width */
+}
+
+.title {
+  padding: 15px;
+  font-size: 24px;
+  border-bottom: 2px solid #FAD961;
+  color: #fff;
+}
+
+.bodyin {
+  font-size: 16px;
+  padding: 15px;
+}
+
+.service-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  transform: scale(1.05);
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap; /* Allow items to wrap */
+  padding: 15px;
+  box-sizing: border-box; /* Ensure padding is included in the total width */
+  justify-content: space-between; /* Distribute space between items */
+}
+
+.col-md-4 {
+  box-sizing: border-box; /* Ensure padding is included in the total width */
+  padding: 10px; /* Add padding to each column */
+  flex: 1 1 calc(20% - 20px); /* Ensure each column takes up to 20% width minus padding */
+}
+
+@media screen and (max-width: 1200px) {
+  .col-md-4 {
+    flex: 1 1 calc(33.33% - 20px); /* Adjust to 3 columns */
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .col-md-4 {
+    flex: 1 1 calc(50% - 20px); /* Adjust to 2 columns */
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .col-md-4 {
+    flex: 1 1 calc(100% - 20px); /* Adjust to 1 column */
+  }
+}

overrides/home.html

@@ -4,7 +4,6 @@
 {% block tabs %}
 {{ super() }}
 
-
 <!-- Stole this styling from the "up42-py" project (link: https://sdk.up42.com/) -->
 <!-- .tx-container Original Green Gradient: hsla(160deg,47%,55%,1) -->
 <style>
@@ -376,6 +375,35 @@ <h2>
     <!-- </div> -->
 </div>
 
+<!-- ---------------------------------------------------------------------------- -->
+<!-- POST SECTION -->
+<!-- ---------------------------------------------------------------------------- -->
+
+<div class="services-section">
+
+    <!-- make dependent on the config language -->
+    {% if config.theme.language == 'en' %}
+        <h2 class="section-title">Recent</h2>
+    {% endif %}
+    {% if config.theme.language == 'pt' %}
+        <h2 class="section-title">Recentes</h2>
+    {% endif %}
+
+    <div class="row">
+        {% for post in posts[:5] %}
+            <div class="col-md-4">
+                <a href="{{ post.url }}" class="service-card-link">
+                    <div class="service-card">
+                        <div class="title">
+                            {{ post.title }}
+                        </div>
+                        <p class="bodyin">{{ post.config.date.created.day }}/{{ post.config.date.created.month }}/{{ post.config.date.created.year }}</p>
+                    </div>
+                </a>
+            </div>
+        {% endfor %}
+    </div>
+</div>
 
 {% endblock %}
 {% block content %}{% endblock %}