/* 
Hello! This is the master file. SCSS is a superset of CSS, so valid CSS is always valid SCSS.
You can compile this file by doing:
sass style/style.scss static/css/style.css

When designing CSS:
- every edit should have a clear design purpose
- think about the change: is this for all screensizes, or just for big screens?
- if the latter, add it to the media-block
*/
/* General */
body {
  font-size: 125%;
  line-height: 150%;
  font-family: helvetica, arial, sans-serif;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5em;
  line-height: 1.25em;
  margin-bottom: 0.25em;
}

a:link, a:visited, a:active, a:hover {
  color: #00449e;
}

/* Single column layout */
nav section, header section, main, footer section {
  max-width: 45rem; /* 90 em != 90 characters because characters have more height than width */
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.5rem; /* rem and not em because we don't want larger elements to have larger side margins, and not under body because we want full width colors and borders */
}

/* Navigation panel */
#site-name {
  display: block;
  font-weight: bold;
  color: #00449e;
}

nav section {
  line-height: 2em;
  font-size: 1.5em;
}

ul.nav-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav a:link, nav a:visited, nav a:active {
  color: #000000;
}

nav a:hover {
  color: #00449e;
}

/* Footer */
footer {
  margin-top: 4em;
}

footer section {
  /* for the links */
  line-height: 2em;
  font-size: 1.25em;
}

footer a, footer a:visited, footer a:hover, footer a:active, footer a:link {
  color: #000000;
}

/* Posts */
article h2 a:link, article h2 a:visited,
article h1 a:link, article h1 a:visited,
.more:link, .more:visited {
  color: #000000;
}

article h2 a:hover, article h2 a:active,
article h1 a:hover, article h1 a:active,
.more:hover, .more:active {
  color: #00449e;
}

p.meta {
  margin-top: 0;
  line-height: 1.5em;
  font-size: 0.8em;
  color: #777777;
  font-style: italic;
}

/* small excerpts on list pages */
p.summary {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* Read More links on list pages */
div .more {
  margin-top: 0;
  font-weight: bold;
}

.category-header {
  font-weight: bold;
}

/* RSS button */
.rss {
  padding: 0.3em 0.35em;
  border-radius: 0.25em;
  font-size: 0.75em;
  font-weight: bold;
}

.rss:link, .rss:visited, .rss:hover, .rss:active {
  color: #ffffff;
  text-decoration: none;
}

.rss:link, .rss:visited {
  background: #00449e;
}

.rss:hover, .rss:active {
  background: #357edd;
}

/* MISC */
.blink {
  -webkit-animation: blink 0.9s linear infinite;
  -moz-animation: blink 0.9s linear infinite;
  -ms-animation: blink 0.9s linear infinite;
  -o-animation: blink 0.9s linear infinite;
  animation: blink 0.9s linear infinite;
}

/* colorful table */
table.table-colors {
  margin: 2em 0;
  border-collapse: collapse;
  width: 100%;
}

table.table-colors tr {
  height: 10px;
  border: none;
  border-collapse: collapse;
}

table.table-colors tr td {
  margin: 0;
  padding: 0;
}

.td-1 {
  width: 50px;
}

.td-color-1 {
  background-color: #ffb700;
}

.td-color-2 {
  background-color: #19a974;
}

.td-color-3 {
  background-color: #137752;
}

.td-color-4 {
  background-color: #00449e;
}

.td-color-5 {
  background-color: #357edd;
}

/* Twitter archive */
.microblog-post {
  margin: 2em 0;
  padding: 1em;
  border: 0px solid #00449e;
  background-color: #ffdfdf;
}

.twitter {
  background-color: #cdecff;
}

.retweet {
  background-color: #e8fdf5;
}

.retweet > .microblog-content {
  padding-left: 1em;
  border-left: 5px solid #19a974;
}

.microblog-realname {
  font-weight: bold;
}

.microblog-username, .microblog-realname, .microblog-timestamp, .microblog-text, .microblog-original-link {
  display: block;
}

.microblog-content {
  margin: 1em 0;
}

.microblog-original-link {
  color: #777777;
}

.unavailable {
  color: #777777;
  text-decoration: line-through;
}

.microblog-image {
  width: 40%;
  display: inline;
}

/* special stuff for larger screens */
/* 720 pixels = 16 px (standard font size) * 45 rem */
@media screen and (min-width: 720px) {
  h1, h2, h3, h4, h5, h6 {
    margin-top: 2em;
    line-height: 1.25em;
    margin-bottom: 0.25em;
  }
  /* make h1 bigger */
  h1 {
    font-size: 4em;
    margin-top: 0.75em;
  }
  nav ul {
    text-align: right;
  }
  /* nav links can be side by side */
  nav span, ul.nav-links li {
    display: inline;
    margin-right: 1em;
  }
  ul.nav-links li:last-child {
    margin: 0;
  }
  nav span.home {
    float: left;
  }
  /* reduce font-size because people don't have to select with their fingertips */
  nav section, footer section {
    font-size: 1em;
  }
  footer {
    text-align: center;
    margin-bottom: 2em;
  }
  .huge {
    font-size: 4em;
    line-height: 1em;
    text-align: center;
    font-weight: bold;
  }
}

/*# sourceMappingURL=style.css.map */