Skip to content

Commit a187e65

Browse files
author
hk-2029
committed
Refine documentation pathway styling
1 parent 88aea92 commit a187e65

2 files changed

Lines changed: 114 additions & 71 deletions

File tree

‎documentation/wiki/assets/css/extra.css‎

Lines changed: 113 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -819,26 +819,53 @@
819819

820820
.md-typeset .doc-pathway {
821821
--doc-pathway-accent: var(--sp-crimson);
822+
--doc-pathway-accent-rgb: 117,0,3;
822823
position: relative;
823-
background: rgba(255,255,255,0.62);
824-
border: 0.5px solid rgba(42,56,72,0.12);
825-
border-radius: 14px;
824+
background:
825+
linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.94)),
826+
linear-gradient(135deg, rgba(var(--doc-pathway-accent-rgb),0.09) 0%, rgba(var(--doc-pathway-accent-rgb),0.03) 24%, transparent 58%);
827+
border: 1px solid rgba(var(--doc-pathway-accent-rgb),0.18);
828+
border-radius: 16px;
826829
padding: 1.1rem 1.2rem 1rem;
827-
box-shadow: 0 3px 16px rgba(42,56,72,0.06);
830+
box-shadow: 0 10px 28px rgba(42,56,72,0.06), inset 0 1px 0 rgba(255,255,255,0.62);
828831
overflow: hidden;
829832
}
830833

831834
.md-typeset .doc-pathway::before {
832835
content: "";
833836
position: absolute;
834-
inset: 0 auto 0 0;
835-
width: 5px;
836-
background: var(--doc-pathway-accent);
837+
top: -1.4rem;
838+
right: -1.2rem;
839+
width: 7.5rem;
840+
height: 7.5rem;
841+
border-radius: 50%;
842+
background: radial-gradient(circle, rgba(var(--doc-pathway-accent-rgb),0.14) 0%, rgba(var(--doc-pathway-accent-rgb),0.04) 52%, transparent 72%);
843+
pointer-events: none;
844+
}
845+
846+
.md-typeset .doc-pathway::after {
847+
content: "";
848+
position: absolute;
849+
inset: 0.7rem;
850+
border: 1px solid rgba(var(--doc-pathway-accent-rgb),0.08);
851+
border-radius: 12px;
852+
pointer-events: none;
853+
}
854+
855+
.md-typeset .doc-pathway--setup {
856+
--doc-pathway-accent: #3f6972;
857+
--doc-pathway-accent-rgb: 63,105,114;
858+
}
859+
860+
.md-typeset .doc-pathway--user {
861+
--doc-pathway-accent: #7b4f5d;
862+
--doc-pathway-accent-rgb: 123,79,93;
837863
}
838864

