Skip to content

Commit 769fa58

Browse files
harry7557558harry7557558
committed
css update
1 parent 3d6c8ca commit 769fa58

7 files changed

+52
-29
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Spirulae: Web-Based Math Visualization
22

3-
*by Harry Chen - Page updated in September 2024*
3+
*by Harry Chen - Page updated September 2024*
44

55
[![spirulae-2.jpg](assets/spirulae-2.jpg)](https://harry7557558.github.io/spirulae/implicit3/)
66

‎assets/gallery-paramsurf-boysurf.jpg

3.96 KB
Loading

‎assets/index_base.html

+8-12
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,6 @@
1111

1212
<link rel="stylesheet" href="./assets/style.css" />
1313

14-
<style>
15-
.a {
16-
display: inline-block;
17-
text-align: center;
18-
width: 48%;
19-
margin: 5px 0;
20-
}
21-
</style>
22-
2314
</head>
2415

2516
<body>
@@ -28,15 +19,17 @@
2819

2920
<div id="container">
3021

31-
<h1 style="text-align:center;margin-bottom:0;">Spirulae:
32-
Web-Based Math Visualization</h1>
22+
<h1 style="text-align:center;margin-bottom:0;font-family:Arial,Helvetica;">Spirulae:
23+
Web-Based Math Visualization</h1>
3324
<p style="text-align:center;">
3425
<em style="color:#555">by Harry Chen - Page updated {%date%}</em>
35-
<br/>
26+
</p>
27+
<p style="text-align:center;margin-top:-0.5em;">
3628
<a href="https://github.com/harry7557558/spirulae/" target="_blank">GitHub</a> ⋅
3729
<a href="https://spirulae.github.io/gallery/">Gallery</a>
3830
</p>
3931

32+
<div class="tool-gallery">
4033
<a href="https://harry7557558.github.io/spirulae/implicit3/" class="a">
4134
<img src="assets/img-implicit3.jpg" style="width:100%" />
4235
<br/>
@@ -77,8 +70,11 @@ <h1 style="text-align:center;margin-bottom:0;">Spirulae:
7770
<br/>
7871
2D to 3D Mesh Generator (dev)
7972
</a>
73+
</div>
8074

75+
<div class="home-md-content">
8176
{%index.md%}
77+
</div>
8278

8379
<p style="text-align: center;">
8480
<a href="#s">Back to top</a>

‎assets/readme_base.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Spirulae: Web-Based Math Visualization
22

3-
*by Harry Chen - Page updated in {%date%}*
3+
*by Harry Chen - Page updated {%date%}*
44

55
[![spirulae-2.jpg](assets/spirulae-2.jpg)](https://harry7557558.github.io/spirulae/implicit3/)
66

‎assets/style.css

+32-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
font-family: Arial, Helvetica, sans-serif;
2+
font-family: sans-serif;
33
background-color: #f0f5ff;
44
color: #222;
55
margin: 10px 0;
@@ -38,4 +38,35 @@ a:hover {
3838
code {
3939
color: #850;
4040
font-family: monospace;
41+
}
42+
43+
.home-md-content img, .tool-gallery img {
44+
display: inline-block;
45+
margin: 0.5%;
46+
transition: box-shadow 0.2s ease-in-out;
47+
}
48+
49+
.tool-gallery img:hover {
50+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
51+
}
52+
53+
.home-md-content img:hover {
54+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
55+
}
56+
57+
.tool-gallery, .home-md-content {
58+
margin: 0;
59+
width: 100%;
60+
display: inline-block;
61+
}
62+
63+
.tool-gallery {
64+
text-align: center;
65+
}
66+
67+
.tool-gallery .a {
68+
display: inline-block;
69+
text-align: center;
70+
width: 48%;
71+
margin: 5px 0;
4172
}

‎index.html

+8-12
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,6 @@
1111

1212
<link rel="stylesheet" href="./assets/style.css" />
1313

14-
<style>
15-
.a {
16-
display: inline-block;
17-
text-align: center;
18-
width: 48%;
19-
margin: 5px 0;
20-
}
21-
</style>
22-
2314
</head>
2415

2516
<body>
@@ -28,15 +19,17 @@
2819

2920
<div id="container">
3021

31-
<h1 style="text-align:center;margin-bottom:0;">Spirulae:
32-
Web-Based Math Visualization</h1>
22+
<h1 style="text-align:center;margin-bottom:0;font-family:Arial,Helvetica;">Spirulae:
23+
Web-Based Math Visualization</h1>
3324
<p style="text-align:center;">
3425
<em style="color:#555">by Harry Chen - Page updated September 2024</em>
35-
<br/>
26+
</p>
27+
<p style="text-align:center;margin-top:-0.5em;">
3628
<a href="https://github.com/harry7557558/spirulae/" target="_blank">GitHub</a> ⋅
3729
<a href="https://spirulae.github.io/gallery/">Gallery</a>
3830
</p>
3931

32+
<div class="tool-gallery">
4033
<a href="https://harry7557558.github.io/spirulae/implicit3/" class="a">
4134
<img src="assets/img-implicit3.jpg" style="width:100%" />
4235
<br/>
@@ -77,7 +70,9 @@ <h1 style="text-align:center;margin-bottom:0;">Spirulae:
7770
<br/>
7871
2D to 3D Mesh Generator (dev)
7972
</a>
73+
</div>
8074

75+
<div class="home-md-content">
8176
<p>GPU-accelerated math function graphers in web browsers, both 3D and 2D.</p>
8277
<p>This is a personal passion project. Back in 2022 I couldn't find a 3D graphing calculator with satisfying 3D implicit surface rendering, so I made one, and the development continued. I was initially inspired by raymarching demos on <a href="https://www.shadertoy.com/">Shadertoy</a>, but as I extended the equation parser and renderer to other types of math functions, currently implemented function graphers are not limited to implicit ones.</p>
8378
<p>It is important to note that these function graphers are developed completely by my effort, and many features I implemented are biased toward personal use. I'm not a "real" mathematician, and many features and examples I added are for visual impression rather than mathenatical accuracy and practicability. If you have any suggestions or believe you are experiencing a bug, feel free to <a href="https://github.com/harry7557558/spirulae/issues">open an issue on GitHub</a>.</p>
@@ -215,6 +210,7 @@ <h2>Gallery</h2>
215210
<p><a href="https://harry7557558.github.io/spirulae/meshgen3"><img alt="" src="./assets/gallery-meshgen3-julia.jpg" /></a></p>
216211
<p>A 2D vector field streamline plot</p>
217212
<p><a href="https://harry7557558.github.io/spirulae/ode2"><img alt="" src="./assets/gallery-ode2-cylflow.jpg" /></a></p>
213+
</div>
218214

219215
<p style="text-align: center;">
220216
<a href="#s">Back to top</a>

‎styles/style.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ svg:hover .axis-3d-active {
6161
padding: 15px 20px;
6262
color: white;
6363
font-size: 0.95em;
64-
font-family: 'Arial', sans-serif;
64+
font-family: Arial, Helvetica, sans-serif;
6565
white-space: nowrap;
6666
z-index: 998;
6767
}
@@ -216,7 +216,7 @@ hr {
216216
max-height: 800px;
217217
background-color: hsl(300, 30%, 20%, 0.9);
218218
padding: 20px 32px 40px 40px;
219-
font-family: 'Arial';
219+
font-family: Arial, Helvetica, sans-serif;
220220
font-size: 0.95em;
221221
line-height: 1.2em;
222222
color: white;

0 commit comments

Comments
 (0)