From 8d7d776edfa4955d4e74f63708742f258b2cf360 Mon Sep 17 00:00:00 2001
From: Carlos Stenzel <carlosstenzel@hotmail.com>
Date: Fri, 25 Oct 2024 22:07:24 -0300
Subject: [PATCH 1/7] feat - align content

---
 css/style.css | 201 ++++++++++++++++++++++++++++----------------------
 1 file changed, 114 insertions(+), 87 deletions(-)

diff --git a/css/style.css b/css/style.css
index f6539b00a3..b06ded33c1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -18,7 +18,7 @@
 
 * {
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 body {
@@ -34,11 +34,14 @@ h1 {
   line-height: 36px;
 }
 
-#intro h3, #api-doc h1 {
+#intro h3,
+#api-doc h1 {
   font-weight: normal;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   margin: 5px 0;
   color: #353535;
   -webkit-font-smoothing: antialiased;
@@ -58,7 +61,8 @@ p {
   line-height: 1.35em;
 }
 
-strong, th {
+strong,
+th {
   color: #353535;
 }
 
@@ -75,8 +79,8 @@ strong, th {
 }
 
 #home-content {
-  margin: 40px 0 2% 5%;
-  max-width: 900px;
+  margin: 40px auto 2%;
+  max-width: 64rem;
   padding-right: 9%;
   display: flex;
 }
@@ -103,8 +107,8 @@ strong, th {
 }
 
 #announcements {
-  margin: 3px 5% 32px;
-  max-width: 1005px;
+  margin: 3px auto 32px;
+  max-width: 64rem;
   padding: 0 16px;
   background: #fdfae6;
   border: 1px solid #ebdbb7;
@@ -207,7 +211,7 @@ li code {
 /* scroll */
 
 *::-webkit-scrollbar {
-  background-color: hsla(0, 0%, 100%, .145);
+  background-color: hsla(0, 0%, 100%, 0.145);
   width: 16px;
 }
 
@@ -219,12 +223,12 @@ li code {
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  background-color: gray
+  background-color: gray;
 }
 
 *::-webkit-scrollbar-thumb:active {
-  background-color: #616161
-} 
+  background-color: #616161;
+}
 
 /* links */
 
@@ -238,10 +242,11 @@ a {
   padding-top: 40px;
 }
 
-#api-doc *:target, #page-doc *:target {
- margin-top: -120px;
- padding-top: 120px;
- z-index: -1;
+#api-doc *:target,
+#page-doc *:target {
+  margin-top: -120px;
+  padding-top: 120px;
+  z-index: -1;
 }
 
 .current {
@@ -271,7 +276,7 @@ a {
   display: block;
   font: 4.5em "Helvetica Neue", "Open Sans", sans-serif;
   font-weight: 100;
-  margin-bottom: .25em;
+  margin-bottom: 0.25em;
 }
 
 #description .express a {
@@ -295,7 +300,7 @@ a {
   top: -5px;
   font: 100 4.1em "Helvetica Neue", "Open Sans", sans-serif;
   color: #aeaeae;
-  line-height: .87;
+  line-height: 0.87;
 }
 
 #description em {
@@ -307,7 +312,8 @@ a {
 }
 
 #intro {
-  margin-left: 5%;
+  margin: auto;
+  max-width: 64rem;
 }
 
 #doc-langs {
@@ -337,7 +343,8 @@ header {
 
 /* code */
 
-p code, td code {
+p code,
+td code {
   color: #333;
 }
 
@@ -360,9 +367,9 @@ pre code {
 
 code {
   background-color: var(--code-bg);
-  margin-block: -.125rem;
+  margin-block: -0.125rem;
   font-size: 13px;
-  padding: .125rem .375rem;
+  padding: 0.125rem 0.375rem;
   line-height: 28px;
   border-radius: 6px;
 }
@@ -370,7 +377,7 @@ code {
 /* top button */
 
 .scroll #top {
-  opacity: .2;
+  opacity: 0.2;
 }
 
 #top {
@@ -441,7 +448,6 @@ html[xmlns] .clearfix {
   margin-right: 0;
 }
 
-
 #boxes h3 {
   background: none;
   margin-top: 0;
@@ -452,11 +458,12 @@ html[xmlns] .clearfix {
   width: 100%;
   margin-top: 5px;
   margin-bottom: 20px;
-}     
+}
 
 /* doc specific */
 
-.doctable, section table {
+.doctable,
+section table {
   margin: 1em 1em 1em 0;
   border: 1px solid #c6c6c6;
   border-collapse: collapse;
@@ -464,14 +471,18 @@ html[xmlns] .clearfix {
   width: 100%;
 }
 
-.doctable td, .doctable th, section table td, section table th {
+.doctable td,
+.doctable th,
+section table td,
+section table th {
   padding: 7px;
   line-height: 120%;
   vertical-align: top;
   border: 1px solid #c6c6c6;
 }
 
-.doctable tr th, section table tr th {
+.doctable tr th,
+section table tr th {
   background-color: #dadada;
   font-size: 110%;
 }
@@ -480,12 +491,13 @@ html[xmlns] .clearfix {
   margin-top: 0;
 }
 
-.doctable td p, li p {
+.doctable td p,
+li p {
   width: 100% !important;
 }
 
 .doctable ul {
-  margin: 20px 0
+  margin: 20px 0;
 }
 
 /* doc boxes */
@@ -527,19 +539,18 @@ html[xmlns] .clearfix {
   padding-bottom: 0 !important;
 }
 
-
-.page pre.plain-text, .page code.plain-text {
+.page pre.plain-text,
+.page code.plain-text {
   padding-top: 0 !important;
   color: #000;
 }
 
-
 .doc-notice {
   background: var(--notice-bg);
   border-left: 3px solid var(--notice-accent);
 }
 
-.doc-notice a{
+.doc-notice a {
   color: var(--notice-accent);
   text-decoration: underline;
 }
@@ -549,7 +560,7 @@ html[xmlns] .clearfix {
   border-left: 3px solid var(--info-accent);
 }
 
-.doc-info a{
+.doc-info a {
   color: var(--info-accent);
   text-decoration: underline;
 }
@@ -617,14 +628,15 @@ html[xmlns] .clearfix {
   left: 16px;
 }
 
-pre, code {
+pre,
+code {
   white-space: pre-wrap !important;
 }
 
 footer {
   font-size: 12px;
-  margin: 60px 5% 30px;
-  max-width: 1090px;
+  margin: 60px auto 30px;
+  max-width: 64rem;
   display: flex;
   gap: 24px;
   flex-direction: column;
@@ -639,7 +651,7 @@ footer {
 
 #footer-copyright {
   display: flex;
-  flex-direction: column; 
+  flex-direction: column;
   justify-content: center;
   gap: 20px;
 }
@@ -652,11 +664,11 @@ footer {
   max-width: 125px;
 }
 
-#github{
+#github {
   font-size: 20px;
 }
 
-#footer-policy{
+#footer-policy {
   display: flex;
   flex-wrap: wrap;
   column-gap: 20px;
@@ -665,16 +677,19 @@ footer {
   font-size: 15px;
 }
 
-#footer-links{
+#footer-links {
   display: flex;
   gap: 20px;
 }
 
-@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+@media only screen and (-moz-min-device-pixel-ratio: 1.5),
+  only screen and (-o-min-device-pixel-ratio: 3/2),
+  only screen and (-webkit-min-device-pixel-ratio: 1.5),
+  only screen and (min-devicepixel-ratio: 1.5),
+  only screen and (min-resolution: 1.5dppx) {
   #announcements p:first-child {
     background-image: url(/images/announcement-icon@2x.png);
   }
-
 }
 
 /* navigation */
@@ -702,7 +717,6 @@ footer {
   color: #353535;
 }
 
-
 /* dropdown menu */
 
 #navmenu {
@@ -731,7 +745,7 @@ footer {
   background-color: #fcfcfa;
   border: 1px solid #b2b2b2;
   margin: 0 0 0 1px;
-  box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .menu ul.dropit-submenu a {
@@ -778,7 +792,7 @@ footer {
 
 #menu em,
 #tags-side-menu em,
-#blog-side-menu em{
+#blog-side-menu em {
   font-weight: bold;
   color: #888;
 }
@@ -812,23 +826,21 @@ footer {
 }
 
 #blog-side-menu > li > a {
-  color: #666
+  color: #666;
 }
 
-#blog-side-menu-container > h3 > a  {
-  color: #353535
+#blog-side-menu-container > h3 > a {
+  color: #353535;
 }
 
-
-
 #menu ul a,
 #tags-side-menu ul a {
   color: #555;
   padding-right: 7px;
 }
-#tags-side-menu ul a{
+#tags-side-menu ul a {
   font-size: 13px;
-  font-weight:initial;
+  font-weight: initial;
 }
 
 #menu ul a.active,
@@ -856,12 +868,12 @@ h2 a {
 }
 
 .algolia-autocomplete #q {
-  display: initial
+  display: initial;
 }
 /* search-bar desktop re-sizing */
 @media all and (min-width: 950px) {
   .algolia-autocomplete {
-    margin-right:15px;
+    margin-right: 15px;
     max-width: 12em;
   }
 }
@@ -959,7 +971,7 @@ h2 a {
 
   #description .description {
     font-size: 3em;
-    line-height: .9em;
+    line-height: 0.9em;
     font-weight: 200;
   }
 
@@ -1021,7 +1033,7 @@ h2 a {
     display: block;
   }
 
-  #overlay.blurs{
+  #overlay.blurs {
     display: block;
   }
 
@@ -1120,10 +1132,8 @@ h2 a {
   .algolia-autocomplete {
     display: none !important;
   }
-
 }
 
-
 @media all and (max-width: 420px) {
   #app-settings-property {
     width: auto;
@@ -1135,31 +1145,52 @@ h2 a {
 }
 
 @media all and (max-width: 320px) {
-
   #install-command {
     font-size: 12px;
   }
 }
 
 @media print {
-
   header {
     position: absolute;
   }
 
   #mobile-menu {
-    display:none;
+    display: none;
   }
 }
 
 /* For image callouts in writing-middleware.md  */
 
-.callout {position: relative;}
+.callout {
+  position: relative;
+}
 
-#mw-fig { border-collapse: separate; padding: 0; border: 0; width: 960px; margin-bottom: 20px;}
-#mw-fig-imgcell {margin: 0; padding: 0px; border: 0; width: 410px;}
-#mw-fig-img {margin: 0px; padding: 0px; width: 410px; height: 308px;}
-.mw-fig-callouts {margin: 0; padding: 0 0 0 5px; border: 0; width: 550px;}
+#mw-fig {
+  border-collapse: separate;
+  padding: 0;
+  border: 0;
+  width: 960px;
+  margin-bottom: 20px;
+}
+#mw-fig-imgcell {
+  margin: 0;
+  padding: 0px;
+  border: 0;
+  width: 410px;
+}
+#mw-fig-img {
+  margin: 0px;
+  padding: 0px;
+  width: 410px;
+  height: 308px;
+}
+.mw-fig-callouts {
+  margin: 0;
+  padding: 0 0 0 5px;
+  border: 0;
+  width: 550px;
+}
 
 /* For middleware pages */
 
@@ -1175,7 +1206,7 @@ h2 a {
   padding: 0 10px 0 10px;
   font-size: 13px;
   overflow-y: auto;
- }
+}
 
 #middleware-content {
   /* flex: 0.85; */
@@ -1183,13 +1214,13 @@ h2 a {
 }
 
 #mw-list ul li {
- margin-left: -20px;
+  margin-left: -20px;
 }
 /* Blog page styles*/
 #blog-doc {
   margin: 0 10px;
 }
