=new css system tweaks

Jake Vanderwerf

2026-05-11 c5c75528ba5a0c5254ab5212b1a2ab4a29f91960

 source.css

@@ -370,7 +370,7 @@
/* width: 100%;*/
/*}*/
main > section:nth-of-type(even) {
   background-color: var(--base-100);
   background-color: var(--base);
   max-width: 100vw;
   padding: 3rem 0;
}
@@ -407,6 +407,40 @@
   border-radius: 4px;
}

a{
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: var(--action-0);
}

a::before {
   content: '';
   background-color: rgba(var(--action-rgb), .8);
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   opacity: 0;
   border-radius: 50%;
}

p a:hover {
   text-shadow: 1px 0 10px var(--action-0);
   background-color: transparent!important;
   color: var(--action-contrast)!important;
   border-color:transparent!important;
}
   p a:hover::before {
      opacity: 1;
      filter: blur(1.666em);
      transition: var(--trans-color);
   }



.triangle {
@@ -620,9 +654,51 @@
   left: calc(50% - 15px);
}
body.progress .term-list li {
   flex-wrap: wrap;
   display: flex;
   gap: .5em;
   align-items: center;
}

.timeline.terms {
   width: 100%;
}


.loop .item-grid .progress {
   aspect-ratio: 3/2;
   position: relative;
}

.loop .item-grid .progress figure {
   width: 100%;
   height: 100%;
   display: flex;
   gap: .125rem;
   background-color: var(--action-0);
   position: relative;
}

.loop .item-grid .progress figure span {
   position: absolute;
   width: 50%;
   text-transform: uppercase;
   background-color: rgba(var(--action-rgb),var(--op-4));
   color: var(--action-contrast);
   padding: 0 .25rem;
}

.loop .progress figure img {
   max-width: 50%;
   object-fit: cover;
}

figure .after {
   top: 0;
   right:0;
}

figure .before {
   bottom: 0;
   left: 0;
}