Skip to content

Commit 1e69a88

Browse files
Tony-RomeTony-Rome
committed
feat: img and welcome text
1 parent 0af9edb commit 1e69a88

6 files changed

Lines changed: 150 additions & 18 deletions

File tree

‎content/img/pyschool_logo.png‎

621 KB
Loading

‎content/post/test.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎theme/static/css/styles.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
html, body {
2+
height: 100%;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
display: flex;
9+
flex-direction: column;
10+
min-height: 100vh; /* full viewport height */
11+
}
12+
13+
main {
14+
flex: 1; /* pushes footer to the bottom */
15+
}
16+
17+
/* Base styles */
18+
.intro-section {
19+
text-align: center;
20+
margin: 2rem auto;
21+
padding: 1rem;
22+
max-width: 1200px;
23+
box-sizing: border-box;
24+
}
25+
26+
.intro-section h1 {
27+
font-size: 2.5rem;
28+
color: #000;
29+
margin-bottom: 1.5rem;
30+
}
31+
32+
/* Inner content: image + text */
33+
.intro-content {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
gap: 2rem;
38+
flex-wrap: wrap; /* ensures wrapping on narrow screens */
39+
}
40+
41+
/* Image styling */
42+
.intro-content img {
43+
width: 300px;
44+
max-width: 100%;
45+
height: auto;
46+
border-radius: 15px;
47+
border: 3px solid #000;
48+
background-color: #f8f1ee;
49+
box-shadow: 5px 5px 0 #000;
50+
}
51+
52+
/* Paragraph styling */
53+
.intro-content p {
54+
flex: 1;
55+
font-size: 1.1rem;
56+
line-height: 1.6;
57+
color: #000;
58+
text-align: justify;
59+
min-width: 250px;
60+
}
61+
62+
footer {
63+
text-align: center;
64+
padding: 1rem;
65+
font-family: monospace;
66+
font-size: 1rem;
67+
color: #000;
68+
border-top: 2px solid #000;
69+
width: 100%;
70+
box-sizing: border-box;
71+
}
72+
73+
footer p {
74+
margin: 0;
75+
}
76+
77+
/* ===============================
78+
RESPONSIVE BEHAVIOR
79+
=============================== */
80+
81+
/* Tablets (≤900px) */
82+
@media (max-width: 900px) {
83+
.intro-section h1 {
84+
font-size: 2rem;
85+
}
86+
87+
.intro-content {
88+
gap: 1.5rem;
89+
}
90+
91+
.intro-content img {
92+
width: 250px;
93+
}
94+
95+
.intro-content p {
96+
font-size: 1rem;
97+
}
98+
99+
footer {
100+
font-size: 0.95rem;
101+
padding: 0.8rem;
102+
}
103+
}
104+
105+
/* Phones (≤600px) */
106+
@media (max-width: 600px) {
107+
.intro-content {
108+
flex-direction: column;
109+
text-align: center;
110+
}
111+
112+
.intro-content img {
113+
width: 80%;
114+
max-width: 250px;
115+
}
116+
117+
.intro-content p {
118+
text-align: justify;
119+
font-size: 0.95rem;
120+
padding: 0 1rem;
121+
}
122+
123+
.intro-section h1 {
124+
font-size: 1.8rem;
125+
}
126+
127+
footer {
128+
font-size: 0.9rem;
129+
padding: 0.6rem;
130+
}
131+
}

‎theme/templates/base.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@
1212
{% block content %}{% endblock %}
1313
</main>
1414

15-
<footer>
16-
{% include 'footer.html' %}
17-
</footer>
15+
{% include 'footer.html' %}
16+
1817
</body>
1918
</html>

‎theme/templates/footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<footer class="footer-container">
2-
<p class="footer-text">
1+
<footer>
2+
<p>
33
© {{ SITENAME }} - 2025
44
</p>
55
</footer>

‎theme/templates/index.html‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,22 @@
44

55
{% block content %}
66

7-
<div class="main-msg">
8-
<h1 class="main-title-msg">¡Hola Pythonista!</h1>
9-
<div class="main-body-msg">
10-
<p>¿Tienes un proyecto personal, una herramienta que descubriste, una librería que te llamó la atención o simplemente algo que quieras compartir? ¡Este es tu espacio!</p>
11-
<p>Temas como ciencia de datos, desarrollo web, automatización, videojuegos, inteligencia artificial, seguridad informática o cualquier otro que tenga relación con Python son totalmente bienvenidos 🚀</p>
12-
</div>
7+
<div class="intro-section">
8+
<h1>¡Hola Pythonista!</h1>
9+
<div class="intro-content">
10+
<img src="{{ SITEURL }}/img/pyschool_logo.png" alt="PySchool logo">
11+
<p>
12+
Este espacio ha sido creado con el objetivo de motivar a los estudiantes a conocer y aprender el lenguaje de programación Python. <br>
13+
PySchool es una iniciativa de la organización Python Chile y DUOC. <br>
14+
Nuestro objetivo es proporcionar a la comunidad los recursos necesarios para aprender y mejorar sus habilidades en Python.
15+
</p>
16+
17+
</div>
18+
<p>
19+
Este espacio ha sido creado con el objetivo de motivar a los estudiantes a conocer y aprender el lenguaje de programación Python. Dentro de este repositorio, encontrarás ejemplos autocontenidos que te ayudarán a entender y practicar los conceptos fundamentales de Python.
20+
</p>
1321
</div>
1422

1523

24+
1625
{% endblock %}

0 commit comments

Comments
 (0)