Skip to content

Commit e9f4768

Browse files
eeholmeseeholmes
authored
Merge pull request #11 from eeholmes/eeholmes-patch-1
Update main.css
2 parents 0ee9cc6 + 3b1a89e commit e9f4768

4 files changed

Lines changed: 340 additions & 13 deletions

File tree

‎cookiecutter.yaml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,20 @@ _copy_without_render:
6363
- assets
6464
_extensions:
6565
- jinja_markdown.MarkdownExtension
66+
67+
i18n:
68+
es:
69+
about_title: "Acerca de OceanForge"
70+
about_description: |
71+
Un entorno compartido, nativo de la nube, para científicos del océano — diseñado para usuarios de Python y R y para apoyar la capacitación en flujos de trabajo modernos de datos oceánicos.<br><br>
72+
A medida que la ciencia oceánica entra en una era de flujos de datos masivos y continuos — que abarcan teledetección, sistemas de observación autónomos y *in situ*, grandes salidas de modelos y acústica pasiva — OceanForge ofrece un entorno de cómputo preconfigurado para capacitaciones y hackatones de ciencia de datos oceánicos.
73+
banner:
74+
links:
75+
- url: ''
76+
title: Documentación
77+
new_window: false
78+
style: btn-primary
79+
- url: ''
80+
title: JupyterHub
81+
new_window: false
82+
style: btn-primary

‎{{ cookiecutter.repo_directory }}/assets/css/main.css‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,21 @@ header.header {
6363
.hero-panel-text {
6464
background-color: #000;
6565
color: #fff;
66+
67+
/* layout */
6668
display: flex;
6769
align-items: center;
70+
justify-content: center;
6871
padding: 3rem;
6972

70-
/* IMPORTANT: ensure text panel is above mask */
73+
/* ensure panel sits above mask */
7174
position: relative;
7275
z-index: 3;
7376
}
7477

78+
/* Center + constrain content */
7579
.hero-panel-inner {
80+
text-align: center;
7681
max-width: 560px;
7782
}
7883

@@ -110,9 +115,24 @@ header.header {
110115
margin-bottom: 0.4rem;
111116
}
112117

118+
.hero-panel-cta {
119+
display: flex;
120+
justify-content: center;
121+
gap: 0.75rem;
122+
flex-wrap: nowrap; /* keep buttons side-by-side on phones */
123+
}
124+
125+
/* Button sizing */
113126
.hero-panel-cta .btn {
114-
margin-right: 0.5rem;
115-
margin-bottom: 0.5rem;
127+
white-space: nowrap; /* prevent awkward wrapping inside buttons */
128+
}
129+
130+
/* Mobile button sizing */
131+
@media (max-width: 420px) {
132+
.hero-panel-cta .btn {
133+
padding: 0.6rem 1rem;
134+
font-size: 0.9rem;
135+
}
116136
}
117137

118138
/* Right panel image */
@@ -304,3 +324,23 @@ header.header {
304324
}
305325
}
306326

327+
/* =========================================================
328+
Language switch (EN | ES)
329+
========================================================= */
330+
331+
.lang-switch {
332+
font-size: 0.9rem;
333+
font-weight: 600;
334+
letter-spacing: 0.05em;
335+
}
336+
337+
.lang-switch a {
338+
color: #ffffff;
339+
opacity: 0.85;
340+
text-decoration: none;
341+
}
342+
343+
.lang-switch a:hover {
344+
opacity: 1;
345+
text-decoration: underline;
346+
}

