Skip to content

Commit 67585e7

Browse files
a1t0ghba1t0ghb
committed
refactor: adjusted footer to include copyright and logos.
1 parent b7e8534 commit 67585e7

5 files changed

Lines changed: 85 additions & 10 deletions

File tree

‎rsrcs/io_inputs/app/config/web_pages/01/home.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,18 @@ <h1>PyScript Exercises.</h1>
9393
</section>
9494
</main>
9595
<footer class="footer">
96-
<p>Developed by: a1t0ghb | <a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a> | <a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a></p>
9796
<small>&copy; 2025 a1t0ghb. All rights reserved.</small>
97+
<div class="footer-container_credits">
98+
<div class="footer-container_credits-container_credits">
99+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
100+
<a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a>
101+
</div>
102+
<div class="footer-container_credits-container_credits">
103+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
104+
<a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a>
105+
</div>
106+
</div>
98107
</footer>
99108
</body>
100109
</html>
110+
<!-- EOF. -->

‎rsrcs/io_inputs/app/config/web_pages/02/hello_world.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,18 @@ <h2>Example with 'pyscript.display': display date and time, NOT USING 'target='
151151
</section>
152152
</main>
153153
<footer class="footer">
154-
<p>Developed by: a1t0ghb | <a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a> | <a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a></p>
155154
<small>&copy; 2025 a1t0ghb. All rights reserved.</small>
155+
<div class="footer-container_credits">
156+
<div class="footer-container_credits-container_credits">
157+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
158+
<a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a>
159+
</div>
160+
<div class="footer-container_credits-container_credits">
161+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
162+
<a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a>
163+
</div>
164+
</div>
156165
</footer>
157166
</body>
158167
</html>
168+
<!-- EOF. -->

‎rsrcs/io_inputs/app/config/web_pages/03/antigravity.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,18 @@ <h2>Validation of 'pyscript.config' parameters.</h2>
9292
</section>
9393
</main>
9494
<footer class="footer">
95-
<p>Developed by: a1t0ghb | <a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a> | <a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a></p>
9695
<small>&copy; 2025 a1t0ghb. All rights reserved.</small>
96+
<div class="footer-container_credits">
97+
<div class="footer-container_credits-container_credits">
98+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
99+
<a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a>
100+
</div>
101+
<div class="footer-container_credits-container_credits">
102+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
103+
<a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a>
104+
</div>
105+
</div>
97106
</footer>
98107
</body>
99108
</html>
109+
<!-- EOF. -->

‎rsrcs/io_inputs/app/config/web_pages/04/pandas.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,18 @@ <h3>Dev. Console.</h3>
116116
</section>
117117
</main>
118118
<footer class="footer">
119-
<p>Developed by: a1t0ghb | <a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a> | <a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a></p>
120119
<small>&copy; 2025 a1t0ghb. All rights reserved.</small>
120+
<div class="footer-container_credits">
121+
<div class="footer-container_credits-container_credits">
122+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
123+
<a href="https://github.com/a1t0ghb" target="_blank">https://github.com/a1t0ghb</a>
124+
</div>
125+
<div class="footer-container_credits-container_credits">
126+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
127+
<a href="mailto:js101@a1t0.aleeas.com" target="_blank">js101@a1t0.aleeas.com</a>
128+
</div>
129+
</div>
121130
</footer>
122131
</body>
123132
</html>
133+
<!-- EOF. -->

‎rsrcs/io_inputs/app/config/web_pages/style.css‎

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ VARIABLES DECLARATION.
2727
--font_size_default: 16px; /* Default web-browsers font-size: 'https://stackoverflow.com/questions/29511983/is-the-default-font-size-of-every-browser-16px-why/29512572#29512572'. */
2828
--colors_background: #0D1117;
2929
--colors_01: #F0AB3C;
30-
--colors_02: #F6F6F6;
30+
--colors_02: rgb(246, 246, 246);
3131
--colors_03: #000000;
3232
--colors_04: #22D4FD;
3333
--colors_05: #272727;
@@ -93,6 +93,10 @@ footer p {
9393
color: var(--colors_03);
9494
}
9595

96+
a {
97+
text-decoration-line: none; /* To eliminate underscore format of hyperlinks. */
98+
}
99+
96100
/* Use of 'media queries' to define layouts according to specific screen resolutions: 'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_features'. */
97101
@media (width > 0px) { /* Base design, as starting point: e.g. for desktop, although recommended to start with mobile, 1st: 'https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile/20350990#20350990'. */
98102

@@ -131,7 +135,6 @@ footer p {
131135

132136
.header-nav-left_aligned-links_container-link {
133137
color: var(--colors_01);
134-
text-decoration-line: none; /* To eliminate underscore format of hyperlinks. */
135138
font-size: 1.3em;
136139
}
137140

@@ -142,7 +145,7 @@ footer p {
142145
}
143146

144147
.header-nav-links_container-link {
145-
text-decoration-line: none;
148+
color: var(--colors_fonts_muted);
146149
}
147150

148151
.main-content {
@@ -181,7 +184,6 @@ footer p {
181184

182185
.main-content-tiles-logo_title_pair-title {
183186
color: var(--colors_01);
184-
text-decoration-line: none;
185187
}
186188

187189
.main-content-pyscript_output_text {
@@ -192,10 +194,43 @@ footer p {
192194
max-width: 750px;
193195
} */
194196

197+
/* FOOTER: credits. */
198+
195199
.footer {
196200
background-color: var(--colors_01);
197-
color: var(--colors_background);
198-
text-align: center;
199201
padding: 12px;
202+
display: flex;
203+
gap: 16px; /* Separates sections: copyright and credits. */
204+
justify-content: space-between; /* Distribute sections of copyrigth and credits, both to the opposites: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content'. */
205+
align-items: center;
206+
flex-wrap: wrap; /* When shrinking, wrap onto multiple lines; e.g. column stack, instead of staying on 1 line: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-wrap'. */
207+
color: var(--colors_background);
208+
}
209+
210+
.footer-container_credits {
211+
display: flex;
212+
gap: 16px; /* Separates credits items: developed by, github and email. */
213+
align-items: center;
214+
flex-wrap: wrap; /* When shrinking, wrap onto multiple lines; e.g. column stack, instead of staying on 1 line: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-wrap'. */
200215
}
216+
217+
.footer-container_credits-container_credits {
218+
display: flex;
219+
align-items: center;
220+
gap: 8px; /* Separates logo from text. */
221+
}
222+
223+
footer div div svg {
224+
background-color: rgba(246, 246, 246, 0.2); /* Same color as '--colors_02', but with transparency. */
225+
border-radius: 100%;
226+
width: 32px;
227+
height: 32px;
228+
padding: 4px; /* Inner padding; the greater the padding, the smaller the icon. */
229+
}
230+
231+
footer div div a {
232+
color: var(--colors_background);
233+
}
234+
201235
}
236+
/* EOF. */

0 commit comments

Comments
 (0)