Skip to content

Commit f844ff0

Browse files
a1t0ghba1t0ghb
committed
refactor: added tiles in home webpage and adjusted 'style.css' accordingly.
1 parent 1100dcd commit f844ff0

5 files changed

Lines changed: 82 additions & 12 deletions

File tree

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

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
- 'module' scripts: 'https://neerajdana.medium.com/understanding-type-module-in-javascript-a-comprehensive-guide-ebb13926da7a'.
3030
- 'module' vs. 'non-module' scripts: 'https://neerajdana.medium.com/understanding-type-module-in-javascript-a-comprehensive-guide-ebb13926da7a'.
3131
-->
32-
<script type="module" src="./../loading_splashscreen_(app).js"></script>
32+
<!-- <script type="module" src="./../loading_splashscreen_(app).js"></script> -->
3333
<!-- Fallback call to PyScript script to trigger 'py:ready' event, in case there are no PyScript scripts in the page. -->
34-
<script type="py" defer></script>
34+
<!-- <script type="py" defer></script> -->
3535
</head>
3636
<body>
3737
<!-- Main dialog (as 'modal', defined in js module '_app-loading_splashscreen.js'), what appears 1st as soon as web page is loaded. -->
@@ -64,11 +64,29 @@ <h1>PyScript Exercises.</h1>
6464
<br>
6565
<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>
6666
<br>
67-
<ul>
68-
<li><a class="main-content-list_link" href="./../02/hello_world.html">Hello World</a>: start learing how to use <code>PyScript</code> to run <code>Python</code> in a browser.</li>
69-
<li><a class="main-content-list_link" href="./../03/antigravity.html">Antigravity</a>: import files, using <code>PyScript</code> <a href="https://docs.pyscript.net/2024.5.2/user-guide/configuration/#files" target="_blank"> configuration file (TOML or JSON)</a>.</li>
70-
<li><a class="main-content-list_link" href="./../04/pandas.html">Pandas</a>: load a <code>.csv</code> table, from a URL, using <code>Pandas</code>.</li>
71-
</ul>
67+
<div class="main-content-tiles">
68+
<article>
69+
<div class="main-content-tiles-logo_title_pair">
70+
<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>
71+
<a class="main-content-tiles-logo_title_pair-title" href="./../02/hello_world.html"><h2>Hello World</h2></a>
72+
</div>
73+
<p>Start learning how to use <code>PyScript</code> to run <code>Python</code> in a browser.</p>
74+
</article>
75+
<article>
76+
<div class="main-content-tiles-logo_title_pair">
77+
<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>
78+
<a class="main-content-tiles-logo_title_pair-title" href="./../03/antigravity.html"><h2>Antigravity</h2></a>
79+
</div>
80+
<p>Import files, using <code>PyScript</code> <a href="https://docs.pyscript.net/2024.5.2/user-guide/configuration/#files" target="_blank"> configuration file (TOML or JSON)</a>.</p>
81+
</article>
82+
<article>
83+
<div class="main-content-tiles-logo_title_pair">
84+
<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>
85+
<a class="main-content-tiles-logo_title_pair-title" href="./../04/pandas.html"><h2>Pandas</h2></a>
86+
</div>
87+
<p>Load a <code>.csv</code> table, from a URL, using <code>Pandas</code>.</p>
88+
</article>
89+
</div>
7290
</section>
7391
</main>
7492
<footer class="footer">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ <h1>'Hello World' Example.</h1>
6969
<!-- Display content: 'https://docs.pyscript.net/2024.5.2/user-guide/builtins/#pyscriptdisplay'. -->
7070
<h2>Using 'pyscript.display': default (i.e. 'append=True') vs. 'append=False'.</h2>
7171
<ul>
72-
<li><b>Default</b>: encapsulates the result from 'pyscript.display' between a 'div' tag. Then the 'div' gets ADDED to the inner content of the target DOM element.</li>
73-
<li><b>'append=False'</b>: the result from 'pyscript.display' RE-WRITES WHATEVER previous inner content of the target DOM.</li>
72+
<li><p><b>Default</b>: encapsulates the result from 'pyscript.display' between a 'div' tag. Then the 'div' gets ADDED to the inner content of the target DOM element.</p></li>
73+
<li><p><b>'append=False'</b>: the result from 'pyscript.display' RE-WRITES WHATEVER previous inner content of the target DOM.</p></li>
7474
</ul>
7575
<br>
7676
<p><b>IMPORTANT</b>: whenever as possible, create an html element (and include an id) to populate with the result of 'pyscript.display' by using the 'target=' parameter / property. Otherwise, <b>un-expected behaviours</b> can happen, as the one described <i>in the comments of this html</i>.</p>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ <h1>'Antigravity' Example.</h1>
6868
<p>It also shows you how you can import a file and use it in your Pyscript application - have a look at <code>pyscript.toml</code> to see how it's done.</p>
6969
<br>
7070
<hr>
71-
<p><b>Validation of 'pyscript.config' parameters.</b></p>
71+
<h2>Validation of 'pyscript.config' parameters.</h2>
7272
<script type="py" defer>
7373
from pyscript import display, config
7474
display(config.get("files"), target="pyscript_output_config_files")

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ <h1>'Pandas' Example.</h1>
6666
<p>This application uses <code>Pandas</code> to load a CSV file and display the data in a table on the page. It also includes an input field and a button which allows you to change the data to be loaded in the table.</p>
6767
<br>
6868
<hr>
69-
<p><b>Validation of 'pyscript.config' parameters.</b></p>
69+
<h2>Validation of 'pyscript.config' parameters.</h2>
7070
<script type="py" defer>
7171
from pyscript import display, config
7272
display(config.get("files"), target="pyscript_output_config_files")

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

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,20 @@ 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. */
39+
--colors_primary : #1173D4;
40+
--colors_primary_dark: #0A3D66;
41+
--colors_primary_hover: #0D5BA8;
42+
--colors_primary_light: #0099FF;
43+
--colors_background_alternative: #101922;
44+
--colors_fonts_primary: #FFFFFF;
45+
--colors_fonts_secondary: #CBD5E1;
46+
--colors_fonts_muted: #94A3B8;
47+
--colors_border: rgba(255, 255, 255, 0.1);
48+
--colors_card_background: #1E293B;
49+
--colors_shadow: rgba(0, 0, 0, 0.3);
50+
--colors_input_background: #1E293B;
51+
--colors_hsla_example: hsla(210, 100%, 56%, 1);
3852
}
3953

