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) {
  main {
    display: flex;
    flex-direction: row;
  }

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

  article {
    flex: 1 2;
  }
}

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

  article {
    flex-grow: 1;
  }
}

main {
  flex-grow: 1;
}

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

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

figure {
  background: rgba(0,0,0,0.05);
}

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;
}

a:link {
  color: #36c;
  transition: color 200ms;
}

a:visited {
  color: #50c;
  transition: color 200ms;
}

/* FIXME: transition when loading page? */

a:active {
  color: #603;
  transition: color 200ms;
}

article p {
  text-align: justify;
}

article 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: ":"
}