client/src/app/app.component.scss

   1 .main-row {
   2   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
   3 }
   4
   5 .main-col {
   6   margin-left: $menu-width;
   7
   8   &.expanded {
   9     margin-left: 0;
  10   }
  11 }
  12
  13 .sub-header-container {
  14   margin-top: $header-height;
  15 }
  16
  17 .title-menu-left {
  18   position: fixed;
  19   height: calc(100vh - #{$header-height});
  20   padding: 0;
  21   width: $menu-width;
  22
  23   .title-menu-left-block.menu {
  24     height: 100%;
  25   }
  26 }
  27
  28 .header {
  29   height: $header-height;
  30   position: fixed;
  31   width: 100%;
  32   background-color: #fff;
  33   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  34   display: flex;
  35
  36   .top-left-block {
  37     width: $menu-width;
  38     z-index: 1001;
  39     height: $header-height;
  40     line-height: $header-height;
  41     margin-top: 0;
  42     margin-bottom: 0;
  43     display: flex;
  44     padding: 0;
  45
  46     .hamburger-block {
  47       margin-right: 10px;
  48       margin-left: 25px;
  49
  50       .glyphicon {
  51         cursor: pointer;
  52       }
  53     }
  54
  55     #peertube-title {
  56       a {
  57         color: inherit !important;
  58         display: block;
  59         background: url('../assets/logo.svg') no-repeat;
  60         width: 24px;
  61         height: 24px;
  62
  63         &:hover {
  64           color: inherit !important;
  65           text-decoration: none !important;
  66         }
  67       }
  68     }
  69
  70     @media screen and (max-width: 500px) {
  71       #peertube-title {
  72         display: none;
  73       }
  74
  75       .hamburger-block {
  76         width: 100%;
  77         text-align: center;
  78       }
  79     }
  80
  81     @media screen and (min-width: 500px) and (max-width: 600px) {
  82       #peertube-title a {
  83         width: 80px;
  84       }
  85     }
  86
  87     @media screen and (min-width: 600px) and (max-width: 700px) {
  88       #peertube-title a {
  89         width: 100px;
  90       }
  91     }
  92
  93     @media screen and (min-width: 1000px) {
  94       #peertube-title a {
  95         width: 120px;
  96       }
  97     }
  98
  99     @media screen and (min-width: 1000px) {
 100       #peertube-title a {
 101         width: 120px;
 102       }
 103     }
 104
 105     @media screen and (min-width: 1200px) {
 106       padding-left: 15px;
 107
 108       .hamburger-block {
 109         margin-right: 15px;
 110       }
 111
 112       #peertube-title a {
 113         width: 135px;
 114       }
 115     }
 116
 117     @media screen and (min-width: 1600px) {
 118       .hamburger-block {
 119         margin-right: 20px;
 120       }
 121
 122       #peertube-title a {
 123         width: 180px;
 124       }
 125     }
 126   }
 127
 128   .header-right {
 129     text-align: right;
 130     height: $header-height;
 131     margin-left: $menu-width;
 132     flex-grow: 1;
 133   }
 134 }
 135
 136 footer {
 137   border-top: 1px solid $footer-border-color;
 138   padding: 10px 0;
 139   text-align: center;
 140   font-size: 11px;
 141   margin-top: $footer-margin;
 142   height: $footer-height;
 143 }