storytelling/estilo.css at main · anattolia/storytelling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        a,
        a:hover,
        a:visited {
            color: #0071bc;
        }

        #map {
            top: 0;
            height: 100vh;
            width: 100vw;
            position: fixed;
        }

        #header {
            margin: auto;
            width: 100%;
            position: relative;
            z-index: 5;
        }

        #header h1,
        #header h2,
        #header p {
            margin: 0;
            padding: 2vh 2vw;
            text-align: center;
        }

        #footer {
            width: 100%;
            min-height: 5vh;
            padding-top: 2vh;
            padding-bottom: 2vh;
            text-align: center;
            line-height: 25px;
            font-size: 13px;
            position: relative;
            z-index: 5;
        }

        #features {
            padding-top: 10vh;
            padding-bottom: 10vh;
        }

        .hidden {
            visibility: hidden;
        }

        .centered {
            width: 50vw;
            margin: 0 auto;
        }

        .lefty {
            width: 33vw;
            margin-left: 5vw;
        }

        .righty {
            width: 33vw;
            margin-left: 62vw;
        }

        .fully {
            width: 100%;
            margin: auto;
        }

        .light {
            color: #444;
            background-color: #fafafa;
        }

        .dark {
            color: #fafafa;
            background-color: #444;
        }

        .step {
            padding-bottom: 50vh;
            /* margin-bottom: 10vh; */
            opacity: 0.25;
        }

        .step.active {
            opacity: 0.9;
        }

        .step div {
            padding: 25px 50px;
            line-height: 25px;
            font-size: 13px;
        }

        .step img {
            width: 100%;
        }

        @media (max-width: 750px) {

            .centered,
            .lefty,
            .righty,
            .fully {
                width: 90vw;
                margin: 0 auto;
            }
        }

        /* Fix issue on mobile browser where scroll breaks  */
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
            touch-action: unset;
        }