1+ /* Customize default theme styling by overriding CSS variables:
2+ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
3+ /* Example */
4+ /* https://github.com/vuejs/vitepress/blob/main/template/.vitepress/theme/style.css */
5+
6+ .VPHero .clip {
7+ white-space : pre;
8+ max-width : 600px ;
9+ }
10+
11+ /* Fonts */
12+ @font-face {
13+ font-family : JuliaMono-Regular;
14+ src : url ("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2" );
15+ }
16+
17+ : root {
18+ /* Typography */
19+ --vp-font-family-base : "Barlow" , "Inter var experimental" , "Inter var" ,
20+ -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, Oxygen, Ubuntu,
21+ Cantarell, "Fira Sans" , "Droid Sans" , "Helvetica Neue" , sans-serif;
22+
23+ /* Code Snippet font */
24+ --vp-font-family-mono : JuliaMono-Regular, monospace;
25+ }
26+
27+ /* Disable contextual alternates (kind of like ligatures but different) in monospace,
28+ which turns `/>` to an up arrow and `|>` (the Julia pipe symbol) to an up arrow as well. */
29+ .mono-no-substitutions {
30+ font-family : "JuliaMono-Regular" , monospace;
31+ font-feature-settings : "calt" off;
32+ }
33+
34+ .mono-no-substitutions-alt {
35+ font-family : "JuliaMono-Regular" , monospace;
36+ font-variant-ligatures : none;
37+ }
38+
39+ pre , code {
40+ font-family : "JuliaMono-Regular" , monospace;
41+ font-feature-settings : "calt" off;
42+ }
43+
44+ /* Colors */
45+ : root {
46+ --julia-blue : # 4063D8 ;
47+ --julia-purple : # 9558B2 ;
48+ --julia-red : # CB3C33 ;
49+ --julia-green : # 389826 ;
50+
51+ --vp-c-brand : # 0087d7 ;
52+ --vp-c-brand-1 : # 0890df ;
53+ --vp-c-brand-2 : # 0599ef ;
54+ --vp-c-brand-3 : # 0c9ff4 ;
55+ --vp-c-brand-light : # 0087d7 ;
56+ --vp-c-brand-dark : # 5fd7ff ;
57+ --vp-c-brand-dimm : # 212425 ;
58+
59+ /* Greens */
60+ --vp-dark-green : # 155f3e ; /* Main accent green */
61+ --vp-dark-green-dark : # 2b855c ;
62+ --vp-dark-green-light : # 42d392 ;
63+ --vp-dark-green-lighter : # 35eb9a ;
64+ /* Complementary Colors */
65+ --vp-dark-gray : # 1e1e1e ;
66+ --vp-dark-gray-soft : # 2a2a2a ;
67+ --vp-dark-gray-mute : # 242424 ;
68+ --vp-light-gray : # d1d5db ;
69+ --vp-tip-bg : rgb (254 , 254 , 254 );
70+
71+ /* Text Colors */
72+ --vp-dark-text : # e5e5e5 ; /* Primary text color */
73+ --vp-dark-subtext : # c1c1c1 ; /* Subtle text */
74+ --vp-source-text : # e5e5e5 ;
75+ /* custom tip */
76+ --vp-custom-block-tip-border : var (--vp-c-brand-light );
77+ --vp-custom-block-tip-bg : var (--vp-tip-bg );
78+ }
79+
80+ /* Component: Button */
81+ : root {
82+ --vp-button-brand-border : var (--vp-light-gray );
83+ --vp-button-brand-bg : var (--vp-c-brand-light );
84+ --vp-button-brand-hover-border : var (--vp-c-bg-alt );
85+ --vp-button-brand-hover-bg : var (--julia-blue );
86+ }
87+
88+ /* Component: Home */
89+ : root {
90+ --vp-home-hero-name-color : transparent;
91+ --vp-home-hero-name-background : -webkit-linear-gradient (
92+ 120deg ,
93+ # 9558B2 30% ,
94+ # CB3C33
95+ );
96+
97+ --vp-home-hero-image-background-image : linear-gradient (
98+ -145deg ,
99+ # 9558b282 30% ,
100+ # 3798269a 30% ,
101+ # cb3d33e3
102+ );
103+ --vp-home-hero-image-filter : blur (40px );
104+ }
105+
106+ /* Hero Section */
107+ : root .dark {
108+ --vp-home-hero-name-color : transparent;
109+ --vp-home-hero-name-background : -webkit-linear-gradient (
110+ 120deg ,
111+ var (--julia-purple ) 15% ,
112+ var (--vp-dark-green-light ),
113+ var (--vp-dark-green )
114+
115+ );
116+ --vp-home-hero-image-background-image : linear-gradient (
117+ -45deg ,
118+ var (--vp-dark-green ) 30% ,
119+ var (--vp-dark-green-light ),
120+ var (--vp-dark-gray ) 30%
121+ );
122+ --vp-home-hero-image-filter : blur (56px );
123+ }
124+
125+ : root .dark {
126+ /* custom tip */
127+ --vp-custom-block-tip-border : var (--vp-dark-green-dark );
128+ --vp-custom-block-tip-text : var (--vp-dark-subtext );
129+ --vp-custom-block-tip-bg : var (--vp-dark-gray-mute );
130+ }
131+
132+ /**
133+ * Colors links
134+ * -------------------------------------------------------------------------- */
135+
136+ .dark {
137+ --vp-c-brand : var (--vp-dark-green-light );
138+ --vp-button-brand-border : var (--vp-dark-green-lighter );
139+ --vp-button-brand-bg : var (--vp-dark-green );
140+ --vp-c-brand-1 : var (--vp-dark-green-light );
141+ --vp-c-brand-2 : var (--vp-dark-green-lighter );
142+ --vp-c-brand-3 : var (--vp-dark-green );
143+ }
144+
145+ @media (min-width : 640px ) {
146+ : root {
147+ --vp-home-hero-image-filter : blur (56px );
148+ }
149+ }
150+
151+ @media (min-width : 960px ) {
152+ : root {
153+ --vp-home-hero-image-filter : blur (72px );
154+ }
155+ }
156+ /* Component: MathJax */
157+
158+ mjx-container > svg {
159+ display : block;
160+ margin : auto;
161+ }
162+
163+ mjx-container {
164+ padding : 0.5rem 0 ;
165+ }
166+
167+ mjx-container {
168+ display : inline;
169+ margin : auto 2px -2px ;
170+ }
171+
172+ mjx-container > svg {
173+ margin : auto;
174+ display : inline-block;
175+ }
0 commit comments