Update layout padding

2024-03-13 23:04:57 +00:00
parent 19382c27df
commit e339c13470
4 changed files with 68 additions and 32 deletions
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/MainLayout.razor
@@ -3,7 +3,7 @@
 <div class="flex flex-col min-h-screen fade-in">
    <NavBar/>
    
-    <div class="flex-1 px-4 md:px-12 py-4">
+    <div class="flex-1 px-4 md:px-12 lg:px-24 xl:px-32 py-4">
        @Body
    </div>

--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
@@ -1,7 +1,5 @@
@page "/"

-@implements IDisposable
-
@inject IJSRuntime JSRuntime

 <PageTitle>Home - Beau Findlay</PageTitle>
@@ -50,8 +48,6 @@ else
    {
        if (firstRender)
        {
-            Typewriter.OnAllTypingCompleted += HandleTypingCompleted;
-            
            var renderedBeforeAsString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", ComponentKey);

            var previousValue = hasPreviouslyRendered;
@@ -69,14 +65,4 @@ else
        }
    }

-    private static void HandleTypingCompleted()
-    {
-        Console.WriteLine("Typewriter finished typing.");
-    }
-
-    public void Dispose()
-    {
-        Typewriter.OnAllTypingCompleted -= HandleTypingCompleted;
-    }
-
 }
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -569,11 +569,6 @@ video {
  margin-right: auto;
 }

-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .ml-3 {
  margin-left: 0.75rem;
 }
@@ -662,6 +657,22 @@ video {
  width: 100%;
 }

+.w-20 {
+  width: 5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
 .max-w-xl {
  max-width: 36rem;
 }
@@ -688,6 +699,10 @@ video {
  cursor: pointer;
 }

+.list-disc {
+  list-style-type: disc;
+}
+
 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -799,11 +814,6 @@ video {
  padding-bottom: 1rem;
 }

-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
@@ -813,16 +823,40 @@ video {
  padding-bottom: 1rem;
 }

+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .pt-8 {
  padding-top: 2rem;
 }

+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-center {
  text-align: center;
 }

-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+.font-cascadia {
+  font-family: Cascadia Code, mono-space;
 }

 .text-2xl {
@@ -935,10 +969,6 @@ video {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

-.outline {
-  outline-style: solid;
-}
-
 .ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -954,6 +984,12 @@ video {
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }

+@font-face {
+  font-family: "Cascadia Code";
+
+  src: url("../fonts/CascadiaCode.woff2");
+}
+
@keyframes blink {
  from, to {
    opacity: 1
@@ -1102,6 +1138,20 @@ body::-webkit-scrollbar-thumb {
  }
 }

+@media (min-width: 1024px) {
+  .lg\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:px-32 {
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+}
+
@media (prefers-color-scheme: dark) {
  .dark\:fill-gray-300 {
    fill: #d1d5db;
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
@@ -29,7 +29,7 @@
          referrerpolicy="no-referrer"/>
 </head>

-<body class="bg-black font-mono text-slate-50 min-h-screen antialiased">
+<body class="bg-black font-cascadia text-slate-50 min-h-screen antialiased">
 <div id="app"
     class="h-full">
    <div class="flex items-center justify-center text-2xl">