Skip to content

Commit da1384a

Browse files
nikoschamnikoscham
committed
Enhance tutorial UI by updating badge styles, improving hover effects, and standardizing navigation links across multiple tutorial pages
1 parent c4a8903 commit da1384a

10 files changed

Lines changed: 60 additions & 83 deletions

‎FEAScript-website.css‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,10 @@ mjx-container {
140140

141141
#menu li a:hover {
142142
color: #333;
143+
transform: translateY(-2px);
144+
cursor: default;
145+
transition: transform 0.2s;
146+
display: inline-block;
143147
}
144148

145149
#menu li.external-link-start {
@@ -214,33 +218,35 @@ mjx-container {
214218
margin-right: 0.5em;
215219
margin-top: 0.3em;
216220
vertical-align: middle;
221+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
222+
font-weight: 500;
223+
letter-spacing: 0.3px;
224+
border: 1px solid rgba(255, 255, 255, 0.2);
225+
}
226+
227+
.tutorials-list .badge:hover {
228+
transform: translateY(-2px);
229+
cursor: default; /* or pointer if clickable */
217230
}
218231

219232
.tutorials-list .badge-basic {
220-
background-color: #d4aa00;
221-
color: #fff;
233+
background-color: #6a6a6a;
234+
color: #f7e7b7;
222235
}
223236

224237
.tutorials-list .badge-visual {
225-
background-color: #e68224;
226-
color: #fff;
238+
background-color: #d18342;
239+
color: #f7e7b7;
227240
}
228241

229242
.tutorials-list .badge-mt {
230-
background-color: #2196f3;
231-
color: #fff;
243+
background-color: #5585a3;
244+
color: #f7e7b7;
232245
}
233246

234247
.tutorials-list .badge-gmsh {
235-
background-color: #4caf50;
236-
color: #fff;
237-
}
238-
239-
.tutorials-list .badge-basic a,
240-
.tutorials-list .badge-visual a,
241-
.tutorials-list .badge-mt a,
242-
.tutorials-list .badge-gmsh a {
243-
color: #fff;
248+
background-color: #8a9277;
249+
color: #f7e7b7;
244250
}
245251

246252
.tutorial-name {
@@ -343,3 +349,9 @@ footer {
343349
font-size: 120%;
344350
}
345351
}
352+
353+
.social-media-list a:hover {
354+
transform: translateY(-2px);
355+
cursor: default;
356+
transition: transform 0.2s;
357+
}

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
442442
>Basic</a
443443
>
444444
<a href="https://feascript.com/tutorials/HeatConduction1DWallPlatform.html" class="badge badge-visual"
445-
>Visual editor</a
445+
>Visual Editor</a
446446
>
447447
</li>
448448
<li>
@@ -452,10 +452,10 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
452452
>Multi-threaded</a
453453
>
454454
<a href="https://feascript.com/tutorials/HeatConduction2DFinGmsh.html" class="badge badge-gmsh"
455-
>Unstructured Gmsh mesh</a
455+
>Gmsh mesh</a
456456
>
457457
<a href="https://feascript.com/tutorials/HeatConduction2DFinPlatform.html" class="badge badge-visual"
458-
>Visual editor</a
458+
>Visual Editor</a
459459
>
460460
</li>
461461
<li>

‎tutorials/HeatConduction1DWall.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -206,9 +206,8 @@ <h2 id="results"><a name="Results"></a>Results</h2>
206206
<div id="solutionPlot"></div>
207207

208208
<ul id="menu">
209-
<li>
210-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
211-
</li>
209+
<li><a href="https://feascript.com/index.html">Home</a></li>
210+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
212211
</ul>
213212

214213
<script type="module">
@@ -287,4 +286,3 @@ <h2 id="results"><a name="Results"></a>Results</h2>
287286
</script>
288287
</body>
289288
</html>
290-
</html>

‎tutorials/HeatConduction1DWallPlatform.html‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212

