feat(news): Update to the latest TailwindCSS 1.2 UI Pagination

anibalsanchez · Mar 3, 2020 · d5433d4 · d5433d4
1 parent 0e461ca
commit d5433d4
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 53 deletions.
diff --git a/template/css/template.css b/template/css/template.css
diff --git a/template/dist/main.css b/template/dist/main.css
diff --git a/template/js/template.js b/template/js/template.js
diff --git a/template/src/base.css b/template/src/base.css
@@ -2,80 +2,89 @@
 
 /* vietnamese */
 @font-face {
-  font-family: 'Muli';
+  font-family: "Muli";
   font-style: normal;
   font-weight: 400;
-  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v16/7Auwp_0qiz-afT3GLRrX.woff2) format('woff2');
+  src: local("Muli Regular"), local("Muli-Regular"),
+    url(https://fonts.gstatic.com/s/muli/v16/7Auwp_0qiz-afT3GLRrX.woff2)
+      format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
   font-display: fallback;
 }
 
 /* latin-ext */
 @font-face {
-  font-family: 'Muli';
+  font-family: "Muli";
   font-style: normal;
   font-weight: 400;
-  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v16/7Auwp_0qiz-afTzGLRrX.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: local("Muli Regular"), local("Muli-Regular"),
+    url(https://fonts.gstatic.com/s/muli/v16/7Auwp_0qiz-afTzGLRrX.woff2)
+      format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-display: fallback;
 }
 /* latin */
 @font-face {
-  font-family: 'Muli';
+  font-family: "Muli";
   font-style: normal;
   font-weight: 400;
-  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v16/7Auwp_0qiz-afTLGLQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: local("Muli Regular"), local("Muli-Regular"),
+    url(https://fonts.gstatic.com/s/muli/v16/7Auwp_0qiz-afTLGLQ.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
   font-display: fallback;
 }
 
 /* / @import url('https://fonts.googleapis.com/css?family=Muli'); with fallback */
 
 body {
-  @apply font-sans leading-normal bg-white
+  @apply font-sans leading-normal bg-white;
 }
 
 a {
-  @apply text-link no-underline
+  @apply text-link no-underline;
 }
 
 p {
-  @apply mt-6
+  @apply mt-6;
 }
 
 h2 {
-  @apply text-3xl mb-3 font-bold
+  @apply text-3xl mb-3 font-bold;
 }
 
 h3 {
-  @apply text-2xl my-8 font-bold
+  @apply text-2xl my-8 font-bold;
 }
 
 h4 {
-  @apply text-xl mt-6 mb-3 tracking-wide font-bold
+  @apply text-xl mt-6 mb-3 tracking-wide font-bold;
 }
 
 h5 {
-  @apply text-lg mt-4 mb-2 tracking-wide font-bold
+  @apply text-lg mt-4 mb-2 tracking-wide font-bold;
 }
 
 ul {
   @apply my-6 list-disc pl-4;
-  padding-inline-start: 1rem
+  padding-inline-start: 1rem;
 }
 
-li>ul {
-  @apply mt-0
+li > ul {
+  @apply mt-0;
 }
 
 figcaption {
-  @apply text-sm
+  @apply text-sm;
 }
 
 blockquote {
   @apply bg-grey-light rounded-lg px-6 py-4 my-4 italic;
 
   p {
-    @apply mt-2
+    @apply mt-2;
   }
 }
diff --git a/template/src/blog-post.html b/template/src/blog-post.html
@@ -567,29 +567,29 @@ <h4>Aníbal Sánchez</h4>
 													viewBox="0 0 237.067 237.067">
 													<path fill="#ffa32b"
 														d="M208.844 112.889h-16.933V67.733c0-12.417-10.16-22.577-22.578-22.577h-45.155V28.222C124.178 12.644 111.534 0 95.956 0c-15.58 0-28.223 12.644-28.223 28.222v16.934H22.578C10.16 45.156.113 55.316.113 67.733v42.898h16.82c16.82 0 30.48 13.66 30.48 30.48s-13.66 30.48-30.48 30.48H0v42.898c0 12.418 10.16 22.578 22.578 22.578h42.898v-16.934c0-16.82 13.66-30.48 30.48-30.48s30.48 13.66 30.48 30.48v16.934h42.897c12.418 0 22.578-10.16 22.578-22.578v-45.156h16.933c15.58 0 28.223-12.643 28.223-28.222s-12.644-28.222-28.223-28.222z" />
-													</svg>
+												</svg>
 												Extly Tech</a></li>
 										<li>Team Leader / Senior Developer</li>
 										<li>Empower your project with our web solutions</li>
 										<li>Today, working on <svg class="inline-block"
 												height="16px" viewBox="0 0 640 512">
 												<path
 													d="M637.5 241.6c-4.2-4.8-62.8-78.1-73.1-90.5-10.3-12.4-15.4-10.2-21.7-9.3-6.4.9-80.5 13.4-89.1 14.8-8.6 1.5-14 4.9-8.7 12.3 4.7 6.6 53.4 75.7 64.2 90.9l-193.7 46.4L161.2 48.7c-6.1-9.1-7.4-12.3-21.4-11.6-14 .6-120.9 9.5-128.5 10.2-7.6.6-16 4-8.4 22s129 279.6 132.4 287.2c3.4 7.6 12.2 20 32.8 15 21.1-5.1 94.3-24.2 134.3-34.7 21.1 38.3 64.2 115.9 72.2 127 10.6 14.9 18 12.4 34.3 7.4 12.8-3.9 199.6-71.1 208-74.5 8.4-3.5 13.6-5.9 7.9-14.4-4.2-6.2-53.5-72.2-79.3-106.8 17.7-4.7 80.6-21.4 87.3-23.3 7.9-2 9-5.8 4.7-10.6zm-352.2 72c-2.3.5-110.8 26.5-116.6 27.8-5.8 1.3-5.8.7-6.5-1.3-.7-2-129-266.7-130.8-270-1.8-3.3-1.7-5.9 0-5.9s102.5-9 106-9.2c3.6-.2 3.2.6 4.5 2.8 0 0 142.2 245.4 144.6 249.7 2.6 4.3 1.1 5.6-1.2 6.1zm306 57.4c1.7 2.7 3.5 4.5-2 6.4-5.4 2-183.7 62.1-187.1 63.6-3.5 1.5-6.2 2-10.6-4.5s-62.4-106.8-62.4-106.8L518 280.6c4.7-1.5 6.2-2.5 9.2 2.2 2.9 4.8 62.4 85.5 64.1 88.2zm12.1-134.1c-4.2.9-73.6 18.1-73.6 18.1l-56.7-77.8c-1.6-2.3-2.9-4.5 1.1-5s68.4-12.2 71.3-12.8c2.9-.7 5.4-1.5 9 3.4 3.6 4.9 52.6 67 54.5 69.4 1.8 2.3-1.4 3.7-5.6 4.7z" />
-												</svg> Laravel, <svg class="inline-block"
+											</svg> Laravel, <svg class="inline-block"
 												height="16px" viewBox="0 0 448 512">
 												<path
 													d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z" />
-												</svg> Amazon AWS, and Ionic/ <svg
+											</svg> Amazon AWS, and Ionic/ <svg
 												class="inline-block" height="16px"
 												viewBox="0 0 415.6 512">
 												<path
 													d="M169.7 268.1h76.2l-38.1-91.6-38.1 91.6zM207.8 32L0 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7L207.8 32zM338 373.8h-48.6l-26.2-65.4H152.6l-26.2 65.4H77.7L207.8 81.5 338 373.8z" />
-												</svg> Angular</li>
+											</svg> Angular</li>
 										<li>A <svg class="inline-block" height="16px"
 												viewBox="0 0 448 512">
 												<path
 													d="M.6 92.1C.6 58.8 27.4 32 60.4 32c30 0 54.5 21.9 59.2 50.2 32.6-7.6 67.1.6 96.5 30l-44.3 44.3c-20.5-20.5-42.6-16.3-55.4-3.5-14.3 14.3-14.3 37.9 0 52.2l99.5 99.5-44 44.3c-87.7-87.2-49.7-49.7-99.8-99.7-26.8-26.5-35-64.8-24.8-98.9C20.4 144.6.6 120.7.6 92.1zm129.5 116.4l44.3 44.3c10-10 89.7-89.7 99.7-99.8 14.3-14.3 37.6-14.3 51.9 0 12.8 12.8 17 35-3.5 55.4l44 44.3c31.2-31.2 38.5-67.6 28.9-101.2 29.2-4.1 51.9-29.2 51.9-59.5 0-33.2-26.8-60.1-59.8-60.1-30.3 0-55.4 22.5-59.5 51.6-33.8-9.9-71.7-1.5-98.3 25.1-18.3 19.1-71.1 71.5-99.6 99.9zm266.3 152.2c8.2-32.7-.9-68.5-26.3-93.9-11.8-12.2 5 4.7-99.5-99.7l-44.3 44.3 99.7 99.7c14.3 14.3 14.3 37.6 0 51.9-12.8 12.8-35 17-55.4-3.5l-44 44.3c27.6 30.2 68 38.8 102.7 28 5.5 27.4 29.7 48.1 58.9 48.1 33 0 59.8-26.8 59.8-60.1 0-30.2-22.5-55-51.6-59.1zm-84.3-53.1l-44-44.3c-87 86.4-50.4 50.4-99.7 99.8-14.3 14.3-37.6 14.3-51.9 0-13.1-13.4-16.9-35.3 3.2-55.4l-44-44.3c-30.2 30.2-38 65.2-29.5 98.3-26.7 6-46.2 29.9-46.2 58.2C0 453.2 26.8 480 59.8 480c28.6 0 52.5-19.8 58.6-46.7 32.7 8.2 68.5-.6 94.2-26 32.1-32 12.2-12.4 99.5-99.7z" />
-												</svg> Joomla Volunteer</li>
+											</svg> Joomla Volunteer</li>
 									</ul>
 
 									<ul class="list-none">
@@ -600,36 +600,36 @@ <h4>Aníbal Sánchez</h4>
 													viewBox="0 0 448 512">
 													<path fill="#ffa32b"
 														d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
-													</svg> linkedin.com/in/anibalsanchez</a></li>
+												</svg> linkedin.com/in/anibalsanchez</a></li>
 										<li><a href="https://github.com/anibalsanchez"
 												target="_blank" rel="noopener noreferrer"><svg
 													class="inline-block" height="16px"
 													viewBox="0 0 496 512">
 													<path fill="#ffa32b"
 														d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-													</svg> github.com/anibalsanchez</a></li>
+												</svg> github.com/anibalsanchez</a></li>
 										<li><a href="https://twitter.com/anibal_sanchez"
 												target="_blank" rel="noopener noreferrer"><svg
 													class="inline-block" height="16px"
 													viewBox="0 0 512 512">
 													<path fill="#ffa32b"
 														d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
-													</svg> @anibal_sanchez</a></li>
+												</svg> @anibal_sanchez</a></li>
 										<li><a href="http://www.facebook.com/anibal.sanchez"
 												target="_blank" rel="noopener noreferrer"><svg
 													class="inline-block" height="16px"
 													viewBox="0 0 448 512">
 													<path fill="#ffa32b"
 														d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
-													</svg> facebook/anibal.sanchez</a></li>
+												</svg> facebook/anibal.sanchez</a></li>
 										<li><a
 												href="https://joomla.stackexchange.com/users/174/anibal"
 												target="_blank" rel="noopener noreferrer"><svg
 													class="inline-block" height="16px"
 													viewBox="0 0 448 512">
 													<path fill="#ffa32b"
 														d="M17.7 332.3h412.7v22c0 37.7-29.3 68-65.3 68h-19L259.3 512v-89.7H83c-36 0-65.3-30.3-65.3-68v-22zm0-23.6h412.7v-85H17.7v85zm0-109.4h412.7v-85H17.7v85zM365 0H83C47 0 17.7 30.3 17.7 67.7V90h412.7V67.7C430.3 30.3 401 0 365 0z" />
-													</svg> stackexchange/anibal</a></li>
+												</svg> stackexchange/anibal</a></li>
 									</ul>
 
 									<a class="github-button"
@@ -646,7 +646,7 @@ <h4>Aníbal Sánchez</h4>
 													viewBox="0 0 448 512">
 													<path fill="#ffa32b"
 														d="M.6 92.1C.6 58.8 27.4 32 60.4 32c30 0 54.5 21.9 59.2 50.2 32.6-7.6 67.1.6 96.5 30l-44.3 44.3c-20.5-20.5-42.6-16.3-55.4-3.5-14.3 14.3-14.3 37.9 0 52.2l99.5 99.5-44 44.3c-87.7-87.2-49.7-49.7-99.8-99.7-26.8-26.5-35-64.8-24.8-98.9C20.4 144.6.6 120.7.6 92.1zm129.5 116.4l44.3 44.3c10-10 89.7-89.7 99.7-99.8 14.3-14.3 37.6-14.3 51.9 0 12.8 12.8 17 35-3.5 55.4l44 44.3c31.2-31.2 38.5-67.6 28.9-101.2 29.2-4.1 51.9-29.2 51.9-59.5 0-33.2-26.8-60.1-59.8-60.1-30.3 0-55.4 22.5-59.5 51.6-33.8-9.9-71.7-1.5-98.3 25.1-18.3 19.1-71.1 71.5-99.6 99.9zm266.3 152.2c8.2-32.7-.9-68.5-26.3-93.9-11.8-12.2 5 4.7-99.5-99.7l-44.3 44.3 99.7 99.7c14.3 14.3 14.3 37.6 0 51.9-12.8 12.8-35 17-55.4-3.5l-44 44.3c27.6 30.2 68 38.8 102.7 28 5.5 27.4 29.7 48.1 58.9 48.1 33 0 59.8-26.8 59.8-60.1 0-30.2-22.5-55-51.6-59.1zm-84.3-53.1l-44-44.3c-87 86.4-50.4 50.4-99.7 99.8-14.3 14.3-37.6 14.3-51.9 0-13.1-13.4-16.9-35.3 3.2-55.4l-44-44.3c-30.2 30.2-38 65.2-29.5 98.3-26.7 6-46.2 29.9-46.2 58.2C0 453.2 26.8 480 59.8 480c28.6 0 52.5-19.8 58.6-46.7 32.7 8.2 68.5-.6 94.2-26 32.1-32 12.2-12.4 99.5-99.7z" />
-													</svg> Joomla! Community Leadership Team</a>
+												</svg> Joomla! Community Leadership Team</a>
 										</li>
 										<li><a
 												href="http://extensions.joomla.org/about-jed/about-the-team"
@@ -655,7 +655,7 @@ <h4>Aníbal Sánchez</h4>
 													viewBox="0 0 448 512">
 													<path fill="#ffa32b"
 														d="M.6 92.1C.6 58.8 27.4 32 60.4 32c30 0 54.5 21.9 59.2 50.2 32.6-7.6 67.1.6 96.5 30l-44.3 44.3c-20.5-20.5-42.6-16.3-55.4-3.5-14.3 14.3-14.3 37.9 0 52.2l99.5 99.5-44 44.3c-87.7-87.2-49.7-49.7-99.8-99.7-26.8-26.5-35-64.8-24.8-98.9C20.4 144.6.6 120.7.6 92.1zm129.5 116.4l44.3 44.3c10-10 89.7-89.7 99.7-99.8 14.3-14.3 37.6-14.3 51.9 0 12.8 12.8 17 35-3.5 55.4l44 44.3c31.2-31.2 38.5-67.6 28.9-101.2 29.2-4.1 51.9-29.2 51.9-59.5 0-33.2-26.8-60.1-59.8-60.1-30.3 0-55.4 22.5-59.5 51.6-33.8-9.9-71.7-1.5-98.3 25.1-18.3 19.1-71.1 71.5-99.6 99.9zm266.3 152.2c8.2-32.7-.9-68.5-26.3-93.9-11.8-12.2 5 4.7-99.5-99.7l-44.3 44.3 99.7 99.7c14.3 14.3 14.3 37.6 0 51.9-12.8 12.8-35 17-55.4-3.5l-44 44.3c27.6 30.2 68 38.8 102.7 28 5.5 27.4 29.7 48.1 58.9 48.1 33 0 59.8-26.8 59.8-60.1 0-30.2-22.5-55-51.6-59.1zm-84.3-53.1l-44-44.3c-87 86.4-50.4 50.4-99.7 99.8-14.3 14.3-37.6 14.3-51.9 0-13.1-13.4-16.9-35.3 3.2-55.4l-44-44.3c-30.2 30.2-38 65.2-29.5 98.3-26.7 6-46.2 29.9-46.2 58.2C0 453.2 26.8 480 59.8 480c28.6 0 52.5-19.8 58.6-46.7 32.7 8.2 68.5-.6 94.2-26 32.1-32 12.2-12.4 99.5-99.7z" />
-													</svg> Joomla! JED Team Manager</a></li>
+												</svg> Joomla! JED Team Manager</a></li>
 									</ul>
 									<ul class="list-none">
 										<li><a
@@ -664,7 +664,7 @@ <h4>Aníbal Sánchez</h4>
 													viewBox="0 0 576 512">
 													<path fill="#ffa32b"
 														d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z" />
-													</svg> A Bunch of Slides and Random
+												</svg> A Bunch of Slides and Random
 												Thoughts</a></li>
 									</ul>
 
@@ -726,7 +726,7 @@ <h4>Aníbal Sánchez</h4>
 		</div>
 
 	</div>
-  <script>!function(e){var t=document.createElement("link");t.rel="stylesheet",t.href="https://d1hvvp61iyzquq.cloudfront.net/templates/xttailwindcss/css/prism.css",t.type="text/css";var n=document.getElementsByTagName("link")[0];n.parentNode.insertBefore(t,n)}();</script>
+	<script>!function (e) { var t = document.createElement("link"); t.rel = "stylesheet", t.href = "https://d1hvvp61iyzquq.cloudfront.net/templates/xttailwindcss/css/prism.css", t.type = "text/css"; var n = document.getElementsByTagName("link")[0]; n.parentNode.insertBefore(t, n) }();</script>
 </body>
 
 </html>
diff --git a/template/src/components.css b/template/src/components.css
@@ -71,7 +71,7 @@
     @apply block p-4;
 
     /* Force the padding */
-    padding: 1rem!important;
+    padding: 1rem !important;
   }
 
   dl.article-info dd {
@@ -103,7 +103,7 @@
   }
 }
 
-.pagination {
+/* .pagination {
   @apply mb-4;
 
   li {
@@ -125,25 +125,101 @@
   ul {
     @apply inline-block list-none p-0 text-sm shadow rounded mt-4;
   }
-}
+} */
 
-.pager {
-  @apply inline-block list-none p-0 text-sm shadow rounded mt-4;
+.pagination {
+  @apply flex-1 flex justify-between;
+
+  p.counter {
+    @apply hidden;
+  }
+
+  ul {
+    @apply flex-1 flex justify-between pl-0;
+  }
 
   li {
-    @apply px-3 py-4 text-center inline-block p-0;
+    @apply hidden relative items-center border border-gray-300 -ml-px bg-white text-sm leading-5 font-medium text-gray-500 rounded-md;
   }
 
-  li a {
-    @apply px-2 inline-block;
+  li.pagination-prev,
+  li.pagination-next {
+    @apply inline-flex;
   }
 
   li span {
-    @apply px-2 py-2 inline-block;
+    @apply px-3 py-2;
   }
 
-  p {
-    @apply text-sm text-right;
+  li a {
+    @apply px-3 py-2 transition ease-in-out duration-150;
+  }
+
+  .pagenav:active {
+    /* active:bg-gray-100 active:text-gray-500*/
+    @apply bg-gray-100 text-gray-500;
+  }
+  .pagenav:focus {
+    /* focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue */
+    @apply z-10 outline-none border-blue-300 shadow-outline-blue;
+  }
+  .pagenav:hover {
+    /* hover:text-gray-400 */
+    @apply text-gray-400;
+  }
+
+  /* sm:flex-1 sm:flex sm:items-center sm:justify-between */
+  @media (min-width: 640px) {
+    @apply items-center;
+
+    ul {
+      @apply relative z-0 flex-none inline-flex shadow-sm;
+    }
+
+    li {
+      @apply inline-flex rounded-none;
+    }
+
+    li a {
+      @apply -ml-px;
+    }
+
+    p.counter {
+      @apply block m-0 text-sm leading-5 text-gray-700;
+    }
+
+    ul:first-child {
+      @apply ml-0;
+    }
+
+    li.pagination-start {
+      @apply rounded-l-md;
+    }
+
+    li.pagination-end {
+      @apply rounded-r-md;
+    }
+  }
+}
+
+.pager {
+  @apply flex-1 flex justify-between pl-0;
+
+  li {
+    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white;
+  }
+
+  a:active {
+    /* active:bg-gray-100 active:text-gray-500*/
+    @apply bg-gray-100 text-gray-500;
+  }
+  a:focus {
+    /* focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue */
+    @apply z-10 outline-none border-blue-300 shadow-outline-blue;
+  }
+  a:hover {
+    /* hover:text-gray-400 */
+    @apply text-gray-400;
   }
 }
 

diff --git a/template/src/index.html b/template/src/index.html
@@ -758,7 +758,7 @@ <h2 class="item-title" itemprop="headline">
 										<li class="pagination-prev"><span
 												class="pagenav">Prev</span></li>
 										<li><span class="pagenav">1</span></li>
-										<li><a href="/en/?start=4" class="pagenav">2</a>
+										<li><a href="/en/?start=4" class="pagenav hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500">2</a>
 										</li>
 										<li><a href="/en/?start=8" class="pagenav">3</a>
 										</li>

diff --git a/template/src/styles.css b/template/src/styles.css
@@ -8,5 +8,3 @@
 
 @import "tailwindcss/utilities";
 @import "./utilities.css";
-
-
diff --git a/template/src/utilities.css b/template/src/utilities.css
@@ -1,4 +1,2 @@
-
 .nothing-yet {
-
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,5 +8,3 @@

		@import "tailwindcss/utilities";
		@import "./utilities.css";