@subroh0508/marp-theme-canvas 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,89 +1,243 @@
1
1
  section.justify-start {
2
2
  justify-content: flex-start;
3
3
  }
4
+ section.justify-start > p {
5
+ display: flex;
6
+ flex-direction: column;
7
+ justify-content: flex-start;
8
+ align-items: flex-start;
9
+ }
4
10
  section.justify-end {
5
11
  justify-content: flex-end;
6
12
  }
13
+ section.justify-end > p {
14
+ display: flex;
15
+ flex-direction: column;
16
+ justify-content: flex-end;
17
+ align-items: flex-start;
18
+ }
7
19
  section.justify-center {
8
20
  justify-content: center;
9
21
  }
22
+ section.justify-center > p {
23
+ display: flex;
24
+ flex-direction: column;
25
+ justify-content: center;
26
+ align-items: flex-start;
27
+ }
10
28
  section.justify-between {
11
29
  justify-content: space-between;
12
30
  }
31
+ section.justify-between > p {
32
+ display: flex;
33
+ flex-direction: column;
34
+ justify-content: space-between;
35
+ align-items: flex-start;
36
+ }
13
37
  section.justify-around {
14
38
  justify-content: space-around;
15
39
  }
40
+ section.justify-around > p {
41
+ display: flex;
42
+ flex-direction: column;
43
+ justify-content: space-around;
44
+ align-items: flex-start;
45
+ }
16
46
  section.justify-evenly {
17
47
  justify-content: space-evenly;
18
48
  }
49
+ section.justify-evenly > p {
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: space-evenly;
53
+ align-items: flex-start;
54
+ }
19
55
  section.items-start {
20
56
  align-items: flex-start;
21
57
  }
58
+ section.items-start > p {
59
+ display: flex;
60
+ flex-direction: column;
61
+ justify-content: flex-start;
62
+ align-items: flex-start;
63
+ }
22
64
  section.items-end {
23
65
  align-items: flex-end;
24
66
  }
67
+ section.items-end > p {
68
+ display: flex;
69
+ flex-direction: column;
70
+ justify-content: flex-start;
71
+ align-items: flex-end;
72
+ }
25
73
  section.items-center {
26
74
  align-items: center;
27
75
  }
76
+ section.items-center > p {
77
+ display: flex;
78
+ flex-direction: column;
79
+ justify-content: flex-start;
80
+ align-items: center;
81
+ }
28
82
  section.items-baseline {
29
83
  align-items: baseline;
30
84
  }
85
+ section.items-baseline > p {
86
+ display: flex;
87
+ flex-direction: column;
88
+ justify-content: flex-start;
89
+ align-items: baseline;
90
+ }
31
91
  section.items-stretch {
32
92
  align-items: stretch;
33
93
  }
94
+ section.items-stretch > p {
95
+ display: flex;
96
+ flex-direction: column;
97
+ justify-content: flex-start;
98
+ align-items: stretch;
99
+ }
34
100
 
35
101
  .col.justify-start,
36
102
  [class^=col-].justify-start,
37
103
  [class*=" col-"].justify-start {
38
104
  justify-content: flex-start;
39
105
  }
106
+ .col.justify-start > p,
107
+ [class^=col-].justify-start > p,
108
+ [class*=" col-"].justify-start > p {
109
+ display: flex;
110
+ flex-direction: column;
111
+ justify-content: flex-start;
112
+ align-items: flex-start;
113
+ }
40
114
  .col.justify-end,
41
115
  [class^=col-].justify-end,
42
116
  [class*=" col-"].justify-end {
43
117
  justify-content: flex-end;
44
118
  }
119
+ .col.justify-end > p,
120
+ [class^=col-].justify-end > p,
121
+ [class*=" col-"].justify-end > p {
122
+ display: flex;
123
+ flex-direction: column;
124
+ justify-content: flex-end;
125
+ align-items: flex-start;
126
+ }
45
127
  .col.justify-center,
46
128
  [class^=col-].justify-center,
47
129
  [class*=" col-"].justify-center {
48
130
  justify-content: center;
49
131
  }
132
+ .col.justify-center > p,
133
+ [class^=col-].justify-center > p,
134
+ [class*=" col-"].justify-center > p {
135
+ display: flex;
136
+ flex-direction: column;
137
+ justify-content: center;
138
+ align-items: flex-start;
139
+ }
50
140
  .col.justify-between,
51
141
  [class^=col-].justify-between,
52
142
  [class*=" col-"].justify-between {
53
143
  justify-content: space-between;
54
144
  }
145
+ .col.justify-between > p,
146
+ [class^=col-].justify-between > p,
147
+ [class*=" col-"].justify-between > p {
148
+ display: flex;
149
+ flex-direction: column;
150
+ justify-content: space-between;
151
+ align-items: flex-start;
152
+ }
55
153
  .col.justify-around,
