]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/app.component.scss
Responsive homepage
[github/Chocobozzz/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 }