Ivanish (CSS)

December Adventure

Thu, 04 Dec 2025 12:00:00 GMT


      .js-stars { filter: hue-rotate(-90deg) saturate(50%); }
      body { color: black; background: hsl(216, 39%, 83%) }
      main { font-weight: bold; }
      img { width: 100%; max-width: 600px; }

good knob

Tue, 02 Dec 2025 12:00:00 GMT


    	html {
    		background: #c2c1c0;
    		overflow: hidden;
    	}
    	header { display: none; }
    	canvas {
    		position: absolute;
    		inset: 0;
    		width: 100%;
    		height: 100%;
    		z-index: -1;
    	}
    	footer {
    		position: absolute;
    		bottom: 0;
    		right: 0;
    		padding: 1em;
    	}
    	* {
    		text-align: center;
    		color: white;
    	}
    	title {
    		margin-block: 5vh -.8rem;
    		color: white;
    		font-family: hopper;
    	}
    	div {
    		position: absolute;
    		bottom: 20vh;
    		right: 50%;
    		translate: 50% 0;
    		font-size: clamp(1rem, 1.3vw, 1.5rem);
    		font-family: gull;
    	}
    	@font-face {
    		font-display: block;
    		font-family: hopper;
    		src: url("hopper.woff2");
    	}
    	@font-face {
    		font-display: block;
    		font-family: gull;
    		src: url("gull.woff2");
    	}

Refract

Sat, 29 Nov 2025 12:00:00 GMT


      body {
        color: white;
        background-color: hsl(250, 30%, 5%);
      }
      object, ruffle-object {
        width: 100%;
        height: auto;
        aspect-ratio: 960 / 540;
        background: hsl(240, 30%, 10%)
      }

Podcasts

Mon, 26 May 2025 12:00:00 GMT


    h1 { margin-block: 1em 0; }
    ul { list-style-type: none; margin: 0; }
    li { position: relative; margin-block: .5em; }
    code { font-size: 12px; line-height: 23px; position: absolute; right: calc(100% + .5em); font-family: inherit; text-align: center; min-width: 1.5em; }
    .legend { margin-top: 1em; max-width: max-content; padding: 1em; border: 1px solid currentcolor; }

It's okay to forget

Mon, 03 Feb 2025 12:00:00 GMT


      title { margin-top: 1.2em }

Mostly Shallow

Tue, 24 Dec 2024 12:00:00 GMT


      body {
        color: white;
        background: black;
      }
    
      main img {
        margin: 3em 0;
        max-width: 100%;
      }

Feeds

Sun, 01 Dec 2024 12:00:00 GMT


      /* Hey, thanks for checking out my CSS feed! */
    
      /* The CSS rules on my site are where I experiment. Hacks abound. Bad is practiced. But, hey, best foot forward: */
      @supports(background-image: linear-gradient(in oklch, color(display-p3 0 0 0), #000)) {
    
        .easter-egg {
          background-image: linear-gradient(to right in oklch, color(display-p3 .2 0 .2), color(display-p3 0 .2 0));
          background-clip: text;
    
          /* DYK? This isn't technically a prefix — it's a compat standard. Cursed. */
          /* https://compat.spec.whatwg.org/#the-webkit-text-fill-color */
          -webkit-text-fill-color: transparent;
        }
    
      }

IvanArts

Mon, 15 Jul 2024 12:00:00 GMT


      body {
        background: #ddd;
      }
    
      @media(min-width:500px) {
        .hero {
          width: 50%;
          margin: 0 0 .5em;
    
          &.left {
            float: left;
            margin-right: 1em;
          }
          &.right {
            float: right;
            margin-left: 1em;
    
            /* Without this, the paragraph covers this float */
            position: relative;
            z-index: 2;
          }
        }
      }
    
    
      .retro {
        display: block;
        margin: 0;
        padding: 4px;
        border: 2px solid #aaa;
        border-top: 2px solid #f2f2f2;
        border-bottom: 2px solid #666;
        background: #ccc;
      }
    
      .retro div {
        margin: 0;
        padding: .5em .5em 0;
        color: black;
      }
    
      iframe {
        width: 100%;
        height: 600px;
        margin: 0;
        border: 2px solid #aaa;
        border-top: 2px solid #777;
        border-bottom: 2px solid #ddd;
        background: black;
    
        &::-webkit-scrollbar {
          width: 16px;
          height: 16px;
          background: #aaa;
          border: 1px solid #555;
        }
    
        &::-webkit-scrollbar-thumb {
          background: #bbb;
          border: 2px solid #666;
          border-top: 2px solid #ddd;
          border-bottom: 2px solid #444;
        }
    
        &::-webkit-scrollbar-corner {
          background: #999;
        }
      }

Jerk

Mon, 08 Jul 2024 12:00:00 GMT

 title { margin-left: 9px; } 
    
    
      #opportunities {
        margin: 1em 0;
        md { display: block; max-width: 50% } /* MAYBE THIS IS WRONG NOW?? */
        .a { margin-left: 30%; max-width: 60% }
        .b { margin-left: 10% }
        .c { margin-left: 60% }
        .d { margin-left: 30% }
        .e { margin-left: 50% }
      }
    
    
    
      .hero.normalize {
        text-align: left;
        margin-left: 3vw;
        img {
          box-shadow: -1em 2em 3em -1em #313338;
          rotate: -1deg;
          border-radius: .5em;
          width: 20em;
        }
      }
    
    
    
      .hero.metro {
        text-align: right;
        margin-right: 5vw;
        img {
          box-shadow: -1em 2em 3em -1em #25282c;
          rotate: .4deg;
          border-radius: .5em;
          width: 30em;
        }
      }
    
    
    
      .hero.moire {
        text-align: center;
        img {
          box-shadow: -1em 2em 3em -1em #313338;
          rotate: -.3deg;
          border-radius: .5em;
          width: 40em;
        }
      }
    
    
    
      .hero.faster {
        text-align: right;
        iframe:not(:fullscreen) {
          display: inline-block;
          width: 40em;
          border-radius: .5em;
          rotate: 3deg;
          margin: 0;
          box-shadow: -1em 2em 3em -1em #313338;
        }
        p {
          margin-right: 5em;
          font-size: .8em;
          rotate: 3deg;
        }
      }
    
    
    
      .hero.lu {
        box-shadow: -1em 2em 3em -1em #313338;
        rotate: -1deg;
        max-width: 30em;
        border-radius: .5em;
        overflow: hidden;
      }
    
    
    
      .hero.torn {
        text-align: center;
        iframe:not(:fullscreen) {
          display: inline-block;
          width: 36em;
          border-radius: .5em;
          rotate: -.2deg;
          margin: 0;
          box-shadow: -1em 2em 3em -1em #313338;
        }
      }
    
    
    
      .hero.cymbals {
        text-align: center;
        img {
          width: 45em;
          border-radius: 1em;
          rotate: -5deg;
          box-shadow: -1em 2em 3em -1em #313338;
        }
        p {
          font-size: .8em;
          rotate: -5deg;
        }
      }

