home.public.blog/home/public/blog/static/css/hyde.css

/*
 *  __                  __
 * /\ \                /\ \
 * \ \ \___   __  __   \_\ \     __
 *  \ \  _ `\/\ \/\ \  /'_` \  /'__`\
 *   \ \ \ \ \ \ \_\ \/\ \_\ \/\  __/
 *    \ \_\ \_\/`____ \ \___,_\ \____\
 *     \/_/\/_/`/___/> \/__,_ /\/____/
 *                /\___/
 *                \/__/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/hyde.
 */


/*
 * Contents
 *
 * Global resets
 * Sidebar
 * Container
 * Reverse layout
 * Themes
 */


/*
 * Global resets
 *
 * Update the foundational and global aspects of the page.
 * Notice, since we use @media, the size we set here for the font
 * will change many elements of the page, since they use 'em' width.
 * em - size relative to nearst font size
 * rem - "reset" font size, whatever was set for the whole html
 * below will effect all rem and the coming ems (until nested).
 */

html {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

 .sidebar {
     text-align: left;
     border-color: rgba(0,0,0,.35);
     padding: 1rem .1rem;
     color: rgba(0,0,0,.5);
     background-color: #eee8d5;
     background-image: linear-gradient(230deg, #eee8d5 0%, #aa8970 190%);
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;

 }

 .sidebar a {
     color: rgba(,0,0,.5);
  }


.sidebar-nav {
    margin-left: -1em;
    padding-left: 1em;
    list-style-type: none;

}

.sidebar-icons li {
    padding: .5em;
    display: inline;
    text-decoration: none;
    list-style-type: none;
}



 /* img { */
 /*      border-style: solid; */
 /*      border-width: .15em; */
 /*  } */


.sidebar-nav h3 {
    font-family: "Righteous", serif;
    font-weight: normal;
    color: #515151;
    margin-bottom: 0em;
}


/*
links in sidebar for both formats (narrow and wide)
1. fonts
2. no underline for links (interferes with the button effect)
3. padding for top and bottom is 0em, but 1em for right and left.

*/

.sidebar-nav a {

    font-family: "Ruda", ariel;
    font-size: 1em;
    text-decoration: none;
    padding: 0em 1em;
}

.sidebar-nav a:hover {
    background-color: rgba(0,0,0,.5);
    color: #eee8d5;
}


.pagination li {
    display: inline;
    list-style: none;
    text-color: #8B0000;
    border-radius: .25rem;
    margin: 10px 0;
    padding: .5rem;
    justify-content: center;
}

.pagination a {
    text-color: #8B0000;
}


/*
From here below, style specific for narrow (less than 800px) screens, like phones and tablets.
*/

@media (min-width: 800px) {
  html {
      font-size: 12pt;
  }

/*
For wide view, the sidebar:
1. 15em wide
2. It is fixed, so it can show by the side of the posts (content) div
3. height is 100% so it stretches to the length of the posts div
*/

  .sidebar {
      width: 15em;
      position: fixed;
      height: 100%;
      border-right-style: ridge;
      border-width: 1em;
  }

/*
The owl logo is tricky.
1. position in percent allows up so use minus, to move a bit above text line.
2. size of 3.3 seems to align with the "of" in the logo.
*/

  .sidebar h1 {
      color: #8B0000;
      padding-bottom: 0em;
      margin-right: -1em;
      margin-top: 0em;
      font-family: Righteous;
      word-spacing: 100em;
      line-height: 1em;
      font-size: 3.5em;
      font-weight: normal;
      text-transform: capitalize;
      /* background-image: url("/taonaw_logo.png"); */
      /* background-repeat: no-repeat; */
      /* background-position: 100% 32%; */
      /* background-size: 3.3em; */
  }


/*
in wide format:
1. margin-left makes sure the posts are not under the sidebar
2. padding to keep it from touching border, top or bottom of windows
*/

  .content {
      margin-left: 15em;
      padding: 1em;
  }

}

@media (max-width: 800px) {


    .sidebar h1 {
        color: #8B0000;
        margin-top: 0em;
        padding-top: 0em;
        padding-bottom: .2em;
        font-family: Righteous;
        font-size: 3.5em;
        text-align:  center;
        font-weight: normal;
        line-height: 3rem;
        letter-spacing: .1rem;
        text-transform: capitalize;
        border-bottom: solid .15rem  rgba(0,0,0,.5);
    }
    .sidebar h3 {
        text-align: center;
        font-size: 1.5em;
    }

    .sidebar-nav li {
        margin-left: 1em;
        display: inline-block;
        padding: .1em .5em;
    }
    .sidebar {
        border-bottom-style: ridge;
        border-width: 1em;
        /* background-image: url("/taonaw_logo.png"); */
        /* background-repeat: no-repeat; */
        /* background-position: 100% 100%; */
        /* background-size: 10em; */
    }
    .sidebar-nav a {
        font-size: 1em;
        padding: 0em;
    }
    .content {
        margin: 2em 1em;
    }

}


/*
.sidebar-nav-item:focus {the
  text-decoration: underline;
}



.sidebar-nav-item.active {
  font-weight: bold;
}
*/

/* Sticky sidebar
 *
 * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 * contents to the bottom of the sidebar in tablets and up.
 *
 *
 * @media (min-width: 48em) {
 * .sidebar-sticky {
 *   position: absolute;
 *   right:  1rem;
 *   bottom: 1rem;
 *   left:   1rem;
 * }
 *}
 */


/* Container
 *
 * Align the contents of the site above the proper threshold with some margin-fu
 * with a 25%-wide `.sidebar`.
 */

/*
.content {
  padding-top:    1rem;
  padding-bottom: 1rem;

}
*/