-#blog-doc:has(> h1#express-blog), 
+#blog-doc:has(> h1#express-blog),
 #blog-doc:has(> h1#write-a-blog-post) {
   min-height: 300px;
 }
@@ -1212,13 +1243,13 @@ h2 a {
   padding: 10px;
   flex-direction: column;
   justify-content: space-between;
-  box-shadow: 2px 3px #E0E0E0;
+  box-shadow: 2px 3px #e0e0e0;
   border-radius: 5px;
-  border: 1px solid #808080;  
+  border: 1px solid #808080;
   transition: 0.1s;
 }
 .blog-post:hover {
-  background-color: #D3D3D3;
+  background-color: #d3d3d3;
   border: 1px solid #303030;
 }
 .blog-post img {
@@ -1240,14 +1271,14 @@ h2 a {
   font-size: 1.3rem;
   line-height: 1.5rem;
   font-weight: 500;
-  padding-right: .2em;
+  padding-right: 0.2em;
 }
 .blog-title a {
   color: #000;
 }
 .blog-excerpt {
   color: initial;
-  font-size: .75rem;
+  font-size: 0.75rem;
 }
 .blog-img {
   max-width: 100%;
@@ -1270,16 +1301,12 @@ h2 a {
     margin-right: 0;
     padding-right: 10px;
   }
-  
-
 
   #blog-doc .blog-details + p > img {
     margin-bottom: 15px;
   }
 }
 
