From 4cd23bb23a4a55d8d3c5db1386d0dbf1ea99dc4f Mon Sep 17 00:00:00 2001
From: Sithum Sathsara <89584440+SithumSathsaras@users.noreply.github.com>
Date: Fri, 18 Oct 2024 05:59:44 -0400
Subject: [PATCH] Improve mobile styling for profile page #13

Signed-off-by: Sithum Sathsara <89584440+SithumSathsaras@users.noreply.github.com>
---
 .gitignore             |   5 +-
 templates/home.tmpl    | 100 +++++++++++++++----------------
 templates/layout.tmpl  |   2 +-
 templates/profile.tmpl | 130 ++++++++++++++++++++---------------------
 4 files changed, 120 insertions(+), 117 deletions(-)

diff --git a/.gitignore b/.gitignore
index 19c67f0..f47aa27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,7 @@ secret.env
 node_modules
 public/css
 wireguard.conf
-.DS_Store
\ No newline at end of file
+.DS_Store
+modd.conf
+app.exe
+~app.exe
\ No newline at end of file
diff --git a/templates/home.tmpl b/templates/home.tmpl
index c003ef1..a790583 100644
--- a/templates/home.tmpl
+++ b/templates/home.tmpl
@@ -4,7 +4,7 @@
 
 <header>
   <div class="max-w-screen-xl mx-auto">
-    <div class="text-center md:text-left pt-8 px-4 sm:px-8">
+    <div class="px-4 pt-8 text-center md:text-left sm:px-8">
       <div class="inline-flex flex-col items-center">
         <img class="h-8 -mb-4" src="/public/images/devict.png" alt="devICT" />
         <div class="relative inline-block">
@@ -22,9 +22,9 @@
           </div>
         </div>
       </div>
-      <div class="space-y-5 max-w-4xl">
+      <div class="max-w-4xl space-y-5">
         <!--
-          <div class="rounded-md bg-green-100 p-4">
+          <div class="p-4 bg-green-100 rounded-md">
             <p class="text-base font-medium text-green-800">
               That's a wrap for {{ .Year }}! Thank you all for contributing to devICT's Hacktoberfest.
             </p>
@@ -35,7 +35,7 @@
             This is a blatant attempt to piggyback off the popularity of the
             global
             <a
-              class="underline font-medium text-teal-600 hover:text-teal-700"
+              class="font-medium text-teal-600 underline hover:text-teal-700"
               href="https://hacktoberfest.digitalocean.com"
               >Hacktoberfest event</a
             >
@@ -48,7 +48,7 @@
           <div class="rounded-md shadow">
             <a
               href="/auth/github"
-              class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:border-teal-700 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10"
+              class="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-white transition duration-150 ease-in-out bg-teal-600 border border-transparent rounded-md hover:bg-teal-500 focus:outline-none focus:border-teal-700 md:py-4 md:text-lg md:px-10"
             >
               <svg
                 aria-hidden="true"
@@ -69,7 +69,7 @@
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
             <a
               href="#about"
-              class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-teal-600 bg-white hover:text-teal-300 focus:outline-none focus:border-teal-300 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10"
+              class="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-teal-600 transition duration-150 ease-in-out bg-white border border-transparent rounded-md hover:text-teal-300 focus:outline-none focus:border-teal-300 md:py-4 md:text-lg md:px-10"
             >
               Learn more
             </a>
@@ -81,9 +81,9 @@
       <h2 class="mt-8 text-2xl font-extrabold tracking-tight text-teal-600">
         Thanks to our sponsors!
       </h2>
-      <div class="mt-6 flex flex-wrap gap-8 items-center">
+      <div class="flex flex-wrap items-center gap-8 mt-6">
         {{ range $sponsor := .Sponsors }}
-        <a href="{{ $sponsor.URL }}" title="{{ $sponsor.Name }}" class="shrink-0 w-2/5 opacity-75 sm:w-48 hover:opacity-100">
+        <a href="{{ $sponsor.URL }}" title="{{ $sponsor.Name }}" class="w-2/5 opacity-75 shrink-0 sm:w-48 hover:opacity-100">
           <img
             src="{{ $sponsor.ImagePath }}"
             alt="{{ $sponsor.Name }}"
@@ -95,8 +95,8 @@
     </div>
   </div>
   <div class="relative mt-1">
-    <div class="bg-teal-300 absolute inset-y-0 right-0 w-1/2"></div>
-    <div class="relative bg-white max-w-screen-xl mx-auto">
+    <div class="absolute inset-y-0 right-0 w-1/2 bg-teal-300"></div>
+    <div class="relative max-w-screen-xl mx-auto bg-white">
       <img
         class="block"
         src="/public/images/banner.svg"
@@ -107,15 +107,15 @@
 </header>
 
 <section id="about" class="relative bg-teal-200">
-  <div class="bg-white absolute inset-y-0 left-0 w-1/2"></div>
-  <div class="relative max-w-screen-xl mx-auto py-12 bg-teal-200">
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="absolute inset-y-0 left-0 w-1/2 bg-white"></div>
+  <div class="relative max-w-screen-xl py-12 mx-auto bg-teal-200">
+    <div class="max-w-4xl px-4 mx-auto sm:px-6 lg:px-8">
       <h2
-        class="text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
+        class="text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900 sm:text-4xl sm:leading-10"
       >
         What's this all about?
       </h2>
-      <div class="mt-6 mx-auto prose prose-lg text-gray-900">
+      <div class="mx-auto mt-6 prose prose-lg text-gray-900">
         <p>
           devICT Hacktoberfest is a great opportunity to learn about open source
           projects being built by developers in your community. You can
