bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 13:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(main): style changes and mobile version (#58)

Browse Source 
Co-authored-by: msramalho <19508417+msramalho@users.noreply.github.com>
This commit is contained in:
Andrew Mudrov
2022-10-31 21:40:35 +04:00
committed by GitHub
parent 64d6b34469
commit 53d6f389e3
37 changed files with 966 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/scss/cardstack.scss
View File

@@ -1,22 +1,31 @@
// @import 'burger';
@import "card";
$card-stack-header-height: 38px;
.card-stack {
display: flex;
flex-direction: column;
position: absolute;
top: #{$card-right};
padding-top: #{$card-stack-header-height};
right: $card-right;
max-height: calc(100% - #{$timeline-height} + 60px);
max-height: calc(100% - #{$timeline-height} - 35px);
height: auto;
width: $card-width;
overflow-y: scroll;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
z-index: $header;
color: white;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;
max-width: 100vw;
background: $offwhite;
border-radius: 6px;
@media screen and (max-width: 600px) {
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 100vh;
}
&.narrative-mode {
right: $card-right;
@@ -30,10 +39,8 @@ $card-stack-header-height: 38px;
}
.card-stack-header {
position: fixed;
position: initial;
top: $card-right;
min-height: $card-stack-header-height;
line-height: $card-stack-header-height;
width: 100%;
max-width: $card-width;
box-sizing: border-box;
@@ -77,8 +84,13 @@ $card-stack-header-height: 38px;
}
.card-stack-content {
width: 100%;
flex: 1;
max-width: $card-width;
overflow: auto;
padding-right: 10px;
display: block;
width: 100%;
box-sizing: border-box;
ul {
padding: 0;