@import 'include/colors';
@import 'include/components';
@import 'include/common';

@media (prefers-color-scheme: dark) {
  h2.storytitle {
	border-bottom: 3px dotted $dark-foreground;
  }

  #menu {
    background-color: $dark-background;
    color: $dark-foreground;
  }
}

@media (prefers-color-scheme: light) {
  h2.storytitle {
	border-bottom: 3px dotted $light-foreground;
  }

  #menu {
    background-color: $light-background;
    color: $light-foreground;
  }
}

blockquote {
  margin-left: 1.5em;
  padding-left: 5px;
}

div#tag-cloud {
  line-spacing: 150%;
  text-align: center;
  padding-bottom: 2em;
}

h2.storytitle {
  margin: 15px 0 2px 0;
  padding-bottom: 2px;
}

h3.meta {
  &, & a, & a:visited {
    font-size: 12px;
	margin: 2px 0 6px 0;
	padding-bottom: 2px;
  }
}

p.footpara {
  margin: 0;
}

.feedback {
  text-align: right;
}

.org-src-container, .example {
  overflow-x: auto;
}

.post {
  margin-bottom: 2rem;
}

#footer {
  @extend .footer;
  @extend .footer-text;
  width: 100%;
}

#header {
  @extend .title-header;
}

#menu {
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 20px;
  border-right: 0;
  padding: 10px 0 10px 10px;

  @media (min-width: 45rem) {
    float: right;
    width: 15rem;
  }

  @media (min-width: 66rem) {
    margin-right: -3rem;
  }

  form {
	margin: 0 0 0 13px;
  }

  h2 {
	font: italic smaller sans-serif;
	font-weight: bold;
	margin-top: 10px;
    margin-bottom: 0px;
	padding-bottom: 2px;
  }

  input#s {
	width: 80%;
  }

  ul {
	list-style-type: none;
	margin: 0;
	padding-left: 3px;
	text-transform: lowercase;
	font: normal smaller sans-serif;

    ul {
	  font-variant: normal;
	  font-weight: normal;
	  line-height: 100%;
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  text-align: left;

      li {
	    border: 0;
	    font-weight: normal;
        font-style: normal;
	    letter-spacing: 0;
	    margin-top: 0;
	    padding: 0;
	    padding-left: 12px;
      }
    }
  }
}

#navbar {
  @extend .subtitle;
}

#rap {
  @extend .content-wrapper;
}