@@ -138,16 +138,16 @@
   </div>
 </section>
 
-<section id="get-started" class="relative bg-gray-50 py-12">
-  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+<section id="get-started" class="relative py-12 bg-gray-50">
+  <div class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
     <div class="lg:text-center">
       <p
-        class="text-base leading-6 text-teal-600 font-extrabold tracking-wide uppercase"
+        class="text-base font-extrabold leading-6 tracking-wide text-teal-600 uppercase"
       >
         Getting Started
       </p>
       <h3
-        class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
+        class="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
       >
         How it works
       </h3>
@@ -160,7 +160,7 @@
           <div
             data-sr-scale
             aria-hidden="true"
-            class="relative shrink-0 w-12 h-12 flex items-center justify-center"
+            class="relative flex items-center justify-center w-12 h-12 shrink-0"
           >
             <svg
               width="48"
@@ -175,12 +175,12 @@
               />
             </svg>
             <span
-              class="relative text-2xl font-semibold text-orange-700 leading-none"
+              class="relative text-2xl font-semibold leading-none text-orange-700"
               >1</span
             >
           </div>
           <div class="mt-5">
-            <h3 class="text-lg leading-6 font-medium text-gray-900">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Pick an Issue
             </h3>
             <p class="mt-2 text-base text-gray-500">
@@ -192,7 +192,7 @@
           <div
             data-sr-scale
             aria-hidden="true"
-            class="relative shrink-0 w-12 h-12 flex items-center justify-center"
+            class="relative flex items-center justify-center w-12 h-12 shrink-0"
           >
             <svg
               width="48"
@@ -207,18 +207,18 @@
               />
             </svg>
             <span
-              class="relative text-2xl font-semibold text-orange-700 leading-none"
+              class="relative text-2xl font-semibold leading-none text-orange-700"
               >2</span
             >
           </div>
           <div class="mt-5">
-            <h3 class="text-lg leading-6 font-medium text-gray-900">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Make a Change
             </h3>
             <p class="mt-2 text-base text-gray-500">
               Use Git and GitHub to make your change. See
               <a
-                class="underline font-medium text-teal-700 hover:text-teal-800"
+                class="font-medium text-teal-700 underline hover:text-teal-800"
                 href="https://github.com/KatherineMichel/get-a-jumpstart-on-collaboration-and-code-review-in-gitHub-devict-hacktoberfest/blob/master/README.md"
                 >Kati Michel's tutorial</a
               >, if needed.
@@ -229,7 +229,7 @@
           <div
             data-sr-scale
             aria-hidden="true"
-            class="relative shrink-0 w-12 h-12 flex items-center justify-center"
+            class="relative flex items-center justify-center w-12 h-12 shrink-0"
           >
             <svg
               width="48"
@@ -244,12 +244,12 @@
               />
             </svg>
             <span
-              class="relative text-2xl font-semibold text-orange-700 leading-none"
+              class="relative text-2xl font-semibold leading-none text-orange-700"
               >3</span
             >
           </div>
           <div class="mt-5">
-            <h3 class="text-lg leading-6 font-medium text-gray-900">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Submit a PR
             </h3>
             <p class="mt-2 text-base text-gray-500">
@@ -262,7 +262,7 @@
           <div
             data-sr-scale
             aria-hidden="true"
-            class="relative shrink-0 w-12 h-12 flex items-center justify-center"
+            class="relative flex items-center justify-center w-12 h-12 shrink-0"
           >
             <svg
               width="48"
@@ -277,12 +277,12 @@
               />
             </svg>
             <span
-              class="relative text-2xl font-semibold text-orange-700 leading-none"
+              class="relative text-2xl font-semibold leading-none text-orange-700"
               >4</span
             >
           </div>
           <div class="mt-5">
-            <h3 class="text-lg leading-6 font-medium text-gray-900">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
               Enjoy Your Swag!
             </h3>
             <p class="mt-2 text-base leading-6 text-gray-500">
@@ -297,7 +297,7 @@
       <a
         data-sr-scale
         href="/auth/github"
-        class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:ring transition duration-150 ease-in-out"
+        class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white transition duration-150 ease-in-out bg-teal-600 border border-transparent rounded-md hover:bg-teal-500 focus:outline-none focus:ring"
       >
         <svg
           aria-hidden="true"
@@ -319,14 +319,14 @@
 </section>
 
 <div id="projects" class="relative pt-12 pb-12">
-  <div class="absolute bottom-0 w-full h-1/2 lg:h-1/3 bg-gray-100"></div>
-  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="absolute bottom-0 w-full bg-gray-100 h-1/2 lg:h-1/3"></div>
+  <div class="relative max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
     <h2
-      class="text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
+      class="text-3xl font-extrabold leading-8 tracking-tight text-center text-gray-900 sm:text-4xl sm:leading-10"
     >
       Qualifying Projects
     </h2>
-    <div class="mt-4 mx-auto text-center prose prose-xl text-gray-500">
+    <div class="mx-auto mt-4 prose prose-xl text-center text-gray-500">
       <p>
         We will count pull requests opened against any of the Wichita developer
         community organizations listed below, which includes the
@@ -343,7 +343,7 @@
         {{ if $org.Visible }}
         <li class="col-span-1 bg-white rounded-lg shadow hover:shadow-md">
           <a
-            class="group block text-center w-full"
+            class="block w-full text-center group"
             href="https://github.com/{{ $orgName }}"
           >
             <div class="p-6">
@@ -355,9 +355,9 @@
             </div>
             <div class="border-t border-gray-200">
               <div class="flex">
-                <div class="w-0 flex-1 flex">
+                <div class="flex flex-1 w-0">
                   <span
