Modernize mobile density and article scannability + wider desktop (#327)
Operator-approved. Mobile density/scannability + fullscreen content width; CSS override + a11y fixes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Juan Manuel Servera committed
Jun 11, 2026 at 09:57 UTC
7339cb77e72b6abb499199f378990a4b93933917
4 files changed
+144
-40
assets/css/core/theme-vars.css
+1
-1
@@ -2,7 +2,7 @@
2
--gap: var(--space-4);
3
--content-gap: var(--space-4);
4
--nav-width: 1024px;
5
- --main-width: 720px;
5
+ --main-width: 800px;
6
--header-height: var(--size-header-height);
7
--footer-height: var(--size-header-height);
8
--radius: var(--radius-md);
assets/css/extended/squadscope.css
+139
-37
@@ -369,43 +369,6 @@ summary:focus-visible,
369
transform: translateY(0);
370
}
371
372
-@media (max-width: 768px) {
373
- .post-title {
374
- font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
375
- }
376
-
377
- .post-meta {
378
- display: flex;
379
- flex-wrap: wrap;
380
- gap: var(--space-1) var(--space-2);
381
- }
382
-
383
- .home-actions,
384
- .report-shortcuts {
385
- flex-direction: column;
386
- align-items: stretch;
387
- }
388
-
389
- .home-action-primary,
390
- .home-action-secondary,
391
- .report-shortcuts a {
392
- width: 100%;
393
- }
394
-
395
- .home-topic-rail,
396
- .post-tags__topic {
397
- display: none;
398
- }
399
-
400
- .table-scroll table {
401
- min-width: 30rem;
402
- }
403
-
404
- .search-panel .pagefind-ui__search-input {
405
- font-size: var(--text-base);
406
- }
407
-}
408
-
372
@media (min-width: 769px) {
373
.home-hero,
374
.home-content-grid {
@@ -947,3 +910,142 @@ summary:focus-visible,
910
flex-direction: column;
911
}
912
}
913
+
914
+/* #327: mobile density overrides — placed after the base rules so equal-
915
+ specificity selectors win on mobile via source order (was previously
916
+ overridden by the later base declarations). */
917
+@media (max-width: 768px) {
918
+ .post-title {
919
+ font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
920
+ }
921
+
922
+ .post-meta {
923
+ display: flex;
924
+ flex-wrap: wrap;
925
+ gap: var(--space-1) var(--space-2);
926
+ }
927
+
928
+ .home-actions {
929
+ flex-direction: column;
930
+ align-items: stretch;
931
+ }
932
+
933
+ .home-action-primary,
934
+ .home-action-secondary {
935
+ width: 100%;
936
+ }
937
+
938
+ .home-topic-rail,
939
+ .post-tags__topic {
940
+ display: none;
941
+ }
942
+
943
+ .table-scroll table {
944
+ min-width: 30rem;
945
+ }
946
+
947
+ .search-panel .pagefind-ui__search-input {
948
+ font-size: var(--text-base);
949
+ }
950
+
951
+ .article-header {
952
+ gap: var(--space-2);
953
+ padding-block: var(--space-3) var(--space-3);
954
+ }
955
+
956
+ .article-subtitle {
957
+ font-size: var(--text-base);
958
+ line-height: var(--leading-normal);
959
+ }
960
+
961
+ .squad-article .report-metrics,
962
+ .article-jump-nav,
963
+ .article-featured-repos,
964
+ .squad-report .report-shortcuts {
965
+ margin-top: var(--space-3);
966
+ }
967
+
968
+ /* Dense metric grid: two compact cards per row instead of tall full-width stacks. */
969
+ .squad-article .report-metrics,
970
+ .home-latest .report-metrics {
971
+ grid-template-columns: repeat(2, minmax(0, 1fr));
972
+ gap: var(--space-2);
973
+ }
974
+
975
+ .squad-article .metric-card,
976
+ .home-latest .metric-card {
977
+ min-width: 0;
978
+ padding: var(--space-2) var(--space-3);
979
+ }
980
+
981
+ .squad-article .metric-label,
982
+ .home-latest .metric-label {
983
+ font-size: var(--text-xs);
984
+ }
985
+
986
+ .squad-article .metric-value,
987
+ .home-latest .metric-value {
988
+ font-size: var(--text-base);
989
+ overflow-wrap: anywhere;
990
+ }
991
+
992
+ /* Report shortcuts as a dense wrapping pill row, not a full-width column stack. */
993
+ .squad-report .report-shortcuts {
994
+ flex-wrap: wrap;
995
+ gap: var(--space-2);
996
+ padding: var(--space-2);
997
+ }
998
+
999
+ .squad-report .report-shortcuts a {
1000
+ flex: 0 1 auto;
1001
+ min-height: var(--tap-target, 2.75rem);
1002
+ padding-inline: var(--space-3);
1003
+ }
1004
+
1005
+ /* 44px minimum tap targets for inline navigation controls. */
1006
+ .squad-article .article-jump-nav a,
1007
+ .squad-article .repo-card__button {
1008
+ min-height: var(--tap-target, 2.75rem);
1009
+ }
1010
+
1011
+ .home-actions .home-action-primary,
1012
+ .home-actions .home-action-secondary {
1013
+ min-height: var(--tap-target, 2.75rem);
1014
+ }
1015
+
1016
+ /* Tighter featured-repo card on small screens. */
1017
+ .repo-card {
1018
+ gap: var(--space-2);
1019
+ padding: var(--space-3);
1020
+ }
1021
+
1022
+ /* The top share block is redundant on mobile; the bottom one remains. */
1023
+ .article-share--top {
1024
+ display: none;
1025
+ }
1026
+
1027
+ /* Scannability: shorten the section rhythm so long articles don't read as a wall.
1028
+ Scoped under .squad-article and placed after the base rules, so these win on
1029
+ mobile without touching desktop. */
1030
+ .squad-article .article-content h2 {
1031
+ margin-top: var(--space-5);
1032
+ padding-top: var(--space-3);
1033
+ }
1034
+
1035
+ .squad-article .article-content h3 {
1036
+ margin-top: var(--space-4);
1037
+ }
1038
+
1039
+ .md-content h1 {
1040
+ margin-block: var(--space-4) var(--space-3);
1041
+ }
1042
+
1043
+ .md-content h2 {
1044
+ margin-block: var(--space-4) var(--space-3);
1045
+ }
1046
+
1047
+ .squad-article .article-content blockquote,
1048
+ .squad-article .press-context-callout {
1049
+ margin-block: var(--space-4);
1050
+ }
1051
+}
layouts/partials/share_icons.html
+3
-1
@@ -70,7 +70,9 @@
70
</div>
71
<script>
72
(() => {
73
- const nativeShareButton = document.querySelector('[data-share-native]');
73
+ const currentScript = document.currentScript;
74
+ const shareBlock = currentScript && currentScript.previousElementSibling;
75
+ const nativeShareButton = (shareBlock || document).querySelector('[data-share-native]');
76
if (!nativeShareButton || typeof navigator === 'undefined' || typeof navigator.share !== 'function') {
77
return;
78
}
layouts/weekly/single.html
+1
-1
@@ -19,7 +19,7 @@
19
{{ partial "report-shortcuts.html" . }}
20
21
{{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
22
- {{- partial "share_icons.html" . -}}
22
+ <div class="article-share article-share--top">{{ partial "share_icons.html" . }}</div>
23
{{- end }}
24
25
<div class="post-content md-content article-content">