1313
<html>
1414
<head>
15-
<title>FEAScript: Heat Conduction Through a Wall Tutorial (FEAScript Platform)</title>
15+
<title>FEAScript: Heat Conduction Through a Wall Tutorial (Visual Editor)</title>
1616
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
1717
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1818
<meta
1919
name="description"
20-
content="This tutorial demonstrates solving a steady-state heat transfer problem in a one-dimensional wall using the FEAScript visual platform. The problem represents a typical house wall scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions."
20+
content="This tutorial demonstrates solving a steady-state heat transfer problem in a one-dimensional wall using the FEAScript platform visual editor. The problem represents a typical house wall scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions."
2121
/>
2222
<meta
2323
name="keywords"
@@ -104,10 +104,7 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
104104
<p class="image-caption">The FEAScript platform Control Panel</p>
105105
</div>
106106
</li>
107-
<li>
108-
Click the "Load Project" button in the Control Panel under the "Load/Save Project"
109-
folder.
110-
</li>
107+
<li>Click the "Load Project" button in the Control Panel under the "Load/Save Project" folder.</li>
111108
<li>
112109
Select the "HeatConduction1DWall.xml" file from your computer.
113110
<p>
@@ -153,14 +150,8 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
153150
</ol>
154151

155152
<ul id="menu">
156-
<li>
157-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
158-
</li>
159-
<li>
160-
<a href="https://platform.feascript.com/help.html"
161-
>Return to FEAScript Platform Help</a
162-
>
163-
</li>
153+
<li><a href="https://feascript.com/index.html">Home</a></li>
154+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
164155
</ul>
165156
<footer>
166157
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
@@ -170,4 +161,3 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
170161
</script>
171162
</body>
172163
</html>
173-
</html>

‎tutorials/HeatConduction2DFin.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,8 @@ <h2 id="results"><a name="Results"></a>Results</h2>
225225
</p>
226226

227227
<ul id="menu">
228-
<li>
229-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
230-
</li>
228+
<li><a href="https://feascript.com/index.html">Home</a></li>
229+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
231230
</ul>
232231

233232
<script type="module">
@@ -311,4 +310,3 @@ <h2 id="results"><a name="Results"></a>Results</h2>
311310
</script>
312311
</body>
313312
</html>
314-
</html>

‎tutorials/HeatConduction2DFinGmsh.html‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,9 @@ <h1>Heat Conduction in a Two-Dimensional Fin Tutorial (Gmsh Mesh)</h1>
8484
<div class="highlight-container">
8585
<p>
8686
This page demonstrates solving the 2D heat conduction fin problem using a Gmsh-generated mesh.
87-
<a href="https://gmsh.info/">Gmsh</a> is a powerful mesh generation tool that can
88-
create complex geometries and meshes for finite element analysis. For the mathematical formulation and
89-
theory, see the <a href="HeatConduction2DFin.html">main (standard) tutorial</a>.
87+
<a href="https://gmsh.info/">Gmsh</a> is a powerful mesh generation tool that can create complex
88+
geometries and meshes for finite element analysis. For the mathematical formulation and theory, see
89+
the <a href="HeatConduction2DFin.html">basic tutorial</a>.
9090
</p>
9191
</div>
9292

@@ -294,14 +294,8 @@ <h2 id="results"><a name="results"></a>Results</h2>
294294
<div id="solutionPlot"></div>
295295

296296
<ul id="menu">
297-
<li>
298-
<a href="https://feascript.com/tutorials/HeatConduction2DFin.html"
299-
>Return to Main Tutorial</a
300-
>
301-
</li>
302-
<li>
303-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
304-
</li>
297+
<li><a href="https://feascript.com/index.html">Home</a></li>
298+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
305299
</ul>
306300

307301
<script type="module">

‎tutorials/HeatConduction2DFinPlatform.html‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212

1313
<html>
1414
<head>
15-
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Tutorial (FEAScript Platform)</title>
15+
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Tutorial (Visual Editor)</title>
1616
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
1717
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1818
<meta
1919
name="description"
20-
content="This tutorial demonstrates solving a steady-state heat transfer problem in a two-dimensional domain using the FEAScript visual platform. The problem represents a typical cooling fin scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions."
20+
content="This tutorial demonstrates solving a steady-state heat transfer problem in a two-dimensional domain using the FEAScript platform visual editor. The problem represents a typical cooling fin scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions."
2121
/>
2222
<meta
2323
name="keywords"
@@ -64,8 +64,8 @@ <h1 class="top">
6464
<h1>Heat Conduction in a Two-Dimensional Fin Tutorial (FEAScript platform)</h1>
6565

