forked from
stavola.xyz/mlf
A human-friendly DSL for ATProto Lexicons
Licensing and responsive design
+297
-227
+21
LICENSE
+21
LICENSE
···
1
+
MIT License
2
+
3
+
Copyright (c) 2025 MLF Contributors
4
+
5
+
Permission is hereby granted, free of charge, to any person obtaining a copy
6
+
of this software and associated documentation files (the "Software"), to deal
7
+
in the Software without restriction, including without limitation the rights
8
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+
copies of the Software, and to permit persons to whom the Software is
10
+
furnished to do so, subject to the following conditions:
11
+
12
+
The above copyright notice and this permission notice shall be included in all
13
+
copies or substantial portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+
SOFTWARE.
+1
mlf-cli/Cargo.toml
+1
mlf-cli/Cargo.toml
+1
mlf-codegen/Cargo.toml
+1
mlf-codegen/Cargo.toml
+1
mlf-diagnostics/Cargo.toml
+1
mlf-diagnostics/Cargo.toml
+1
mlf-lang/Cargo.toml
+1
mlf-lang/Cargo.toml
+1
mlf-validation/Cargo.toml
+1
mlf-validation/Cargo.toml
+1
mlf-wasm/Cargo.toml
+1
mlf-wasm/Cargo.toml
+269
-196
website/sass/style.scss
+269
-196
website/sass/style.scss
···
36
36
37
37
html {
38
38
height: 100%;
39
+
overflow-x: hidden;
39
40
}
40
41
41
42
body {
···
47
48
min-height: 100%;
48
49
display: flex;
49
50
flex-direction: column;
51
+
overflow-x: hidden;
52
+
max-width: 100vw;
50
53
}
51
54
52
55
main {
53
56
flex: 1;
57
+
overflow-x: hidden;
58
+
width: 100%;
54
59
}
55
60
56
61
.container {
57
62
max-width: 980px;
58
63
margin: 0 auto;
59
64
padding: 0 1.5rem;
65
+
width: 100%;
66
+
box-sizing: border-box;
60
67
}
61
68
62
69
/* Typography */
···
680
687
font-size: 0.875rem;
681
688
}
682
689
683
-
/* Mobile menu toggle */
684
-
.mobile-menu-toggle {
685
-
display: none;
686
-
background: none;
687
-
border: none;
688
-
color: var(--text);
689
-
font-size: 1.5rem;
690
-
cursor: pointer;
691
-
padding: 0.5rem;
692
-
line-height: 1;
693
-
}
694
-
695
-
.mobile-menu-toggle:hover {
696
-
color: var(--accent);
697
-
}
698
-
699
-
/* Responsive */
700
-
@media (max-width: 768px) {
701
-
.hero h1 {
702
-
font-size: 2rem;
703
-
}
704
-
705
-
.tagline {
706
-
font-size: 1.125rem;
707
-
}
708
-
709
-
.code-comparison {
710
-
grid-template-columns: 1fr;
711
-
gap: 1rem;
712
-
}
713
-
714
-
.playground-container {
715
-
grid-template-columns: 1fr;
716
-
}
717
-
718
-
/* Mobile navigation */
719
-
.mobile-menu-toggle {
720
-
display: block;
721
-
}
722
-
723
-
.nav-links {
724
-
display: none;
725
-
position: absolute;
726
-
top: 100%;
727
-
left: 0;
728
-
right: 0;
729
-
background: var(--bg-elevated);
730
-
flex-direction: column;
731
-
gap: 0;
732
-
padding: 1rem 0;
733
-
border-bottom: 1px solid var(--border);
734
-
z-index: 50;
735
-
}
736
-
737
-
.nav-links.active {
738
-
display: flex;
739
-
}
740
-
741
-
.nav-links li {
742
-
width: 100%;
743
-
}
744
-
745
-
.nav-links a {
746
-
display: block;
747
-
padding: 0.75rem 1.5rem;
748
-
font-size: 1rem;
749
-
}
750
-
751
-
nav {
752
-
position: relative;
753
-
}
754
-
755
-
.cta-buttons {
756
-
flex-direction: column;
757
-
align-items: center;
758
-
}
759
-
760
-
.btn {
761
-
width: 100%;
762
-
max-width: 200px;
763
-
text-align: center;
764
-
}
765
-
766
-
.doc-layout {
767
-
grid-template-columns: 1fr;
768
-
gap: 1.5rem;
769
-
}
770
-
771
-
.doc-page {
772
-
padding: 1.5rem 0;
773
-
}
774
-
775
-
.doc-sidebar {
776
-
position: static;
777
-
border: 1px solid var(--border);
778
-
border-radius: 0.375rem;
779
-
padding: 1rem;
780
-
margin-bottom: 1.5rem;
781
-
}
782
-
783
-
.doc-nav h3 {
784
-
cursor: pointer;
785
-
user-select: none;
786
-
}
787
-
788
-
.doc-nav h3::after {
789
-
content: " ▼";
790
-
font-size: 0.75rem;
791
-
color: var(--text-muted);
792
-
}
793
-
794
-
.doc-nav > ul {
795
-
max-height: 500px;
796
-
overflow-y: auto;
797
-
}
798
-
799
-
.doc-nav .nav-section ul {
800
-
padding-left: 0.5rem;
801
-
}
802
-
803
-
/* Make tables responsive */
804
-
.doc-content table {
805
-
display: block;
806
-
overflow-x: auto;
807
-
white-space: nowrap;
808
-
}
809
-
810
-
/* Code blocks */
811
-
.doc-content pre {
812
-
margin-left: -1.5rem;
813
-
margin-right: -1.5rem;
814
-
border-radius: 0;
815
-
}
816
-
}
817
-
818
-
@media (max-width: 480px) {
819
-
.container {
820
-
padding: 0 1rem;
821
-
}
822
-
823
-
.hero {
824
-
padding: 2rem 0;
825
-
}
826
-
827
-
.hero h1 {
828
-
font-size: 1.75rem;
829
-
}
830
-
831
-
.nav-container {
832
-
padding: 0 1rem;
833
-
}
834
-
835
-
.logo img {
836
-
height: 36px;
837
-
}
838
-
839
-
textarea {
840
-
height: 300px;
841
-
}
842
-
843
-
.doc-content {
844
-
font-size: 0.938rem;
845
-
}
846
-
847
-
.doc-content h1 {
848
-
font-size: 1.875rem;
849
-
}
850
-
851
-
.doc-content h2 {
852
-
font-size: 1.5rem;
853
-
}
854
-
855
-
.doc-content h3 {
856
-
font-size: 1.25rem;
857
-
}
858
-
859
-
.doc-content pre {
860
-
font-size: 0.813rem;
861
-
}
862
-
863
-
.panel-header {
864
-
flex-direction: column;
865
-
align-items: flex-start;
866
-
}
867
-
868
-
.file-path-container {
869
-
width: 100%;
870
-
}
871
-
872
-
.tabs {
873
-
width: 100%;
874
-
justify-content: space-between;
875
-
}
876
-
}
877
-
878
690
/* Documentation pages */
879
691
.doc-page {
880
692
padding: 3rem 0;
···
892
704
grid-template-columns: 250px 1fr;
893
705
gap: 3rem;
894
706
align-items: start;
707
+
max-width: 100%;
895
708
}
896
709
897
710
.doc-sidebar {
898
711
position: sticky;
899
712
top: 2rem;
713
+
min-width: 0;
900
714
}
901
715
902
716
.doc-nav h3 {
···
966
780
967
781
.doc-main {
968
782
min-width: 0;
783
+
max-width: 100%;
784
+
overflow-x: hidden;
969
785
}
970
786
971
787
.doc-content {
972
788
max-width: 720px;
789
+
overflow-x: hidden;
790
+
word-wrap: break-word;
791
+
}
792
+
793
+
.doc-content * {
794
+
max-width: 100%;
973
795
}
974
796
975
797
.doc-content h1 {
···
1070
892
font-size: 0.813rem;
1071
893
}
1072
894
895
+
/* Line numbers for code blocks */
1073
896
.logo a {
1074
897
color: var(--accent);
1075
898
text-decoration: none;
1076
899
}
1077
900
1078
-
/* Line numbers for code editor */
1079
901
.line-numbers {
1080
902
flex-shrink: 0;
1081
903
min-width: 3rem;
···
1105
927
overflow: auto;
1106
928
min-width: 0;
1107
929
}
930
+
931
+
/* Responsive */
932
+
@media (max-width: 768px) {
933
+
.hero h1 {
934
+
font-size: 2rem;
935
+
}
936
+
937
+
.tagline {
938
+
font-size: 1.125rem;
939
+
}
940
+
941
+
.code-comparison {
942
+
grid-template-columns: 1fr;
943
+
gap: 1rem;
944
+
}
945
+
946
+
.playground-container {
947
+
grid-template-columns: 1fr;
948
+
}
949
+
950
+
/* Mobile navigation */
951
+
.nav-container {
952
+
flex-direction: column;
953
+
gap: 1rem;
954
+
align-items: flex-start;
955
+
}
956
+
957
+
.nav-links {
958
+
width: 100%;
959
+
flex-direction: column;
960
+
gap: 0.5rem;
961
+
}
962
+
963
+
.nav-links li {
964
+
width: 100%;
965
+
}
966
+
967
+
.nav-links a {
968
+
display: block;
969
+
padding: 0.5rem 0;
970
+
font-size: 1rem;
971
+
}
972
+
973
+
.cta-buttons {
974
+
flex-direction: column;
975
+
align-items: center;
976
+
}
977
+
978
+
.btn {
979
+
width: 100%;
980
+
max-width: 200px;
981
+
text-align: center;
982
+
}
983
+
984
+
.doc-layout {
985
+
display: flex;
986
+
flex-direction: column;
987
+
gap: 1.5rem;
988
+
width: 100%;
989
+
max-width: 100%;
990
+
}
991
+
992
+
.doc-page {
993
+
padding: 1.5rem 0;
994
+
overflow-x: hidden;
995
+
width: 100%;
996
+
}
997
+
998
+
.doc-page .container {
999
+
padding: 0 1rem;
1000
+
}
1001
+
1002
+
.doc-main {
1003
+
width: 100%;
1004
+
max-width: 100%;
1005
+
overflow-x: hidden;
1006
+
order: 2;
1007
+
}
1008
+
1009
+
.doc-sidebar {
1010
+
position: static;
1011
+
border: 1px solid var(--border);
1012
+
border-radius: 0.375rem;
1013
+
padding: 1rem;
1014
+
margin-bottom: 0;
1015
+
width: 100%;
1016
+
max-width: 100%;
1017
+
box-sizing: border-box;
1018
+
order: 1;
1019
+
}
1020
+
1021
+
.doc-nav h3 {
1022
+
cursor: pointer;
1023
+
user-select: none;
1024
+
}
1025
+
1026
+
.doc-nav h3::after {
1027
+
content: " ▼";
1028
+
font-size: 0.75rem;
1029
+
color: var(--text-muted);
1030
+
}
1031
+
1032
+
.doc-nav > ul {
1033
+
max-height: 500px;
1034
+
overflow-y: auto;
1035
+
}
1036
+
1037
+
.doc-nav .nav-section ul {
1038
+
padding-left: 0.5rem;
1039
+
}
1040
+
1041
+
/* Make content responsive */
1042
+
.doc-content {
1043
+
width: 100%;
1044
+
max-width: 100%;
1045
+
overflow-x: hidden;
1046
+
}
1047
+
1048
+
.doc-content * {
1049
+
max-width: 100%;
1050
+
}
1051
+
1052
+
.doc-content pre {
1053
+
overflow-x: auto;
1054
+
width: 100%;
1055
+
max-width: 100%;
1056
+
box-sizing: border-box;
1057
+
}
1058
+
1059
+
.doc-content code {
1060
+
word-wrap: break-word;
1061
+
overflow-wrap: break-word;
1062
+
}
1063
+
1064
+
.doc-content pre code {
1065
+
display: block;
1066
+
overflow-x: auto;
1067
+
}
1068
+
1069
+
/* Make tables responsive */
1070
+
.doc-content table {
1071
+
display: block;
1072
+
overflow-x: auto;
1073
+
white-space: nowrap;
1074
+
}
1075
+
1076
+
/* Images */
1077
+
.doc-content img {
1078
+
max-width: 100%;
1079
+
height: auto;
1080
+
}
1081
+
}
1082
+
1083
+
@media (max-width: 480px) {
1084
+
.container {
1085
+
padding: 0 1rem;
1086
+
}
1087
+
1088
+
.hero {
1089
+
padding: 2rem 0;
1090
+
}
1091
+
1092
+
.hero h1 {
1093
+
font-size: 1.75rem;
1094
+
}
1095
+
1096
+
.nav-container {
1097
+
padding: 0 1rem;
1098
+
}
1099
+
1100
+
.logo img {
1101
+
height: 36px;
1102
+
}
1103
+
1104
+
textarea {
1105
+
height: 300px;
1106
+
}
1107
+
1108
+
.doc-page {
1109
+
padding: 1rem 0;
1110
+
}
1111
+
1112
+
.doc-page .container {
1113
+
padding: 0 0.75rem;
1114
+
}
1115
+
1116
+
.doc-content {
1117
+
font-size: 0.938rem;
1118
+
padding: 0;
1119
+
width: 100%;
1120
+
}
1121
+
1122
+
.doc-content h1 {
1123
+
font-size: 1.75rem;
1124
+
word-wrap: break-word;
1125
+
overflow-wrap: break-word;
1126
+
}
1127
+
1128
+
.doc-content h2 {
1129
+
font-size: 1.375rem;
1130
+
word-wrap: break-word;
1131
+
overflow-wrap: break-word;
1132
+
}
1133
+
1134
+
.doc-content h3 {
1135
+
font-size: 1.125rem;
1136
+
word-wrap: break-word;
1137
+
overflow-wrap: break-word;
1138
+
}
1139
+
1140
+
.doc-content p {
1141
+
word-wrap: break-word;
1142
+
overflow-wrap: break-word;
1143
+
}
1144
+
1145
+
.doc-content pre {
1146
+
font-size: 0.75rem;
1147
+
padding: 0.5rem;
1148
+
margin: 1rem 0;
1149
+
width: 100%;
1150
+
max-width: 100%;
1151
+
}
1152
+
1153
+
.doc-content code {
1154
+
font-size: 0.75rem;
1155
+
}
1156
+
1157
+
.doc-content ul, .doc-content ol {
1158
+
margin-left: 1rem;
1159
+
padding-right: 0.5rem;
1160
+
}
1161
+
1162
+
.doc-content li {
1163
+
word-wrap: break-word;
1164
+
overflow-wrap: break-word;
1165
+
}
1166
+
1167
+
.panel-header {
1168
+
flex-direction: column;
1169
+
align-items: flex-start;
1170
+
}
1171
+
1172
+
.file-path-container {
1173
+
width: 100%;
1174
+
}
1175
+
1176
+
.tabs {
1177
+
width: 100%;
1178
+
justify-content: space-between;
1179
+
}
1180
+
}
+1
-31
website/templates/base.html
+1
-31
website/templates/base.html
···
21
21
<img src="{{ get_url(path='logo.svg') }}" alt="MLF" height="48">
22
22
</a>
23
23
</div>
24
-
<button class="mobile-menu-toggle" aria-label="Toggle menu" id="mobile-menu-toggle">
25
-
☰
26
-
</button>
27
-
<ul class="nav-links" id="mobile-menu">
24
+
<ul class="nav-links">
28
25
<li><a href="{{ get_url(path='/') }}">Home</a></li>
29
26
<li><a href="{{ get_url(path='/docs') }}">Docs</a></li>
30
27
<li><a href="{{ get_url(path='@/playground.md') }}">Playground</a></li>
···
48
45
<p>MLF is licensed under <a href="https://choosealicense.com/licenses/mit/" target="_blank">MIT</a></p>
49
46
</div>
50
47
</footer>
51
-
52
-
<script>
53
-
// Mobile menu toggle
54
-
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
55
-
const mobileMenu = document.getElementById('mobile-menu');
56
-
57
-
if (mobileMenuToggle && mobileMenu) {
58
-
mobileMenuToggle.addEventListener('click', () => {
59
-
mobileMenu.classList.toggle('active');
60
-
});
61
-
62
-
// Close menu when clicking a link
63
-
const menuLinks = mobileMenu.querySelectorAll('a');
64
-
menuLinks.forEach(link => {
65
-
link.addEventListener('click', () => {
66
-
mobileMenu.classList.remove('active');
67
-
});
68
-
});
69
-
70
-
// Close menu when clicking outside
71
-
document.addEventListener('click', (e) => {
72
-
if (!mobileMenuToggle.contains(e.target) && !mobileMenu.contains(e.target)) {
73
-
mobileMenu.classList.remove('active');
74
-
}
75
-
});
76
-
}
77
-
</script>
78
48
79
49
{% block extra_scripts %}{% endblock %}
80
50
</body>