git.s-ol.nu mmm / 1c2eb7a
improve mobile layout s-ol 9 months ago
5 changed file(s) with 34 addition(s) and 7 deletion(s). Raw diff Collapse all Expand all
3636 logo
3737 span {
3838 span 'mmm', class: 'bold'
39 '.s-ol.nu'
39 '​'
40 '.s‑ol.nu'
4041 }
4142 }
4243 span "fun stuff with code and wires"
4747 top: 0;
4848
4949 display: flex;
50 flex: 0 0 3.2em;
50 flex: 0 0 auto;
51 flex-wrap: wrap;
5152 justify-content: space-between;
5253 background: $gray-bright;
5354 z-index: 1000;
5859
5960 > * {
6061 margin: 1em;
62 white-space: nowrap;
63 }
64
65 > .inspect-btn {
66 @include media-small() { display: none; }
6167 }
6268 }
6369
2121
2222 display: block;
2323 border-radius: 6px;
24 margin: 0 2em;
24 margin: 0 var(--margin-wide);
2525 padding: 1em;
2626 white-space: pre-wrap;
2727 overflow-x: auto;
5050 .example, .well {
5151 @include left-border;
5252
53 margin: 1rem 2rem;
53 margin: 1rem var(--margin-wide);
5454 padding: 1rem;
5555 background: $gray-bright;
5656 border-color: $gray-neutral;
66 $gray-success: #bdddc1;
77 $gray-fail: #ddbdc1;
88
9 $break-small: 425px;
10 $break-large: 768px;
11
12 @mixin media-small() {
13 @media only screen and (max-width: $break-small) { @content; }
14 }
15
16 @mixin media-medium() {
17 @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
18 }
19
20 @mixin media-large() {
21 @media only screen and (min-width: $break-large) { @content; }
22 }
23
924 :root {
1025 --gray-bright: #{$gray-bright};
1126 --gray-dark: #{$gray-dark};
1328 --gray-neutral: #{$gray-neutral};
1429 --gray-success: #{$gray-success};
1530 --gray-fail: #{$gray-fail};
31
32 --margin-wide: 2rem;
33 @include media-small() {
34 --margin-wide: 0.5rem;
35 }
1636 }
1737
1838 @mixin left-border($w: 0.6rem) {
99
1010 h1 {
1111 display: flex;
12 justify-content: space-around;
12 justify-content: flex-end;
1313 align-items: center;
1414 flex-wrap: wrap;
1515 margin: 0;
2020
2121 > span {
2222 margin-left: auto;
23 white-space: nowrap;
2423 }
2524
2625 .bold {
5150
5251 aside {
5352 margin: 0;
54 padding: 1em 2rem;
53 padding: 0 2rem;
5554 color: $gray-bright;
5655 background: $gray-darker;
56 line-height: 3em;
5757
5858 > a {
5959 margin-right: 2em;