Skip to content

Commit 3e89019

Browse files
author
Jonathan Visser
committed
Revert to old page layout styling
1 parent 84bbed7 commit 3e89019

File tree

4 files changed

+56
-77
lines changed

4 files changed

+56
-77
lines changed

‎docs/_static/scss/components/_layout.scss‎

Lines changed: 37 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,28 @@
55
}
66

77
.wy-grid-for-nav {
8+
display: grid;
9+
grid-template-columns: 300px 900px 300px;
10+
justify-content: center;
11+
position: relative;
812
margin-top: 80px;
9-
max-width: 1500px;
10-
margin: auto;
11-
position: unset;
12-
width: unset;
13-
height: unset;
1413

15-
@media (min-width: $breakpoint-mobile) {
16-
display: flex;
14+
@media (max-width: $breakpoint-laptop) {
15+
display: grid;
16+
grid-template-columns: 300px 700px 200px;
17+
justify-content: center;
1718
}
18-
}
1919

20-
.wy-nav-content {
21-
max-width: 100% !important;
20+
@media (max-width: $breakpoint-width1200) {
21+
grid-template-columns: 300px auto;
22+
}
23+
24+
@media (max-width: $breakpoint-landscape){
25+
display: block;
26+
}
2227
}
2328

2429
.wy-nav-content-wrap {
25-
display: flex;
26-
flex: 1 1 auto;
2730
background: #fcfcfc;
2831

2932
@media (max-width: $breakpoint-landscape){
@@ -122,8 +125,7 @@
122125
}
123126

124127
.wy-nav-content {
125-
display: flex;
126-
max-width: 100% !important;
128+
max-width: 1200px;
127129
padding: 20px;
128130
height: auto;
129131

@@ -207,23 +209,18 @@
207209

208210
}
209211

210-
.wy-grid-for-nav .wy-nav-side {
212+
.wy-nav-side {
211213
position: sticky;
212214
top: 0;
213215
background: inherit;
214216
z-index: 10;
215-
width: 0;
216217

217-
@media (max-width: $breakpoint-landscape - 1) {
218+
@media (max-width: $breakpoint-landscape){
219+
width: 300px;
218220
left: -300px;
219221
}
220-
221-
@media (min-width: $breakpoint-landscape) {
222-
flex: 0 0 300px;
223-
}
224-
225222
.wy-menu-vertical {
226-
@media (max-width: $breakpoint-landscape - 1) {
223+
@media (max-width: $breakpoint-landscape) {
227224
left: -300px;
228225
width: 300px;
229226
transition: 0.2s ease-in-out;
@@ -368,41 +365,35 @@
368365
}
369366
}
370367

371-
.aside-tiles {
372-
display: none;
373-
gap: 32px;
374-
height: 100%;
368+
.aside-tile {
369+
display: flex;
375370
flex-direction: column;
376-
flex: 0 0 300px;
377-
font-size: 12px;
378-
color: var(--blue);
379-
text-align: left;
380-
margin-bottom: 5px;
371+
justify-content: center;
381372
align-items: center;
373+
position: relative;
374+
width: 100%;
375+
height: max-content;
376+
padding: 10px;
382377

383-
@media (min-width: $breakpoint-laptop) {
384-
display: flex;
385-
}
386-
387-
&__cards {
388-
position: fixed;
389-
top: 150px;
390-
}
391-
392-
&__card {
378+
&__container {
393379
border-radius: 5px;
394380
border: 1px solid var(--grey-border);
381+
position: fixed;
382+
top: 150px;
395383
background-color: #fff;
396384
width: 250px;
397385
height: max-content;
398386
padding: 20px 20px 10px 20px;
399-
margin-bottom: 32px;
400387

401388
@media (max-width: $breakpoint-laptop) {
402389
width: 179px;
403390
}
404391
}
405392

393+
&__feedback {
394+
top: 350px;
395+
}
396+
406397
&__content {
407398
display: flex;
408399
flex-direction: column;
@@ -423,13 +414,12 @@
423414
display: none;
424415
}
425416

426-
ul {
417+
.aside-tile__feedback-list {
427418
font-size: 12px;
428419
color: var(--blue);
429420
text-align: left;
430421
margin-bottom: 5px;
431422

432-
433423
li {
434424
line-height: 25px;
435425

@@ -438,6 +428,8 @@
438428
color: var(--message-success);
439429
}
440430
}
431+
432+
441433
}
442434
}
443435
/* aside end */

‎docs/_static/scss/components/_module.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55

66
@use "../breakpoints" as *;
77

8-
header {
9-
margin-bottom: 60px;
10-
}
118

129
.main-content a {
1310
color: var(--secondary-blue);
@@ -46,7 +43,8 @@ header {
4643
}
4744

4845
.rst-content {
49-
padding: 20px 50px;
46+
max-width: 900px;
47+
padding: 0 50px;
5048

5149
@media (max-width: $breakpoint-portrait) {
5250
padding: 0;

‎docs/_static/scss/components/defaults/_code.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,6 @@ code.docutils.literal.notranslate {
5050
border-radius: 8px;
5151
background-color: #292d3e;
5252
color: #D9E7F3;
53-
width: min(900px, calc(100vw - 100px));
54-
55-
@media (min-width: $breakpoint-laptop) {
56-
width: min(900px, calc(100vw - 600px));
57-
}
58-
59-
@media (min-width: $breakpoint-landscape) {
60-
width: min(900px, calc(100vw - 400px));
61-
}
6253

6354
.c1 {
6455
color: var(--message-warning);

‎docs/_templates/layout.html‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -268,26 +268,24 @@
268268
{%- endblock %}
269269
</div>
270270
</section>
271-
<aside class="aside-tiles">
272-
<div class="aside-tiles__cards">
273-
<div class="aside-tiles__card">
274-
<div class="aside-tiles__content">
275-
<img src="https://static.hypernode.com/img/berend/logo.svg">
276-
<h4>Need support?</h4>
277-
<p><a class="ahref-orange" href="https://www.hypernode.com/contact/#contact" target="_blank">Submit a ticket</a></p>
278-
</div>
271+
<aside class="aside-tile">
272+
<div class="aside-tile__container">
273+
<div class="aside-tile__content">
274+
<img src="https://static.hypernode.com/img/berend/logo.svg">
275+
<h4>Need support?</h4>
276+
<p><a class="ahref-orange" href="https://www.hypernode.com/contact/#contact" target="_blank">Submit a ticket</a></p>
279277
</div>
280-
<div class="aside-tiles__card">
281-
<div class="aside-tiles__content">
282-
<img src="https://static.hypernode.com/img/icons-multi-color/chat-bot.svg">
283-
<h4>Join our<br>Feedback Group</h4>
284-
<ul class="aside-tiles__feedback-list">
285-
<li><i class="fa fa-check-circle"></i>Experience new features first</li>
286-
<li><i class="fa fa-check-circle"></i>Get a gift after each session</li>
287-
<li><i class="fa fa-check-circle"></i>Join product decision making</li>
288-
</ul>
289-
<p><a class="ahref-orange" href="https://forms.gle/ocQjMzhghMkUzkB19" target="_blank">read more</a></p>
290-
</div>
278+
</div>
279+
<div class="aside-tile__container aside-tile__feedback">
280+
<div class="aside-tile__content">
281+
<img src="https://static.hypernode.com/img/icons-multi-color/chat-bot.svg">
282+
<h4>Join our<br>Feedback Group</h4>
283+
<ul class="aside-tile__feedback-list">
284+
<li><i class="fa fa-check-circle"></i>Experience new features first</li>
285+
<li><i class="fa fa-check-circle"></i>Get a gift after each session</li>
286+
<li><i class="fa fa-check-circle"></i>Join product decision making</li>
287+
</ul>
288+
<p><a class="ahref-orange" href="https://forms.gle/ocQjMzhghMkUzkB19" target="_blank">read more</a></p>
291289
</div>
292290
</div>
293291
</aside>

0 commit comments

Comments
 (0)