Skip to content

Commit eadd8d4

Browse files
nikoschamnikoscham
committed
Refactor social media links and sponsor section for improved layout and styling
1 parent cd688ee commit eadd8d4

File tree

2 files changed

+113
-82
lines changed

2 files changed

+113
-82
lines changed

‎feascript-website.css‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ html {
2323
font-family: "Roboto", sans-serif;
2424
font-size: 90%;
2525
scroll-behavior: smooth;
26+
position: relative;
2627
}
2728

2829
body {
@@ -162,11 +163,6 @@ pre.prettyprint {
162163
border-radius: 4px;
163164
}
164165

165-
/* Images */
166-
img.title {
167-
height: 1em;
168-
}
169-
170166
#responsive-logo {
171167
height: 80px;
172168
}
@@ -333,12 +329,6 @@ mjx-container {
333329
/* ==========================================================================
334330
HELPER CLASSES AND UTILITIES
335331
========================================================================== */
336-
/* Social media links */
337-
.social-media-list a:hover {
338-
transform: translateY(-2px);
339-
cursor: default;
340-
transition: transform 0.2s;
341-
}
342332

343333
/* Notice bars */
344334
.notice-dev {
@@ -487,7 +477,7 @@ mjx-container {
487477
flex: 1.5;
488478
position: relative;
489479
padding: 16px;
490-
background: linear-gradient(135deg, #d4aa00ff, #4d4d4d); /* Gold to dark gray gradient */
480+
background: linear-gradient(135deg, #d4aa00ff, #4d4d4d);
491481
border-radius: 0 10px 10px 0;
492482
display: flex;
493483
align-items: center;
@@ -501,3 +491,50 @@ mjx-container {
501491
background: #000;
502492
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
503493
}
494+
495+
/* Social icons */
496+
.social-icons-top-right {
497+
position: absolute;
498+
top: 10px;
499+
right: 10px;
500+
z-index: 1000;
501+
list-style: none;
502+
margin: 0;
503+
padding: 0;
504+
}
505+
506+
.social-icons-top-right ul {
507+
list-style: none;
508+
margin: 0;
509+
padding: 0;
510+
display: flex;
511+
gap: 10px;
512+
}
513+
514+
.social-icons-top-right li {
515+
display: inline-block;
516+
}
517+
518+
.social-icons-top-right a {
519+
text-decoration: none;
520+
}
521+
522+
.social-icons-top-right a:hover img {
523+
opacity: 0.8;
524+
transform: scale(1.1);
525+
transition: all 0.2s ease;
526+
}
527+
528+
/* Sponsor link styles */
529+
.sponsor-link {
530+
display: inline-block;
531+
transition: transform 0.2s;
532+
}
533+
534+
.sponsor-link:hover {
535+
transform: translateY(-2px);
536+
}
537+
538+
#github-stars {
539+
color: #333;
540+
}

‎index.html‎

Lines changed: 64 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -108,65 +108,69 @@ <h1>A JavaScript Finite Element Simulation Library</h1>
108108
/>FEAScript Platform</a
109109
>
110110
</li>
111-
<br />
112-
<li class="icon-link-start">
113-
<a href="https://blog.feascript.com/" title="FEAScript blog">
114-
<img
115-
src="./assets/blog-icon-feascript.png"
116-
alt="Blog icon"
117-
style="height: 18px; vertical-align: middle"
118-
/>
119-
</a>
120-
</li>
121-
<li>
122-
<a href="https://www.youtube.com/@FEAScript" title="FEAScript YouTube">
123-
<img
124-
src="./assets/youtube-icon-feascript.svg"
125-
alt="YouTube icon"
126-
style="height: 18px; vertical-align: middle"
127-
/>
128-
</a>
129-
</li>
130-
<li>
131-
<a href="https://www.linkedin.com/company/feascript/" title="FEAScript LinkedIn">
132-
<img
133-
src="./assets/linkedin-icon-feascript.png"
134-
alt="LinkedIn icon"
135-
style="height: 18px; vertical-align: middle"
136-
/>
137-
</a>
138-
</li>
139-
<li>
140-
<a href="https://discord.gg/3DVjNcuW4f" title="FEAScript Discord">
141-
<img
142-
src="./assets/discord-icon-feascript.png"
143-
alt="Discord icon"
144-
style="height: 18px; vertical-align: middle"
145-
/>
146-
</a>
147-
</li>
148-
<li>
149-
<a href="https://github.com/FEAScript/FEAScript-core" title="FEAScript GitHub">
150-
<img
151-
src="./assets/github-icon-feascript.png"
152-
alt="GitHub icon"
153-
style="height: 20px; vertical-align: middle"
154-
/>
155-
<span
156-
id="github-stars"
157-
style="
158-
font-size: 0.9em;
159-
margin-left: 5px;
160-
vertical-align: middle;
161-
border: 1px solid #ddd;
162-
border-radius: 4px;
163-
padding: 1px 5px;
164-
background-color: #f8f8f8;
165-
"
166-
></span>
167-
</a>
168-
</li>
169111
</ul>
112+
<!-- <li class="icon-link-start"> -->
113+
<div class="social-icons-top-right">
114+
<ul>
115+
<li>
116+
<a href="https://blog.feascript.com/" title="FEAScript blog">
117+
<img
118+
src="./assets/blog-icon-feascript.png"
119+
alt="Blog icon"
120+
style="height: 18px; vertical-align: middle"
121+
/>
122+
</a>
123+
</li>
124+
<li>
125+
<a href="https://www.youtube.com/@FEAScript" title="FEAScript YouTube">
126+
<img
127+
src="./assets/youtube-icon-feascript.svg"
128+
alt="YouTube icon"
129+
style="height: 18px; vertical-align: middle"
130+
/>
131+
</a>
132+
</li>
133+
<li>
134+
<a href="https://www.linkedin.com/company/feascript/" title="FEAScript LinkedIn">
135+
<img
136+
src="./assets/linkedin-icon-feascript.png"
137+
alt="LinkedIn icon"
138+
style="height: 18px; vertical-align: middle"
139+
/>
140+
</a>
141+
</li>
142+
<li>
143+
<a href="https://discord.gg/3DVjNcuW4f" title="FEAScript Discord">
144+
<img
145+
src="./assets/discord-icon-feascript.png"
146+
alt="Discord icon"
147+
style="height: 18px; vertical-align: middle"
148+
/>
149+
</a>
150+
</li>
151+
<li>
152+
<a href="https://github.com/FEAScript/FEAScript-core" title="FEAScript GitHub">
153+
<img
154+
src="./assets/github-icon-feascript.png"
155+
alt="GitHub icon"
156+
style="height: 20px; vertical-align: middle"
157+
/>
158+
<span
159+
id="github-stars"
160+
style="
161+
font-size: 0.9em;
162+
margin-left: 5px;
163+
vertical-align: middle;
164+
border: 1px solid #ddd;
165+
border-radius: 4px;
166+
padding: 1px 5px;
167+
background-color: #f8f8f8;
168+
"
169+
></span>
170+
</a>
171+
</li>
172+
</ul>
173+
</div>
170174

171175
<div class="highlight-container">
172176
<p>
@@ -281,24 +285,14 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
281285
>💖 If you find FEAScript useful, please consider supporting its development through a
282286
donation:</strong
283287
>
284-
<a
285-
href="https://github.com/sponsors/FEAScript"
286-
style="display: inline-block; transition: transform 0.2s"
287-
onmouseover="this.style.transform='translateY(-2px)'"
288-
onmouseout="this.style.transform='translateY(0)'"
289-
>
288+
<a href="https://github.com/sponsors/FEAScript" class="sponsor-link">
290289
<img
291290
alt="GitHub Sponsors"
292291
src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/feascript"
293292
style="vertical-align: middle"
294293
/>
295294
</a>
296-
<a
297-
href="https://liberapay.com/FEAScript/donate"
298-
style="display: inline-block; transition: transform 0.2s"
299-
onmouseover="this.style.transform='translateY(-2px)'"
300-
onmouseout="this.style.transform='translateY(0)'"
301-
>
295+
<a href="https://liberapay.com/FEAScript/donate" class="sponsor-link">
302296
<img
303297
alt="Donate using Liberapay"
304298
src="https://img.shields.io/badge/Liberapay-F6C915?logo=liberapay&logoColor=black"

0 commit comments

Comments
 (0)