Skip to content

Commit fd7c7c3

Browse files
Merge branch 'add_content_to_about_page'
2 parents d500806 + 0ef446e commit fd7c7c3

11 files changed

+230
-38
lines changed

_pages/01_about.html

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,71 @@ <h2 class="about__page-subtitle">Our Goals, Our Story</h2>
3131

3232
<div class="about__container container-fluid">
3333
<div class="row">
34-
<div class="col-12">
35-
<h2 class="section-title">Python Sprints Decoded</h2>
36-
<h2 class="about__title">Why We Work Together?</h2>
37-
<p class="about__paragraph-dark">
38-
Python Sprints is a non for profit group of like minded programmers who care about making open source projects better.
39-
We all use them for free but often do not put any thought to how much effort it takes to create and maintain this software. Very often the amount of core developers working on a particular project can be counted on fingers of one hand and yet literally thousands of people use their work.
40-
We believe that we all should share our skills and earn our good karma.
41-
</p>
34+
<div class="col-12 no-padding-x">
35+
<h2 class="about__section-title-left">Who We Are</h2>
36+
<div class="row">
37+
<div class="col-md-8 offset-md-2">
38+
<img class="about__paragraph-img-main rounded" src="../static/images/about/python_sprints_decoded_673x411px.JPG" alt="Focused on quality">
39+
<h2 class="about__paragraph-title-dark">Python Sprints Decoded</h2>
40+
<hr class="about__divider-right">
41+
<p class="about__paragraph-dark">
42+
Python Sprints is a non for profit group of like minded programmers who care about making open source projects better.
43+
We believe in sharing our skills for free to earn our good karma. If you are devoted to a particular open source project, please let us know, we could make a sprint dedicated to it!
44+
Inclusion is in the nature of our group and we want to make sure that no one is underrepresented. All people are welcome.
45+
</p>
46+
<h2 class="about__paragraph-title-dark-left">How It Started?</h2>
47+
<hr class="about__divider-left">
48+
<p class="about__paragraph-dark">
49+
Our group was founded in October 2017. As all things in life the beginnings were humble with only a handful of people collaborating but the word quickly spread and now we have nearly 600 members and counting.
50+
</p>
51+
</div>
52+
</div>
4253
</div>
4354
</div>
44-
<div class="row">
45-
<div class="col-12">
46-
<h2 class="about__title">How It Started?</h2>
47-
<p class="about__paragraph-dark">
48-
Our group was founded in October 2017. As all things in life the beginnings were humble with only a handful of people collaborating but the word quickly spread and now we have above 500 members and counting.
49-
</p>
55+
</div>
56+
57+
58+
59+
60+
<div class="about__img-container col-md-12">
61+
62+
<div class="about__img-top-container">
63+
<div class="about__img-top-title-container">
64+
<h2 class="about__img-top-title">Passion</h2>
5065
</div>
5166
</div>
52-
<div class="row">
53-
<div class="col-12">
54-
<h2 class="about__title">What Our Meetings Look Like?</h2>
55-
<p class="about__paragraph-dark">
56-
Usually there is a subject advertised well ahead of the time with clear setup instructions so that everyone can come prepared.
57-
But you should not worry if setting up is difficult - part of our creed is to help new people get introduced into the world of open source.
58-
Help will be provided even if it is just creating a git repository and learning how to contribute. It is all part of growing our group organically and all people are welcome!
59-
All the coding aside there is always time for joyful banter with pizza and beers to hand.
60-
</p>
67+
68+
69+
<div class="about__img-bot-container">
70+
<div class="about__img-bot-title-container">
71+
<h2 class="about__img-bot-title">Dedication</h2>
6172
</div>
6273
</div>
6374
</div>
6475

