this repo has no description
Dynamically resize main web view to use whole page
+29
-10
+29
-10
internal/assets/css/screen.css
+29
-10
internal/assets/css/screen.css
···
107
107
font-size: 12px;
108
108
line-height: 18px;
109
109
position: relative;
110
-
width: 750px;
110
+
width: 95%; /* Dynamic width */
111
+
max-width: 1400px; /* Reasonable maximum */
111
112
margin: 0 auto;
112
113
flex: 1;
114
+
115
+
/* CSS Grid Layout */
116
+
display: grid;
117
+
grid-template-columns: 1fr 250px;
118
+
column-gap: 40px;
113
119
}
114
120
115
121
#masthead,
···
119
125
}
120
126
121
127
#masthead {
122
-
margin-left: -100px;
123
-
padding-left: 100px;
124
-
margin-right: -25px;
125
-
padding-right: 25px;
128
+
/* Span full width of the grid */
129
+
grid-column: 1 / -1;
130
+
126
131
font-size: 72px;
127
132
font-weight: bold;
128
133
line-height: 68px;
···
133
138
display: flex;
134
139
justify-content: space-between;
135
140
align-items: center;
141
+
142
+
/* Reset previous negative margins/padding if they interfere,
143
+
but keeping some padding might be desired for the text look.
144
+
Let's simplify for the grid context. */
145
+
margin: 0 0 20px 0;
146
+
padding: 0;
136
147
}
137
148
138
149
#masthead a {
···
156
167
}
157
168
158
169
#sidebar {
159
-
width: 175px;
160
-
float: right;
170
+
/* Grid placement */
171
+
grid-column: 2;
172
+
grid-row: 2; /* Starts after masthead */
173
+
174
+
width: 100%; /* Take full width of the column */
161
175
}
162
176
163
177
#content {
164
-
width: 525px;
178
+
/* Grid placement */
179
+
grid-column: 1;
180
+
181
+
width: 100%; /* Take full width of the column */
165
182
}
166
183
167
184
.date-icon {
···
366
383
}
367
384
368
385
#navigation {
369
-
width: 525px;
370
-
margin-left: -75px;
386
+
/* Grid placement */
387
+
grid-column: 1;
388
+
389
+
width: 100%;
371
390
text-align: left;
372
391
padding-bottom: 20px;
373
392
}