Skip to content

Commit b7e8534

Browse files
a1t0ghba1t0ghb
committed
refactor: added meta description to html pages.
1 parent abef457 commit b7e8534

5 files changed

Lines changed: 19 additions & 10 deletions

File tree

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Page meta description for indexers, like Google. This is the page description what appears when searching with Google. -->
8+
<meta name="description" content="Portfolio of exercises using PyScipt, for Python implementation in web-browsers." />
79
<!-- Window title. -->
810
<title>PyScript Exercises</title>
911
<!-- Window logo. Goes up x5 folder levels to get to 'media' ([CURRENT DIR.] < web_pages < config < app < io_inputs < rsrcs > media), where it's stored. -->
@@ -65,6 +67,7 @@ <h1>PyScript Exercises.</h1>
6567
<p>This is a list of exercises to study <code>PyScript</code>. These exercises come from the <b><a href="https://docs.pyscript.net/2024.5.2/examples/" target="_blank">official PyScript documentation</a></b>, where several examples are listed, starting with basics such as '<a href="https://pyscript.com/@examples/hello-world/latest" target="_blank">Hello World</a>', and digging into <a href="https://pyscript.com/@examples/altair/latest" target="_blank">plotting data</a>.</p>
6668
<br>
6769
<div class="main-content-tiles">
70+
<!-- 'articles' are meant to be pieces of content that can be re-usable and independent (e.g. a tweet, or highlighted comment on YouTube). 'article' DOES NOT IMPLIES IT'S EXCLUSIVELY A TEXT'S ARTICLE. -->
6871
<article>
6972
<div class="main-content-tiles-logo_title_pair">
7073
<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-file-code"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M10 13l-1 2l1 2" /><path d="M14 13l1 2l-1 2" /></svg>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Page meta description for indexers, like Google. This is the page description what appears when searching with Google. -->
8+
<meta name="description" content="'Hello World' exercise implementation, for portfolio of exercises using PyScipt, for Python implementation in web-browsers." />
79
<!-- Window title. -->
810
<title>Hello World | PyScript Exercises</title>
911
<!-- Window logo. Goes up x5 folder levels to get to 'media' ([CURRENT DIR.] < web_pages < config < app < io_inputs < rsrcs > media), where it's stored. -->

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Page meta description for indexers, like Google. This is the page description what appears when searching with Google. -->
8+
<meta name="description" content="'Antigravity' exercise implementation, for portfolio of exercises using PyScipt, for Python implementation in web-browsers." />
79
<!-- Window title. -->
810
<title>Antigravity | PyScript Exercises</title>
911
<!-- Window logo. Goes up x5 folder levels to get to 'media' ([CURRENT DIR.] < web_pages < config < app < io_inputs < rsrcs > media), where it's stored. -->

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Page meta description for indexers, like Google. This is the page description what appears when searching with Google. -->
8+
<meta name="description" content="'Pandas' exercise implementation, for portfolio of exercises using PyScipt, for Python implementation in web-browsers." />
79
<!-- Window title. -->
810
<title>Pandas | PyScript Exercises</title>
911
<!-- Window logo. Goes up x5 folder levels to get to 'media' ([CURRENT DIR.] < web_pages < config < app < io_inputs < rsrcs > media), where it's stored. -->

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ VARIABLES DECLARATION.
3535
--line_height_default: 1.5;
3636
--fonts_main: "Montserrat", var(--fonts_fallback);
3737
--fonts_minor: "Krona One", var(--fonts_fallback);
38-
/* From midudev video for JSCamp in Twitch d251001. */
38+
/* From midudev video for JSCamp in Twitch d251001. TODO: review proper color-palette with purple theme for personal branding. */
3939
--colors_primary : #1173D4;
4040
--colors_primary_dark: #0A3D66;
4141
--colors_primary_hover: #0D5BA8;
42-
--colors_primary_light: #0099FF;
43-
--colors_background_alternative: #101922;
42+
--colors_primary_light: rgb(0, 153, 255);
43+
--colors_background_00: #101922;
4444
--colors_fonts_primary: #FFFFFF;
4545
--colors_fonts_secondary: #CBD5E1;
4646
--colors_fonts_muted: #94A3B8;
@@ -152,9 +152,8 @@ footer p {
152152
article {
153153
background-color: var(--colors_card_background);
154154
padding: 1rem;
155-
margin-bottom: 16px;
156155
border-radius: 1rem;
157-
box-shadow: 2px 2px 3px 1px rgba(255, 255, 255, 0.5);
156+
box-shadow: 2px 2px 3px 1px rgba(255, 255, 255, 0.5); /* [horizontal: left(negative), right (positive)] [vertical: top(negative), bottom (positive)] [blur] [shadow_extension] [shadow_color] */
158157
}
159158

160159
.main-content-tiles-logo_title_pair {
@@ -166,16 +165,17 @@ footer p {
166165

167166
article svg {
168167
color: var(--colors_primary_light);
169-
background-color: rgba(0, 153, 255, 0.3);
168+
background-color: rgba(0, 153, 255, 0.3); /* Same color as '--colors_primary_light', but with transparency. */
170169
width: 48px;
171170
height: 48px;
172-
border-radius: 100%; /* Creates a circle. */
173-
padding: 8px;
171+
border-radius: 100%; /* Creates a circle. */
172+
padding: 8px; /* Inner padding; the greater the padding, the smaller the icon. */
174173
}
175174

176175
.main-content-tiles {
177-
display: grid;
178-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
176+
display: grid; /* Column layout, instead of using Flexbox. */
177+
/* Alternative to using media queries, for adjusting layout based on dimensions. */
178+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* DYNAMIC columns creation, by 'repeating' 'default' configuration (i.e. '1fr'), if conditions are met: MINIMUM 280px avaiable to create ANOTHER column; ie. to repeat 'default' configuration. */
179179
gap: 1rem;
180180
}
181181

0 commit comments

Comments
 (0)