styles.css

/* 
 * Global styling.
 */

/* TODO Can I add these in? */
/* html { */
/*   font-family: "Inter", sans-serif; */
/* } */
/* @supports (font-variation-settings: normal) { */
/*   html { */
/*     font-family: "Inter var", sans-serif; */
/*   } */
/* } */

body {
  --font-mono: "Menlo", "Monaco", monospace;
  --background-block: #f1f1f8;

  -webkit-font-smoothing: antialiased;
  color: #424241;
  fill: currentcolor;

  /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
  /* https://fonts.google.com/specimen/Inter#standard-styles */
  /* This will only use Inter if they have it on their system already. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif !important;

  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
  line-height: 1.5;

  /* Global margins.*/
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;

  display: flex;
}

/*
 * Navigation styling.
 */
nav {
  /* 
   * Floats the nav bar to the left side of the screen.
   *
   * Source: https://developer.mozilla.org/en-US/docs/Web/CSS/float.
   */
  /* float: left; */
  /* TODO Read about this property. */
  text-align: left;
  left: 48px;
  position: fixed;
  width: 170px;
}

nav #name {
  margin-bottom: 10px;
}

nav span {
  font-weight: bold;
}

nav a {
  text-decoration: none;
  color: black;
}

nav a:hover {
  text-decoration: underline;
}

/* 
 * Main link styling.
 *
 * Goal: have a consistent them regardless of whether a link has been visited.
 */
#page a:visited {
  color: blue;
}

/*
 * Here is our first use of the descendant combinator pattern, used to style
 * child elements within a parent (in this case, the nav element).
 *
 * Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator.
 */
nav ul {
  /* Removes the bullets preceding each list item. */
  list-style: none;
  /* Don't want space between my name and the nav items. */
  margin-top: 0;
  /* Remove the default padding. */
  padding: 0;
}

#page {
  width: 700px;
  margin-left: 200px;
}

#page h1,
#page h2,
#page h3 {
  margin: 0;
}
/* 
 * Main content styling. 
 */
#content {
  /* To have some space between the content and header */
  padding-top: 8px;
}

#content p {
  margin-top: 0;
}

/*
 * Writing page styling.
 */
.writing-row {
  display: flex;
}

.pd {
  width: 8em;
  flex-shrink: 0;
  padding-bottom: 0.3em;
}

/*
 * Books page styling.
 */
.in-progress {
  /* We use the !important directive to override the specifcity of the
   * a::visited rule.
   *
   * https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception.
   */
  color: #367da2 !important;
}

/*
 * Code styling.
 */
pre,
code {
  font-family: var(--font-mono);
}

pre {
  display: block;
  margin: 1.5em 0;
  background: var(--background-block);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: flex;
  flex-direction: row;
}

pre > code {
  line-height: 1.5em;
  flex-shrink: 0;
  display: block;
  padding: 1em;
}

code {
  background: var(--background-block);
}

li code,
p code {
  padding: 3px 5px;
}

blockquote {
  font-style: italic;
}