Starfailed

Wed, 01 Jun 2016 12:00:00 GMT


      header { background: none; }
      header canvas { display: none; }
      header be-enticed, header a, header a:visited { color: var(--black); }
      header a:hover, header a:hover:visited { color: var(--link-hover); opacity: 1; }
      title { text-align: center; }
    
      #starfailed .stars canvas.js-stars {
        position: static;
        height: 30em;
      }
    
      main#starfailed {
        padding-top: 4vh;
      }

Ivan Reese

Fri, 01 Jan 2016 12:00:00 GMT


      :root {
        --border-width: 2vmin;
      }
    
      header {
        height: calc(100vh - var(--border-width));
      }
    
      header be-enticed {
        margin-top: calc(40vh - 1em);
        padding: 0;
        line-height: 1.9;
        font-size: 1.4em;
      }
    
      header be-enticed a.home-link {
        text-decoration: none;
        color: white;
      }
    
      header be-enticed a.home-link:hover,
      a.home-link:visited:hover {
        color: white;
        opacity: 1;
      }
    
      @media(min-width: 600px) {
        header be-enticed {
          font-size: 1.6em;
        }
      }
    
      main {
        padding: 0 3vw 16vh;
      }
    
      @media(min-width:58em) {
        main {
          padding: 0 0 16vh;
        }
      }
    
      /* This outer element makes a white circle behind the image, so that as the image fades out we don't see stars */
      profile-pic {
        display: block;
        position: absolute;
    
        --size: min(80vw, 50vh);
        bottom: calc(-0.5 * var(--size));
        left: calc(50vw - 0.5 * var(--size));
        width: var(--size);
        z-index: 11; /* header is 10 */
        border: var(--border-width) solid white;
        background: white;
        border-radius: 100%;
    
        /* This inner element is the actual profile pic image, which fades in and out. */
        img {
          width: 100%;
          border-radius: 100%;
          background-color: #ccc9cd;
        }
      }
    
      .spook { display: none }
      #index[spooky] .color { display: none; }
      #index[spooky] .spook { display: block; }
    
      #index h1 {
        margin: 50vh 0 4vh;
        font-size: 3em;
        line-height: 1.3em;
      }
    
      #index #about h1 {
        margin-top: 70vh;
      }
    
      #index #bio h1 {
        margin-left: -4px;
      }
    
      #index #contact h1 {
        margin-left: -3px;
      }
    
      .columns {
        columns: 20em;
        column-gap: 2em;
        margin-bottom: 1vh;
      }
    
      .columns p {
        text-wrap: balance;
      }
    
      .label {
        display: block;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: .75em;
      }
    
      p + .label,
      div + .label {
        margin-top: 2vh;
      }
    
      footer {
        margin-top: 20vh;
      }
    
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: 1rem 2rem;
    
        p {
          margin: 0;
          text-wrap: balance;
        }
      }
    
    
    
      #contact {
        a {
          font-weight: bold;
          padding-right: .3rem;
        }
    
        p {
          margin: .6rem 0 0
        }
      }
    
    
     .related span { display: inline-block } /* improve wrapping on the home page on small screens */