Skip to content

Commit 273d913

Browse files
jhildenbiddlejhildenbiddle
committed
Add configurable max-width. Style updates.
- Add configurable max-width (Fix #2429) - Add z-index vars for maintainability - Fix .content style conflicts - Update navbar and GitHub corner styles
1 parent a5212e2 commit 273d913

File tree

3 files changed

+114
-95
lines changed

3 files changed

+114
-95
lines changed

Diff for: ‎src/themes/basic/_main.css

+111-92
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
@import '_vars.css';
22

3+
/* Variables (Private) */
4+
/* ========================================================================== */
5+
/* prettier-ignore */
6+
:root {
7+
--_content-margin-inline: 40px;
8+
9+
/* z-index */
10+
--_z-progress : 2147483647;
11+
--_z-skip-to-content: 2147483646;
12+
--_z-sidebar-toggle : 40;
13+
--_z-sidebar : 30;
14+
--_z-github-corner : 20;
15+
--_z-app-nav : 10;
16+
}
17+
318
/* Base */
419
/* ========================================================================== */
520
*,
@@ -172,7 +187,6 @@ main {
172187
position: relative;
173188
width: 100vw;
174189
height: 100%;
175-
z-index: 0;
176190

177191
&.hidden {
178192
display: none;
@@ -254,12 +268,6 @@ samp {
254268
border-radius: var(--border-radius);
255269
}
256270

257-
code,
258-
pre[data-lang],
259-
samp {
260-
z-index: 0;
261-
}
262-
263271
code,
264272
pre,
265273
output::after,
@@ -700,53 +708,66 @@ tr {
700708

701709
/* App */
702710
/* ========================================================================== */
703-
#app {
704-
display: flex;
705-
align-items: center;
706-
justify-content: center;
707-
gap: 0.75em;
708-
height: 100%;
709-
padding-inline: 50px;
711+
body {
712+
> .progress {
713+
position: fixed;
714+
z-index: var(--_z-progress);
715+
top: 0;
716+
right: 0;
717+
left: 0;
718+
height: 2px;
719+
width: 0%;
720+
background: var(--color-primary);
721+
transition:
722+
width 0.2s,
723+
opacity 0.4s;
724+
}
710725
}
711726

712-
.content {
713-
position: absolute;
714-
top: 0;
715-
right: 0;
716-
bottom: 0;
717-
left: var(--sidebar-width);
718-
transition: left 250ms ease;
727+
main {
728+
> .content {
729+
position: absolute;
730+
top: 0;
731+
right: 0;
732+
bottom: 0;
733+
left: var(--sidebar-width);
734+
transition: left 250ms ease;
719735

720-
body:has(.app-nav) & {
721-
top: var(--navbar-height);
722-
}
736+
body:has(.app-nav) & {
737+
top: var(--navbar-height);
738+
}
723739

724-
body.close & {
725-
left: 0;
726-
}
740+
body.close & {
741+
left: 0;
742+
}
727743

728-
body.hidesidebar & {
729-
position: relative;
730-
left: unset;
731-
right: unset;
744+
body.hidesidebar & {
745+
position: relative;
746+
left: unset;
747+
right: unset;
748+
}
732749
}
733750
}
734751

735752
.github-corner {
736753
position: fixed;
737754
top: 0;
738755
right: 0;
739-
z-index: 1;
756+
z-index: var(--_z-github-corner);
740757
border-bottom: 0;
741758
text-decoration: none;
742759

743-
&:hover .octo-arm {
744-
animation: github-corner 560ms ease-in-out;
760+
&:hover {
761+
.octo-arm {
762+
animation: github-corner 560ms ease-in-out;
763+
}
745764
}
746765

747766
svg {
748-
height: 80px;
749-
width: 80px;
767+
--size: var(--navbar-height);
768+
769+
height: var(--size);
770+
width: var(--size);
750771
color: var(--color-bg);
751772
fill: var(--color-primary);
752773
}
@@ -769,7 +790,8 @@ tr {
769790

770791
.markdown-section {
771792
position: relative;
772-
max-width: 80%;
793+
width: var(--max-width);
794+
max-width: calc(100% - 80px);
773795
margin: 0 auto;
774796
padding-block: 2rem;
775797

@@ -791,47 +813,6 @@ tr {
791813
}
792814
}
793815

794-
.progress {
795-
position: fixed;
796-
z-index: 999999;
797-
top: 0;
798-
right: 0;
799-
left: 0;
800-
height: 2px;
801-
width: 0%;
802-
background: var(--color-primary);
803-
transition:
804-
width 0.2s,
805-
opacity 0.4s;
806-
}
807-
808-
#skip-to-content {
809-
appearance: none;
810-
display: block;
811-
position: fixed;
812-
z-index: 2147483647;
813-
top: 0;
814-
left: 50%;
815-
padding: 0.5rem 1.5rem;
816-
border: 0;
817-
border-radius: var(--button-border-radius);
818-
background: var(--color-primary);
819-
color: var(--theme-bg, var(--color-bg));
820-
opacity: 0;
821-
text-decoration: none;
822-
transform: translate(-50%, -100%);
823-
transition-property: opacity, transform;
824-
transition-duration: 0s, 0.2s;
825-
transition-delay: 0.2s, 0s;
826-
827-
&:focus {
828-
opacity: 1;
829-
transform: translate(-50%, 0.75rem);
830-
transition-duration: 0s, 0.2s;
831-
transition-delay: 0s, 0s;
832-
}
833-
}
834-
835816
.spinner:empty /* Block: <div class="spinner"></div> */,
836817
.spinner:not(:empty)::before /* Pseudo: <div class="spinner">Content</div> */ {
837818
--_gradient: no-repeat
@@ -864,14 +845,50 @@ tr {
864845
}
865846
}
866847

848+
#app {
849+
display: flex;
850+
align-items: center;
851+
justify-content: center;
852+
gap: 0.75em;
853+
height: 100%;
854+
padding-inline: 50px;
855+
}
856+
857+
#skip-to-content {
858+
appearance: none;
859+
display: block;
860+
position: fixed;
861+
z-index: var(--_z-skip-to-content);
862+
top: 0;
863+
left: 50%;
864+
padding: 0.5rem 1.5rem;
865+
border: 0;
866+
border-radius: var(--button-border-radius);
867+
background: var(--color-primary);
868+
color: var(--theme-bg, var(--color-bg));
869+
opacity: 0;
870+
text-decoration: none;
871+
transform: translate(-50%, -100%);
872+
transition-property: opacity, transform;
873+
transition-duration: 0s, 0.2s;
874+
transition-delay: 0.2s, 0s;
875+
876+
&:focus {
877+
opacity: 1;
878+
transform: translate(-50%, 0.75rem);
879+
transition-duration: 0s, 0.2s;
880+
transition-delay: 0s, 0s;
881+
}
882+
}
883+
867884
/* Navigation Bar */
868885
/* ========================================================================== */
869886
.app-nav {
870887
display: flex;
871888
align-items: center;
872889
justify-content: end;
873890
position: absolute;
874-
z-index: 10;
891+
z-index: var(--_z-app-nav);
875892
top: 0;
876893
right: 0;
877894
left: var(--sidebar-width);
@@ -888,7 +905,7 @@ tr {
888905
}
889906

890907
&:has(~ .github-corner) {
891-
right: 70px;
908+
padding-right: calc(var(--navbar-height) + 1em);
892909
}
893910

894911
a {
@@ -977,7 +994,7 @@ tr {
977994
display: flex;
978995
flex-direction: column;
979996
position: absolute;
980-
z-index: 20;
997+
z-index: var(--_z-sidebar);
981998
top: 0;
982999
bottom: 0;
9831000
left: 0;
@@ -1090,7 +1107,7 @@ tr {
10901107

10911108
.sidebar-toggle {
10921109
position: absolute;
1093-
z-index: 30;
1110+
z-index: var(--_z-sidebar-toggle);
10941111
bottom: 0;
10951112
left: 0;
10961113
width: calc(var(--sidebar-width) - 6px);
@@ -1152,6 +1169,14 @@ tr {
11521169
height: auto;
11531170
min-height: 100vh;
11541171
overflow-x: hidden;
1172+
1173+
> .content {
1174+
position: relative;
1175+
right: 0;
1176+
left: 0;
1177+
max-width: 100vw;
1178+
transition: transform 250ms ease;
1179+
}
11551180
}
11561181

11571182
.app-nav,
@@ -1169,14 +1194,6 @@ tr {
11691194
left: 0;
11701195
}
11711196

1172-
.content {
1173-
position: relative;
1174-
right: 0;
1175-
left: 0;
1176-
max-width: 100vw;
1177-
transition: transform 250ms ease;
1178-
}
1179-
11801197
.github-corner {
11811198
&:hover .octo-arm {
11821199
animation: none;
@@ -1207,8 +1224,10 @@ tr {
12071224
display: none;
12081225
}
12091226

1210-
.content {
1211-
transform: translateX(var(--sidebar-width));
1227+
main {
1228+
> .content {
1229+
transform: translateX(var(--sidebar-width));
1230+
}
12121231
}
12131232

12141233
.sidebar {

Diff for: ‎src/themes/basic/_vars.css

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
--font-weight-mono : 400;
3535
--line-height : 1.6;
3636
--margin-block : 1em;
37+
--max-width : 72ch; /* 725px / 98 characters */
3738
--modular-scale : 1.250; /* 1.067, 1.125, 1.200, 1.250, 1.333, 1.414, 1.500, 1.618 */
3839

3940
/* Elements */

Diff for: ‎src/themes/vue.css

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@
1111
--color-text : #34495e;
1212
--font-family : 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
1313
--font-family-mono: 'Roboto Mono', Monaco, courier, monospace;
14-
--font-size : 15px;
15-
--line-height : 1.7;
16-
--margin-block : 1.2em;
14+
--margin-block : 1em;
15+
--max-width : 85ch; /* 675px / 98 characters */
1716

1817
/* Elements */
1918
--code-color : #e96900;

0 commit comments

Comments
 (0)