Responsive homepage
[oweals/peertube.git] / client / src / app / app.component.scss
1 .main-row {
2   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
3 }
4
5 .sub-header-container {
6   margin-top: $header-height;
7 }
8
9 .title-menu-left {
10   position: fixed;
11   height: calc(100vh - #{$header-height});
12   padding: 0;
13   width: $menu-width;
14
15   .title-menu-left-block.menu {
16     height: 100%;
17   }
18 }
19
20 .header {
21   height: $header-height;
22   position: fixed;
23   top: 0;
24   width: 100%;
25   background-color: #fff;
26   z-index: 1000;
27   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
28   display: flex;
29
30   .top-left-block {
31     width: $menu-width;
32     z-index: 1001;
33     height: $header-height;
34     display: flex;
35     align-items: center;
36
37     .icon {
38       @include icon(22px);
39
40       &.icon-menu {
41         background-image: url('../assets/images/header/menu.svg');
42         margin: 0 18px 0 24px;
43       }
44     }
45
46     #peertube-title {
47       font-size: 20px;
48       font-weight: $font-bold;
49       color: inherit !important;
50       display: flex;
51       align-items: center;
52
53       @include disable-default-a-behaviour;
54
55       .icon.icon-logo {
56         display: inline-block;
57         background: url('../assets/images/logo.svg') no-repeat;
58         width: 23px;
59         height: 24px;
60       }
61     }
62
63     @media screen and (max-width: 500px) {
64       width: 70px;
65
66       #peertube-title {
67         display: none;
68       }
69     }
70   }
71
72   .header-right {
73     height: $header-height;
74     display: flex;
75     align-items: center;
76     flex-grow: 1;
77     justify-content: flex-end;
78   }
79 }
80
81 footer {
82   border-top: 1px solid $footer-border-color;
83   padding: 10px 0;
84   text-align: center;
85   font-size: 11px;
86   margin-top: $footer-margin;
87   height: $footer-height;
88 }