commit 1700ce37e63e29f3c7f197de24152a4dd07fe271 · finxol.io/portfolio

+5 -15

src/assets/styles/index.css

···

       125
       125
        
           }

     

       126
       126
        
       

     

       127
       127
        
           .project {

     

       128
       128
       -
               position: relative;

     

       129
       128
        
               display: grid;

     

       130
       129
        
               grid-template-areas:

     

       131
       130
        
                   "img img"

     
···

       140
       139
        
               border-radius: var(--radius);

     

       141
       140
        
               background-color: var(--teal-300);

     

       142
       141
        
       

     

       143
       143
       -
               a {

     

       142
       142
       +
               & > a {

     

       143
       143
       +
                   grid-area: title;

     

       144
       144
       +
                   font-size: 2rem;

     

       145
       145
       +
                   font-weight: bold;

     

       144
       146
        
                   text-decoration: none;

     

       145
       145
       -
               }

     

       146
       146
       -
       

     

       147
       147
       -
               a::before {

     

       148
       148
       -
                   content: "";

     

       149
       149
       -
                   position: absolute;

     

       150
       150
       -
                   inset: 0;

     

       151
       151
       -
                   z-index: 1;

     

       147
       147
       +
                   color: inherit;

     

       152
       148
        
               }

     

       153
       149
        
       

     

       154
       150
        
               & > :not(picture) {

     
···

       160
       156
        
                   grid-area: img;

     

       161
       157
        
       

     

       162
       158
        
                   width: 100%;

     

       163
       163
       -
               }

     

       164
       164
       -
       

     

       165
       165
       -
               & > h3 {

     

       166
       166
       -
                   grid-area: title;

     

       167
       167
       -
       

     

       168
       168
       -
                   font-size: 2rem;

     

       169
       159
        
               }

     

       170
       160
        
       

     

       171
       161
        
               & > ul {

+20

src/assets/styles/main.css

···

       2
       2
        
       /* https://color.surf/ */

     

       3
       3
        
       @import "@evilmartians/harmony/css/amber.css";

     

       4
       4
        
       @import "@evilmartians/harmony/css/yellow.css";

     

       5
       5
       +
       @import "@evilmartians/harmony/css/lime.css";

     

       5
       6
        
       @import "@evilmartians/harmony/css/emerald.css";

     

       6
       7
        
       @import "@evilmartians/harmony/css/teal.css";

     

       7
       8
        
       @import "@evilmartians/harmony/css/sky.css";

     
···

       27
       28
        
       }

     

       28
       29
        
       

     

       29
       30
        
       @layer components {

     

       31
       31
       +
           a svg {

     

       32
       32
       +
               --size: 1.5rem;

     

       33
       33
       +
       

     

       34
       34
       +
               &.external-link {

     

       35
       35
       +
                   --size: 0.75rem;

     

       36
       36
       +
               }

     

       37
       37
       +
           }

     

       38
       38
       +
       

     

       30
       39
        
           svg[data-icon] {

     

       31
       40
        
               --size: 1.5rem;

     

       32
       41
        
       

     
···

       36
       45
        
       }

     

       37
       46
        
       

     

       38
       47
        
       @layer utilities {

     

       48
       48
       +
           :has(> .cover) {

     

       49
       49
       +
               position: relative;

     

       50
       50
       +
           }

     

       51
       51
       +
       

     

       52
       52
       +
           a.cover::before {

     

       53
       53
       +
               content: "";

     

       54
       54
       +
               position: absolute;

     

       55
       55
       +
               inset: 0;

     

       56
       56
       +
               z-index: 1;

     

       57
       57
       +
           }

     

       58
       58
       +
       

     

       39
       59
        
           .container {

     

       40
       60
        
               padding: var(--spacing);

     

       41
       61
        
               width: calc(100% - 2rem * var(--spacing));