-                    class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg group-hover:text-orange-600 focus:outline-none focus:ring-teal focus:border-teal-300 focus:z-10 transition ease-in-out duration-150"
+                    class="relative inline-flex items-center justify-center flex-1 w-0 py-4 -mr-px text-sm font-medium text-gray-700 transition duration-150 ease-in-out border border-transparent rounded-bl-lg group-hover:text-orange-600 focus:outline-none focus:ring-teal focus:border-teal-300 focus:z-10"
                   >
                     <span class="ml-3">View all projects</span>
                     <svg
@@ -389,22 +389,22 @@
   </div>
 </div>
 <div id="repos" class="pb-12 bg-gray-100">
-  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
     <p class="text-lg text-center">
       We also count pull requests opened against these individual projects from
       Wichita&nbsp;developers
     </p>
-    <ul class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <ul class="grid grid-cols-1 gap-6 mt-10 sm:grid-cols-2 lg:grid-cols-3">
       {{ range $k, $p := .Projects }}
       {{ if $p.Visible }}
       <li class="col-span-1 bg-white rounded-lg shadow hover:shadow-md">
-        <a href="https://github.com/{{ $k }}" class="group block w-full p-6">
+        <a href="https://github.com/{{ $k }}" class="block w-full p-6 group">
           <div
-            class="text-gray-900 text-sm font-medium group-hover:text-orange-600"
+            class="text-sm font-medium text-gray-900 group-hover:text-orange-600"
           >
             {{ $p.Title }}
           </div>
-          <p class="mt-1 text-gray-500 text-sm">{{ $p.Description }}</p>
+          <p class="mt-1 text-sm text-gray-500">{{ $p.Description }}</p>
         </a>
       </li>
       {{
@@ -414,7 +414,7 @@
         end
       }}
     </ul>
-    <p class="text-center mt-6 text-sm">
+    <p class="mt-6 text-sm text-center">
       Would you like your organization or project to show up on these lists?
       Just let us know! File an issue against this site's repo or maybe make a
       pull request.
@@ -423,20 +423,20 @@
 </div>
 <div id="lets-do-this" class="bg-gray-50">
   <div
-    class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
+    class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
   >
     <h2
-      class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
+      class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
     >
       Ready to dive in?
       <br />
       <span class="text-orange-600">Start contributing today.</span>
     </h2>
-    <div class="mt-8 flex lg:shrink-0 lg:mt-0">
+    <div class="flex mt-8 lg:shrink-0 lg:mt-0">
       <span data-sr-scale class="inline-flex rounded-md shadow">
         <a
           href="/auth/github"
-          class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:ring transition duration-150 ease-in-out"
+          class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-white transition duration-150 ease-in-out bg-teal-600 border border-transparent rounded-md hover:bg-teal-500 focus:outline-none focus:ring"
         >
           <svg
             aria-hidden="true"
diff --git a/templates/layout.tmpl b/templates/layout.tmpl
index 55a2d0a..3e69266 100644
--- a/templates/layout.tmpl
+++ b/templates/layout.tmpl
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="bg-white antialiased text-gray-700">
+<html lang="en" class="antialiased text-gray-700 bg-white">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/templates/profile.tmpl b/templates/profile.tmpl
index 11e1da2..624d3c3 100644
--- a/templates/profile.tmpl
+++ b/templates/profile.tmpl
@@ -5,12 +5,12 @@
 
 <div class="fixed top-0 left-0 w-1/2 h-full bg-white"></div>
 <div class="fixed top-0 right-0 w-1/2 h-full bg-gray-50"></div>
-<div class="relative min-h-screen flex flex-col">
-  <nav class="shrink-0 bg-white border-orange-500 border-t-4">
-    <div class="max-w-screen-2xl mx-auto px-2 sm:px-4 lg:px-8">
+<div class="relative flex flex-col min-h-screen">
+  <nav class="bg-white border-t-4 border-orange-500 shrink-0">
+    <div class="px-2 mx-auto max-w-screen-2xl sm:px-4 lg:px-8">
       <div class="relative flex items-center justify-between h-16">
         <div class="flex items-center px-2 lg:px-0 xl:w-64">
-          <a href="/" class="block uppercase font-black tracking-widest shrink-0 text-orange-500 hover:text-orange-400">
+          <a href="/" class="block font-black tracking-widest text-orange-500 uppercase shrink-0 hover:text-orange-400">
             Hacktoberfest
           </a>
         </div>
@@ -18,32 +18,32 @@
     </div>
   </nav>
   <!-- 3 column wrapper -->
-  <div class="border-t border-gray-200 flex-grow w-full max-w-screen-2xl mx-auto xl:px-8 lg:flex">
+  <div class="flex-grow w-full mx-auto border-t border-gray-200 max-w-screen-2xl xl:px-8 lg:flex">
     <!-- Left sidebar & main wrapper -->
     <div class="flex-1 min-w-0 bg-white xl:flex">
       <!-- Account profile -->
-      <div class="xl:shrink-0 xl:w-64 xl:border-r xl:border-gray-200 bg-white">
-        <div class="pl-4 pr-6 py-6 sm:pl-6 lg:pl-8 xl:pl-0">
+      <div class="bg-white xl:shrink-0 xl:w-64 xl:border-r xl:border-gray-200">
+        <div class="py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0">
           <div class="flex items-center justify-between">
             <div class="flex-1 space-y-4 sm:space-y-8">
               <div class="space-y-2 sm:space-y-0 sm:flex sm:justify-between sm:items-center xl:block xl:space-y-2">
                 <!-- Profile -->