65-
76+
<div class="about__container container-fluid">
77+
<div class="row">
78+
<div class="col-12 no-padding-x">
79+
<h2 class="about__section-title-right">Our Way</h2>
80+
<div class="row">
81+
<div class="col-md-8 offset-md-2">
82+
<img class="about__paragraph-img-main rounded" src="../static/images/about/teamwork_673x411px.JPG" alt="Teamwork for the win">
83+
<h2 class="about__paragraph-title-dark">Teamwork Rules</h2>
84+
<hr class="about__divider-right">
85+
<p class="about__paragraph-dark">
86+
We believe in helping each other to bring the knowledge in the group up to the highest possible level. Anyone can ask a question and expect aid in their problems during the session. We have people using all kinds of OSes, editors etc. and we all sometimes struggle but a solution is just ask someone else to have a look.
87+
</p>
88+
<h2 class="about__paragraph-title-dark-left">What Our Meetings Look Like?</h2>
89+
<hr class="about__divider-left">
90+
<p class="about__paragraph-dark">
91+
Usually there is a subject advertised well ahead of the time with clear setup instructions so that everyone can come prepared.
92+
But you should not worry if setting up is difficult - part of our creed is to help new people get introduced into the world of open source.
93+
Help will be provided even if it is just creating a git repository and learning how to contribute. It is all part of growing our group organically and all people are welcome!
94+
All the coding aside there is always time for a joyful banter, sharing work and life experiences with pizza and beers to hand.
95+
</p>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
66101
</section>

_pages/03_events.html

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,19 @@ <h2 class="events-page__page-subtitle">Find Out What We Do</h2>
2727
</div>
2828
</div>
2929

30-
<div class="events-page__outer-container container-fluid">
31-
<div class="row">
32-
<div class="col-12">
33-
<h2 class="events-page__upcoming-section-title">Upcoming Events</h2>
34-
{% include events_array_generator.html future_events = true %}
35-
{% for post in posts %}
36-
{% include event_layout.html post = post %}
37-
{% endfor %}
30+
{% include events_array_generator.html future_events = true %}
31+
{% if posts.size > 0 %}
32+
<div class="events-page__outer-container container-fluid">
33+
<div class="row">
34+
<div class="col-12">
35+
<h2 class="events-page__upcoming-section-title">Upcoming Events</h2>
36+
{% for post in posts %}
37+
{% include event_layout.html post = post %}
38+
{% endfor %}
39+
</div>
3840
</div>
3941
</div>
40-
</div>
42+
{% endif %}
4143

4244
<div class="events-page__outer-container container-fluid">
4345
<div class="row">

_sass/about.scss

Lines changed: 146 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,160 @@
2626
}
2727

2828
.about__container {
29-
max-width: 80%;
29+
max-width: 70%;
3030
}
3131