4054
/* Universal changes for all tags / elements / classes */
@@ -71,6 +85,14 @@ ul {
7185
padding: 10px 0px 0px 20px !important; /* IMPORTANT: lists REQUIRE PADDING; therefore, need manual adjustment, if padding set GLOBALLY to 0; i.e. '* { padding: 0; }'. Ref.: 'https://stackoverflow.com/questions/72279264/unordered-list-not-showing-bullets/72281511#72281511', 'https://www.w3schools.com/css/css_important.asp'.*/
7286
}
7387

88+
p {
89+
color: var(--colors_fonts_muted);
90+
}
91+
92+
footer p {
93+
color: var(--colors_03);
94+
}
95+
7496
/* 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'. */
7597
@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'. */
7698

@@ -127,7 +149,37 @@ ul {
127149
margin: 0.5rem;
128150
}
129151

130-
.main-content-list_link {
152+
article {
153+
background-color: var(--colors_card_background);
154+
padding: 1rem;
155+
margin-bottom: 16px;
156+
border-radius: 1rem;
157+
box-shadow: 2px 2px 3px 1px rgba(255, 255, 255, 0.5);
158+
}
159+
160+
.main-content-tiles-logo_title_pair {
161+
display: flex;
162+
align-items: center;
163+
gap: 8px;
164+
margin-bottom: 8px;
165+
}
166+
167+
article svg {
168+
color: var(--colors_primary_light);
169+
background-color: rgba(0, 153, 255, 0.3);
170+
width: 48px;
171+
height: 48px;
172+
border-radius: 100%; /* Creates a circle. */
173+
padding: 8px;
174+
}
175+
176+
.main-content-tiles {
177+
display: grid;
178+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
179+
gap: 1rem;
180+
}
181+
182+
.main-content-tiles-logo_title_pair-title {
131183
color: var(--colors_01);
132184
text-decoration-line: none;
133185
}

0 commit comments

Comments
 (0)