snippets/hscroll/index.html at master · est/snippets · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PressReader Newspaper Layout Demo</title>
  <style>
    body {
      margin: 0;
      font-family: "Georgia", serif;
      background: #eaeaea;
    }

    .scroll-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      height: 100vh;
    }

    .page {
      flex: 0 0 100%;
      scroll-snap-align: start;
      background: #fff;
      border-right: 2px solid #ddd;
      box-sizing: border-box;
      padding: 2rem;
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* 6-column newspaper grid */
      grid-auto-rows: minmax(100px, auto);
      gap: 1rem;
      position: relative;
      overflow-y: auto;
    }

    /* Masthead / headline banner */
    .masthead {
      grid-column: 1 / span 6;
      text-align: center;
      border-bottom: 3px solid #000;
      padding-bottom: 0.5rem;
      margin-bottom: 1rem;
    }

    .masthead h1 {
      font-size: 2.5rem;
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .masthead .subheadline {
      font-size: 1.2rem;
      margin-top: 0.5rem;
      color: #444;
    }

    /* Datetime + weather box */
    .meta-info {
      position: absolute;
      top: 1rem;
      right: 2rem;
      background: #f5f5f5;
      border: 1px solid #ccc;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-size: 0.85rem;
    }

    .article {
      background: #fdfdfd;
      border: 1px solid #ccc;
      padding: 1rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .article h2 {
      font-size: 1.1rem;
      margin: 0 0 0.5rem;
    }

    .article p {
      font-size: 0.85rem;
      line-height: 1.4;
    }

    .image {
      background: #bbb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      color: white;
    }

    /* Page number */
    .page::after {
      content: attr(data-page);
      position: absolute;
      bottom: 1rem;
      right: 2rem;
      font-size: 0.8rem;
      color: #888;
    }

    /* Hide scrollbars */
    .scroll-container::-webkit-scrollbar {
      display: none;
    }
    .scroll-container {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>
</head>
<body>
  <div class="scroll-container">

    <!-- PAGE 1 -->
    <section class="page" data-page="Page 1">
      <!-- Meta info -->
      <div class="meta-info">
        <div>🗓️ Sept 18, 2025</div>
        <div>⛅ 26°C, Sunny</div>
      </div>

      <!-- Masthead -->
      <div class="masthead">
        <h1>THE DAILY TIMES</h1>
        <div class="subheadline">All the News That Matters</div>
      </div>

      <div class="article" style="grid-column: 1 / span 6;">
        <h2>Big Front Page Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, purus nec feugiat euismod, mauris risus dictum lorem, vel placerat neque erat ut augue...</p>
      </div>

      <div class="article" style="grid-column: 1 / span 2; grid-row: span 2;">
        <h2>Side Column News</h2>
        <p>Curabitur facilisis, ipsum in pulvinar tempor, magna dui luctus augue, sit amet convallis magna...</p>
        <p>Aliquam euismod urna nec odio suscipit, ut posuere nisl tincidunt.</p>
      </div>
      <div class="article image" style="grid-column: 3 / span 2; grid-row: span 2;">
        IMAGE
      </div>
      <div class="article" style="grid-column: 5 / span 2;">
        <h2>Quick Brief</h2>
        <p>Etiam sit amet purus nec lorem dictum pretium.</p>
      </div>
      <div class="article" style="grid-column: 5 / span 2;">
        <h2>Short News</h2>
        <p>Donec vitae magna non ipsum hendrerit dictum.</p>
      </div>
    </section>

    <!-- PAGE 2 -->
    <section class="page" data-page="Page 2">
      <div class="article image" style="grid-column: 1 / span 4; grid-row: span 2;">
        LARGE IMAGE
      </div>
      <div class="article" style="grid-column: 5 / span 2;">
        <h2>Editorial</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada, neque nec bibendum ullamcorper...</p>
      </div>
      <div class="article" style="grid-column: 1 / span 2;">
        <h2>Local Politics</h2>
        <p>Sed euismod ligula id tellus hendrerit egestas.</p>
      </div>
      <div class="article" style="grid-column: 3 / span 2;">
        <h2>Culture</h2>
        <p>Vestibulum sit amet facilisis risus, eget tincidunt nisl.</p>
      </div>
      <div class="article" style="grid-column: 5 / span 2;">
        <h2>Opinion</h2>
        <p>Aliquam condimentum, nibh nec bibendum gravida, justo urna vulputate odio.</p>
      </div>
    </section>

    <!-- PAGE 3 -->
    <section class="page" data-page="Page 3">
      <div class="article" style="grid-column: 1 / span 3; grid-row: span 2;">
        <h2>Science Feature</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus risus id ligula tincidunt, eget facilisis urna rhoncus...</p>
        <p>Curabitur et erat eget sem accumsan suscipit. Ut tincidunt turpis eu erat vehicula porta.</p>
      </div>
      <div class="article" style="grid-column: 4 / span 3;">
        <h2>Sports</h2>
        <p>Phasellus viverra mauris eget ligula facilisis, at fermentum mauris fringilla...</p>
      </div>
      <div class="article image" style="grid-column: 4 / span 3; grid-row: span 2;">
        PHOTO
      </div>
      <div class="article" style="grid-column: 1 / span 2;">
        <h2>Short Column</h2>
        <p>Sed cursus, mi non aliquam dictum, sapien risus laoreet justo...</p>
      </div>
      <div class="article" style="grid-column: 3 / span 1;">
        <h2>Brief</h2>
        <p>Duis congue magna ut augue blandit.</p>
      </div>
    </section>

  </div>
</body>
</html>