32-
.about__title {
33-
@extend .title-dark;
32+
.about__section-title-left {
33+
@extend .section-title;
34+
margin-top: 10%;
35+
margin-bottom: 10%;
36+
text-align: left;
37+
}
38+
39+
.about__section-title-right {
40+
@extend .about__section-title-left;
41+
text-align: right;
3442
margin-top: 5%;
43+
}
44+
45+
46+
.about__title-container {
47+
}
48+
49+
.about__paragraph-title-dark {
50+
@extend .title-dark;
51+
font-size: 1.65em;
52+
text-align: right;
53+
}
54+
55+
.about__paragraph-title-dark-left {
56+
@extend .title-dark;
57+
font-size: 1.65em;
58+
text-align: left;
59+
}
60+
61+
.about__paragraph-title-light {
62+
@extend .title-light;
3563
font-size: 1.65em;
3664
}
3765

66+
.about__divider-right {
67+
margin-right: 0;
68+
width: 50%;
69+
}
70+
71+
.about__divider-left {
72+
margin-left: 0;
73+
width: 50%;
74+
}
75+
3876
.about__paragraph-dark {
3977
@extend .paragraph-dark;
78+
text-align: justify;
79+
text-justify: inter-word;
80+
padding-left: 0;
81+
padding-right: 0;
82+
}
83+
84+
.about__paragraph-light {
85+
@extend .paragraph-light;
86+
text-align: justify;
87+
text-justify: inter-word;
4088
padding-left: 0;
4189
padding-right: 0;
90+
}
91+
92+
.about__paragraph-img-main {
93+
width: 35%;
94+
float: left;
95+
margin-right: 1em;
96+
margin-bottom: 0.5em;
97+
}
98+
99+
.about__img-container {
100+
position: relative;
101+
padding-bottom: 50%;
102+
margin-top: 10%;
103+
}
104+
105+
.about__img-top-container {
106+
position: absolute;
107+
top: 0;
108+
right: 15%;
109+
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/about/top_img_passion_964x643px.JPG") no-repeat top center;
110+
background-size: cover;
111+
overflow: hidden;
112+
width: 40%;
113+
height: 50%;
114+
border: $old-white 2px groove;
115+
border-radius: 5px;
116+
}
117+
118+
.about__img-top-title-container {
119+
position: relative;
120+
top: 0;
121+
z-index: 2;
122+
&::after {
123+
position: absolute;
124+
top: 0;
125+
width: 100%;
126+
height: 100%;
127+
content: "";
128+
display: block;
129+
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/about/top_img_passion_964x643px.JPG") no-repeat top center;
130+
background-size: cover;
131+
filter: blur(2px);
132+
z-index: -1;
133+
}
134+
}
135+
136+
.about__img-top-title {
137+
@extend .about__paragraph-title-light;
138+
font-size: 1.25em;
139+
text-align: center;
140+
margin-bottom: 0;
141+
line-height: 1.25em;
142+
}
143+
144+
@media (min-width: 567px){
145+
.about__img-top-title {
146+
font-size: 1.5em;
147+
line-height: 1.5em;
148+
}
149+
}
150+
151+
.about__img-bot-container {
152+
position: absolute;
153+
top: 40%;
154+
left: 15%;
155+
width: 40%;
156+
height: 50%;
157+
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/about/bot_img_dedication_964x643px.JPG") no-repeat bottom center;
158+
background-size: cover;
159+
overflow: hidden;
160+
border: $old-white 2px groove;
161+
border-radius: 5px;
162+
}
163+
164+
.about__img-bot-title-container {
165+
position: absolute;
166+
width: 100%;
167+
bottom: 0;
168+
z-index: 2;
169+
&::after {
170+
position: absolute;
171+
top: 0;
172+
width: 100%;
173+
height: 100%;
174+
content: "";
175+
display: block;
176+
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/about/bot_img_dedication_964x643px.JPG") no-repeat bottom center;
177+
background-size: cover;
178+
filter: blur(2px);
179+
z-index: -1;
180+
}
181+
}
182+
183+
.about__img-bot-title {
184+
@extend .about__img-top-title
42185
}

_sass/base.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ $title-dark: #072948;
3131
$subtitle: #A55605;
3232
$subtitle-event: #035E9A;
3333
$paragraph-dark: #000000;
34+
$paragraph-light: #F0F8FF;
3435

3536
$link: #035E9A;
3637
$link-hover: #A55605;

_sass/style.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -515,7 +515,8 @@ a {
515515
}
516516

517517
.services__content {
518-
@extend .paragraph-dark
518+
@extend .paragraph-dark;
519+
margin-top: 0;
519520
}
520521

521522
@media (min-width: 768px) {

_sass/typography.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,14 @@
160160
padding-right: 5%;
161161
}
162162

163+
.paragraph-light {
164+
font-size: 1em;
165+
color: $paragraph-light;
166+
font-family: 'Playfair Display', serif;
167+
padding-left: 5%;
168+
padding-right: 5%;
169+
}
170+
163171
.footer-font {
164172
text-align: center;
165173
font-family: 'Playfair Display', serif;

static/credits.txt

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,6 @@
1010
contact photo: Photo by Alejandro Escamilla on Unsplash / Photo by NordWood Themes on Unsplash
1111
contact: <a href='https://www.freepik.com/free-photo/blank-business-cards-and-cup-of-coffee-on-wooden-table-corporate-stationary-branding-mock-up_1187395.htm'>Designed by Freepik</a>
1212

13-
events photo: Photo by Alex Kotliarskyi on Unsplash
13+
events photo: Photo by Alex Kotliarskyi on Unsplash
14+
15+
passion photo: Photo by Jefferson Santos on Unsplash
Loading
Loading
59.3 KB
Loading
Loading

0 commit comments

Comments
 (0)