-                <div class="flex items-center space-x-3">
-                  <div class="shrink-0 h-12 w-12">
-                    <img class="h-12 w-12 rounded-full" src="{{ .User.AvatarURL }}" alt="{{ .User.Name }}">
+                <div class="flex flex-col items-center space-x-3 sm:flex-row">
+                  <div class="w-12 h-12 shrink-0">
+                    <img class="w-12 h-12 rounded-full" src="{{ .User.AvatarURL }}" alt="{{ .User.Name }}">
                   </div>
-                  <div class="space-y-1">
-                    <div class="text-sm font-medium text-gray-900">{{ .User.Name }}</div>
-                    <a href="https://github.com/{{ .User.NickName }}" class="group flex items-center">
-                      <svg aria-hidden="true" width="20" height="20" class="shrink-0 mr-1 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.435 12.973c.269 0 .492.133.686.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.193.265-.417.396-.686.396-.278 0-.522-.131-.715-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.192-.264.436-.396.715-.396m3.44-3.559c.746.811 1.125 1.795 1.125 2.953 0 .748-.086 1.423-.259 2.023-.175.597-.394 1.084-.654 1.459-.264.376-.588.705-.974.989-.386.286-.741.492-1.065.623-.325.132-.695.233-1.111.306-.417.071-.726.111-.943.123l-.685.014-.547.015c-.301.013-.56.016-.762.016s-.461-.003-.762-.016l-.547-.015-.685-.014c-.218-.012-.526-.052-.943-.123-.423-.072-.786-.174-1.111-.306-.324-.131-.68-.337-1.064-.623-.387-.284-.711-.613-.975-.989-.261-.375-.479-.862-.654-1.459-.173-.6-.259-1.275-.259-2.023 0-1.158.379-2.143 1.125-2.953-.082-.041-.085-.447-.008-1.217.063-.771.227-1.482.495-2.132.934.099 2.09.629 3.471 1.581.466-.119 1.101-.183 1.917-.183.852 0 1.491.064 1.918.184.629-.425 1.23-.771 1.805-1.034.584-.261 1.005-.416 1.269-.457l.396-.09c.27.649.434 1.36.496 2.132.076.769.073 1.175-.009 1.216m-5.845 7.82c1.688 0 2.954-.202 3.821-.607.855-.404 1.292-1.238 1.292-2.496 0-.73-.273-1.34-.822-1.828-.278-.263-.613-.425-.989-.486-.375-.061-.949-.061-1.72 0-.769.062-1.298.09-1.582.09-.385 0-.8-.018-1.319-.059-.52-.04-.928-.065-1.223-.078-.294-.009-.609.027-.958.108-.345.082-.629.224-.853.425-.521.469-.79 1.077-.79 1.828 0 1.258.426 2.092 1.28 2.496.85.405 2.113.607 3.802.607h.061m-2.434-4.261c.268 0 .492.133.685.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.192.265-.417.396-.685.396-.279 0-.522-.131-.716-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.193-.264.436-.396.716-.396"/></svg>
-                      <div class="text-sm text-gray-500 group-hover:text-gray-900 font-medium">{{ .User.NickName }}</div>
+                  <div class="flex flex-col items-center space-y-1 sm:items-start ">
+                    <div class="text-sm font-medium text-gray-900">Sithum Sathsara rajapakshe{{ .User.Name }}</div>
+                    <a href="https://github.com/{{ .User.NickName }}" class="flex items-center group">
+                      <svg aria-hidden="true" width="20" height="20" class="mr-1 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.435 12.973c.269 0 .492.133.686.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.193.265-.417.396-.686.396-.278 0-.522-.131-.715-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.192-.264.436-.396.715-.396m3.44-3.559c.746.811 1.125 1.795 1.125 2.953 0 .748-.086 1.423-.259 2.023-.175.597-.394 1.084-.654 1.459-.264.376-.588.705-.974.989-.386.286-.741.492-1.065.623-.325.132-.695.233-1.111.306-.417.071-.726.111-.943.123l-.685.014-.547.015c-.301.013-.56.016-.762.016s-.461-.003-.762-.016l-.547-.015-.685-.014c-.218-.012-.526-.052-.943-.123-.423-.072-.786-.174-1.111-.306-.324-.131-.68-.337-1.064-.623-.387-.284-.711-.613-.975-.989-.261-.375-.479-.862-.654-1.459-.173-.6-.259-1.275-.259-2.023 0-1.158.379-2.143 1.125-2.953-.082-.041-.085-.447-.008-1.217.063-.771.227-1.482.495-2.132.934.099 2.09.629 3.471 1.581.466-.119 1.101-.183 1.917-.183.852 0 1.491.064 1.918.184.629-.425 1.23-.771 1.805-1.034.584-.261 1.005-.416 1.269-.457l.396-.09c.27.649.434 1.36.496 2.132.076.769.073 1.175-.009 1.216m-5.845 7.82c1.688 0 2.954-.202 3.821-.607.855-.404 1.292-1.238 1.292-2.496 0-.73-.273-1.34-.822-1.828-.278-.263-.613-.425-.989-.486-.375-.061-.949-.061-1.72 0-.769.062-1.298.09-1.582.09-.385 0-.8-.018-1.319-.059-.52-.04-.928-.065-1.223-.078-.294-.009-.609.027-.958.108-.345.082-.629.224-.853.425-.521.469-.79 1.077-.79 1.828 0 1.258.426 2.092 1.28 2.496.85.405 2.113.607 3.802.607h.061m-2.434-4.261c.268 0 .492.133.685.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.192.265-.417.396-.685.396-.279 0-.522-.131-.716-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.193-.264.436-.396.716-.396"/></svg>
+                      <div class="text-sm font-medium text-gray-500 group-hover:text-gray-900">{{ .User.NickName }}</div>
                     </a>
                   </div>
                 </div>
               </div>
               <!-- Steps -->
               <div class="text-sm">
