earwig/static/css/style.scss

   1 html, body {
   2         margin: 0;
   3         padding: 0;
   4         font-family: sans-serif;
   5 }
   6
   7 body {
   8         background: #222 linear-gradient(to bottom, #222, #111);
   9         min-height: 100vh;
  10 }
  11
  12 header {
  13         background: #ddd;
  14         display: flex;
  15         &.hidden {
  16                 display: none;
  17         }
  18         #cover {
  19                 background-size: cover;
  20                 flex: 0 1 auto;
  21                 width: 100px;
  22                 height: 100px;
  23         }
  24         > div {
  25                 margin: 1rem;
  26                 flex: 1 1 auto;
  27                 span {
  28                         display: block;
  29                         height: 50px;
  30                         line-height: 50px;
  31                 }
  32                 audio {
  33                         width: 100%;
  34                 }
  35         }
  36 }
  37
  38 div.tile {
  39         background: transparent center center no-repeat;
  40         background-size: contain;
  41         float: left;
  42         position: relative;
  43         text-align: center;
  44         margin: 1rem;
  45         overflow: hidden;
  46         a {
  47                 text-decoration: none;
  48                 display: block;
  49                 width: 14vw;
  50                 height: 14vw;
  51                 box-sizing: border-box;
  52                 padding: 1rem;
  53                 span.channel,
  54                 span.sound {
  55                         background: rgba(0, 0, 50, 0.5);
  56                         font-weight: bold;
  57                         color: white;
  58                         display: block;
  59                 }
  60                 span.sound {
  61                         background: rgba(0, 0, 50, 0.7);
  62                         font-weight: normal;
  63                         margin-top: 1rem;
  64                 }
  65                 transition: transform 0.2s linear;
  66                 &:hover {
  67                         transform: scale(1.1);
  68                 }
  69         }
  70 }
  71
  72 form#filter {
  73         display: flex;
  74         input {
  75                 flex: 1;
  76         }
  77 }