=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 {
@@ -467,6 +501,12 @@
   left: -2rem;
   cursor: pointer;
}
.tldr.term {
   font-weight: var(--fw-b-light);
   font-size: var(--txt-medium);
   left: 0;
   color: var(--contrast);
}
.align-full.triangle:has(+.contact) {
   margin-bottom: 0;
   z-index: 1;
@@ -594,3 +634,71 @@
      width: 25vw;
   }
}

.feed.item[data-timeline] .images {
   padding: 0;
}
.feed.item details summary {
   position: relative;
   top: 0;
}

.directory-list .image {
   position: relative;
}
.directory-list .image .icon {
   transform: rotate(90deg);
   --w: 40px;
   color: var(--action-0);
   position: absolute;
   left: calc(50% - 15px);
}
body.progress .term-list li {
   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;
}