-                <ul class="list-decimal pl-4 space-y-4">
+                <ul class="pl-4 space-y-4 list-decimal">
                   <li class="flex-1 min-w-0">
                       <strong>Pick an Issue</strong><br>
                       Find something to work on for a Wichita based project. You can look through open issues or suggest a new change yourself. For devICT Hacktoberfest we are counting Pull Requests against these organizations or projects.
@@ -69,12 +69,12 @@
 
       <!-- Projects List -->
       <div class="bg-white lg:min-w-0 lg:flex-1">
-        <div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0">
-          <div class="flex items-center">
-            <h1 class="flex-1 text-lg leading-7 font-medium">Your Progress</h1>
+        <div class="pt-4 pb-4 pl-4 pr-6 border-t border-b border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0">
+          <div class="flex flex-col items-center sm:flex-row">
+            <h1 class="flex-1 text-lg font-medium leading-7">Your Progress</h1>
             <h1 class="flex-1 text-lg font-medium">Your Progress</h1>
             <span class="rounded-md shadow-sm">
-              <button type="button" id="check" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:ring-teal focus:border-teal-700 active:bg-teal-700 transition duration-150 ease-in-out">
+              <button type="button" id="check" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-teal-600 border border-transparent rounded-md hover:bg-teal-500 focus:outline-none focus:ring-teal focus:border-teal-700 active:bg-teal-700">
                 <svg aria-hidden="true" width="20" height="20" class="mr-2 -ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.839 17.525c-.006.002-.559.186-1.039.186-.265 0-.372-.055-.406-.079-.168-.117-.48-.336.054-1.4l1-1.994c.593-1.184.681-2.329.245-3.225-.356-.733-1.039-1.236-1.92-1.416-.317-.065-.639-.097-.958-.097-1.849 0-3.094 1.08-3.146 1.126-.179.158-.221.42-.102.626.12.206.367.3.595.222.005-.002.559-.187 1.039-.187.263 0 .369.055.402.078.169.118.482.34-.051 1.402l-1 1.995c-.594 1.185-.681 2.33-.245 3.225.356.733 1.038 1.236 1.921 1.416.314.063.636.097.954.097 1.85 0 3.096-1.08 3.148-1.126.179-.157.221-.42.102-.626-.12-.205-.369-.297-.593-.223z"/><circle cx="13" cy="6.001" r="2.5"/></svg>
                 Check status
               </button>
@@ -82,23 +82,23 @@
           </div>
         </div>
         <ul id="results">
-          <div class="py-10 text-gray-400 text-lg text-center font-medium">Click "Check status" above to refresh your progress.</div>
+          <div class="py-10 text-lg font-medium text-center text-gray-400">Click "Check status" above to refresh your progress.</div>
         </ul>
-        <div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6">
-          <h2 class="flex-1 text-lg leading-7 font-medium">Qualifying Projects</h2>
+        <div class="pt-4 pb-4 pl-4 pr-6 border-t border-b border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6">
+          <h2 class="flex-1 text-lg font-medium leading-7">Qualifying Projects</h2>
         </div>
-        <div class="bg-gray-100 p-6">
-          <h3 class="text-gray-900 text-xs font-medium uppercase tracking-wide">Organizations</h3>
-          <ul class="mt-3 grid grid-cols-1 gap-6 sm:grid-cols-2">
+        <div class="p-6 bg-gray-100">
+          <h3 class="text-xs font-medium tracking-wide text-gray-900 uppercase">Organizations</h3>
+          <ul class="grid grid-cols-1 gap-6 mt-3 sm:grid-cols-2">
             {{ range $orgName, $org := .Orgs }}
               {{ if $org.Visible }}
                 <li class="col-span-1 bg-white rounded-lg shadow hover:shadow-md">
-                  <a class="group block text-center w-full" href="https://github.com/{{ $orgName }}" target="_blank">
+                  <a class="block w-full text-center group" href="https://github.com/{{ $orgName }}" target="_blank">
                     <div class="p-6"><img class="block mx-auto max-h-10" src="{{ $org.ImagePath }}" alt="{{ $org.Title }}"></div>
                     <div class="border-t border-gray-200">
                       <div class="flex">
-                        <div class="w-0 flex-1 flex">
-                          <span class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg group-hover:text-orange-800 focus:outline-none focus:ring-teal focus:border-teal-300 focus:z-10 transition ease-in-out duration-150">
+                        <div class="flex flex-1 w-0">
+                          <span class="relative inline-flex items-center justify-center flex-1 w-0 py-4 -mr-px text-sm font-medium text-gray-700 transition duration-150 ease-in-out border border-transparent rounded-bl-lg group-hover:text-orange-800 focus:outline-none focus:ring-teal focus:border-teal-300 focus:z-10">
                             <span class="ml-3">View all projects</span>
                             <svg aria-hidden="true" width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.293 7.293c-.391.391-.391 1.023 0 1.414l2.293 2.293h-7.586c-.552 0-1 .448-1 1s.448 1 1 1h7.586l-2.293 2.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293s.512-.098.707-.293l4.707-4.707-4.707-4.707c-.391-.391-1.023-.391-1.414 0z"/></svg>
                           </span>
@@ -110,33 +110,33 @@
               {{ end }}
             {{ end }}
           </ul>