839-
.md-typeset .doc-pathway--setup { --doc-pathway-accent: #4a6267; }
840-
.md-typeset .doc-pathway--user { --doc-pathway-accent: #5f5668; }
841-
.md-typeset .doc-pathway--dev { --doc-pathway-accent: #705f4a; }
865+
.md-typeset .doc-pathway--dev {
866+
--doc-pathway-accent: #8a6a44;
867+
--doc-pathway-accent-rgb: 138,106,68;
868+
}
842869

843870
.md-typeset .doc-pathway-intro {
844871
display: grid;
@@ -852,14 +879,14 @@
852879
margin: 0 0 0.2rem;
853880
font-size: 0.66rem;
854881
font-weight: 700;
855-
letter-spacing: 0.1em;
882+
letter-spacing: 0.12em;
856883
text-transform: uppercase;
857884
color: var(--doc-pathway-accent);
858885
}
859886

860887
.md-typeset .doc-pathway h2 {
861888
margin: 0 0 0.25rem;
862-
font-size: 1.12rem;
889+
font-size: 1.14rem;
863890
}
864891

865892
.md-typeset .doc-pathway-intro p:last-child {
@@ -869,73 +896,89 @@
869896
color: var(--md-default-fg-color--light);
870897
}
871898

899+
.md-typeset .doc-pathway .card-icon-wrap {
900+
width: 44px;
901+
height: 44px;
902+
margin-bottom: 0;
903+
border-radius: 12px;
904+
border: 1px solid rgba(var(--doc-pathway-accent-rgb),0.16);
905+
box-shadow: 0 4px 14px rgba(42,56,72,0.04);
906+
}
907+
872908
.md-typeset .doc-pathway-steps {
873909
counter-reset: pathway-step;
874910
list-style: none;
875-
display: flex;
876-
flex-wrap: wrap;
877-
gap: 0.8rem;
878-
align-items: center;
911+
display: grid;
912+
gap: 0;
879913
margin: 0 0 0.85rem;
880914
padding: 0;
881915
}
882916

883917
.md-typeset .doc-pathway-steps li {
884918
counter-increment: pathway-step;
885-
display: flex;
886-
align-items: center;
887-
}
888-
889-
.md-typeset .doc-pathway-steps li + li::before {
890-
content: "→";
891-
margin-right: 0.8rem;
892-
color: rgba(42,56,72,0.42);
893-
font-weight: 700;
919+
position: relative;
920+
padding: 0 0 0.92rem 3rem;
921+
margin: 0;
922+
min-height: 2.3rem;
894923
}
895924

896-
.md-typeset .doc-pathway-steps a {
897-
display: inline-flex;
898-
align-items: center;
899-
gap: 0.55rem;
900-
padding: 0.48rem 0.82rem;
901-
border-radius: 999px;
902-
border: 1px solid rgba(42,56,72,0.1);
903-
background: rgba(250,249,245,0.9);
904-
color: var(--sp-midnight);
905-
font-size: 0.75rem;
906-
font-weight: 600;
907-
line-height: 1.25;
908-
text-decoration: none;
909-
box-shadow: 0 1px 8px rgba(42,56,72,0.04);
910-
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
925+
.md-typeset .doc-pathway-steps li:not(:last-child)::after {
926+
content: "";
927+
position: absolute;
928+
left: 0.94rem;
929+
top: 1.95rem;
930+
bottom: 0.22rem;
931+
width: 1px;
932+
background: linear-gradient(to bottom, rgba(var(--doc-pathway-accent-rgb),0.42), rgba(var(--doc-pathway-accent-rgb),0.1));
911933
}
912934

913-
.md-typeset .doc-pathway-steps a::before {
935+
.md-typeset .doc-pathway-steps li::before {
914936
content: counter(pathway-step);
937+
position: absolute;
938+
left: 0;
939+
top: 0.02rem;
915940
display: inline-grid;
916941
place-items: center;
917-
width: 1.4rem;
918-
height: 1.4rem;
942+
width: 1.9rem;
943+
height: 1.9rem;
919944
border-radius: 999px;
920-
background: rgba(42,56,72,0.08);
945+
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(var(--doc-pathway-accent-rgb),0.11));
946+
border: 1px solid rgba(var(--doc-pathway-accent-rgb),0.22);
947+
color: var(--doc-pathway-accent);
948+
font-size: 0.68rem;
949+
font-weight: 600;
950+
box-shadow: 0 3px 12px rgba(42,56,72,0.05);
951+
}
952+
953+
.md-typeset .doc-pathway-steps a {
954+
display: inline;
955+
padding: 0;
956+
border: none;
957+
background: none;
921958
color: var(--sp-midnight);
922-
font-size: 0.66rem;
923-
font-weight: 700;
924-
flex: 0 0 auto;
959+
font-size: 0.82rem;
960+
font-weight: 600;
961+
line-height: 1.45;
962+
text-decoration: none;
963+
box-shadow: none;
964+
transition: color 0.18s ease;
925965
}
926966

927967
.md-typeset .doc-pathway-steps a:hover {
928-
transform: translateY(-1px);
929-
border-color: rgba(42,56,72,0.18);
930-
box-shadow: 0 4px 14px rgba(42,56,72,0.08);
968+
transform: none;
969+
border: none;
970+
box-shadow: none;
971+
color: var(--doc-pathway-accent);
931972
}
932973

933974
.md-typeset .doc-pathway-link {
934975
display: inline-flex;
935976
align-items: center;
936977
gap: 0.25rem;
937-
font-size: 0.74rem;
978+
font-size: 0.68rem;
938979
font-weight: 700;
980+
letter-spacing: 0.1em;
981+
text-transform: uppercase;
939982
color: var(--doc-pathway-accent);
940983
text-decoration: none;
941984
}
@@ -945,23 +988,33 @@
945988
}
946989

947990
[data-md-color-scheme="slate"] .md-typeset .doc-pathway {
948-
background: rgba(26,40,54,0.9);
949-
border-color: rgba(250,249,245,0.08);
991+
background:
992+
linear-gradient(180deg, rgba(24,36,50,0.92), rgba(20,30,42,0.96)),
993+
linear-gradient(135deg, rgba(var(--doc-pathway-accent-rgb),0.12) 0%, rgba(var(--doc-pathway-accent-rgb),0.03) 26%, transparent 62%);
994+
border-color: rgba(var(--doc-pathway-accent-rgb),0.22);
950995
box-shadow: 0 2px 16px rgba(0,0,0,0.2);
951996
}
952997

953-
[data-md-color-scheme="slate"] .md-typeset .doc-pathway-steps li + li::before {
954-
color: rgba(195,198,213,0.45);
998+
[data-md-color-scheme="slate"] .md-typeset .doc-pathway::after {
999+
border-color: rgba(var(--doc-pathway-accent-rgb),0.12);
9551000
}
9561001

957-
[data-md-color-scheme="slate"] .md-typeset .doc-pathway-steps a {
958-
background: rgba(20,30,42,0.88);
959-
border-color: rgba(195,198,213,0.09);
1002+
[data-md-color-scheme="slate"] .md-typeset .doc-pathway .card-icon-wrap {
1003+
border-color: rgba(var(--doc-pathway-accent-rgb),0.16);
1004+
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
1005+
}
1006+
1007+
[data-md-color-scheme="slate"] .md-typeset .doc-pathway-steps li:not(:last-child)::after {
1008+
background: linear-gradient(to bottom, rgba(var(--doc-pathway-accent-rgb),0.52), rgba(var(--doc-pathway-accent-rgb),0.12));
1009+
}
1010+
1011+
[data-md-color-scheme="slate"] .md-typeset .doc-pathway-steps li::before {
1012+
background: linear-gradient(180deg, rgba(44,63,84,0.92), rgba(var(--doc-pathway-accent-rgb),0.16));
1013+
border-color: rgba(var(--doc-pathway-accent-rgb),0.24);
9601014
color: #d7e3ef;
9611015
}
9621016

963-
[data-md-color-scheme="slate"] .md-typeset .doc-pathway-steps a::before {
964-
background: rgba(195,198,213,0.09);
1017+
[data-md-color-scheme="slate"] .md-typeset .doc-pathway-steps a {
9651018
color: #d7e3ef;
9661019
}
9671020

@@ -1000,16 +1053,6 @@
10001053
grid-template-columns: 1fr;
10011054
gap: 0.7rem;
10021055
}
1003-
1004-
.md-typeset .doc-pathway-steps {
1005-
flex-direction: column;
1006-
align-items: stretch;
1007-
gap: 0.55rem;
1008-
}
1009-
1010-
.md-typeset .doc-pathway-steps li + li::before {
1011-
content: none;
1012-
}
10131056
}
10141057
@media (max-width: 420px) {
10151058
.md-typeset .card-grid--primary,

‎documentation/wiki/documentation/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Choose the pathway that matches what you need to do next: get the model running,
4242
<ol class="doc-pathway-steps">
4343
<li><a href="../user-guide/single-runs/">Single Runs</a></li>
4444
<li><a href="../user-guide/multiple-runs/">Multiple Runs</a></li>
45-
<li><a href="../user-guide/tax-benefit-parameters/">Modifying Tax-Benefit Settings</a></li>
45+
<li><a href="../user-guide/gui/">Graphical User Interface</a></li>
4646
</ol>
4747
<a href="../user-guide/" class="doc-pathway-link">Open User Guide →</a>
4848
</section>

0 commit comments

Comments
 (0)