56
154
  [class^=col-].justify-around,
57
155
  [class*=" col-"].justify-around {
58
156
  justify-content: space-around;
59
157
  }
158
+ .col.justify-around > p,
159
+ [class^=col-].justify-around > p,
160
+ [class*=" col-"].justify-around > p {
161
+ display: flex;
162
+ flex-direction: column;
163
+ justify-content: space-around;
164
+ align-items: flex-start;
165
+ }
60
166
  .col.justify-evenly,
61
167
  [class^=col-].justify-evenly,
62
168
  [class*=" col-"].justify-evenly {
63
169
  justify-content: space-evenly;
64
170
  }
171
+ .col.justify-evenly > p,
172
+ [class^=col-].justify-evenly > p,
173
+ [class*=" col-"].justify-evenly > p {
174
+ display: flex;
175
+ flex-direction: column;
176
+ justify-content: space-evenly;
177
+ align-items: flex-start;
178
+ }
65
179
  .col.items-start,
66
180
  [class^=col-].items-start,
67
181
  [class*=" col-"].items-start {
68
182
  align-items: flex-start;
69
183
  }
184
+ .col.items-start > p,
185
+ [class^=col-].items-start > p,
186
+ [class*=" col-"].items-start > p {
187
+ display: flex;
188
+ flex-direction: column;
189
+ justify-content: flex-start;
190
+ align-items: flex-start;
191
+ }
70
192
  .col.items-end,
71
193
  [class^=col-].items-end,
72
194
  [class*=" col-"].items-end {
73
195
  align-items: flex-end;
74
196
  }
197
+ .col.items-end > p,
198
+ [class^=col-].items-end > p,
199
+ [class*=" col-"].items-end > p {
200
+ display: flex;
201
+ flex-direction: column;
202
+ justify-content: flex-start;
203
+ align-items: flex-end;
204
+ }
75
205
  .col.items-center,
76
206
  [class^=col-].items-center,
77
207
  [class*=" col-"].items-center {
78
208
  align-items: center;
79
209
  }
210
+ .col.items-center > p,
211
+ [class^=col-].items-center > p,
212
+ [class*=" col-"].items-center > p {
213
+ display: flex;
214
+ flex-direction: column;
215
+ justify-content: flex-start;
216
+ align-items: center;
217
+ }
80
218
  .col.items-baseline,
81
219
  [class^=col-].items-baseline,
82
220
  [class*=" col-"].items-baseline {
83
221
  align-items: baseline;
84
222
  }
223
+ .col.items-baseline > p,
224
+ [class^=col-].items-baseline > p,
225
+ [class*=" col-"].items-baseline > p {
226
+ display: flex;
227
+ flex-direction: column;
228
+ justify-content: flex-start;
229
+ align-items: baseline;
230
+ }
85
231
  .col.items-stretch,
86
232
  [class^=col-].items-stretch,
87
233
  [class*=" col-"].items-stretch {
88
234
  align-items: stretch;
89
235
  }