-          <h3 class="mt-5 text-gray-900 text-xs font-medium uppercase tracking-wide">Projects</h3>
-          <ul class="mt-3 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <h3 class="mt-5 text-xs font-medium tracking-wide text-gray-900 uppercase">Projects</h3>
+          <ul class="grid grid-cols-1 gap-6 mt-3 sm:grid-cols-2 lg:grid-cols-3">
             {{ range $k, $p := .Projects }}
               {{ if $p.Visible }}
                 <li class="col-span-1 bg-white rounded-lg shadow hover:shadow-md">
-                  <a href="https://github.com/{{ $k }}" class="group block w-full p-6">
-                    <div class="text-gray-900 text-sm font-medium group-hover:text-orange-800">{{ $p.Title }}</div>
-                    <p class="mt-1 text-gray-500 text-sm">{{ $p.Description }}</p>
+                  <a href="https://github.com/{{ $k }}" class="block w-full p-6 group">
+                    <div class="text-sm font-medium text-gray-900 group-hover:text-orange-800">{{ $p.Title }}</div>
+                    <p class="mt-1 text-sm text-gray-500">{{ $p.Description }}</p>
                   </a>
                 </li>
               {{ end }}
             {{ end }}
           </ul>
         </div>
-        <div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6">
-          <h2 class="flex-1 text-lg leading-7 font-medium">Open Issues</h2>
+        <div class="pt-4 pb-4 pl-4 pr-6 border-t border-b border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6">
+          <h2 class="flex-1 text-lg font-medium leading-7">Open Issues</h2>
         </div>
-        <div class="bg-gray-100 overflow-hidden">
-          <button id="issues_show" class="mx-auto my-6 flex items-center px-6 py-3 rounded-md border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:ring-teal focus:border-teal-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out">
+        <div class="overflow-hidden bg-gray-100">
+          <button id="issues_show" class="flex items-center px-6 py-3 mx-auto my-6 text-base font-medium text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:ring-teal focus:border-teal-300 active:text-gray-800 active:bg-gray-50">
             View all open issues
           </button>
           <table id="issues_table" class="min-w-full" style="display: none;">
             <thead>
-              <tr  class="border-t border-gray-200">
-                <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
-                <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Repository</th>
-                <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Languages</th>
+              <tr class="border-t border-gray-200">
+                <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">Title</th>
+                <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">Repository</th>
+                <th class="hidden px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50 sm:table-cell">Languages</th>
               </tr>
             </thead>
             <tbody id="issues" class="bg-white divide-y divide-gray-100"></tbody>
@@ -146,13 +146,13 @@
     </div>
     <!-- Share Info With Sponsors -->
     {{ if .Config.DisplaySponsors }}
-    <div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
+    <div class="pr-4 bg-gray-50 sm:pr-6 lg:pr-8 lg:shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
       <div class="pl-6 lg:w-80">
         <div class="pt-6 pb-2">
           <h2 class="text-sm font-extrabold">Share Info With Sponsors</h2>
         </div>
         <div>
-          <div class="prose prose-sm w-64">
+          <div class="w-64 prose-sm prose">
             <p>
               Our sponsors make this whole thing possible. Several of them are
               actively recruiting and we would like to give them your information. <strong>By
@@ -165,10 +165,10 @@
               since this is open source 🙂
             </p>
           </div>
-          <div class="mt-6 py-4 text-sm border-t border-gray-200">
+          <div class="py-4 mt-6 text-sm border-t border-gray-200">
             <span class="inline-flex rounded-md shadow-sm">
-              <label class="inline-flex items-center py-2 px-4 border border-gray-300 rounded-md text-sm font-medium bg-white text-gray-700 hover:text-gray-500 focus:outline-none focus:border-teal-300 focus:ring-teal active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
-                <input class="h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-600" type="checkbox" id="share_info" />
+              <label class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-teal-300 focus:ring-teal active:bg-gray-50 active:text-gray-800">
+                <input class="w-4 h-4 text-teal-600 border-gray-300 rounded focus:ring-teal-600" type="checkbox" id="share_info" />
                 <span class="ml-2 text-sm text-gray-500" id="share_info_state">Processing...</span>
               </label>
             </div>
@@ -185,24 +185,24 @@ certain bits are filled in. The first is for valid PRs and the second is for
 invalid */}}
 <div style="display:none">
   <div id="pr-template-valid">
-    <li class="bg-white relative pl-4 pr-6 py-5 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
+    <li class="relative py-5 pl-4 pr-6 bg-white sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
       <div class="flex items-center justify-between space-x-4">
         <div class="min-w-0 space-y-3">
           <div class="flex items-center space-x-3">
-            <span aria-label="Valid" class="h-4 w-4 bg-green-100 rounded-full flex items-center justify-center">
-              <span class="h-2 w-2 bg-green-400 rounded-full"></span>
+            <span aria-label="Valid" class="flex items-center justify-center w-4 h-4 bg-green-100 rounded-full">
+              <span class="w-2 h-2 bg-green-400 rounded-full"></span>
             </span>
             <span class="block">
               <h3 class="text-sm font-medium title"></h3>
             </span>
           </div>