6666
<ul id="menu">
67-
<li><a href="#introduction">Introduction</a></li>
68-
<li><a href="#tutorial">Tutorial</a></li>
67+
<li><a href="https://feascript.com/index.html">Home</a></li>
68+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
6969
</ul>
7070

7171
<div class="highlight-container">
@@ -103,10 +103,7 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
103103
<p class="image-caption">The FEAScript platform Control Panel</p>
104104
</div>
105105
</li>
106-
<li>
107-
Click the "Load Project" button in the Control Panel under the "Load/Save Project"
108-
folder.
109-
</li>
106+
<li>Click the "Load Project" button in the Control Panel under the "Load/Save Project" folder.</li>
110107
<li>
111108
Select the "HeatConduction2DFin.xml" file from your computer.
112109
<p>
@@ -156,9 +153,7 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
156153
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
157154
</li>
158155
<li>
159-
<a href="https://platform.feascript.com/help.html"
160-
>Return to FEAScript Platform Help</a
161-
>
156+
<a href="https://platform.feascript.com/help.html">Return to FEAScript Platform Help</a>
162157
</li>
163158
</ul>
164159

@@ -170,4 +165,3 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
170165
</script>
171166
</body>
172167
</html>
173-
</html>

‎tutorials/HeatConduction2DFinWorker.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<html>
1414
<head>
15-
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Tutorial (Web Worker)</title>
15+
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Tutorial (Multi-threaded)</title>
1616
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
1717
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1818
<meta
@@ -83,7 +83,7 @@ <h1>Heat Conduction in a Two-Dimensional Fin Tutorial (Web Worker)</h1>
8383
<p>
8484
This page demonstrates solving the 2D heat conduction fin problem using FEAScript in a web worker for
8585
improved browser responsiveness. For the mathematical formulation and theory, see the
86-
<a href="https://feascript.com/tutorials/HeatConduction2DFin.html">main (standard) tutorial</a>.
86+
<a href="https://feascript.com/tutorials/HeatConduction2DFin.html">basic tutorial</a>.
8787
</p>
8888

8989
<p>
@@ -178,12 +178,8 @@ <h2 id="results"><a name="Results"></a>Results</h2>
178178
<div id="solutionPlot"></div>
179179

180180
<ul id="menu">
181-
<li>
182-
<a href="https://feascript.com/tutorials/HeatConduction2DFin.html">Return to Main Tutorial</a>
183-
</li>
184-
<li>
185-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
186-
</li>
181+
<li><a href="https://feascript.com/index.html">Home</a></li>
182+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
187183
</ul>
188184

189185
<script type="module">

‎tutorials/SolidificationFront2D.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -235,9 +235,8 @@ <h2 id="results"><a name="Results"></a>Results</h2>
235235
</p>
236236

237237
<ul id="menu">
238-
<li>
239-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
240-
</li>
238+
<li><a href="https://feascript.com/index.html">Home</a></li>
239+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
241240
</ul>
242241

243242
<script type="module">

‎tutorials/SolidificationFront2DWorker.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<html>
1414
<head>
15-
<title>FEAScript: Solidification Front Propagation in a Two-Dimensional Domain (Web Worker)</title>
15+
<title>FEAScript: Solidification Front Propagation in a Two-Dimensional Domain (Multi-threaded)</title>
1616
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
1717
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1818
<meta
@@ -83,7 +83,7 @@ <h1>Solidification Front Propagation in a Two-Dimensional Domain (Web Worker)</h
8383
<p>
8484
This page demonstrates solving the solidification front propagation problem using FEAScript in a web
8585
worker for improved browser responsiveness. For the mathematical formulation and theory, see the
86-
<a href="https://feascript.com/tutorials/SolidificationFront2D.html">main (standard) tutorial</a>.
86+
<a href="https://feascript.com/tutorials/SolidificationFront2D.html">basic tutorial</a>.
8787
</p>
8888

8989
<p>
@@ -180,12 +180,8 @@ <h2 id="results"><a name="Results"></a>Results</h2>
180180
<div id="solutionPlot"></div>
181181

182182
<ul id="menu">
183-
<li>
184-
<a href="https://feascript.com/tutorials/SolidificationFront2D.html">Return to Main Tutorial</a>
185-
</li>
186-
<li>
187-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
188-
</li>
183+
<li><a href="https://feascript.com/index.html">Home</a></li>
184+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
189185
</ul>
190186

191187
<script type="module">

0 commit comments

Comments
 (0)