From 2bfc25b1f2b71c9ffb030687b35828d7ecbaf8c3 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sun, 30 Jul 2023 16:25:50 +0200
Subject: [PATCH] continue graphical mockup

---
 index.html | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 986a143..215c1a2 100644
--- a/index.html
+++ b/index.html
@@ -92,39 +92,44 @@
               <!-- Font Size Selection -->
               <div class="space-y-6 w-auto min-w-screen px-4">
                 <div id="font-size-selector" class="flex flex-row space-x-4 rounded-lg">
-                  <label for="default-range" class="text-sm font-medium text-black w-1/5">Font Size</label>
-                  <input id="default-range" type="range" step=1 value="22" class="w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+                  <label for="default-range" class="text-xs lg:text-sm font-medium text-black w-2/5 lg:w-1/5">Font Size: 22px</label>
+                  <input id="default-range" type="range" step=1 value="22" class="align-middle w-3/5 lg:w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
                 </div>
               </div>
               <!-- Font Family Selection -->
               <div class="space-y-6 w-auto min-w-screen px-4">
               </div>
               <!-- Editor mode selection -->
-              <div class="flex flex-row space-x-4 justify-center px-4">
+              <div class="flex flex-row space-x-4 justify-center px-2 mx-2">
                 <div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
                   <input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                  <label for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Editor Mode</label>
+                  <label for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
                 </div>
                 <div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
                   <input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                  <label for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Editor Mode</label>
+                  <label for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
                 </div>
               </div>
               <!-- Information card -->
-              <div class="flex lg:flex-row flex-col w-auto min-w-screen px-4 pb-8 space-x-8">
-                <a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
-                  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">GitHub</h5>
+              <div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
+                <a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
+                  <h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-gray-900 dark:text-white">GitHub</h5>
                   <p class="font-normal text-gray-700 dark:text-gray-400">Get involved in the dev process and or file an issue for a broken feature</p>
                 </a>
-                <a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
-                  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Discord</h5>
+                <a class="block max-w-sm p-6  border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
+                  <h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-gray-900 dark:text-white">Discord</h5>
                   <p class="font-normal text-gray-700 dark:text-gray-400">Join the community on the official Topos/Sardine Discord Server.</p>
                 </a>
-                <a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
-                  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
+                <a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
+                  <h5 class="mb-2 text-xl lg:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
                   <p class="font-normal text-gray-700 dark:text-gray-400">Documentation, videos and more on the official website.</p>
                 </a>
               </div>
+              <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
+                <button data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
+                <button data-modal-hide="defaultModal" type="button" class="mt-4 mb-4 text-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
+              </div>
+
             </div>
           </div>
         </div>