-          <div class="relative group flex items-center">
-            <svg aria-hidden="true" width="20" height="20" class="shrink-0 mr-1 text-gray-400" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.435 12.973c.269 0 .492.133.686.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.193.265-.417.396-.686.396-.278 0-.522-.131-.715-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.192-.264.436-.396.715-.396m3.44-3.559c.746.811 1.125 1.795 1.125 2.953 0 .748-.086 1.423-.259 2.023-.175.597-.394 1.084-.654 1.459-.264.376-.588.705-.974.989-.386.286-.741.492-1.065.623-.325.132-.695.233-1.111.306-.417.071-.726.111-.943.123l-.685.014-.547.015c-.301.013-.56.016-.762.016s-.461-.003-.762-.016l-.547-.015-.685-.014c-.218-.012-.526-.052-.943-.123-.423-.072-.786-.174-1.111-.306-.324-.131-.68-.337-1.064-.623-.387-.284-.711-.613-.975-.989-.261-.375-.479-.862-.654-1.459-.173-.6-.259-1.275-.259-2.023 0-1.158.379-2.143 1.125-2.953-.082-.041-.085-.447-.008-1.217.063-.771.227-1.482.495-2.132.934.099 2.09.629 3.471 1.581.466-.119 1.101-.183 1.917-.183.852 0 1.491.064 1.918.184.629-.425 1.23-.771 1.805-1.034.584-.261 1.005-.416 1.269-.457l.396-.09c.27.649.434 1.36.496 2.132.076.769.073 1.175-.009 1.216m-5.845 7.82c1.688 0 2.954-.202 3.821-.607.855-.404 1.292-1.238 1.292-2.496 0-.73-.273-1.34-.822-1.828-.278-.263-.613-.425-.989-.486-.375-.061-.949-.061-1.72 0-.769.062-1.298.09-1.582.09-.385 0-.8-.018-1.319-.059-.52-.04-.928-.065-1.223-.078-.294-.009-.609.027-.958.108-.345.082-.629.224-.853.425-.521.469-.79 1.077-.79 1.828 0 1.258.426 2.092 1.28 2.496.85.405 2.113.607 3.802.607h.061m-2.434-4.261c.268 0 .492.133.685.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.192.265-.417.396-.685.396-.279 0-.522-.131-.716-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.193-.264.436-.396.716-.396"></path></svg>
-            <div class="text-sm text-gray-500 font-medium truncate repo"></div>
+          <div class="relative flex items-center group">
+            <svg aria-hidden="true" width="20" height="20" class="mr-1 text-gray-400 shrink-0" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.435 12.973c.269 0 .492.133.686.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.193.265-.417.396-.686.396-.278 0-.522-.131-.715-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.192-.264.436-.396.715-.396m3.44-3.559c.746.811 1.125 1.795 1.125 2.953 0 .748-.086 1.423-.259 2.023-.175.597-.394 1.084-.654 1.459-.264.376-.588.705-.974.989-.386.286-.741.492-1.065.623-.325.132-.695.233-1.111.306-.417.071-.726.111-.943.123l-.685.014-.547.015c-.301.013-.56.016-.762.016s-.461-.003-.762-.016l-.547-.015-.685-.014c-.218-.012-.526-.052-.943-.123-.423-.072-.786-.174-1.111-.306-.324-.131-.68-.337-1.064-.623-.387-.284-.711-.613-.975-.989-.261-.375-.479-.862-.654-1.459-.173-.6-.259-1.275-.259-2.023 0-1.158.379-2.143 1.125-2.953-.082-.041-.085-.447-.008-1.217.063-.771.227-1.482.495-2.132.934.099 2.09.629 3.471 1.581.466-.119 1.101-.183 1.917-.183.852 0 1.491.064 1.918.184.629-.425 1.23-.771 1.805-1.034.584-.261 1.005-.416 1.269-.457l.396-.09c.27.649.434 1.36.496 2.132.076.769.073 1.175-.009 1.216m-5.845 7.82c1.688 0 2.954-.202 3.821-.607.855-.404 1.292-1.238 1.292-2.496 0-.73-.273-1.34-.822-1.828-.278-.263-.613-.425-.989-.486-.375-.061-.949-.061-1.72 0-.769.062-1.298.09-1.582.09-.385 0-.8-.018-1.319-.059-.52-.04-.928-.065-1.223-.078-.294-.009-.609.027-.958.108-.345.082-.629.224-.853.425-.521.469-.79 1.077-.79 1.828 0 1.258.426 2.092 1.28 2.496.85.405 2.113.607 3.802.607h.061m-2.434-4.261c.268 0 .492.133.685.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.192.265-.417.396-.685.396-.279 0-.522-.131-.716-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.193-.264.436-.396.716-.396"></path></svg>
+            <div class="text-sm font-medium text-gray-500 truncate repo"></div>
           </div>
         </div>
-        <div class="hidden sm:flex flex-col shrink-0 items-end space-y-3">
-          <p class="flex text-gray-500 text-sm space-x-2">
+        <div class="flex-col items-end hidden space-y-3 sm:flex shrink-0">
+          <p class="flex space-x-2 text-sm text-gray-500">
             <span class="date"></span>
           </p>
         </div>
@@ -211,28 +211,28 @@ invalid */}}
   </div>
 
   <div id="pr-template-invalid">
-    <li class="relative pl-4 pr-6 py-5 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
+    <li class="relative py-5 pl-4 pr-6 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
       <div class="flex items-center justify-between space-x-4">
         <div class="space-y-3">
           <div class="flex items-center space-x-3">
-            <span aria-label="Invalid" class="h-4 w-4 bg-red-100 rounded-full flex items-center justify-center">
-              <span class="h-2 w-2 bg-red-400 rounded-full"></span>
+            <span aria-label="Invalid" class="flex items-center justify-center w-4 h-4 bg-red-100 rounded-full">
+              <span class="w-2 h-2 bg-red-400 rounded-full"></span>
             </span>
             <span class="block">
-              <h3 class="text-gray-500 text-sm font-medium title"></h3>
+              <h3 class="text-sm font-medium text-gray-500 title"></h3>
             </span>
           </div>
           <div class="flex items-center">
