/* ikiwiki local style sheet */

/* Add local styling here, instead of modifying style.css. */


/* ===== CSS Grid ===== */

/* small screens */
@media (max-width: 60em) { 
  body { 
    grid-template-columns: minmax(0,45em);

    grid-template-areas: 
      "header"
      "content"
      "footer"
      "sidebar";
  }

  #sidebar { 
    margin-right: 2em;
    margin-left: 2em;
    width: auto; 
    line-height: 0;
  }

  #sidebar ol, #sidebar ul { 
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style-type: none;
    margin-top: 0; /* undo desktop setting */
    justify-content: center;
    padding-left: 0;
  } 

  #sidebar li { 
    flex-grow: 0; /* If it grows then things do not center! */
    padding: 0.5em;
    list-style-type: none;
    margin: auto;
  }
} /* end small screen query */

/* big screens */
/* See:
 * https://stackoverflow.com/questions/13634326/ 
 */
@media not all and (max-width: 60em) { 
  body { 
    grid-template-columns: [startslop] 1fr [main] 45em [side] 15em [endslop] 1fr;

    grid-template-areas: 
      "lslop header header rslop"
      "lslop content sidebar rslop"
      "lslop footer footer rslop";
  }

  #sidebar { 
    margin-top: 10ex;
    margin-right: 1em;
    margin-left: 0;
  }
} /* end normal screen query */

body { 
  display: grid;
  /* This is the same for both! */
  grid-template-rows: [head] auto [stuff] 1fr [foot] auto;
}

.header { 
  grid-area: header;
  margin-bottom: 1.5ex;
} 

.actions { 
  display: none;
}

#content { 
  grid-area: content;
  max-width: 43em; /* Yuk */
  margin: 0;
}

#sidebar {
  grid-area: sidebar;
}

#footer { 
  grid-area: footer;
}


/* ===== Header ===== */

.header span { 
  padding-left: 0.5em;
  padding-right: 0.5em;
} 

.header a:visited, .actions a:visited  { 
  color: #262737; /* starlight dark grey */
}

.header a, .header span, .actions, .actions a { 
  color: #91d0e1;  /* Lighter than white star trek blue */

} 

#footer, #sidebar ul {  

  /* Star Trek blue glow */
  box-shadow: #69bfd6 0 0 2em; 

  /* Rounded corners. */
  border-radius: 1em;
}

/* ===== Footer ===== */

#footer { 
  background: white;
  margin-left: 3em;
  margin-right: 3em;

  margin-top: 0;
  margin-bottom: 2em;
  padding-left: 1em;
} 

#pageinfo { 
  margin: 0; /* undo from style.css */
  border-top: 0; /* ditto */
  padding: 1em 0;
} 

.pagedate, .pagelicense, .pagecopyright { 
  color: #2e90aa; /* Darker than star trek white */
} 


/* ====== Main body styling ===== */

html { 
  background: #14131b; /* grey like the night */ 
  background-image: url(bg-stars-4col.png); 
  background-attachment: fixed;
} 

body { 
  /* DejaVu looks AWFUL on Windows Firefox. Why? */
  font-family: 'Lucida Bright', 'DejaVu Serif', 'Bitstream Vera Serif', Georgia, serif; 
} 

.header, .actions, h1, h2, h3, h4, h5, #sidebar ul { 
  font-family: Arial,Helvetica,sans-serif; 
} 

div#content { 
  margin-left: 3em;
  padding-bottom: 2em;
  margin-right: 1em;
}


/* ===== Sidebar ====== */

/* Much of this is done in the grid section, since the sidebar looks
 * different on mobile and desktop
 */

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5 { 
  background: transparent;
  padding: 0.25em;
}

#sidebar ul,
#sidebar ol { 
  background: white;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: -1ex;
} 

#sidebar li {
  list-style-color: #69bfd6;  /* Whiteish Star Trek blue */
  color: #69bfd6;
  font-size: 1.5em;
}

#feedlink { 
  margin-left: 2em; /* line up with paragraphs */ 
  margin-top: 1em; 
}



/* ====== Headers =========================== */

h2,h3,h4,h5 { 
  /* Stand out from the previous content a little */
  padding-top: 1em;

} 

h1,h2,h3,h4,h5 {

  color: #69bfd6; /* Whiteish Star Trek blue */
  /* params: color (light grey blue), offset-x, offset-y, fuzziness */
  text-shadow: #3b6784 0 0 1em;
}

