Skip to content

Commit 9e07a02

Browse files
xmnlabxmnlab
committed
fix home page
1 parent 83408c8 commit 9e07a02

File tree

5 files changed

+298
-57
lines changed

5 files changed

+298
-57
lines changed

‎mkdocs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ theme:
1717

1818
extra_css:
1919
- css/base.css
20+
- css/blog.css
2021
- css/code.css
2122
- css/content.css
2223
- css/footer.css
24+
- css/home.css
2325
- css/nav.css
2426
- css/search.css
2527
- css/tokens.css

‎theme/css/home.css‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
/* ---------- Hero ---------- */
2+
.home-hero{
3+
position: relative;
4+
isolation: isolate;
5+
background-image:
6+
var(--hero-overlay, linear-gradient(to bottom right, rgba(0,0,0,.55), rgba(0,0,0,.35))),
7+
var(--hero-image);
8+
background-size: cover;
9+
background-position: center;
10+
color: #fff;
11+
border-radius: var(--radius, 12px);
12+
overflow: hidden;
13+
margin-top: 1rem;
14+
}
15+
[data-bs-theme="light"] .home-hero{
16+
--hero-overlay: linear-gradient(to bottom right, rgba(0,0,0,.55), rgba(0,0,0,.30));
17+
}
18+
[data-bs-theme="dark"] .home-hero{
19+
--hero-overlay: linear-gradient(to bottom right, rgba(0,0,0,.60), rgba(0,0,0,.45));
20+
}
21+
.home-hero .eyebrow{
22+
letter-spacing: .08em;
23+
text-transform: uppercase;
24+
opacity: .85;
25+
}
26+
.home-hero h1{
27+
text-wrap: balance;
28+
}
29+
.home-hero .lead{
30+
max-width: 52ch;
31+
opacity: .9;
32+
}
33+
.hero-bullets{
34+
list-style: none; padding: 0; margin: 0;
35+
display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
36+
opacity: .95;
37+
}
38+
.hero-bullets .dot{
39+
display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
40+
background: var(--brand, #4ea1ff); margin-right: .5rem;
41+
transform: translateY(-.1rem);
42+
}
43+
44+
/* ---------- Cards / tiles ---------- */
45+
.home-card{
46+
background: var(--surface, rgba(255,255,255,.06));
47+
border: 1px solid var(--card-border, rgba(255,255,255,.12));
48+
border-radius: var(--radius, 12px);
49+
padding: 1.25rem 1.25rem;
50+
}
51+
[data-bs-theme="light"] .home-card{
52+
--surface: #fff;
53+
--card-border: rgba(0,0,0,.08);
54+
}
55+
.home-tile{
56+
display: block;
57+
text-decoration: none;
58+
color: inherit;
59+
border-radius: var(--radius, 12px);
60+
border: 1px solid var(--card-border, rgba(255,255,255,.12));
61+
background: var(--surface, rgba(255,255,255,.06));
62+
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
63+
}
64+
.home-tile:hover{
65+
transform: translateY(-2px);
66+
box-shadow: 0 10px 24px rgba(0,0,0,.15);
67+
border-color: var(--brand, #4ea1ff);
68+
}
69+
.home-tile .tile-body{ padding: 1.25rem 1.25rem; }
70+
71+
/* ---------- Section title ---------- */
72+
.section-title{
73+
margin-bottom: .25rem;
74+
}
75+
76+
/* ---------- Logo grid ---------- */
77+
.logo-grid{
78+
--cols: 6;
79+
list-style: none; padding: 0; margin: 0;
80+
display: grid; gap: 1rem;
81+
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
82+
}
83+
@media (max-width: 1200px){ .logo-grid{ --cols: 5; } }
84+
@media (max-width: 992px){ .logo-grid{ --cols: 4; } }
85+
@media (max-width: 768px){ .logo-grid{ --cols: 3; } }
86+
@media (max-width: 576px){ .logo-grid{ --cols: 2; } }
87+
88+
.logo-item{
89+
border: 1px solid var(--card-border, rgba(255,255,255,.12));
90+
background: var(--surface, rgba(255,255,255,.04));
91+
border-radius: var(--radius, 12px);
92+
padding: .75rem .75rem 1rem;
93+
text-align: center;
94+
transition: transform .12s ease, border-color .12s ease;
95+
}
96+
.logo-item:hover{
97+
transform: translateY(-2px);
98+
border-color: var(--brand, #4ea1ff);
99+
}
100+
.logo-item img{
101+
max-width: 100%;
102+
max-height: 52px;
103+
object-fit: contain;
104+
filter: saturate(.95);
105+
}
106+
.logo-caption{
107+
display: block;
108+
font-size: .85rem;
109+
opacity: .8;
110+
margin-top: .35rem;
111+
}
112+
113+
/* ---------- CTA banner ---------- */
114+
.cta-banner{
115+
display: flex; align-items: center; justify-content: space-between;
116+
gap: 1rem; flex-wrap: wrap;
117+
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
118+
border: 1px solid var(--card-border, rgba(255,255,255,.12));
119+
border-radius: var(--radius, 12px);
120+
padding: 1.25rem 1.25rem;
121+
}
122+
[data-bs-theme="light"] .cta-banner{
123+
background: linear-gradient(180deg, #ffffff, #fafafa);
124+
}
125+
126+
/* ---------- Fix “Back to top” button shape (site-wide safe) ---------- */
127+
.to_top{
128+
width: 48px; height: 48px;
129+
border-radius: 50%;
130+
display: grid; place-items: center;
131+
backdrop-filter: blur(10px);
132+
-webkit-backdrop-filter: blur(10px);
133+
background: rgba(0,0,0,.35);
134+
box-shadow: 0 6px 20px rgba(0,0,0,.25);
135+
}
136+
[data-bs-theme="light"] .to_top{ background: rgba(255,255,255,.85); }
137+
.to_top .icon{ width: 22px; height: 22px; }
138+
139+
/* ===================== Light-mode contrast boost ===================== */
140+
/* Stronger borders, solid white surfaces, and a subtle elevation */
141+
[data-bs-theme="light"] .home-card,
142+
[data-bs-theme="light"] .home-tile,
143+
[data-bs-theme="light"] .logo-item,
144+
[data-bs-theme="light"] .cta-banner{
145+
--surface: #ffffff;
146+
--card-border: rgba(0,0,0,.14); /* was ~.08 */
147+
background-color: #ffffff;
148+
border-color: rgba(0,0,0,.14);
149+
box-shadow: 0 2px 8px rgba(0,0,0,.06);
150+
}
151+
152+
/* Hover elevation + clearer edge */
153+
[data-bs-theme="light"] .home-tile:hover,
154+
[data-bs-theme="light"] .home-card:hover,
155+
[data-bs-theme="light"] .logo-item:hover{
156+
box-shadow: 0 10px 24px rgba(0,0,0,.12);
157+
border-color: rgba(0,0,0,.22);
158+
}
159+
160+
/* Type color tweaks for better legibility on white */
161+
[data-bs-theme="light"] .section-title{ color:#111827; } /* near-black */
162+
[data-bs-theme="light"] .home-card,
163+
[data-bs-theme="light"] .home-tile .tile-body{ color:#24292f; } /* body text */
164+
[data-bs-theme="light"] .cta-banner{
165+
background: linear-gradient(180deg, #ffffff, #f7f7f8); /* more contrast */
166+
}
167+
168+
/* (optional) tone the “secondary” copy up a bit only inside home sections */
169+
[data-bs-theme="light"] section .text-secondary{ color:#4b5563 !important; }

‎theme/home.html‎

Lines changed: 127 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,142 @@
11
{% extends "base.html" %}
22

3+
{% set hero_image = page.meta.hero_image or "/images/home/header.jpg" %}
4+
{% set hero_title = page.meta.hero_title or "Open collaboration for research, education & social good." %}
5+
{% set hero_blurb = page.meta.hero_blurb or "Open Science Labs helps people learn, build, and contribute to impactful open-source projects — mentored by a welcoming community." %}
6+
{% set cta_primary = page.meta.cta_primary or {"label":"Explore Projects", "href":"/projects/"} %}
7+
{% set cta_secondary= page.meta.cta_secondary or {"label":"Get Involved", "href":"/opportunities/"} %}
8+
39
{% block header_extra %}
4-
<style>
5-
footer.citation * {
6-
margin-top: 20px;
7-
font-size: 10px !important;
8-
font-style: italic !important;
9-
}
10-
.welcome-section {
11-
background-image: url("/images/home/header.png");
12-
background-size: cover;
13-
color: white;
14-
padding: 100px 0;
15-
}
10+
<!-- Home-only CSS -->
11+
<link rel="stylesheet" href="/css/home.css">
12+
{% endblock header_extra %}
1613

17-
.welcome-section p {
18-
color: #333333 !important;
19-
}
14+
{% block content %}
2015

21-
.overlay {
22-
background-color: rgba(
23-
255,
24-
255,
25-
255,
26-
0.7
27-
); /* Black background with 50% opacity */
28-
color: white;
29-
padding: 100px 0;
30-
}
16+
<!-- ===================== HERO ===================== -->
17+
<section class="home-hero" style="--hero-image: url('{{ hero_image }}')">
18+
<div class="container-xxl">
19+
<div class="row align-items-center min-vh-50 py-5">
20+
<div class="col-12 col-lg-7">
21+
<p class="eyebrow mb-2">Welcome to</p>
22+
<h1 class="display-4 fw-bold mb-3">{{ hero_title }}</h1>
23+
<p class="lead mb-4">{{ hero_blurb }}</p>
3124

32-
.card-footer {
33-
background-color: #ffffff!important;
34-
}
35-
</style>
36-
{% endblock header_extra %}
25+
<div class="d-flex gap-3 flex-wrap">
26+
<a class="btn btn-primary btn-lg shadow-sm" href="{{ cta_primary.href }}">{{ cta_primary.label }}</a>
27+
<a class="btn btn-outline-light btn-lg shadow-sm" href="{{ cta_secondary.href }}">{{ cta_secondary.label }}</a>
28+
</div>
3729

38-
{% block content %}
39-
<div class="pt-5"></div>
40-
{{ page.content }}
30+
<ul class="hero-bullets mt-4">
31+
<li><span class="dot"></span> Mentored OSS contributions</li>
32+
<li><span class="dot"></span> Programs & study groups</li>
33+
<li><span class="dot"></span> A supportive global community</li>
34+
</ul>
35+
</div>
36+
</div>
37+
</div>
38+
</section>
4139

42-
<!-- Partners -->
43-
<section id="partnership" class="p-5">
44-
<div class="container">
45-
<h2 class="text-center">Our Partners</h2>
46-
<p>
47-
We welcome partnerships with organizations and projects in the
48-
realms of research, education, open source, and social good.
49-
By collaborating with us, we can collectively enhance an ecosystem
50-
that is more open, transparent, and inclusive.
51-
</p>
52-
<div class="card-columns partners pb-3">
53-
{% for partner in page.meta["partners"] %}
54-
<div class="card m-0 p-0">
55-
<div class="card-body m-0 text-center">
56-
<a href="{{ partner.url }}">
57-
<img
58-
src="{{ partner.logo }}"
59-
alt="{{ partner.name }}"
60-
/>
61-
</a>
40+
<!-- ===================== MISSION / GOALS ===================== -->
41+
<section class="py-5">
42+
<div class="container-xxl">
43+
<div class="row g-4">
44+
<div class="col-12 col-lg-6">
45+
<div class="home-card h-100">
46+
<h2 class="h4 fw-semibold mb-2">Our Mission</h2>
47+
<p class="mb-0">
48+
At Open Science Labs (OSL), we are dedicated to advancing the scientific
49+
research through collaboration, innovation, and education. Our mission
50+
is to create a more inclusive, transparent, and accessible scientific community.
51+
</p>
6252
</div>
63-
<div class="card-footer m-0">
64-
<a href="{{ partner.url }}">
65-
<h5 class="card-title text-dark"><strong>{{ partner.name }}</strong></h5>
66-
</a>
53+
</div>
54+
<div class="col-12 col-lg-6">
55+
<div class="home-card h-100">
56+
<h2 class="h4 fw-semibold mb-2">Our Goals</h2>
57+
<p class="mb-0">
58+
To empower researchers, educators, and students by providing resources,
59+
tools, and a collaborative platform for sharing knowledge and advancing
60+
open science initiatives.
61+
</p>
6762
</div>
6863
</div>
64+
</div>
65+
</div>
66+
</section>
67+
68+
<!-- ===================== INITIATIVES ===================== -->
69+
<section class="py-5">
70+
<div class="container-xxl">
71+
<h2 class="section-title">Our Main Initiatives</h2>
72+
<p class="text-secondary mb-4">
73+
Discover our programs spanning open-source projects, internships, and learning tracks.
74+
</p>
75+
76+
<div class="row g-4">
77+
<div class="col-12 col-md-6 col-xl-4">
78+
<a class="home-tile" href="/projects/">
79+
<div class="tile-body">
80+
<h3 class="h5 mb-1">Projects</h3>
81+
<p class="mb-0">Incubation, affiliation and a curated list of OSS projects.</p>
82+
</div>
83+
</a>
84+
</div>
85+
86+
<div class="col-12 col-md-6 col-xl-4">
87+
<a class="home-tile" href="/opportunities/">
88+
<div class="tile-body">
89+
<h3 class="h5 mb-1">Opportunities</h3>
90+
<p class="mb-0">Internships (OSS, research seed, GSoC) and contributor guides.</p>
91+
</div>
92+
</a>
93+
</div>
94+
95+
<div class="col-12 col-md-6 col-xl-4">
96+
<a class="home-tile" href="/learning/">
97+
<div class="tile-body">
98+
<h3 class="h5 mb-1">Learning</h3>
99+
<p class="mb-0">Events, study groups and resources for continuous growth.</p>
100+
</div>
101+
</a>
102+
</div>
103+
</div>
104+
</div>
105+
</section>
106+
107+
<!-- ===================== PARTNERS ===================== -->
108+
<section class="py-5">
109+
<div class="container-xxl">
110+
<h2 class="section-title">Our Partners</h2>
111+
<p class="text-secondary mb-4">
112+
We collaborate with organizations across research, education and social good.
113+
</p>
114+
115+
<ul class="logo-grid">
116+
{% for partner in page.meta["partners"] %}
117+
<li class="logo-item">
118+
<a href="{{ partner.url }}" target="_blank" rel="noopener">
119+
<img src="{{ partner.logo }}" alt="{{ partner.name }}">
120+
<span class="logo-caption">{{ partner.name }}</span>
121+
</a>
122+
</li>
69123
{% endfor %}
124+
</ul>
125+
</div>
126+
</section>
127+
128+
<!-- ===================== FINAL CTA ===================== -->
129+
<section class="py-5">
130+
<div class="container-xxl">
131+
<div class="cta-banner">
132+
<div>
133+
<h3 class="h4 mb-1">Ready to join the community?</h3>
134+
<p class="mb-0 text-secondary">Contribute to projects, mentor newcomers, or start a study group.</p>
135+
</div>
136+
<div class="d-flex gap-3">
137+
<a class="btn btn-primary" href="/opportunities/">Get Involved</a>
138+
<a class="btn btn-outline-light" href="/about/">Learn More</a>
139+
</div>
70140
</div>
71141
</div>
72142
</section>

‎theme/images/home/header.jpg‎

2.05 MB
Loading

‎theme/images/home/header.png‎

-1.76 MB
Binary file not shown.

0 commit comments

Comments
 (0)