-            <div class="relative group inline-flex items-center">
-              <svg aria-hidden="true" width="20" height="20" class="shrink-0 mr-1 text-gray-400" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.435 12.973c.269 0 .492.133.686.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.193.265-.417.396-.686.396-.278 0-.522-.131-.715-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.192-.264.436-.396.715-.396m3.44-3.559c.746.811 1.125 1.795 1.125 2.953 0 .748-.086 1.423-.259 2.023-.175.597-.394 1.084-.654 1.459-.264.376-.588.705-.974.989-.386.286-.741.492-1.065.623-.325.132-.695.233-1.111.306-.417.071-.726.111-.943.123l-.685.014-.547.015c-.301.013-.56.016-.762.016s-.461-.003-.762-.016l-.547-.015-.685-.014c-.218-.012-.526-.052-.943-.123-.423-.072-.786-.174-1.111-.306-.324-.131-.68-.337-1.064-.623-.387-.284-.711-.613-.975-.989-.261-.375-.479-.862-.654-1.459-.173-.6-.259-1.275-.259-2.023 0-1.158.379-2.143 1.125-2.953-.082-.041-.085-.447-.008-1.217.063-.771.227-1.482.495-2.132.934.099 2.09.629 3.471 1.581.466-.119 1.101-.183 1.917-.183.852 0 1.491.064 1.918.184.629-.425 1.23-.771 1.805-1.034.584-.261 1.005-.416 1.269-.457l.396-.09c.27.649.434 1.36.496 2.132.076.769.073 1.175-.009 1.216m-5.845 7.82c1.688 0 2.954-.202 3.821-.607.855-.404 1.292-1.238 1.292-2.496 0-.73-.273-1.34-.822-1.828-.278-.263-.613-.425-.989-.486-.375-.061-.949-.061-1.72 0-.769.062-1.298.09-1.582.09-.385 0-.8-.018-1.319-.059-.52-.04-.928-.065-1.223-.078-.294-.009-.609.027-.958.108-.345.082-.629.224-.853.425-.521.469-.79 1.077-.79 1.828 0 1.258.426 2.092 1.28 2.496.85.405 2.113.607 3.802.607h.061m-2.434-4.261c.268 0 .492.133.685.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.192.265-.417.396-.685.396-.279 0-.522-.131-.716-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.193-.264.436-.396.716-.396"></path></svg>
-              <span class="text-sm text-gray-500 font-medium truncate repo"></span>
+            <div class="relative inline-flex items-center group">
+              <svg aria-hidden="true" width="20" height="20" class="mr-1 text-gray-400 shrink-0" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.435 12.973c.269 0 .492.133.686.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.193.265-.417.396-.686.396-.278 0-.522-.131-.715-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.192-.264.436-.396.715-.396m3.44-3.559c.746.811 1.125 1.795 1.125 2.953 0 .748-.086 1.423-.259 2.023-.175.597-.394 1.084-.654 1.459-.264.376-.588.705-.974.989-.386.286-.741.492-1.065.623-.325.132-.695.233-1.111.306-.417.071-.726.111-.943.123l-.685.014-.547.015c-.301.013-.56.016-.762.016s-.461-.003-.762-.016l-.547-.015-.685-.014c-.218-.012-.526-.052-.943-.123-.423-.072-.786-.174-1.111-.306-.324-.131-.68-.337-1.064-.623-.387-.284-.711-.613-.975-.989-.261-.375-.479-.862-.654-1.459-.173-.6-.259-1.275-.259-2.023 0-1.158.379-2.143 1.125-2.953-.082-.041-.085-.447-.008-1.217.063-.771.227-1.482.495-2.132.934.099 2.09.629 3.471 1.581.466-.119 1.101-.183 1.917-.183.852 0 1.491.064 1.918.184.629-.425 1.23-.771 1.805-1.034.584-.261 1.005-.416 1.269-.457l.396-.09c.27.649.434 1.36.496 2.132.076.769.073 1.175-.009 1.216m-5.845 7.82c1.688 0 2.954-.202 3.821-.607.855-.404 1.292-1.238 1.292-2.496 0-.73-.273-1.34-.822-1.828-.278-.263-.613-.425-.989-.486-.375-.061-.949-.061-1.72 0-.769.062-1.298.09-1.582.09-.385 0-.8-.018-1.319-.059-.52-.04-.928-.065-1.223-.078-.294-.009-.609.027-.958.108-.345.082-.629.224-.853.425-.521.469-.79 1.077-.79 1.828 0 1.258.426 2.092 1.28 2.496.85.405 2.113.607 3.802.607h.061m-2.434-4.261c.268 0 .492.133.685.396.192.265.294.588.294.975 0 .385-.102.711-.294.973-.192.265-.417.396-.685.396-.279 0-.522-.131-.716-.396-.192-.262-.294-.588-.294-.973 0-.387.102-.71.294-.975.193-.264.436-.396.716-.396"></path></svg>
+              <span class="text-sm font-medium text-gray-500 truncate repo"></span>
             </div>
-            <span class="text-sm mx-1">&middot;</span>
+            <span class="mx-1 text-sm">&middot;</span>
             <div class="text-sm text-gray-500">If you feel this should qualify please <a class="text-teal-600 hover:text-teal-700" href="https://github.com/devict/hacktoberfest/issues/new">file an issue</a>.</div>
           </div>
         </div>
-        <div class="hidden sm:flex flex-col shrink-0 items-end space-y-3">
-          <p class="flex text-gray-500 text-sm space-x-2">
+        <div class="flex-col items-end hidden space-y-3 sm:flex shrink-0">
+          <p class="flex space-x-2 text-sm text-gray-500">
             <span class="date"></span>
           </p>
         </div>