···

       
2
       
2
       
 
       
    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">

     

       
3
       
3
       
 
       
        <h1 class="mt-8 text-5xl text-bold text-mauve">hi, I'm dish</h1>

     

       
4
       
4
       
 
       
        {{# Profile picture goes here #}}

     

       
5
       
5
       
-
       
        <div class="h-64 w-64 content-center text-center border-2 mt-4">

     

       
5
       
5
       
+
       
        <div class="h-64 w-64 content-center text-center outline-2 mt-4">

     

       
6
       
6
       
 
       
            there'll be a picture here in the future, promise!

     

       
7
       
7
       
 
       
        </div>

     

       
8
       
8
       
 
       
        <h2 class="text-2xl mt-4">Student, Sysadmin, and UX Crafter</h2>

     

···

       
146
       
146
       
 
       
}

     

       
147
       
147
       
 
       


     

       
148
       
148
       
 
       
@utility callout {

     

       
149
       
149
       
-
       
    @apply border-1 rounded-sm py-2 pl-2 pr-4 border-solid overflow-hidden;

     

       
150
       
150
       
-
       
    border-color: --alpha(var(--callout-color) / 50%);

     

       
149
       
149
       
+
       
    @apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;

     

       
150
       
150
       
+
       
    outline-color: --alpha(var(--callout-color) / 50%);

     

       
151
       
151
       
 
       
    margin: 1em 0;

     

       
152
       
152
       
 
       
    mix-blend-mode: var(--callout-blend-mode);

     

       
153
       
153
       
 
       
    background-color: --alpha(var(--callout-color) / 15%);