SA3/hw1/claudio_maggioni/css/main.css

/* vim: set ts=2 sw=2 tw=80 et: */

body {
  font-family: 'Fira Sans', sans-serif;
  background: #ffe;
  width: 100%;
  margin: 0;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

header, footer {
  padding: 1rem 0;
  width: 100%;
  text-align: center;
  background: rgba(255,0,0,0.5);
}

@media screen and (min-width: 769px) {
  .content {
    display: flex;
    flex-direction: row;
  }

  nav, aside {
    flex: 0 1 10rem;
  }

  main {
    flex: 1 2;
    max-width: 80%;
  }
}

@media screen and (max-width: 768px) {
  .content {
    display: flex;
    flex-direction: column;
  }

  main {
    flex-grow: 1;
  }
}

.content {
  flex-grow: 1;
}

nav, aside {
  background: rgba(200,100,0,0.3);
}

main {
  padding: .5rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: .5rem;
  text-align: center;
}

figure {
  background: rgba(0,0,0,0.05);
  max-width: 500px;
  width: 100%;
  margin: 1rem 2rem 1rem 0;
  float: left;
}

@media screen and (min-width: 769px) {
  figure.img {
    max-width: 240px;
    max-height: 240px;
  }
}

figure.full-width {
  max-width: 100%;
}

article section.title {
  clear: both;
}

article section.title a.author[data-me] {
  color: #DDD;
  text-decoration: underline;
  background: black;
  padding: .125rem .25rem;
}

figure.right {
  margin: 1rem 0rem 1rem 2rem;
  float: right;
}

@media screen and (max-width: 768px) {
  figure, article figure:nth-child(odd) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    float: none;
  }
}

figure img {
  width: 100%;
}

figcaption {
  text-align: center;
  padding: .5rem;
}

audio {
  width: 100%;
}

nav ul, aside ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li, aside ul li {
  padding: .5rem;
  text-align: center;
  background: rgba(0,0,0,.1);
  text-transform: uppercase;
}

nav ul li:nth-child(even), aside ul li:nth-child(even) {
  background: rgba(0,0,0,.05);
}

a {
  text-decoration: none;
  font-weight: bold;
  transition: color 200ms;
}

a:link {
  color: #36c;
}

a:visited {
  color: #50c;
}

a:hover, a:active {
  color: #603;
}

main p {
  text-align: justify;
}

main section {
  padding: 1rem;
}

footer {
  display: flex;
  align-itemss: center;
  flex-direction: row;
}

footer a {
  padding: 0 .5rem;
  display: block;
  flex: 0 0 auto;
}

footer section {
  padding: 0 .5rem;
  font-size: 0.85rem;
  flex: 1 1 auto;
}

footer section p {
  margin: .25rem;
}

dt {
  font-weight: bold;
}

dt::after {
  content: ":"
}


pre, code {
  font-family: 'Fira Mono', monospace;
  font-size: 0.95rem;
}

pre {
  white-space: pre-wrap;
  margin: 0;
  padding: .5rem;
  background: rgba(0,0,0,0.05);
}

h1, h1 code {
  font-size: 2rem;
}