Some tailwind simplification

design.config.js

@@ -42,6 +42,7 @@ const layout = {
   mainMenuReduced: 6,
   mainMenu: 20,
   subMenu: 20,
+  navbar: 5,
 };
 
 module.exports = {

src/components/AppLayout.tsx

@@ -167,7 +167,7 @@ export const AppLayout = ({
         className={cJoin(
           `fixed inset-0 m-0 grid touch-pan-y bg-light p-0 text-black
         [grid-template-areas:'main_sub_content']`,
-          cIf(is1ColumnLayout, "grid-rows-[1fr_5rem] [grid-template-areas:'content''navbar']")
+          cIf(is1ColumnLayout, `grid-rows-[1fr_5rem] [grid-template-areas:'content''navbar']`)
         )}
         style={{
           gridTemplateColumns: is1ColumnLayout
@@ -278,13 +278,13 @@ export const AppLayout = ({
         {/* Navbar */}
         <div
           className={cJoin(
-            `texture-paper-dots grid grid-cols-[5rem_1fr_5rem] place-items-center
-          border-t-[1px] border-dotted border-black bg-light [grid-area:navbar]`,
+            `texture-paper-dots z-10 grid grid-cols-[5rem_1fr_5rem] place-items-center
+            border-t-[1px] border-dotted border-black bg-light [grid-area:navbar]`,
             cIf(!is1ColumnLayout, "hidden")
           )}>
           <Ico
             icon={mainPanelOpen ? Icon.Close : Icon.Menu}
-            className="mt-[.1em] cursor-pointer !text-2xl"
+            className="cursor-pointer !text-2xl"
             onClick={() => {
               toggleMainPanelOpen();
               setSubPanelOpen(false);
@@ -302,7 +302,7 @@ export const AppLayout = ({
           {isDefined(subPanel) && !turnSubIntoContent && (
             <Ico
               icon={subPanelOpen ? Icon.Close : subPanelIcon}
-              className="mt-[.1em] cursor-pointer !text-2xl"
+              className="cursor-pointer !text-2xl"
               onClick={() => {
                 toggleSubPanelOpen();
                 setMainPanelOpen(false);

src/pages/wiki/[slug]/index.tsx

@@ -90,7 +90,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
               <div
                 className={cJoin(
                   "mb-8 overflow-hidden rounded-lg bg-mid text-center",
-                  cIf(is3ColumnsLayout, "float-right ml-8 w-[25rem]")
+                  cIf(is3ColumnsLayout, "float-right ml-8 w-96")
                 )}>
                 {page.thumbnail?.data?.attributes && (
                   <Img

src/pages/wiki/chronology.tsx

@@ -341,7 +341,7 @@ export const ChronologyEvent = ({ event, id }: ChronologyEventProps): JSX.Elemen
               </ToolTip>
             )}
 
-            <p className="mt-[0.2rem] grid grid-flow-col gap-1 place-self-start text-xs text-dark">
+            <p className="grid grid-flow-col gap-1 place-self-start text-xs leading-6 text-dark">
               {event.source?.data ? (
                 `(${event.source.data.attributes?.name})`
               ) : (

src/pages/wiki/index.tsx

@@ -211,7 +211,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
           )}
           className={cIf(
             isContentPanelAtLeast4xl,
-            "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
+            "grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-x-6 gap-y-8",
             "grid-cols-2 gap-x-3 gap-y-5"
           )}
           searchingTerm={searchName}