Skip to content

Commit a4e79c8

Browse files
siliataidersiliataider
committed
chore: initial commit and setup of the ROOT Open Projects site
1 parent 8e4c75f commit a4e79c8

File tree

8 files changed

+733
-0
lines changed

8 files changed

+733
-0
lines changed

‎.github/workflows/publish.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
on:
2+
push:
3+
branches:
4+
- main
5+
workflow_dispatch:
6+
name: Quarto Publish
7+
jobs:
8+
build-deploy:
9+
runs-on: ubuntu-latest
10+
permissions:
11+
contents: write
12+
steps:
13+
- name: Check out repository
14+
uses: actions/checkout@v4
15+
- name: Set up Quarto
16+
uses: quarto-dev/quarto-actions/setup@v2
17+
- name: Render and Publish
18+
uses: quarto-dev/quarto-actions/publish@v2
19+
with:
20+
target: gh-pages
21+
env:
22+
GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/.quarto/
2+
_site/
3+
**/*.quarto_ipynb

‎_quarto.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
project:
2+
type: website
3+
website:
4+
title: >-
5+
<img src="assets/images/root_logo.png" alt="ROOT Logo" style="height:35px;
6+
vertical-align:middle;">
7+
description: Opportunities for collaboration and contributions with the ROOT Core Team
8+
repo-url: 'https://github.com/root-project/open_projects'
9+
navbar:
10+
brand:
11+
image: assets/images/root_logo.png
12+
text: ROOT Open Projects
13+
href: index.html
14+
type: default
15+
right:
16+
- text: Home
17+
href: index.html
18+
- text: Projects
19+
href: 'index.html#projects'
20+
- text: Contact
21+
href: 'index.html#contact'
22+
- icon: github
23+
href: 'https://github.com/root-project/root'
24+
- icon: envelope
25+
href: 'mailto:Danilo.Piparo@cern.ch'
26+
format:
27+
html:
28+
theme: kournal
29+
css: css/style.css
30+
toc: false
31+
smooth-scroll: true
32+
embed-resources: true

‎assets/images/ep_sft_logo.png‎

7.39 KB
Loading

‎assets/images/root_logo.png‎

14.4 KB
Loading

‎css/style.css‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
body {
2+
font-family: "Inter", Arial, sans-serif;
3+
text-align: center;
4+
background: linear-gradient(135deg, #396699, #183353);
5+
color: #ffffff;
6+
}
7+
8+
html {
9+
background: linear-gradient(135deg, #396699, #183353);
10+
background-attachment: fixed;
11+
}
12+
13+
#search-container {
14+
margin-bottom: 30px;
15+
margin-top: 50px;
16+
}
17+
18+
#search-input {
19+
padding: 10px 15px;
20+
font-size: 1em;
21+
width: 320px;
22+
border-radius: 8px;
23+
border: none;
24+
background-color: f0f8ff;
25+
color: #183353;
26+
transition: all 0.3s ease;
27+
box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
28+
}
29+
30+
#search-input::placeholder {
31+
color: rgba(24, 51, 83, 0.5);
32+
}
33+
34+
#search-input:focus {
35+
outline: none;
36+
background-color: #e0f7ff;
37+
box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
38+
}
39+
40+
.project-section {
41+
width: 60vw;
42+
margin: 0;
43+
padding: 0;
44+
position: relative;
45+
left: 50%;
46+
right: 50%;
47+
transform: translateX(-50%);
48+
}
49+
50+
.area-title {
51+
font-size: 1.6em;
52+
font-weight: 600;
53+
margin-bottom: 20px;
54+
border-bottom: 2px solid #00E5FF;
55+
padding-bottom: 5px;
56+
border-bottom: 2px solid rgba(255, 255, 255, 0.759);
57+
text-align: left;
58+
}
59+
60+
.project-grid {
61+
display: grid;
62+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
63+
gap: 50px;
64+
}
65+
66+
.project-card {
67+
border-radius: 14px;
68+
padding: 20px;
69+
text-align: left;
70+
transition: all 0.3s ease;
71+
cursor: pointer;
72+
backdrop-filter: blur(6px);
73+
color: #183353;
74+
flex: 0 0 31%;
75+
background: rgba(255,255,255,0.1);
76+
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
77+
}
78+
79+
.project-card:hover {
80+
transform: translateY(-6px) scale(1.03);
81+
border-color: #00E5FF;
82+
box-shadow: 0 8px 20px rgba(0, 229, 255, 0.25);
83+
}
84+
85+
.project-card h3 {
86+
font-size: 1.25em;
87+
margin-top: 0;
88+
color: #183353;
89+
margin-bottom: 10px;
90+
font-weight: 600;
91+
letter-spacing: 0.3px;
92+
color: #7CFF6D;
93+
background: linear-gradient(90deg, #00E5FF, #7CFF6D);
94+
-webkit-background-clip: text;
95+
-webkit-text-fill-color: transparent;
96+
}
97+
98+
.skill-badge {
99+
display: inline-block;
100+
padding: 5px 12px;
101+
border-radius: 12px;
102+
margin: 4px 5px 10px 0;
103+
font-size: 0.85em;
104+
font-weight: 600;
105+
transition: all 0.25s ease;
106+
background-color: rgba(0, 229, 255, 0.15);
107+
color: #183353;
108+
border: 1px solid #00E5FF;
109+
color: white;
110+
}
111+
112+
.duration {
113+
display: inline-block;
114+
border-radius: 12px;
115+
padding: 6px 12px;
116+
font-size: 0.95em;
117+
font-weight: 600;
118+
letter-spacing: 0.2px;
119+
margin-top: 6px;
120+
text-align: center;
121+
color: #183353;
122+
box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.2);
123+
border: 1px solid #00E5FF;
124+
color: white;
125+
}
126+
127+
.duration::before {
128+
content: "⏱ ";
129+
opacity: 0.85;
130+
color: #00E5FF;
131+
}
132+
133+
footer {
134+
padding: 20px;
135+
opacity: 0.9;
136+
}
137+
138+
footer img {
139+
margin: 0 8px;
140+
opacity: 0.85;
141+
}
142+
143+
footer span {
144+
display: block;
145+
margin-top: 8px;
146+
font-size: 0.9em;
147+
}
148+
149+
#filter-bar {
150+
margin-top: 40px;
151+
margin-bottom: 35px;
152+
display: flex;
153+
justify-content: center;
154+
flex-wrap: wrap;
155+
gap: 12px;
156+
}
157+
158+
#filter-bar select {
159+
border-radius: 8px;
160+
padding: 8px 14px;
161+
font-size: 0.95em;
162+
cursor: pointer;
163+
transition: all 0.3s ease;
164+
background-color: #f0f8ff;
165+
color: #0d458a;
166+
box-shadow: 0 0 6px rgba(0, 229, 255, 0.2);
167+
}
168+
169+
.contact-section {
170+
background: rgba(255, 255, 255, 0.1);
171+
border-radius: 14px;
172+
padding: 30px 20px;
173+
margin: 50px 20% 0px 20%;
174+
text-align: left;
175+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
176+
backdrop-filter: blur(6px);
177+
}
178+
179+
.contact-section input,
180+
.contact-section textarea {
181+
width: 100%;
182+
padding: 10px 12px;
183+
border-radius: 12px;
184+
border: none;
185+
margin-bottom: 15px;
186+
font-size: 0.95em;
187+
color: rgba(57, 102, 153, 0.7);
188+
background: #FFFFFF;
189+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
190+
}
191+
192+
.contact-section input::placeholder,
193+
.contact-section textarea::placeholder {
194+
color: rgba(57, 102, 153, 0.7);
195+
}
196+
197+
.contact-section button {
198+
background: rgba(230, 243, 245, 0.15);
199+
color: #FFFFFF;
200+
border: 1px solid #00E5FF;
201+
padding: 10px 20px;
202+
border-radius: 12px;
203+
cursor: pointer;
204+
font-weight: 600;
205+
transition: all 0.3s ease;
206+
}
207+
208+
.contact-section button:hover {
209+
background: rgba(0, 229, 255, 0.25);
210+
color: #183353;
211+
border-color: #00E5FF;
212+
}
213+
214+
.modal {
215+
display: none;
216+
position: fixed;
217+
z-index: 1000;
218+
left: 0;
219+
top: 0;
220+
width: 100%;
221+
height: 100%;
222+
overflow-y: auto;
223+
background-color: rgba(24, 51, 83, 0.85);
224+
}
225+
226+
.modal-content {
227+
margin: 10% auto;
228+
padding: 30px;
229+
border-radius: 12px;
230+
width: 90%;
231+
max-width: 800px;
232+
position: relative;
233+
animation: fadeIn 0.3s ease;
234+
text-align: left;
235+
background-color: rgba(57, 102, 153, 0.95);
236+
color: #FFFFFF;
237+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
238+
}
239+
240+
#modal-title {
241+
font-weight: bold;
242+
font-size: 1.5em;
243+
margin-bottom: 15px;
244+
color: #7CFF6D;
245+
background: linear-gradient(90deg, #00E5FF, #7CFF6D);
246+
-webkit-background-clip: text;
247+
-webkit-text-fill-color: transparent;
248+
}
249+
250+
.close {
251+
position: absolute;
252+
top: 15px;
253+
right: 20px;
254+
font-size: 28px;
255+
font-weight: bold;
256+
cursor: pointer;
257+
color: #7CFF6D;
258+
}
259+
260+
.close:hover {
261+
color: #ffffff;
262+
}
263+
264+
#modal-skills .skill-badge {
265+
margin-bottom: 5px;
266+
display: inline-block;
267+
}
268+
269+
@keyframes fadeIn {
270+
from {
271+
opacity: 0;
272+
transform: translateY(-20px);
273+
}
274+
to {
275+
opacity: 1;
276+
transform: translateY(0);
277+
}
278+
}
279+
280+
h1.title {
281+
font-size: 2.8em;
282+
font-weight: 700;
283+
margin-top: 40px;
284+
}
285+
286+
h2.subtitle {
287+
font-size: 1.6em;
288+
font-weight: 400;
289+
margin-top: 10px;
290+
margin-bottom: 40px;
291+
}
292+
293+
.project-card p.responsible,
294+
.project-card p.target,
295+
.project-card p.duration {
296+
display: block;
297+
margin: 6px 0;
298+
font-size: 0.9em;
299+
color: white;
300+
}
301+
302+
.project-card p.duration {
303+
display: block;
304+
background: none;
305+
box-shadow: none;
306+
border: none;
307+
padding: 0;
308+
text-align: left;
309+
}

0 commit comments

Comments
 (0)