div#content h1 { 
  font-size: 2.5em;
}


/* ===== Formatting for body elements ========= */


div#content blockquote p { 
  margin-left: 0;
  background: inherit; /* light green */
} 

div#content blockquote {
  /* Top and left border only */
  border-left-style: solid;
  border-left-width: thick;
  border-top-style: solid;
  border-color:#4aa753;  /* medium green */

  color: green;
  margin-left: 3em; 
}

div#content pre { 
  color: #313ab5; /* dark blue */
  background: #eaffe3; /* off-white green */
  overflow-x: scroll;       /* use scrollbars always, so swooping 
                             * looks okay*/
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  margin-left: 2.5em;
  margin-right: 2.5em;
 
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
}

/* Make code blocks big when you hover over them.
 * Stolen from Lullabot's CSS pages.
 * (Keeping even for mobile mode. This may be dumb.)
 */
div#content pre:hover { 
 z-index: 999;
 position: relative; 
 margin-right: -20em; 
}

code { 
  color: #313ab5; /* dark blue */
  font-size: larger;
} 

div#content pre code { 
  font-size: normal;
}

a,a:visited { 
  /* color:#4aa753; */ /* medium green */
  color:darkgreen;  
}

ul li { 
  list-style-color: #313ab5; /* dark blue */
  list-style-type: square;
}


/* ====== Paragraph, List alignments in main content == */

div#content p,
div#content ul,
div#content ol,
div#content dl,
div#content blockquote { 
  background: white;
  margin-right: 2em;
  padding-left: 1em;
  padding-right: 1em;
}


/* Align left margins for a bunch of things */
div#content p,
div#content ul,
div#content ol,
div#content dl,
div#content li { 

  margin-left: 2em;
}

/* Put a bit of bluespace between adjacent paragraphs, 
 * since I make my paragraphs so stupidly long 
 */
div#content p + p,
div#content pre + p,
div#content p + pre { 
  margin-top: 1em;
}

div#content p { 
  padding-top: 1em;
  padding-bottom: 0.5em;
  margin-top: 0;
  margin-bottom: 0;
} 


/* These are item lists where Markdown wraps each list element in its
 * own paragraph. This rule undoes the extra spacing usually reserved
 * for paragraphs.
 */
div#content p + ol p, 
div#content p + ul p { 

  padding-top: 0;
  padding-bottom: 0;
} 


div#content p + ul,
div#content p + ol { 

  /* Join lists with paragraphs */
  padding-top: 0; 
  /* padding-bottom: 0; */
  margin-top: 0;
  margin-bottom: 0;

  /* push the bullet points over so I don't need to touch 
   * list-style-position.
   */
  padding-left: 2em;
}

div#content ul,
div#content ol { 
  /* This should NOT be adjacent to a paragraph, so restore the
   * padding
   */
  padding-top: 1em;
  padding-bottom: 1em;

} 


/* Nested lists should not have much padding so they flow better with
 * the lists that they contain. 
 */
div#content ul ul,
div#content ul ol,
div#content ol ul,
div#content ol ol { 
  padding-left: 0.25em;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
} 


div#content li { 
  /* line up entries with rest of paragraphs */
  margin-bottom: 0.3em;
}

/* second and subsequent paragraphs in a list. */
div#content li p + p {
  /* What happens if everything is empty? */  
  margin-top: 0.5em;
  margin-bottom: inherit;

} 

div#content li p { 
  margin-left: 0;
  padding-left: 0;
  padding-right, padding-top, padding-bottom: inherit;

} 



/* ===== Table of Contents ===== */


.toc { 
  margin-left: 2em;
  margin-right: 2em;
  margin-top: -0.25em; /* Join to previous paragraph */
  
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
  padding-top: 1em;
  background: white;
} 

.toc ol { 
  border-style: solid;
  border-color: #69bfd6; /* Whiteish Star Trek blue */

  padding: 1em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
} 

.toc ol ol { 
  margin: 0;
}



.toc ol ol { 
  border-style: none;
  padding: 0;
}



/* ===== Alert/NSFW Pages ================= */

div.alert { 
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1em;
  background: transparent;
  font-size: larger;
} 

div.alert strong {
  color: red;
}

div.alert a { 
  color: red;
}

div.alert a:visited { 
  color: red;
}

div.alert p { 
  border-style: solid;
  border-color: red;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin: 0.25em;
}