1010@use ' helpers/media-mixins' ;
1111
1212@import url (' https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700&display=swap' );
13+ @import url (' https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' );
1314
1415html [data-theme = ' light' ] {
1516 @include Theme .config (
@@ -23,17 +24,21 @@ html[data-theme='light'] {
2324 // --ifm-menu-color-active: var(--sph-theme--secondary);
2425
2526 --sph-button-fill : var (--sph-theme--secondary-dark );
26- --sph-button-active-fill : var ( --sph-theme--secondary-dark ) ;
27+ --sph-button-active-fill : #29610f ;
2728
2829 .footer--dark {
2930 --ifm-footer-color : #000 !important ;
3031 --ifm-footer-title-color : #000 !important ;
3132 --ifm-footer-link-color : #000 !important ;
3233 }
3334
34- .hero--primary {
35- background : linear-gradient (45deg , rgb (36 , 109 , 0 ) 0% , rgb (113 , 186 , 78 ) 100% );;
36- color : var (--sph-theme--on-primary );
35+ .hero {
36+ //
37+
38+ & .hero--primary {
39+ background : linear-gradient (45deg , rgb (36 , 109 , 0 ) 0% , rgb (113 , 186 , 78 ) 100% );;
40+ color : var (--sph-theme--on-primary );
41+ }
3742 }
3843}
3944
@@ -49,7 +54,7 @@ html[data-theme='dark'] {
4954 // --ifm-menu-color-active: var(--sph-theme--secondary);
5055}
5156
52- * {
57+ * , h1 , h2 , h3 , h4 {
5358 font-family : ' Public Sans' , sans-serif ;
5459}
5560
@@ -80,6 +85,12 @@ code * {
8085 }
8186}
8287
88+ .buttons {
89+ display : flex ;
90+ align-items : center ;
91+ justify-content : center ;
92+ }
93+
8394.footer {
8495 --ifm-footer-background-color : var (--sph-theme--primary );
8596
@@ -91,9 +102,25 @@ code * {
91102
92103}
93104
94- .hero--primary {
95- background : linear-gradient (45deg , rgba (9 , 28 , 0 , 1 ) 0% , rgb (36 , 109 , 0 ) 100% );;
96- color : var (--sph-theme--on-primary );
105+ .hero {
106+ text-align : center ;
107+
108+ .hero__title {
109+ font-size : 42px ;
110+ line-height : normal ;
111+ margin : 0 ;
112+ font-family : ' Public Sans' , sans-serif ;
113+ }
114+
115+ .hero__subtitle {
116+ font-family : ' Public Sans' , sans-serif ;
117+ font-size : 18px ;
118+ }
119+
120+ & .hero--primary {
121+ background : linear-gradient (45deg , rgba (9 , 28 , 0 , 1 ) 0% , rgb (36 , 109 , 0 ) 100% );;
122+ color : var (--sph-theme--on-primary );
123+ }
97124}
98125
99126.navbar__title ,
@@ -122,6 +149,11 @@ code * {
122149//
123150
124151@include SPHButton .use ();
152+ .sph-button--hero {
153+ .sph-button__label {
154+ --sph-button-size : #{Typography .px-to-rem (18px )} !important ;
155+ }
156+ }
125157a :hover {
126158 text-decoration : none !important ;
127159
0 commit comments