236
+ .col.items-stretch > p,
237
+ [class^=col-].items-stretch > p,
238
+ [class*=" col-"].items-stretch > p {
239
+ display: flex;
240
+ flex-direction: column;
241
+ justify-content: flex-start;
242
+ align-items: stretch;
243
+ }
@@ -722,92 +722,246 @@ section .cols > .col-10 p > * {
722
722
  section.justify-start {
723
723
  justify-content: flex-start;
724
724
  }
725
+ section.justify-start > p {
726
+ display: flex;
727
+ flex-direction: column;
728
+ justify-content: flex-start;
729
+ align-items: flex-start;
730
+ }
725
731
  section.justify-end {
726
732
  justify-content: flex-end;
727
733
  }
734
+ section.justify-end > p {
735
+ display: flex;
736
+ flex-direction: column;
737
+ justify-content: flex-end;
738
+ align-items: flex-start;
739
+ }
728
740
  section.justify-center {
729
741
  justify-content: center;
730
742
  }
743
+ section.justify-center > p {
744
+ display: flex;
745
+ flex-direction: column;
746
+ justify-content: center;
747
+ align-items: flex-start;
748
+ }
731
749
  section.justify-between {
732
750
  justify-content: space-between;
733
751
  }
752
+ section.justify-between > p {
753
+ display: flex;
754
+ flex-direction: column;
755
+ justify-content: space-between;
756
+ align-items: flex-start;
757
+ }
734
758
  section.justify-around {
735
759
  justify-content: space-around;
736
760
  }
761
+ section.justify-around > p {
762
+ display: flex;
763
+ flex-direction: column;
764
+ justify-content: space-around;
765
+ align-items: flex-start;
766
+ }
737
767
  section.justify-evenly {
738
768
  justify-content: space-evenly;
739
769
  }
770
+ section.justify-evenly > p {
771
+ display: flex;
772
+ flex-direction: column;
773
+ justify-content: space-evenly;
774
+ align-items: flex-start;
775
+ }
740
776
  section.items-start {
741
777
  align-items: flex-start;
742
778
  }
779
+ section.items-start > p {
780
+ display: flex;
781
+ flex-direction: column;
782
+ justify-content: flex-start;
783
+ align-items: flex-start;
784
+ }
743
785
  section.items-end {
744
786
  align-items: flex-end;
745
787
  }
788
+ section.items-end > p {
789
+ display: flex;
790
+ flex-direction: column;
791
+ justify-content: flex-start;
792
+ align-items: flex-end;
793
+ }
746
794
  section.items-center {
747
795
  align-items: center;
748
796
  }
797
+ section.items-center > p {
798
+ display: flex;
799
+ flex-direction: column;
800
+ justify-content: flex-start;
801
+ align-items: center;
802
+ }
749
803
  section.items-baseline {
750
804
  align-items: baseline;
751
805
  }
806
+ section.items-baseline > p {
807
+ display: flex;
808
+ flex-direction: column;
809
+ justify-content: flex-start;
810
+ align-items: baseline;
811
+ }
752
812
  section.items-stretch {
753
813
  align-items: stretch;
754
814
  }
815
+ section.items-stretch > p {
816
+ display: flex;
817
+ flex-direction: column;
818
+ justify-content: flex-start;
819
+ align-items: stretch;
820
+ }
755
821
 
756
822
  .col.justify-start,
757
823
  [class^=col-].justify-start,
758
824
  [class*=" col-"].justify-start {
759
825
  justify-content: flex-start;
760
826
  }
827
+ .col.justify-start > p,
828
+ [class^=col-].justify-start > p,
829
+ [class*=" col-"].justify-start > p {
830
+ display: flex;
831
+ flex-direction: column;
832
+ justify-content: flex-start;
833
+ align-items: flex-start;
834
+ }
761
835
  .col.justify-end,
762
836
  [class^=col-].justify-end,
763
837
  [class*=" col-"].justify-end {
764
838
  justify-content: flex-end;
765
839
  }
840
+ .col.justify-end > p,
841
+ [class^=col-].justify-end > p,
842
+ [class*=" col-"].justify-end > p {
843
+ display: flex;
844
+ flex-direction: column;
845
+ justify-content: flex-end;
846
+ align-items: flex-start;
847
+ }
766
848
  .col.justify-center,
767
849
  [class^=col-].justify-center,
768
850
  [class*=" col-"].justify-center {
769
851
  justify-content: center;
770
852
  }
853
+ .col.justify-center > p,
854
+ [class^=col-].justify-center > p,
855
+ [class*=" col-"].justify-center > p {
856
+ display: flex;
857
+ flex-direction: column;
858
+ justify-content: center;
859
+ align-items: flex-start;
860
+ }
771
861
  .col.justify-between,
772
862
  [class^=col-].justify-between,
773
863
  [class*=" col-"].justify-between {
774
864
  justify-content: space-between;
775
865
  }
866
+ .col.justify-between > p,
867
+ [class^=col-].justify-between > p,
868
+ [class*=" col-"].justify-between > p {
869
+ display: flex;
870
+ flex-direction: column;
871
+ justify-content: space-between;
872
+ align-items: flex-start;
873
+ }
776
874
  .col.justify-around,
777
875
  [class^=col-].justify-around,
778
876
  [class*=" col-"].justify-around {
779
877
  justify-content: space-around;
780
878
  }
879
+ .col.justify-around > p,
880
+ [class^=col-].justify-around > p,
881
+ [class*=" col-"].justify-around > p {
882
+ display: flex;
883
+ flex-direction: column;
884
+ justify-content: space-around;
885
+ align-items: flex-start;
886
+ }
781
887
  .col.justify-evenly,
782
888
  [class^=col-].justify-evenly,
783
889
  [class*=" col-"].justify-evenly {
784
890
  justify-content: space-evenly;
785
891
  }
892
+ .col.justify-evenly > p,
893
+ [class^=col-].justify-evenly > p,
894
+ [class*=" col-"].justify-evenly > p {
895
+ display: flex;
896
+ flex-direction: column;
897
+ justify-content: space-evenly;
898
+ align-items: flex-start;
899
+ }
786
900
  .col.items-start,
787
901
  [class^=col-].items-start,
788
902
  [class*=" col-"].items-start {
789
903
  align-items: flex-start;
790
904
  }
905
+ .col.items-start > p,
906
+ [class^=col-].items-start > p,
907
+ [class*=" col-"].items-start > p {
908
+ display: flex;
909
+ flex-direction: column;
910
+ justify-content: flex-start;
911
+ align-items: flex-start;
912
+ }
791
913
  .col.items-end,
792
914
  [class^=col-].items-end,
793
915
  [class*=" col-"].items-end {
794
916
  align-items: flex-end;
795
917
  }
918
+ .col.items-end > p,
919
+ [class^=col-].items-end > p,
920
+ [class*=" col-"].items-end > p {
921
+ display: flex;
922
+ flex-direction: column;
923
+ justify-content: flex-start;
924
+ align-items: flex-end;
925
+ }
796
926
  .col.items-center,
797
927
  [class^=col-].items-center,
798
928
  [class*=" col-"].items-center {
799
929
  align-items: center;
800
930
  }
931
+ .col.items-center > p,
932
+ [class^=col-].items-center > p,
933
+ [class*=" col-"].items-center > p {
934
+ display: flex;
935
+ flex-direction: column;
936
+ justify-content: flex-start;
937
+ align-items: center;
938
+ }
801
939
  .col.items-baseline,
802
940
  [class^=col-].items-baseline,
803
941
  [class*=" col-"].items-baseline {
804
942
  align-items: baseline;
805
943
  }
944
+ .col.items-baseline > p,
945
+ [class^=col-].items-baseline > p,
946
+ [class*=" col-"].items-baseline > p {
947
+ display: flex;
948
+ flex-direction: column;
949
+ justify-content: flex-start;
950
+ align-items: baseline;
951
+ }
806
952
  .col.items-stretch,
807
953
  [class^=col-].items-stretch,
808
954
  [class*=" col-"].items-stretch {
809
955
  align-items: stretch;
810
956
  }
957
+ .col.items-stretch > p,
958
+ [class^=col-].items-stretch > p,
959
+ [class*=" col-"].items-stretch > p {
960
+ display: flex;
961
+ flex-direction: column;
962
+ justify-content: flex-start;
963
+ align-items: stretch;
964
+ }
811
965
 
812
966
  section.text-left p {
813
967
  text-align: left;
@@ -1,89 +1,243 @@
1
1
  section.justify-start {
2
2
  justify-content: flex-start;
3
3
  }
4
+ section.justify-start > p {
5
+ display: flex;
6
+ flex-direction: column;
7
+ justify-content: flex-start;
8
+ align-items: flex-start;
9
+ }
4
10
  section.justify-end {
5
11
  justify-content: flex-end;
6
12
  }
13
+ section.justify-end > p {
14
+ display: flex;
15
+ flex-direction: column;
16
+ justify-content: flex-end;
17
+ align-items: flex-start;
18
+ }
7
19
  section.justify-center {
8
20
  justify-content: center;
9
21
  }
22
+ section.justify-center > p {
23
+ display: flex;
24
+ flex-direction: column;
25
+ justify-content: center;
26
+ align-items: flex-start;
27
+ }
10
28
  section.justify-between {
11
29
  justify-content: space-between;
12
30
  }
31
+ section.justify-between > p {
32
+ display: flex;
33
+ flex-direction: column;
34
+ justify-content: space-between;
35
+ align-items: flex-start;
36
+ }
13
37
  section.justify-around {
14
38
  justify-content: space-around;
15
39
  }
40
+ section.justify-around > p {
41
+ display: flex;
42
+ flex-direction: column;
43
+ justify-content: space-around;
44
+ align-items: flex-start;
45
+ }
16
46
  section.justify-evenly {
17
47
  justify-content: space-evenly;
18
48
  }
49
+ section.justify-evenly > p {
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: space-evenly;
53
+ align-items: flex-start;
54
+ }
19
55
  section.items-start {
20
56
  align-items: flex-start;
21
57
  }
58
+ section.items-start > p {
59
+ display: flex;
60
+ flex-direction: column;
61
+ justify-content: flex-start;
62
+ align-items: flex-start;
63
+ }
22
64
  section.items-end {
23
65
  align-items: flex-end;
24
66
  }
67
+ section.items-end > p {
68
+ display: flex;
69
+ flex-direction: column;
70
+ justify-content: flex-start;
71
+ align-items: flex-end;
72
+ }
25
73
  section.items-center {
26
74
  align-items: center;
27
75
  }
76
+ section.items-center > p {
77
+ display: flex;
78
+ flex-direction: column;
79
+ justify-content: flex-start;
80
+ align-items: center;
81
+ }
28
82
  section.items-baseline {
29
83
  align-items: baseline;
30
84
  }
85
+ section.items-baseline > p {
86
+ display: flex;
87
+ flex-direction: column;
88
+ justify-content: flex-start;
89
+ align-items: baseline;
90
+ }
31
91
  section.items-stretch {
32
92
  align-items: stretch;
33
93
  }
94
+ section.items-stretch > p {
95
+ display: flex;
96
+ flex-direction: column;
97
+ justify-content: flex-start;
98
+ align-items: stretch;
99
+ }
34
100
 
35
101
  .col.justify-start,
36
102
  [class^=col-].justify-start,
37
103
  [class*=" col-"].justify-start {
38
104
  justify-content: flex-start;
39
105
  }
106
+ .col.justify-start > p,
107
+ [class^=col-].justify-start > p,
108
+ [class*=" col-"].justify-start > p {
109
+ display: flex;
110
+ flex-direction: column;
111
+ justify-content: flex-start;
112
+ align-items: flex-start;
113
+ }
40
114
  .col.justify-end,
41
115
  [class^=col-].justify-end,
42
116
  [class*=" col-"].justify-end {
43
117
  justify-content: flex-end;
44
118
  }
119
+ .col.justify-end > p,
120
+ [class^=col-].justify-end > p,
121
+ [class*=" col-"].justify-end > p {
122
+ display: flex;
123
+ flex-direction: column;
124
+ justify-content: flex-end;
125
+ align-items: flex-start;
126
+ }
45
127
  .col.justify-center,
46
128
  [class^=col-].justify-center,
47
129
  [class*=" col-"].justify-center {
48
130
  justify-content: center;
49
131
  }
132
+ .col.justify-center > p,
133
+ [class^=col-].justify-center > p,
134
+ [class*=" col-"].justify-center > p {
135
+ display: flex;
136
+ flex-direction: column;
137
+ justify-content: center;
138
+ align-items: flex-start;
139
+ }
50
140
  .col.justify-between,
51
141
  [class^=col-].justify-between,
52
142
  [class*=" col-"].justify-between {
53
143
  justify-content: space-between;
54
144
  }
145
+ .col.justify-between > p,
146
+ [class^=col-].justify-between > p,
147
+ [class*=" col-"].justify-between > p {
148
+ display: flex;
149
+ flex-direction: column;
150
+ justify-content: space-between;
151
+ align-items: flex-start;
152
+ }
55
153
  .col.justify-around,
56
154
  [class^=col-].justify-around,
57
155
  [class*=" col-"].justify-around {
58
156
  justify-content: space-around;
59
157
  }
158
+ .col.justify-around > p,
159
+ [class^=col-].justify-around > p,
160
+ [class*=" col-"].justify-around > p {
161
+ display: flex;
162
+ flex-direction: column;
163
+ justify-content: space-around;
164
+ align-items: flex-start;
165
+ }
60
166
  .col.justify-evenly,
61
167
  [class^=col-].justify-evenly,
62
168
  [class*=" col-"].justify-evenly {
63
169
  justify-content: space-evenly;
64
170
  }
171
+ .col.justify-evenly > p,
172
+ [class^=col-].justify-evenly > p,
173
+ [class*=" col-"].justify-evenly > p {
174
+ display: flex;
175
+ flex-direction: column;
176
+ justify-content: space-evenly;
177
+ align-items: flex-start;
178
+ }
65
179
  .col.items-start,
66
180
  [class^=col-].items-start,
67
181
  [class*=" col-"].items-start {
68
182
  align-items: flex-start;
69
183
  }
184
+ .col.items-start > p,
185
+ [class^=col-].items-start > p,
186
+ [class*=" col-"].items-start > p {
187
+ display: flex;
188
+ flex-direction: column;
189
+ justify-content: flex-start;
190
+ align-items: flex-start;
191
+ }
70
192
  .col.items-end,
71
193
  [class^=col-].items-end,
72
194
  [class*=" col-"].items-end {
73
195
  align-items: flex-end;
74
196
  }
197
+ .col.items-end > p,
198
+ [class^=col-].items-end > p,
199
+ [class*=" col-"].items-end > p {
200
+ display: flex;
201
+ flex-direction: column;
202
+ justify-content: flex-start;
203
+ align-items: flex-end;
204
+ }
75
205
  .col.items-center,
76
206
  [class^=col-].items-center,
77
207
  [class*=" col-"].items-center {
78
208
  align-items: center;
79
209
  }
210
+ .col.items-center > p,
211
+ [class^=col-].items-center > p,
212
+ [class*=" col-"].items-center > p {
213
+ display: flex;
214
+ flex-direction: column;
215
+ justify-content: flex-start;
216
+ align-items: center;
217
+ }
80
218
  .col.items-baseline,
81
219
  [class^=col-].items-baseline,
82
220
  [class*=" col-"].items-baseline {
83
221
  align-items: baseline;
84
222
  }
223
+ .col.items-baseline > p,
224
+ [class^=col-].items-baseline > p,
225
+ [class*=" col-"].items-baseline > p {
226
+ display: flex;
227
+ flex-direction: column;
228
+ justify-content: flex-start;
229
+ align-items: baseline;
230
+ }
85
231
  .col.items-stretch,
86
232
  [class^=col-].items-stretch,
87
233
  [class*=" col-"].items-stretch {
88
234
  align-items: stretch;
89
235
  }
236
+ .col.items-stretch > p,
237
+ [class^=col-].items-stretch > p,
238
+ [class*=" col-"].items-stretch > p {
239
+ display: flex;
240
+ flex-direction: column;
241
+ justify-content: flex-start;
242
+ align-items: stretch;
243
+ }
@@ -722,92 +722,246 @@ section .cols > .col-10 p > * {
722
722
  section.justify-start {
723
723
  justify-content: flex-start;
724
724
  }
725
+ section.justify-start > p {
726
+ display: flex;
727
+ flex-direction: column;
728
+ justify-content: flex-start;
729
+ align-items: flex-start;
730
+ }
725
731
  section.justify-end {
726
732
  justify-content: flex-end;
727
733
  }
734
+ section.justify-end > p {
735
+ display: flex;
736
+ flex-direction: column;
737
+ justify-content: flex-end;
738
+ align-items: flex-start;
739
+ }
728
740
  section.justify-center {
729
741
  justify-content: center;
730
742
  }
743
+ section.justify-center > p {
744
+ display: flex;
745
+ flex-direction: column;
746
+ justify-content: center;
747
+ align-items: flex-start;
748
+ }
731
749
  section.justify-between {
732
750
  justify-content: space-between;
733
751
  }
752
+ section.justify-between > p {
753
+ display: flex;
754
+ flex-direction: column;
755
+ justify-content: space-between;
756
+ align-items: flex-start;
757
+ }
734
758
  section.justify-around {
735
759
  justify-content: space-around;
736
760
  }
761
+ section.justify-around > p {
762
+ display: flex;
763
+ flex-direction: column;
764
+ justify-content: space-around;
765
+ align-items: flex-start;
766
+ }
737
767
  section.justify-evenly {
738
768
  justify-content: space-evenly;
739
769
  }
770
+ section.justify-evenly > p {
771
+ display: flex;
772
+ flex-direction: column;
773
+ justify-content: space-evenly;
774
+ align-items: flex-start;
775
+ }
740
776
  section.items-start {
741
777
  align-items: flex-start;
742
778
  }
779
+ section.items-start > p {
780
+ display: flex;
781
+ flex-direction: column;
782
+ justify-content: flex-start;
783
+ align-items: flex-start;
784
+ }
743
785
  section.items-end {
744
786
  align-items: flex-end;
745
787
  }
788
+ section.items-end > p {
789
+ display: flex;
790
+ flex-direction: column;
791
+ justify-content: flex-start;
792
+ align-items: flex-end;
793
+ }
746
794
  section.items-center {
747
795
  align-items: center;
748
796
  }
797
+ section.items-center > p {
798
+ display: flex;
799
+ flex-direction: column;
800
+ justify-content: flex-start;
801
+ align-items: center;
802
+ }
749
803
  section.items-baseline {
750
804
  align-items: baseline;
751
805
  }
806
+ section.items-baseline > p {
807
+ display: flex;
808
+ flex-direction: column;
809
+ justify-content: flex-start;
810
+ align-items: baseline;
811
+ }
752
812
  section.items-stretch {
753
813
  align-items: stretch;
754
814
  }
815
+ section.items-stretch > p {
816
+ display: flex;
817
+ flex-direction: column;
818
+ justify-content: flex-start;
819
+ align-items: stretch;
820
+ }
755
821
 
756
822
  .col.justify-start,
757
823
  [class^=col-].justify-start,
758
824
  [class*=" col-"].justify-start {
759
825
  justify-content: flex-start;
760
826
  }
827
+ .col.justify-start > p,
828
+ [class^=col-].justify-start > p,
829
+ [class*=" col-"].justify-start > p {
830
+ display: flex;
831
+ flex-direction: column;
832
+ justify-content: flex-start;
833
+ align-items: flex-start;
834
+ }
761
835
  .col.justify-end,
762
836
  [class^=col-].justify-end,
763
837
  [class*=" col-"].justify-end {
764
838
  justify-content: flex-end;
765
839
  }
840
+ .col.justify-end > p,
841
+ [class^=col-].justify-end > p,
842
+ [class*=" col-"].justify-end > p {
843
+ display: flex;
844
+ flex-direction: column;
845
+ justify-content: flex-end;
846
+ align-items: flex-start;
847
+ }
766
848
  .col.justify-center,
767
849
  [class^=col-].justify-center,
768
850
  [class*=" col-"].justify-center {
769
851
  justify-content: center;
770
852
  }
853
+ .col.justify-center > p,
854
+ [class^=col-].justify-center > p,
855
+ [class*=" col-"].justify-center > p {
856
+ display: flex;
857
+ flex-direction: column;
858
+ justify-content: center;
859
+ align-items: flex-start;
860
+ }
771
861
  .col.justify-between,
772
862
  [class^=col-].justify-between,
773
863
  [class*=" col-"].justify-between {
774
864
  justify-content: space-between;
775
865
  }
866
+ .col.justify-between > p,
867
+ [class^=col-].justify-between > p,
868
+ [class*=" col-"].justify-between > p {
869
+ display: flex;
870
+ flex-direction: column;
871
+ justify-content: space-between;
872
+ align-items: flex-start;
873
+ }
776
874
  .col.justify-around,
777
875
  [class^=col-].justify-around,
778
876
  [class*=" col-"].justify-around {
779
877
  justify-content: space-around;
780
878
  }
879
+ .col.justify-around > p,
880
+ [class^=col-].justify-around > p,
881
+ [class*=" col-"].justify-around > p {
882
+ display: flex;
883
+ flex-direction: column;
884
+ justify-content: space-around;
885
+ align-items: flex-start;
886
+ }
781
887
  .col.justify-evenly,
782
888
  [class^=col-].justify-evenly,
783
889
  [class*=" col-"].justify-evenly {
784
890
  justify-content: space-evenly;
785
891
  }
892
+ .col.justify-evenly > p,
893
+ [class^=col-].justify-evenly > p,
894
+ [class*=" col-"].justify-evenly > p {
895
+ display: flex;
896
+ flex-direction: column;
897
+ justify-content: space-evenly;
898
+ align-items: flex-start;
899
+ }
786
900
  .col.items-start,
787
901
  [class^=col-].items-start,
788
902
  [class*=" col-"].items-start {
789
903
  align-items: flex-start;
790
904
  }
905
+ .col.items-start > p,
906
+ [class^=col-].items-start > p,
907
+ [class*=" col-"].items-start > p {
908
+ display: flex;
909
+ flex-direction: column;
910
+ justify-content: flex-start;
911
+ align-items: flex-start;
912
+ }
791
913
  .col.items-end,
792
914
  [class^=col-].items-end,
793
915
  [class*=" col-"].items-end {
794
916
  align-items: flex-end;
795
917
  }
918
+ .col.items-end > p,
919
+ [class^=col-].items-end > p,
920
+ [class*=" col-"].items-end > p {
921
+ display: flex;
922
+ flex-direction: column;
923
+ justify-content: flex-start;
924
+ align-items: flex-end;
925
+ }
796
926
  .col.items-center,
797
927
  [class^=col-].items-center,
798
928
  [class*=" col-"].items-center {
799
929
  align-items: center;
800
930
  }
931
+ .col.items-center > p,
932
+ [class^=col-].items-center > p,
933
+ [class*=" col-"].items-center > p {
934
+ display: flex;
935
+ flex-direction: column;
936
+ justify-content: flex-start;
937
+ align-items: center;
938
+ }
801
939
  .col.items-baseline,
802
940
  [class^=col-].items-baseline,
803
941
  [class*=" col-"].items-baseline {
804
942
  align-items: baseline;
805
943
  }
944
+ .col.items-baseline > p,
945
+ [class^=col-].items-baseline > p,
946
+ [class*=" col-"].items-baseline > p {
947
+ display: flex;
948
+ flex-direction: column;
949
+ justify-content: flex-start;
950
+ align-items: baseline;
951
+ }
806
952
  .col.items-stretch,
807
953
  [class^=col-].items-stretch,
808
954
  [class*=" col-"].items-stretch {
809
955
  align-items: stretch;
810
956
  }
957
+ .col.items-stretch > p,
958
+ [class^=col-].items-stretch > p,
959
+ [class*=" col-"].items-stretch > p {
960
+ display: flex;
961
+ flex-direction: column;
962
+ justify-content: flex-start;
963
+ align-items: stretch;
964
+ }
811
965
 
812
966
  section.text-left p {
813
967
  text-align: left;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@subroh0508/marp-theme-canvas",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "type": "module",
5
5
  "description": "A simple Marp theme with minimal styling",
6
6
  "repository": {
@@ -85,8 +85,8 @@
85
85
  "build": "find scss -name '[!_]*.scss' -type f | while read f; do out=\"css/${f#scss/}\"; out=\"${out%.scss}.css\"; mkdir -p \"$(dirname \"$out\")\"; sass --no-source-map \"$f\" \"$out\"; done",
86
86
  "build:html:white": "marp --allow-local-files --html --theme css/white-canvas.css --input-dir demo --output docs/public/white-canvas",
87
87
  "build:html:black": "marp --allow-local-files --html --theme css/black-canvas.css --input-dir demo --output docs/public/black-canvas",
88
- "build:png:white": "marp --allow-local-files --images png --theme css/white-canvas.css --input-dir demo --output docs/public/white-canvas",
89
- "build:png:black": "marp --allow-local-files --images png --theme css/black-canvas.css --input-dir demo --output docs/public/black-canvas",
88
+ "build:png:white": "marp --allow-local-files --images png --browser-timeout 300 --theme css/white-canvas.css --input-dir demo --output docs/public/white-canvas",
89
+ "build:png:black": "marp --allow-local-files --images png --browser-timeout 300 --theme css/black-canvas.css --input-dir demo --output docs/public/black-canvas",
90
90
  "docs:dev": "vitepress dev docs",
91
91
  "docs:build": "vitepress build docs",
92
92
  "docs:preview": "vitepress preview docs",
@@ -3,103 +3,80 @@
3
3
  //
4
4
  // Usage: <!-- _class: justify-center items-start -->
5
5
 
6
- @mixin configure {
7
- section {
8
- // justify-content utilities
9
- &.justify-start {
10
- justify-content: flex-start;
11
- }
6
+ @mixin _flex-property($property, $value) {
7
+ #{$property}: $value;
12
8
 
13
- &.justify-end {
14
- justify-content: flex-end;
15
- }
16
-
17
- &.justify-center {
18
- justify-content: center;
19
- }
9
+ > p {
10
+ display: flex;
11
+ flex-direction: column;
20
12
 
21
- &.justify-between {
22
- justify-content: space-between;
23
- }
24
-
25
- &.justify-around {
26
- justify-content: space-around;
27
- }
28
-
29
- &.justify-evenly {
30
- justify-content: space-evenly;
31
- }
32
-
33
- // align-items utilities
34
- &.items-start {
13
+ @if $property == justify-content {
14
+ justify-content: $value;
35
15
  align-items: flex-start;
16
+ } @else if $property == align-items {
17
+ justify-content: flex-start;
18
+ align-items: $value;
36
19
  }
20
+ }
21
+ }
37
22
 
38
- &.items-end {
39
- align-items: flex-end;
40
- }
41
-
42
- &.items-center {
43
- align-items: center;
44
- }
45
-
46
- &.items-baseline {
47
- align-items: baseline;
48
- }
23
+ @mixin _flex-utilities {
24
+ // justify-content utilities
25
+ &.justify-start {
26
+ @include _flex-property(justify-content, flex-start);
27
+ }
49
28
 
50
- &.items-stretch {
51
- align-items: stretch;
52
- }
29
+ &.justify-end {
30
+ @include _flex-property(justify-content, flex-end);
53
31
  }
54
32
 
55
- // .col flex utilities
56
- .col,
57
- [class^='col-'],
58
- [class*=' col-'] {
59
- // justify-content utilities
60
- &.justify-start {
61
- justify-content: flex-start;
62
- }
33
+ &.justify-center {
34
+ @include _flex-property(justify-content, center);
35
+ }
63
36
 
64
- &.justify-end {
65
- justify-content: flex-end;
66
- }
37
+ &.justify-between {
38
+ @include _flex-property(justify-content, space-between);
39
+ }
67
40
 
68
- &.justify-center {
69
- justify-content: center;
70
- }
41
+ &.justify-around {
42
+ @include _flex-property(justify-content, space-around);
43
+ }
71
44
 
72
- &.justify-between {
73
- justify-content: space-between;
74
- }
45
+ &.justify-evenly {
46
+ @include _flex-property(justify-content, space-evenly);
47
+ }
75
48
 
76
- &.justify-around {
77
- justify-content: space-around;
78
- }
49
+ // align-items utilities
50
+ &.items-start {
51
+ @include _flex-property(align-items, flex-start);
52
+ }
79
53
 
80
- &.justify-evenly {
81
- justify-content: space-evenly;
82
- }
54
+ &.items-end {
55
+ @include _flex-property(align-items, flex-end);
56
+ }
83
57
 
84
- // align-items utilities
85
- &.items-start {
86
- align-items: flex-start;
87
- }
58
+ &.items-center {
59
+ @include _flex-property(align-items, center);
60
+ }
88
61
 
89
- &.items-end {
90
- align-items: flex-end;
91
- }
62
+ &.items-baseline {
63
+ @include _flex-property(align-items, baseline);
64
+ }
92
65
 
93
- &.items-center {
94
- align-items: center;
95
- }
66
+ &.items-stretch {
67
+ @include _flex-property(align-items, stretch);
68
+ }
69
+ }
96
70
 
97
- &.items-baseline {
98
- align-items: baseline;
99
- }
71
+ @mixin configure {
72
+ section {
73
+ @include _flex-utilities;
74
+ }
100
75
 
101
- &.items-stretch {
102
- align-items: stretch;
103
- }
76
+ // .col flex utilities
77
+ .col,
78
+ [class^='col-'],
79
+ [class*=' col-'] {
80
+ @include _flex-utilities;
104
81
  }
105
82
  }