Update layout padding

This commit is contained in:
2024-03-13 23:04:57 +00:00
parent 19382c27df
commit e339c13470
4 changed files with 68 additions and 32 deletions

View File

@@ -3,7 +3,7 @@
<div class="flex flex-col min-h-screen fade-in"> <div class="flex flex-col min-h-screen fade-in">
<NavBar/> <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 @Body
</div> </div>

View File

@@ -1,7 +1,5 @@
@page "/" @page "/"
@implements IDisposable
@inject IJSRuntime JSRuntime @inject IJSRuntime JSRuntime
<PageTitle>Home - Beau Findlay</PageTitle> <PageTitle>Home - Beau Findlay</PageTitle>
@@ -50,8 +48,6 @@ else
{ {
if (firstRender) if (firstRender)
{ {
Typewriter.OnAllTypingCompleted += HandleTypingCompleted;
var renderedBeforeAsString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", ComponentKey); var renderedBeforeAsString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", ComponentKey);
var previousValue = hasPreviouslyRendered; var previousValue = hasPreviouslyRendered;
@@ -69,14 +65,4 @@ else
} }
} }
private static void HandleTypingCompleted()
{
Console.WriteLine("Typewriter finished typing.");
}
public void Dispose()
{
Typewriter.OnAllTypingCompleted -= HandleTypingCompleted;
}
} }

View File

@@ -569,11 +569,6 @@ video {
margin-right: auto; margin-right: auto;
} }
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.ml-3 { .ml-3 {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@@ -662,6 +657,22 @@ video {
width: 100%; width: 100%;
} }
.w-20 {
width: 5rem;
}
.w-16 {
width: 4rem;
}
.w-14 {
width: 3.5rem;
}
.w-10 {
width: 2.5rem;
}
.max-w-xl { .max-w-xl {
max-width: 36rem; max-width: 36rem;
} }
@@ -688,6 +699,10 @@ video {
cursor: pointer; cursor: pointer;
} }
.list-disc {
list-style-type: disc;
}
.grid-cols-1 { .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@@ -799,11 +814,6 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 { .py-8 {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
@@ -813,16 +823,40 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.pb-8 {
padding-bottom: 2rem;
}
.pt-8 { .pt-8 {
padding-top: 2rem; 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-center {
text-align: center; text-align: center;
} }
.font-mono { .font-cascadia {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: Cascadia Code, mono-space;
} }
.text-2xl { .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); 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 { .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-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); --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)); --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
} }
@font-face {
font-family: "Cascadia Code";
src: url("../fonts/CascadiaCode.woff2");
}
@keyframes blink { @keyframes blink {
from, to { from, to {
opacity: 1 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) { @media (prefers-color-scheme: dark) {
.dark\:fill-gray-300 { .dark\:fill-gray-300 {
fill: #d1d5db; fill: #d1d5db;

View File

@@ -29,7 +29,7 @@
referrerpolicy="no-referrer"/> referrerpolicy="no-referrer"/>
</head> </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" <div id="app"
class="h-full"> class="h-full">
<div class="flex items-center justify-center text-2xl"> <div class="flex items-center justify-center text-2xl">