Merge pull request #19 from surajwate:dev

Improve code display and format tables, add new post and change post detail on blog page

src/_includes/layouts/post.html

@@ -1,6 +1,11 @@
 {% extends "layouts/base.html" %} {% block head %} {{ super() }}
 <link rel="stylesheet" href="/assets/css/post.css" />
 
+<!-- Custom Prism CSS -->
+<link rel="stylesheet" href="/assets/css/prism-custom.css">
+<!--- Custom Table Styles -->
+<link rel="stylesheet" href="/assets/css/table-styles.css">
+
 <meta property="og:type" content="article" />
 
 <script

src/assets/css/base.css

@@ -209,6 +209,7 @@ td {
 th {
     background-color: var(--primary-color);
     color: white;
+    border-radius: 5px;
 }
 
 button {

src/assets/css/diary-entry.css

@@ -1,18 +1,20 @@
 .diary-entry-container h1 {
-    font-size: 2.5rem;
+    font-size: 2.4rem;
     color: var(--primary-color);
-    margin-bottom: 1em;
+    margin-bottom: 0em;
     font-family: "Lora", serif;
 }
 
 .diary-entry-date {
-    font-size: 0.9em;
-    color: var(--text-light-color);
+    font-size: 1em;
+    color: var(--text-color);
     margin-bottom: 2em;
+    font-style: italic;
+    text-decoration: underline var(--primary-color);
 }
 
 .diary-entry-content {
-    font-size: 1.15em;
+    font-size: 1.0em;
     line-height: 1.8;
     color: var(--text-color);
     font-family: "Lora", serif;

src/assets/css/post.css

@@ -62,24 +62,6 @@ img {
   margin-bottom: 0.75em; /* Increased spacing between list items */
 }
 
-.post-container table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 2em; /* Increase space below tables */
-  border: 1px solid #ccc; /* Add a subtle border */
-}
-
-.post-container th, .post-container td {
-  border: 1px solid #ddd;
-  padding: 12px; /* Increased padding for table cells */
-  text-align: left;
-}
-
-.post-container th {
-  background-color: var(--primary-color);
-  color: white;
-}
-
 /* Back to Blog link - Minimalistic */
 .back-to-blog {
   display: block;

src/assets/css/prism-custom.css

@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&display=swap');
+
+/* Only apply border and background to <pre>, not <code> */
+pre[class*="language-"] {
+    background-color: transparent; /* Set your desired background color */
+    border: 1px solid #ccc; /* Border around the entire code block */
+    border-radius: 5px; /* Optional: Rounded corners */
+    padding: 1em; /* Padding inside the code block */
+    overflow-x: auto; /* Allow horizontal scrolling for long code */
+}
+
+/* Style the <code> element but no border or background */
+code[class*="language-"] {
+    background-color: transparent; /* Keep transparent */
+    padding: 0; /* Remove padding inside individual lines */
+    font-family: "Fira Code", monospace;
+    font-size: 0.9em;
+}
+
+code,
+pre {
+    font-family: "Fira Code", monospace;
+}

src/assets/css/project.css

@@ -8,6 +8,10 @@
   display: block;
 }
 
+.project-container h3 a {
+  font-size: 1.8rem;
+}
+
 /* Project date */
 .project-container .project-date {
   color: var(--text-light-color);

src/assets/css/table-styles.css

@@ -0,0 +1,95 @@
+/* General table styles */
+table {
+  width: 100%; /* Ensure the table takes full width */
+  border-collapse: separate; /* Allow border radius to work */
+  margin-bottom: 2em; /* Add space after the table */
+  border: 1px solid #ddd; /* Add a light border around the table */
+  border-radius: 5px; /* Apply rounding to the table itself */
+  border-spacing: 0; /* Ensure no space between borders */
+}
+
+/* Header styles */
+th {
+  background-color: transparent; /* Use your site's primary color */
+  color: var(--primary-color); /* White text for headers */
+  padding: 12px; /* Add padding for headers */
+  text-align: left; /* Align text to the left */
+  font-weight: bold; /* Make headers bold */
+  font-size: 1.0em; /* Increase header font size */
+  border-radius: 5px; /* Apply rounding to the headers */
+}
+
+/* Row styles */
+td {
+  border: 1px #ddd; /* Border for cells */
+  padding: 10px; /* Padding for cells */
+  text-align: left; /* Align text to the left */
+  font-size: 0.95em; /* Set font size */
+  color: var(--text-color); /* Ensure text is readable */
+}
+
+/* Specific adjustments for the first and last header cells */
+th:first-child {
+  border-top-left-radius: 5px; /* Ensure top-left corner is rounded */
+}
+
+th:last-child {
+  border-top-right-radius: 5px; /* Ensure top-right corner is rounded */
+}
+
+/* Specific adjustments for the first and last rows' cells */
+td:first-child {
+  border-bottom-left-radius: 5px; /* Ensure bottom-left corner is rounded */
+}
+
+td:last-child {
+  border-bottom-right-radius: 5px; /* Ensure bottom-right corner is rounded */
+}
+
+/* Stripe alternate rows for better readability */
+tr:nth-child(even) {
+  background-color: #f9f9f9; /* Light background color for even rows */
+}
+
+/* Optional: Hover effect for rows */
+tr:hover {
+  background-color: #f1f1f1; /* Change background on hover */
+}
+
+/* First column special styling (row numbers or labels) */
+td:first-child, th:first-child {
+  background-color: transparent; /* Make first column stand out */
+  color: var(--primary-color); /* White text */
+  text-align: center; /* Center align the first column */
+  width: 80px; /* Set a fixed width for the first column */
+  font-weight: bold; /* Make text bold */
+  border-right: 1px solid #ddd; /* Add a border to the right */
+}
+
+/* Coefficient table special styling (if needed) */
+table.coefficient-table td {
+  text-align: center; /* Center align text for coefficient table */
+}
+
+/* Responsive: Table should look good on mobile */
+@media (max-width: 768px) {
+  table, thead, tbody, th, td, tr {
+      display: block; /* Make tables stack on small screens */
+  }
+
+  tr {
+      margin-bottom: 1em;
+  }
+
+  th {
+      position: relative;
+      padding-left: 50%;
+      text-align: left;
+  }
+
+  td {
+      position: relative;
+      padding-left: 50%;
+      text-align: left;
+  }
+}

src/blog/index.html

@@ -11,10 +11,11 @@ <h1>Blog</h1>
     <li class="post-item">
       <a href="{{ post.url }}" aria-label="Read more about {{ post.data.title }}">{{ post.data.title }}</a>
       <p class="post-date">{{ post.data.date | readableDate }}</p>
-      <p class="post-excerpt">{{ post.templateContent | striptags | truncate(250, " ...") }}</p>
+      <p class="post-description">{{ post.data.description }}</p>  <!-- Use description from metadata -->
       <a href="{{ post.url }}" class="read-more" aria-label="Read the full post about {{ post.data.title }}">Read More</a>
     </li>
-
     {% endfor %}
   </ul>
 </div>
+
+