invoxiplaygames.uk
a web-based Rock Band 4 stats viewer and achievement tracker website
1.page {
2 position: relative;
3 display: flex;
4 flex-direction: column;
5}
6
7main {
8 flex: 1;
9}
10
11.sidebar {
12 background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13}
14
15.top-row {
16 background-color: #f7f7f7;
17 border-bottom: 1px solid #d6d5d5;
18 justify-content: flex-end;
19 height: 3.5rem;
20 display: flex;
21 align-items: center;
22}
23
24 .top-row ::deep a, .top-row ::deep .btn-link {
25 white-space: nowrap;
26 margin-left: 1.5rem;
27 text-decoration: none;
28 }
29
30 .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31 text-decoration: underline;
32 }
33
34 .top-row ::deep a:first-child {
35 overflow: hidden;
36 text-overflow: ellipsis;
37 }
38
39@media (max-width: 640.98px) {
40 .top-row {
41 justify-content: space-between;
42 }
43
44 .top-row ::deep a, .top-row ::deep .btn-link {
45 margin-left: 0;
46 }
47}
48
49@media (min-width: 641px) {
50 .page {
51 flex-direction: row;
52 }
53
54 .sidebar {
55 width: 250px;
56 height: 100vh;
57 position: sticky;
58 top: 0;
59 }
60
61 .top-row {
62 position: sticky;
63 top: 0;
64 z-index: 1;
65 }
66
67 .top-row.auth ::deep a:first-child {
68 flex: 1;
69 text-align: right;
70 width: 0;
71 }
72
73 .top-row, article {
74 padding-left: 2rem !important;
75 padding-right: 1.5rem !important;
76 }
77}