cohost: bcj's mod by thricedotted

/* ==UserStyle==
@name           cohost: bcj's mod
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Move cohost corner under left sidebar and use remaining space for posts.
@author         li zi (@thricedotted)
==/UserStyle== */

@-moz-document domain("cohost.org") {
  @media (min-width: 1024px) {
    main > .container {
      grid-template-columns: 25% 1fr !important;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "menu   content"
        "corner content"; 
      gap: 1.75rem;
    }

    main > .container > ul[role="menu"] {
      grid-area: menu;
      margin-top: 18px;
    }
    
    main > .container > section:first-of-type {
      grid-area: content;
      min-width: 0; /* prevent flex blowout */
      margin-top: 18px;
    }

    /* selector for main content area */
    /* :not(.gap-8) excludes the notifications box */ 
    main > .container > section:first-of-type:not(.gap-8) {
      margin-top: -40px;
    }
    
    /* center posts in post grid area */
    main > .container > section:first-of-type:not(.gap-8) > div.flex-col {
      align-self: center;
      /* max-width: unset; */
    }
    
    /* set margin beneath latest posts / bookmarked tags */
    main > .container > section:first-of-type:not(.gap-8) > div.flex-row {
      margin-bottom: 22px;
      
      /* some absolutely gnarly heuristics to pretend 
         we can center latest posts / bookmarked tags 
         in the grid container. it does not stay in the 
         center lol. for some reason i refuse to absolutely 
         position it but maybe TODO some other time.
      */
      justify-content: center;
      position: relative;
      left: -19%; /* lol. lmao */
    }
    
    /* remove dummy element used for alignment */
    main > .container div.flex-row > span.lg\:block {
      display: none;
    }

    /* move cohost corner under menu */
    main > .container:nth-child(3) {
      grid-area: corner;
    }
  }    
}