1- /*
2- ==========================================================================
3- Enhenced abbr element for mobile and keyboard navigation
4- https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/
5- ==========================================================================
6- */
1+ /* Enhenced abbr element for mobile and keyboard navigation */
2+ /* https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ */
73abbr [title ] {
84 position : relative;
95
@@ -31,12 +27,8 @@ abbr[title]:focus::after {
3127 padding : 3px 5px ;
3228}
3329
34- /*
35- ==========================================================================
36- Add icons to indicate external links
37- https://christianoliff.com/blog/styling-external-links-with-an-icon-in-css/
38- ==========================================================================
39- */
30+ /* Add icons to indicate external links */
31+ /* https://christianoliff.com/blog/styling-external-links-with-an-icon-in-css/ */
4032a svg {
4133 fill : var (--tw-prose-body );
4234 width : 0.6em ;
@@ -46,81 +38,9 @@ a svg {
4638 display : inline-block;
4739}
4840
49- /*
50- ==========================================================================
51- Hugo sometimes renders empty p and a tags
52- ==========================================================================
53- */
41+ /* Hugo sometimes renders empty p and a tags */
5442p : empty ,
5543a : empty ,
5644a svg : first-child {
5745 display : none;
5846}
59-
60- /*
61- ==========================================================================
62- Carousel shortcode
63- https://blog.logrocket.com/modern-css-carousels-no-javascript-required/
64- ==========================================================================
65- */
66- .carousel-scroller {
67- scroll-snap-type : x mandatory;
68- scroll-behavior : smooth;
69- scrollbar-width : none;
70- scroll-marker-group : after;
71- position : relative;
72- }
73- .carousel-scroller ::-webkit-scrollbar {
74- display : none;
75- }
76-
77- .carousel-scroller > figure {
78- flex : 0 0 100% ;
79- scroll-snap-align : start;
80- margin-block : 0 ;
81- margin-inline : 0 !important ;
82- display : flex;
83- flex-direction : column;
84- justify-content : center;
85- }
86-
87- .carousel-scroller > figure picture {
88- display : block;
89- width : 100% ;
90- }
91-
92- .carousel-scroller > figure img {
93- display : block;
94- width : 100% ;
95- height : auto;
96- margin-inline : 0 ;
97- border-radius : 0.375rem ;
98- }
99-
100- .carousel-scroller ::scroll-marker-group {
101- display : flex;
102- justify-content : center;
103- gap : 0.5rem ;
104- padding : 0.75rem 0 ;
105- }
106-
107- .carousel-scroller > figure ::scroll-marker {
108- content : "" ;
109- width : 8px ;
110- height : 8px ;
111- border-radius : 50% ;
112- background : rgb (var (--color-neutral-300 ));
113- transition : background-color 0.2s ;
114- }
115-
116- .dark .carousel-scroller > figure ::scroll-marker {
117- background : rgb (var (--color-neutral-600 ));
118- }
119-
120- .carousel-scroller > figure ::scroll-marker : target-current {
121- background : rgb (var (--color-primary-500 ));
122- }
123-
124- .dark .carousel-scroller > figure ::scroll-marker : target-current {
125- background : rgb (var (--color-primary-400 ));
126- }
0 commit comments