feat: tall and other changes

Author: peterpeterparker

templates/angular-example/src/app/components/backdrop/backdrop.component.html

@@ -1,7 +1,7 @@
 <div
   [ngClass]="[
     'fixed inset-0 z-40 bg-white/30 flex items-center justify-center',
-    spinner ? 'backdrop-blur-sm' : 'backdrop-blur-xl'
+    spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'
   ]">
   <div
     *ngIf="spinner"

templates/angular-example/src/app/components/background/background.component.html

@@ -1,5 +1,5 @@
 <div
-  class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
   <img
     src="/assets/juno_illustration.svg"
     role="presentation"

templates/angular-example/src/app/components/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="relative isolate min-h-[100dvh]">
-  <main class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+  <main class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
     <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
       Example App
     </h1>

templates/angular-example/src/app/components/modal/modal.component.html

@@ -14,7 +14,7 @@
   <form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
     <div class="relative w-full max-w-xl">
       <textarea
-        class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-none"
+        class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
         rows="{7}"
         placeholder="Your diary entry"
         formControlName="entry"></textarea>

templates/angular-example/tailwind.config.js

@@ -8,9 +8,6 @@ module.exports = {
       sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans]
     },
     extend: {
-      screens: {
-        tall: {raw: '(min-height: 800px)'}
-      },
       animation: {
         fade: 'fadeIn .25s ease-in-out'
       },

templates/angular-starter/src/app/components/background/background.component.html

@@ -1,5 +1,5 @@
 <img
-  class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
   src="/assets/juno_illustration.svg"
   role="presentation"
   loading="lazy"

templates/angular-starter/src/app/components/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="relative isolate min-h-[100dvh]">
-  <main class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+  <main class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
     <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome to Juno</h1>
 
     <div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">

templates/astro-starter/src/components/Background.astro

@@ -1,5 +1,5 @@
 <img
-  class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
   src="./juno_illustration.svg"
   role="presentation"
   loading="lazy"

templates/astro-starter/src/pages/index.astro

@@ -22,7 +22,7 @@ import { SITE_TITLE, SITE_DESCRIPTION, SITE_SOCIAL_IMAGE } from "../consts";
   <body class="bg-white dark:bg-black">
     <div class="relative isolate min-h-[100dvh]">
       <main
-        class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]"
+        class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
       >
         <h1
           class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16"

templates/nextjs-starter/src/app/page.tsx

@@ -20,7 +20,7 @@ export default function Home() {
 
   return (
     <div className="relative isolate min-h-[100dvh]">
-      <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+      <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
         <h1 className="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">
           Welcome to Juno
         </h1>

templates/nextjs-starter/src/components/background.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
       <Image
         src="/juno_illustration.svg"
         role="presentation"