-
-
 /* blog tablet and up*/
 @media (min-width: 768px) {
   .blog-post {
@@ -1287,7 +1314,7 @@ h2 a {
   }
   .blog-tags {
     margin-bottom: 20px;
-  } 
+  }
   .blog-title {
     font-size: 1.3rem;
     margin-bottom: 20px;
@@ -1296,18 +1323,18 @@ h2 a {
   .blog-post .blog-details {
     display: flex;
     flex-direction: row;
-    margin-left: 1rem; 
+    margin-left: 1rem;
     font-size: 90%;
   }
   .blog-post .blog-details div:first-child {
     margin-right: 20px;
   }
-  .blog-details  {
+  .blog-details {
     font-size: 1rem;
   }
   .blog-excerpt {
     line-height: initial;
-    font-size: .85rem;
+    font-size: 0.85rem;
     font-weight: 300;
     margin-top: auto;
     margin-bottom: 10px;
@@ -1337,7 +1364,7 @@ html.dark-mode .no-release {
   column-gap: 48px;
 }
 
-.logo-table h3{
+.logo-table h3 {
   margin-bottom: 12px;
 }
 
@@ -1357,5 +1384,5 @@ blockquote {
   font-weight: 600;
   font-style: italic;
   padding-left: 1.2em;
-  border-left: .25rem solid #ccc;
-}
\ No newline at end of file
+  border-left: 0.25rem solid #ccc;
+}

From 7a796a5a7ad088319380f9cafec73a8fe9a07171 Mon Sep 17 00:00:00 2001
From: Carlos Stenzel <carlosstenzel@hotmail.com>
Date: Fri, 25 Oct 2024 22:18:17 -0300
Subject: [PATCH 2/7] feat - remove auto format by prettier

---
 css/style.css | 186 ++++++++++++++++++++++----------------------------
 1 file changed, 80 insertions(+), 106 deletions(-)

diff --git a/css/style.css b/css/style.css
index b06ded33c1..b2b8721257 100644
--- a/css/style.css
+++ b/css/style.css
@@ -18,7 +18,7 @@
 
 * {
   box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 body {
@@ -34,14 +34,11 @@ h1 {
   line-height: 36px;
 }
 
-#intro h3,
-#api-doc h1 {
+#intro h3, #api-doc h1 {
   font-weight: normal;
 }
 
-h1,
-h2,
-h3 {
+h1, h2, h3 {
   margin: 5px 0;
   color: #353535;
   -webkit-font-smoothing: antialiased;
@@ -61,8 +58,7 @@ p {
   line-height: 1.35em;
 }
 
-strong,
-th {
+strong, th {
   color: #353535;
 }
 
@@ -211,7 +207,7 @@ li code {
 /* scroll */
 
 *::-webkit-scrollbar {
-  background-color: hsla(0, 0%, 100%, 0.145);
+  background-color: hsla(0, 0%, 100%, .145);
   width: 16px;
 }
 
@@ -228,7 +224,7 @@ li code {
 
 *::-webkit-scrollbar-thumb:active {
   background-color: #616161;
-}
+} 
 
 /* links */
 
@@ -242,11 +238,10 @@ a {
   padding-top: 40px;
 }
 
-#api-doc *:target,
-#page-doc *:target {
-  margin-top: -120px;
-  padding-top: 120px;
-  z-index: -1;
+#api-doc *:target, #page-doc *:target {
+ margin-top: -120px;
+ padding-top: 120px;
+ z-index: -1;
 }
 
 .current {
@@ -276,7 +271,7 @@ a {
   display: block;
   font: 4.5em "Helvetica Neue", "Open Sans", sans-serif;
   font-weight: 100;
-  margin-bottom: 0.25em;
+  margin-bottom: .25em;
 }
 
 #description .express a {
@@ -300,7 +295,7 @@ a {
   top: -5px;
   font: 100 4.1em "Helvetica Neue", "Open Sans", sans-serif;
   color: #aeaeae;
-  line-height: 0.87;
+  line-height: .87;
 }
 
 #description em {
@@ -343,8 +338,7 @@ header {
 
 /* code */
 
-p code,
-td code {
+p code, td code {
   color: #333;
 }
 
@@ -367,9 +361,9 @@ pre code {
 
 code {
   background-color: var(--code-bg);
-  margin-block: -0.125rem;
+  margin-block: -.125rem;
   font-size: 13px;
-  padding: 0.125rem 0.375rem;
+  padding: .125rem .375rem;
   line-height: 28px;
   border-radius: 6px;
 }
@@ -377,7 +371,7 @@ code {
 /* top button */
 
 .scroll #top {
-  opacity: 0.2;
+  opacity: .2;
 }
 
 #top {
@@ -448,6 +442,7 @@ html[xmlns] .clearfix {
   margin-right: 0;
 }
 
+
 #boxes h3 {
   background: none;
   margin-top: 0;
@@ -458,12 +453,11 @@ html[xmlns] .clearfix {
   width: 100%;
   margin-top: 5px;
   margin-bottom: 20px;
-}
+}     
 
 /* doc specific */
 
-.doctable,
-section table {
+.doctable, section table {
   margin: 1em 1em 1em 0;
   border: 1px solid #c6c6c6;
   border-collapse: collapse;
@@ -471,18 +465,14 @@ section table {
   width: 100%;
 }
 
-.doctable td,
-.doctable th,
-section table td,
-section table th {
+.doctable td, .doctable th, section table td, section table th {
   padding: 7px;
   line-height: 120%;
   vertical-align: top;
   border: 1px solid #c6c6c6;
 }
 
-.doctable tr th,
-section table tr th {
+.doctable tr th, section table tr th {
   background-color: #dadada;
   font-size: 110%;
 }
@@ -491,13 +481,12 @@ section table tr th {
   margin-top: 0;
 }
 
-.doctable td p,
-li p {
+.doctable td p, li p {
   width: 100% !important;
 }
 
 .doctable ul {
-  margin: 20px 0;
+  margin: 20px 0
 }
 
 /* doc boxes */
@@ -539,18 +528,19 @@ li p {
   padding-bottom: 0 !important;
 }
 
-.page pre.plain-text,
-.page code.plain-text {
+
+.page pre.plain-text, .page code.plain-text {
   padding-top: 0 !important;
   color: #000;
 }
 
+
 .doc-notice {
   background: var(--notice-bg);
   border-left: 3px solid var(--notice-accent);
 }
 
-.doc-notice a {
+.doc-notice a{
   color: var(--notice-accent);
   text-decoration: underline;
 }
@@ -560,7 +550,7 @@ li p {
   border-left: 3px solid var(--info-accent);
 }
 
-.doc-info a {
+.doc-info a{
   color: var(--info-accent);
   text-decoration: underline;
 }
@@ -628,15 +618,14 @@ li p {
   left: 16px;
 }
 
-pre,
-code {
+pre, code {
   white-space: pre-wrap !important;
 }
 
 footer {
   font-size: 12px;
-  margin: 60px auto 30px;
-  max-width: 64rem;
+  margin: 60px 5% 30px;
+  max-width: 1090px;
   display: flex;
   gap: 24px;
   flex-direction: column;
@@ -651,7 +640,7 @@ footer {
 
 #footer-copyright {
   display: flex;
-  flex-direction: column;
+  flex-direction: column; 
   justify-content: center;
   gap: 20px;
 }
@@ -664,11 +653,11 @@ footer {
   max-width: 125px;
 }
 
-#github {
+#github{
   font-size: 20px;
 }
 
-#footer-policy {
+#footer-policy{
   display: flex;
   flex-wrap: wrap;
   column-gap: 20px;
@@ -677,19 +666,16 @@ footer {
   font-size: 15px;
 }
 
-#footer-links {
+#footer-links{
   display: flex;
   gap: 20px;
 }
 
-@media only screen and (-moz-min-device-pixel-ratio: 1.5),
-  only screen and (-o-min-device-pixel-ratio: 3/2),
-  only screen and (-webkit-min-device-pixel-ratio: 1.5),
-  only screen and (min-devicepixel-ratio: 1.5),
-  only screen and (min-resolution: 1.5dppx) {
+@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
   #announcements p:first-child {
     background-image: url(/images/announcement-icon@2x.png);
   }
+
 }
 
 /* navigation */
@@ -717,6 +703,7 @@ footer {
   color: #353535;
 }
 
+
 /* dropdown menu */
 
 #navmenu {
@@ -745,7 +732,7 @@ footer {
   background-color: #fcfcfa;
   border: 1px solid #b2b2b2;
   margin: 0 0 0 1px;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
 }
 
 .menu ul.dropit-submenu a {
@@ -792,7 +779,7 @@ footer {
 
 #menu em,
 #tags-side-menu em,
-#blog-side-menu em {
+#blog-side-menu em{
   font-weight: bold;
   color: #888;
 }
@@ -826,21 +813,23 @@ footer {
 }
 
 #blog-side-menu > li > a {
-  color: #666;
+  color: #666
 }
 
-#blog-side-menu-container > h3 > a {
-  color: #353535;
+#blog-side-menu-container > h3 > a  {
+  color: #353535
 }
 
+
+
 #menu ul a,
 #tags-side-menu ul a {
   color: #555;
   padding-right: 7px;
 }
-#tags-side-menu ul a {
+#tags-side-menu ul a{
   font-size: 13px;
-  font-weight: initial;
+  font-weight:initial;
 }
 
 #menu ul a.active,
@@ -868,12 +857,12 @@ h2 a {
 }
 
 .algolia-autocomplete #q {
-  display: initial;
+  display: initial
 }
 /* search-bar desktop re-sizing */
 @media all and (min-width: 950px) {
   .algolia-autocomplete {
-    margin-right: 15px;
+    margin-right:15px;
     max-width: 12em;
   }
 }
@@ -971,7 +960,7 @@ h2 a {
 
   #description .description {
     font-size: 3em;
-    line-height: 0.9em;
+    line-height: .9em;
     font-weight: 200;
   }
 
@@ -1033,7 +1022,7 @@ h2 a {
     display: block;
   }
 
-  #overlay.blurs {
+  #overlay.blurs{
     display: block;
   }
 
@@ -1132,8 +1121,10 @@ h2 a {
   .algolia-autocomplete {
     display: none !important;
   }
+
 }
 
+
 @media all and (max-width: 420px) {
   #app-settings-property {
     width: auto;
@@ -1145,52 +1136,31 @@ h2 a {
 }
 
 @media all and (max-width: 320px) {
+
   #install-command {
     font-size: 12px;
   }
 }
 
 @media print {
+
   header {
     position: absolute;
   }
 
   #mobile-menu {
-    display: none;
+    display:none;
   }
 }
 
 /* For image callouts in writing-middleware.md  */
 
-.callout {
-  position: relative;
-}
+.callout {position: relative;}
 
-#mw-fig {
-  border-collapse: separate;
-  padding: 0;
-  border: 0;
-  width: 960px;
-  margin-bottom: 20px;
-}
-#mw-fig-imgcell {
-  margin: 0;
-  padding: 0px;
-  border: 0;
-  width: 410px;
-}
-#mw-fig-img {
-  margin: 0px;
-  padding: 0px;
-  width: 410px;
-  height: 308px;
-}
-.mw-fig-callouts {
-  margin: 0;
-  padding: 0 0 0 5px;
-  border: 0;
-  width: 550px;
-}
+#mw-fig { border-collapse: separate; padding: 0; border: 0; width: 960px; margin-bottom: 20px;}
+#mw-fig-imgcell {margin: 0; padding: 0px; border: 0; width: 410px;}
+#mw-fig-img {margin: 0px; padding: 0px; width: 410px; height: 308px;}
+.mw-fig-callouts {margin: 0; padding: 0 0 0 5px; border: 0; width: 550px;}
 
 /* For middleware pages */
 
@@ -1206,7 +1176,7 @@ h2 a {
   padding: 0 10px 0 10px;
   font-size: 13px;
   overflow-y: auto;
-}
+ }
 
 #middleware-content {
   /* flex: 0.85; */
@@ -1214,13 +1184,13 @@ h2 a {
 }
 
 #mw-list ul li {
-  margin-left: -20px;
+ margin-left: -20px;
 }
 /* Blog page styles*/
 #blog-doc {
   margin: 0 10px;
 }
-#blog-doc:has(> h1#express-blog),
+#blog-doc:has(> h1#express-blog), 
 #blog-doc:has(> h1#write-a-blog-post) {
   min-height: 300px;
 }
@@ -1243,13 +1213,13 @@ h2 a {
   padding: 10px;
   flex-direction: column;
   justify-content: space-between;
-  box-shadow: 2px 3px #e0e0e0;
+  box-shadow: 2px 3px #E0E0E0;
   border-radius: 5px;
-  border: 1px solid #808080;
+  border: 1px solid #808080;  
   transition: 0.1s;
 }
 .blog-post:hover {
-  background-color: #d3d3d3;
+  background-color: #D3D3D3;
   border: 1px solid #303030;
 }
 .blog-post img {
@@ -1271,14 +1241,14 @@ h2 a {
   font-size: 1.3rem;
   line-height: 1.5rem;
   font-weight: 500;
-  padding-right: 0.2em;
+  padding-right: .2em;
 }
 .blog-title a {
   color: #000;
 }
 .blog-excerpt {
   color: initial;
-  font-size: 0.75rem;
+  font-size: .75rem;
 }
 .blog-img {
   max-width: 100%;
@@ -1301,12 +1271,16 @@ h2 a {
     margin-right: 0;
     padding-right: 10px;
   }
+  
+
 
   #blog-doc .blog-details + p > img {
     margin-bottom: 15px;
   }
 }
 
+
+
 /* blog tablet and up*/
 @media (min-width: 768px) {
   .blog-post {
@@ -1314,7 +1288,7 @@ h2 a {
   }
   .blog-tags {
     margin-bottom: 20px;
-  }
+  } 
   .blog-title {
     font-size: 1.3rem;
     margin-bottom: 20px;
@@ -1323,18 +1297,18 @@ h2 a {
   .blog-post .blog-details {
     display: flex;
     flex-direction: row;
-    margin-left: 1rem;
+    margin-left: 1rem; 
     font-size: 90%;
   }
   .blog-post .blog-details div:first-child {
     margin-right: 20px;
   }
-  .blog-details {
+  .blog-details  {
     font-size: 1rem;
   }
   .blog-excerpt {
     line-height: initial;
-    font-size: 0.85rem;
+    font-size: .85rem;
     font-weight: 300;
     margin-top: auto;
     margin-bottom: 10px;
@@ -1364,7 +1338,7 @@ html.dark-mode .no-release {
   column-gap: 48px;
 }
 
-.logo-table h3 {
+.logo-table h3{
   margin-bottom: 12px;
 }
 
@@ -1384,5 +1358,5 @@ blockquote {
   font-weight: 600;
   font-style: italic;
   padding-left: 1.2em;
-  border-left: 0.25rem solid #ccc;
-}
+  border-left: .25rem solid #ccc;
+}
\ No newline at end of file

From 224d636e99a41f78a3a7acfb5c66a8aac378eb36 Mon Sep 17 00:00:00 2001
From: Carlos Stenzel <carlosstenzel@hotmail.com>
Date: Fri, 25 Oct 2024 22:22:55 -0300
Subject: [PATCH 3/7] fix - add align in footer

---
 css/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index b2b8721257..23ae237e8c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -624,8 +624,8 @@ pre, code {
 
 footer {
   font-size: 12px;
-  margin: 60px 5% 30px;
-  max-width: 1090px;
+  margin: 60px auto 30px;
+  max-width: 64rem;
   display: flex;
   gap: 24px;
   flex-direction: column;

From 858ebce9f65b669560b0a51469eff289c9a728b8 Mon Sep 17 00:00:00 2001
From: Carlos Stenzel <carlosstenzel@hotmail.com>
Date: Sun, 27 Oct 2024 21:23:43 -0300
Subject: [PATCH 4/7] fix - align in mobile

---
 css/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css/style.css b/css/style.css
index 23ae237e8c..19f339283d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -948,6 +948,7 @@ h2 a {
   #home-content {
     margin: 60px 0 0 5%;
     padding-right: 5%;
+    text-align: center;
   }
 
   #description {
@@ -990,6 +991,8 @@ h2 a {
 
   #boxes div {
     width: 90%;
+    text-align: center;
+    margin-left: 5%;
   }
 
   #home-menu {

From 8386b2f94d4a2a8ef88f8551451233f002747ccd Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 19 Nov 2024 19:23:07 -0500
Subject: [PATCH 5/7] improve layout

---
 _layouts/home.html |  4 +++-
 css/style.css      | 27 +++++++++++----------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/_layouts/home.html b/_layouts/home.html
index 907d6dbc83..77fd66f163 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -16,7 +16,9 @@
     </div>
   {% endif %}
 
-    {{ content }}
+    <main class="home">
+      {{ content }}
+    </main>
 
     {% include footer/footer-{{ page.lang }}.html %}
   </body>
diff --git a/css/style.css b/css/style.css
index 1a5350ba4a..ac29e0710e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -78,10 +78,13 @@ strong, th {
   z-index: 1;
 }
 
-#home-content {
+main.home {
+  max-width: 75rem;
   margin: 40px auto 2%;
-  max-width: 64rem;
-  padding-right: 9%;
+  padding-inline: 5%;
+}
+
+#home-content {
   display: flex;
 }
 
@@ -107,8 +110,7 @@ strong, th {
 }
 
 #announcements {
-  margin: 3px auto 32px;
-  max-width: 64rem;
+  margin-top: 40px;
   padding: 0 16px;
   background: #fdfae6;
   border: 1px solid #ebdbb7;
@@ -305,11 +307,6 @@ a {
   margin-left: 5px;
 }
 
-#intro {
-  margin: auto;
-  max-width: 64rem;
-}
-
 #doc-langs {
   text-align: center;
   font-size: 12px;
@@ -426,6 +423,10 @@ html[xmlns] .clearfix {
 /* boxes */
 
 #boxes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
+  row-gap: 20px;
+  column-gap: 50px;
   margin-top: 30px;
 }
 
@@ -434,11 +435,7 @@ html[xmlns] .clearfix {
 }
 
 #boxes div {
-  width: 215px;
-  margin-right: 50px;
-  float: left;
   list-style: none;
-  padding-bottom: 20px;
 }
 
 #boxes div:last-child {
@@ -1002,9 +999,7 @@ h2 a {
   }
 
   #boxes div {
-    width: 90%;
     text-align: center;
-    margin-left: 5%;
   }
 
   #home-menu {

From 76a715c4acbb2a6ff3bcb841854bb0bd95557880 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Wed, 20 Nov 2024 14:11:15 -0500
Subject: [PATCH 6/7] center text

---
 css/style.css | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index ac29e0710e..91b1daf5d4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -436,13 +436,9 @@ html[xmlns] .clearfix {
 
 #boxes div {
   list-style: none;
+  text-align: center;
 }
 
-#boxes div:last-child {
-  margin-right: 0;
-}
-
-
 #boxes h3 {
   background: none;
   margin-top: 0;
@@ -998,10 +994,6 @@ h2 a {
     font-weight: bold;
   }
 
-  #boxes div {
-    text-align: center;
-  }
-
   #home-menu {
     display: block;
     position: absolute;

From 117e9e44b38a79a97dad486fcb87de028227994f Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Wed, 20 Nov 2024 20:42:29 -0500
Subject: [PATCH 7/7] improve boxes layout

---
 css/style.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 91b1daf5d4..5b1b3b6d28 100644
--- a/css/style.css
+++ b/css/style.css
@@ -424,7 +424,7 @@ html[xmlns] .clearfix {
 
 #boxes {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
   row-gap: 20px;
   column-gap: 50px;
   margin-top: 30px;
@@ -883,6 +883,10 @@ h2 a {
 /* responsive */
 
 @media all and (max-width: 1110px) {
+  #boxes {
+    grid-template-columns: 1fr 1fr;
+  }
+
   #home-content {
     flex-direction: column;
   }
@@ -1025,6 +1029,12 @@ h2 a {
 }
 
 
+@media all and (max-width: 540px) {
+  #boxes {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media all and (max-width: 420px) {
   #app-settings-property {
     width: auto;