‎{{ cookiecutter.repo_directory }}/es/index.html‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<title>{{ cookiecutter.name }}</title>
6+
7+
<!-- Meta -->
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<meta name="description" content="{{ cookiecutter.banner.description }}">
12+
<meta name="author" content="{{ cookiecutter.name }}">
13+
<link rel="shortcut icon" href="{{ cookiecutter.favicon }}">
14+
15+
<!-- Google Font -->
16+
<link
17+
href="https://fonts.googleapis.com/css?family=Montserrat:600,700,800|Roboto:300,400,700&display=swap"
18+
rel="stylesheet">
19+
<!-- FontAwesome JS-->
20+
<script defer src="assets/fontawesome/js/all.min.js"></script>
21+
<!-- Theme CSS -->
22+
<link id="theme-style" rel="stylesheet" href="assets/css/theme.css">
23+
<link rel="stylesheet" href="assets/css/main.css">
24+
</head>
25+
26+
<body>
27+
<header id="header" class="header fixed-top">
28+
<div class="branding">
29+
<div class="container-fluid">
30+
<nav class="main-nav navbar navbar-expand-lg">
31+
32+
<div class="lang-switch ms-auto">
33+
<a href="../index.html">EN</a>
34+
</div>
35+
36+
{# No top-left brand/logo #}
37+
38+
{%- if cookiecutter.apply is defined %}
39+
<div class="navbar-btn order-lg-2">
40+
<a class="btn btn-secondary"
41+
{%- if cookiecutter.apply.url is defined and cookiecutter.apply.url %}
42+
href="{{ cookiecutter.apply.url }}"
43+
target="_blank"
44+
{%- endif %}
45+
>
46+
{{ cookiecutter.apply.title }}
47+
</a>
48+
</div>
49+
{%- endif %}
50+
51+
<button class="navbar-toggler" type="button"
52+
data-bs-toggle="collapse" data-bs-target="#navigation"
53+
aria-controls="navigation" aria-expanded="false"
54+
aria-label="Toggle navigation">
55+
<span class="navbar-toggler-icon"></span>
56+
</button>
57+
58+
<div id="navigation"
59+
class="navbar-collapse collapse justify-content-lg-end me-lg-3">
60+
<ul class="nav navbar-nav">
61+
<li class="nav-item">
62+
<a class="nav-link scrollto" href="#about-section">
63+
About
64+
</a>
65+
</li>
66+
<li class="nav-item">
67+
<a class="nav-link scrollto" href="#sponsors-section">
68+
Sponsors and Partners
69+
</a>
70+
</li>
71+
</ul>
72+
</div>
73+
</nav>
74+
<!--//main-nav-->
75+
</div>
76+
</div>
77+
<!--//branding-->
78+
</header>
79+
80+
<div id="hero-block" class="hero-block">
81+
<div id="hero-carousel"
82+
class="hero-carousel carousel slide carousel-fade"
83+
data-bs-ride="carousel"
84+
data-bs-interval="{{ cookiecutter.banner.interval_ms | default(5000) }}"
85+
data-bs-pause="false"
86+
data-bs-touch="false">
87+
88+
<div class="carousel-inner">
89+
90+
{%- if cookiecutter.banner.image is defined and cookiecutter.banner.image|length > 0 %}
91+
{%- for img in cookiecutter.banner.image %}
92+
<div class="carousel-item {% if loop.first %}active{% endif %}">
93+
<div class="hero-split" aria-hidden="true">
94+
<!-- Left: black panel -->
95+
<div class="hero-panel-text">
96+
<div class="hero-panel-inner">
97+
<!-- <h1 class="hero-panel-title">{{ cookiecutter.name }}</h1> -->
98+
<div class="hero-logo-wrap">
99+
<img
100+
src="assets/images/logos/oceanforge.png"
101+
alt="{{ cookiecutter.name }} logo"
102+
class="hero-logo"
103+
>
104+
</div>
105+
<div class="hero-panel-desc">
106+
{{ cookiecutter.banner.description }}
107+
</div>
108+
109+
{%- if cookiecutter.banner.links is defined and cookiecutter.banner.links %}
110+
<div class="hero-panel-cta">
111+
{%- set banner_links = cookiecutter.i18n.es.banner.links
112+
if cookiecutter.i18n is defined
113+
and cookiecutter.i18n.es is defined
114+
and cookiecutter.i18n.es.banner is defined
115+
and cookiecutter.i18n.es.banner.links is defined
116+
else cookiecutter.banner.links %}
117+
118+
{%- for link in banner_links %}
119+
<a class="btn {{ link.style }} btn-lg"
120+
href="{{ link.url }}"
121+
{{ 'target="_blank"' if link.new_window else '' }}
122+
>
123+
{{ link.title }}
124+
</a>
125+
{%- endfor %}
126+
</div>
127+
{%- endif %}
128+
</div>
129+
</div>
130+
131+
<!-- Right: rotating image -->
132+
<div class="hero-panel-image" style="background-image: url('{{ img }}');"></div>
133+
</div>
134+
</div>
135+
{%- endfor %}
136+
{%- else %}
137+
<div class="carousel-item active">
138+
<div class="hero-split" aria-hidden="true">
139+
<div class="hero-panel-text">
140+
<div class="hero-panel-inner">
141+
<h1 class="hero-panel-title">{{ cookiecutter.name }}</h1>
142+
<div class="hero-panel-desc">{{ cookiecutter.banner.description }}</div>
143+
144+
{%- if cookiecutter.banner.links is defined and cookiecutter.banner.links %}
145+
<div class="hero-panel-cta">
146+
{%- for link in cookiecutter.banner.links %}
147+
<a class="btn {{ link.style }} btn-lg"
148+
href="{{ link.url }}"
149+
{{ 'target="_blank"' if link.new_window else '' }}>
150+
{{ link.title }}
151+
</a>
152+
{%- endfor %}
153+
</div>
154+
{%- endif %}
155+
</div>
156+
</div>
157+
158+
<div class="hero-panel-image" style="background-color: #141c25;"></div>
159+
</div>
160+
</div>
161+
{%- endif %}
162+
163+
</div>
164+
{# No carousel arrows/controls #}
165+
</div>
166+
167+
<div class="hero-block-mask"></div>
168+
169+
<div class="container">
170+
<div class="hero-text-block">
171+
<!-- Hidden via main.css; kept for theme compatibility -->
172+
</div>
173+
</div>
174+
</div>
175+
<!--//hero-block-->
176+
177+
<section id="about-section" class="about-section section theme-bg-light">
178+
<div class="container">
179+
<h3 class="section-heading text-center mb-3">
180+
{{ cookiecutter.i18n.es.about_title }}
181+
</h3>
182+
<div class="section-intro single-col-max mx-auto mb-3">
183+
{{ cookiecutter.i18n.es.about_description }}
184+
</div>
185+
</div>
186+
187+
{%- if cookiecutter.tools is defined
188+
and cookiecutter.tools["items"] is defined
189+
and cookiecutter.tools["items"]|length > 0 %}
190+
<div class="media-block theme-bg-primary py-5">
191+
<div class="container">
192+
<div class="tools-logos d-flex flex-wrap justify-content-center align-items-center">
193+
194+
{%- for tool in cookiecutter.tools["items"] %}
195+
<div class="tool-logo">
196+
<img
197+
src="{{ tool.logo }}"
198+
alt="{{ tool.name }}"
199+
title="{{ tool.name }}"
200+
loading="lazy"
201+
>
202+
</div>
203+
{%- endfor %}
204+
205+
</div>
206+
207+
</div>
208+
</div>
209+
{%- endif %}
210+
211+
</section>
212+
<!--//about-section-->
213+
214+
{%- if cookiecutter.sponsors is defined and cookiecutter.sponsors %}
215+
<section id="sponsors-section" class="sponsors-section section theme-bg-light">
216+
<div class="container">
217+
<h3 class="section-heading text-center mb-3">Our Sponsors and Partners</h3>
218+
219+
{%- if cookiecutter.sponsors.description is defined and cookiecutter.sponsors.description %}
220+
<div class="section-intro text-center single-col-max mx-auto mb-5">
221+
{{ cookiecutter.sponsors.description }}
222+
</div>
223+
{%- endif %}
224+
225+
{%- if cookiecutter.sponsors.organizations is defined and cookiecutter.sponsors.organizations|length > 0 %}
226+
<div class="row logos justify-content-center">
227+
{%- for org in cookiecutter.sponsors.organizations %}
228+
<div class="logo-item col-6 col-md-4 col-lg-2">
229+
{%- if org.website %}
230+
<a href="{{ org.website }}" target="_blank"><img
231+
src="{{ org.logo_url }}"
232+
alt="{{ org.name }}"></a>
233+
{%- else %}
234+
<img src="{{ org.logo_url }}" alt="{{ org.name }}">
235+
{%- endif %}
236+
</div>
237+
{%- endfor %}
238+
</div>
239+
{%- endif %}
240+
</div>
241+
</section>
242+
{%- endif %}
243+
244+
<footer class="footer py-3 theme-bg-primary">
245+
<div class="container text-center">
246+
247+
<small class="copyright">
248+
©
249+
<script type="text/javascript">
250+
document.write(new Date().getFullYear());
251+
</script>
252+
{{ cookiecutter.name }}
253+
254+
{%- if cookiecutter.footer.social is defined and cookiecutter.footer.social|length > 0 %}
255+
<span class="footer-socials ms-3">
256+
{%- for soc in cookiecutter.footer.social %}
257+
<a href="{{ soc.link }}" class="ms-2" aria-label="{{ soc.icon }}">
258+
<i class="fab fa-{{ soc.icon }}"></i>
259+
</a>
260+
{%- endfor %}
261+
</span>
262+
{%- endif %}
263+
</small>
264+
</div>
265+
</footer>
266+
267+
268+
<!-- Javascript -->
269+
<script defer src="assets/plugins/popper.min.js"></script>
270+
<script defer src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
271+
<script defer src="assets/plugins/smoothscroll.min.js"></script>
272+
<script defer src="assets/plugins/gumshoe/gumshoe.polyfills.min.js"></script>
273+
<script defer src="assets/js/main.js"></script>
274+
275+
</body>
276+
</html>

0 commit comments

Comments
 (0)