Skip to content

Commit 5a430cd

Browse files
pietercolpaertpietercolpaert
committed
Nicer styling of the partners
1 parent 428d792 commit 5a430cd

2 files changed

Lines changed: 107 additions & 111 deletions

File tree

‎index.html‎

Lines changed: 48 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -51,61 +51,70 @@ <h3>Publish once. Support many uses.</h3>
5151
</p>
5252
</section>
5353

54-
<section id="supported-by" aria-labelledby="supported-by-heading" about="https://ldes.tech/#organization">
55-
<h2 id="supported-by-heading">Who supports and implements LDES</h2>
54+
<section id="supported-by" class="ecosystem" aria-labelledby="supported-by-heading" about="https://ldes.tech/#organization">
55+
<div class="ecosystem-intro">
56+
<h2 id="supported-by-heading">An open specification.<br>Real-world adoption.</h2>
57+
<p>Supported by public institutions. Put to work by cities, museums, and research organisations.
58+
Discover the people turning shared data into reusable services.</p>
59+
</div>
5660

57-
<div class="org-spotlight">
58-
<a class="org-logo org-logo-dark org-logo-spotlight" href="https://interoperable-europe.ec.europa.eu/collection/semic-support-centre/linked-data-event-streams-ldes" resource="https://interoperable-europe.ec.europa.eu/" property="schema:funder schema:maintainer" typeof="schema:GovernmentOrganization">
59-
<img src="{{ '/assets/logos/interoperable-europe.svg' | relative_url }}" alt="" property="schema:logo"/>
60-
<span class="org-logo-label" property="schema:name">Interoperable Europe</span>
61+
<div class="supporters">
62+
<a class="supporter supporter-primary" href="https://interoperable-europe.ec.europa.eu/collection/semic-support-centre/linked-data-event-streams-ldes" resource="https://interoperable-europe.ec.europa.eu/" property="schema:funder schema:maintainer" typeof="schema:GovernmentOrganization">
63+
<div class="supporter-logo"><img src="{{ '/assets/logos/interoperable-europe.svg' | relative_url }}" alt="" property="schema:logo" loading="lazy"/></div>
64+
<h3 property="schema:name">Interoperable Europe</h3>
65+
<p>The main current funder and maintainer of LDES, through the European Commission programme for cross-border digital public services.</p>
66+
<span class="org-link">Discover the programme <span aria-hidden="true">&rarr;</span></span>
67+
</a>
68+
<a class="supporter supporter-flanders" href="https://openldes.org/" resource="https://www.vlaanderen.be/digitaal-vlaanderen" property="schema:funder" typeof="schema:GovernmentOrganization">
69+
<div class="supporter-logo"><img src="{{ '/assets/logos/vlaanderen.svg' | relative_url }}" alt="" property="schema:logo" loading="lazy"/></div>
70+
<h3 property="schema:name">Flanders</h3>
71+
<p>Supporting LDES through the OpenLDES community.</p>
72+
<span class="org-link">Explore the community <span aria-hidden="true">&rarr;</span></span>
6173
</a>
62-
<p>
63-
<a href="https://interoperable-europe.ec.europa.eu/collection/semic-support-centre/linked-data-event-streams-ldes"><strong>Interoperable Europe</strong></a>,
64-
the European Commission programme for cross-border digital public services, is the main current funder
65-
and maintainer of the LDES specification.
66-
</p>
6774
</div>
6875

69-
<ul class="org-row" aria-label="Also supporting LDES">
70-
<li>
71-
<a class="org-logo" href="https://www.vlaanderen.be/digitaal-vlaanderen/onze-diensten-en-platformen/vlaamse-smart-data-space" resource="https://www.vlaanderen.be/digitaal-vlaanderen" property="schema:funder" typeof="schema:GovernmentOrganization">
72-
<img src="{{ '/assets/logos/vlaanderen.svg' | relative_url }}" alt="" property="schema:logo"/>
73-
<span class="org-logo-label" property="schema:name">Flanders (Vlaamse Smart Data Space)</span>
74-
</a>
75-
</li>
76-
</ul>
77-
78-
<h3>Implementers and early adopters</h3>
79-
<p class="section-intro">
80-
A growing list of organisations publish or consume LDES in production. A few examples:
81-
</p>
82-
<ul class="org-grid">
76+
<div class="adopters-intro">
77+
<h3>Already putting LDES to work</h3>
78+
<p>Different domains. A shared way to publish and follow change.</p>
79+
</div>
80+
<ul class="adopters">
8381
<li>
84-
<a class="org-logo" href="https://coghent.github.io/API/" resource="https://stad.gent/" typeof="schema:GovernmentOrganization">
85-
<img src="{{ '/assets/logos/gent.svg' | relative_url }}" alt="" property="schema:logo"/>
86-
<span class="org-logo-label" property="schema:name">City of Ghent (CoGhent)</span>
82+
<a class="adopter" href="https://coghent.github.io/API/" resource="https://stad.gent/" typeof="schema:GovernmentOrganization">
83+
<div class="adopter-logo"><img src="{{ '/assets/logos/gent.svg' | relative_url }}" alt="" property="schema:logo" loading="lazy"/></div>
84+
<h4 property="schema:name">City of Ghent</h4>
85+
<p>Sharing the CoGhent heritage collections.</p>
86+
<span class="org-link">Explore CoGhent <span aria-hidden="true">&rarr;</span></span>
8787
</a>
8888
</li>
8989
<li>
90-
<a class="org-logo" href="https://open-science.vliz.be/linked-data" resource="https://www.vliz.be/" typeof="schema:ResearchOrganization">
91-
<img src="{{ '/assets/logos/vliz.jpg' | relative_url }}" alt="" property="schema:logo"/>
92-
<span class="org-logo-label" property="schema:name">VLIZ (Flanders Marine Institute)</span>
90+
<a class="adopter" href="https://open-science.vliz.be/linked-data" resource="https://www.vliz.be/" typeof="schema:ResearchOrganization">
91+
<div class="adopter-logo"><img src="{{ '/assets/logos/vliz.jpg' | relative_url }}" alt="" property="schema:logo" loading="lazy"/></div>
92+
<h4 property="schema:name">VLIZ</h4>
93+
<p>Connecting marine data through Linked Data.</p>
94+
<span class="org-link">Explore marine data <span aria-hidden="true">&rarr;</span></span>
9395
</a>
9496
</li>
9597
<li>
96-
<a class="org-logo" href="https://data.rijksmuseum.nl/docs/ldes/" resource="https://www.rijksmuseum.nl/" typeof="schema:Organization">
97-
<img src="{{ '/assets/logos/rijksmuseum.svg' | relative_url }}" alt="" property="schema:logo"/>
98-
<span class="org-logo-label" property="schema:name">Rijksmuseum</span>
98+
<a class="adopter" href="https://data.rijksmuseum.nl/docs/ldes/" resource="https://www.rijksmuseum.nl/" typeof="schema:Organization">
99+
<div class="adopter-logo"><img src="{{ '/assets/logos/rijksmuseum.svg' | relative_url }}" alt="" property="schema:logo" loading="lazy"/></div>
100+
<h4 property="schema:name">Rijksmuseum</h4>
101+
<p>Making collection updates available to reusers.</p>
102+
<span class="org-link">Explore the collection <span aria-hidden="true">&rarr;</span></span>
99103
</a>
100104
</li>
101105
<li>
102-
<a class="org-logo" href="https://www.era.europa.eu/" resource="https://www.era.europa.eu/" typeof="schema:GovernmentOrganization">
103-
<img src="{{ '/assets/logos/era.png' | relative_url }}" alt="" property="schema:logo"/>
104-
<span class="org-logo-label" property="schema:name">European Union Agency for Railways</span>
106+
<a class="adopter" href="https://semiceu.github.io/LDES-implementation-reports/era-dcat-ap-feed/" resource="https://www.era.europa.eu/" typeof="schema:GovernmentOrganization">
107+
<div class="adopter-logo"><img src="{{ '/assets/logos/era.png' | relative_url }}" alt="" property="schema:logo" loading="lazy"/></div>
108+
<h4 property="schema:name">EU Agency for Railways</h4>
109+
<p>Publishing catalog changes as an event stream.</p>
110+
<span class="org-link">Read the report <span aria-hidden="true">&rarr;</span></span>
105111
</a>
106112
</li>
107113
</ul>
108-
<p><a href="{{ '/examples/' | relative_url }}">See more real-world examples &rarr;</a></p>
114+
<div class="ecosystem-actions">
115+
<a class="ecosystem-button" href="{{ '/examples/' | relative_url }}">See LDES in action <span aria-hidden="true">&rarr;</span></a>
116+
<a href="{{ '/community/' | relative_url }}">Build with the community <span aria-hidden="true">&rarr;</span></a>
117+
</div>
109118
</section>
110119

111120
<section id="quicklinks">
@@ -162,7 +171,7 @@ <h2>Latest from the blog</h2>
162171
"email": "mailto:pieter.colpaert@ugent.be",
163172
"funder": [
164173
{ "@type": "GovernmentOrganization", "name": "Interoperable Europe", "url": "https://interoperable-europe.ec.europa.eu/collection/semic-support-centre/linked-data-event-streams-ldes" },
165-
{ "@type": "GovernmentOrganization", "name": "Flanders (Vlaamse Smart Data Space)", "url": "https://www.vlaanderen.be/digitaal-vlaanderen/onze-diensten-en-platformen/vlaamse-smart-data-space" }
174+
{ "@type": "GovernmentOrganization", "name": "Flanders (OpenLDES community)", "url": "https://openldes.org/" }
166175
],
167176
"maintainer": { "@type": "GovernmentOrganization", "name": "Interoperable Europe", "url": "https://interoperable-europe.ec.europa.eu/collection/semic-support-centre/linked-data-event-streams-ldes" },
168177
"sameAs": [

‎style.css‎

Lines changed: 59 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -467,85 +467,72 @@ header.site-header p.tagline { font-style: italic; font-weight: 400; }
467467
.article-table th, .article-table td { padding: 0.65rem 0.4rem; }
468468
}
469469

470-
/* ----------------------------
471-
Supported by / implementers
472-
----------------------------- */
473-
.org-spotlight {
474-
display: flex;
475-
flex-wrap: wrap;
476-
align-items: center;
477-
gap: 1.5rem 2rem;
478-
margin: 1.25rem 0 1.75rem;
479-
padding: 1.25rem 1.5rem;
480-
background: #fff;
470+
/* Supporters and implementations */
471+
.ecosystem {
472+
margin: 4rem -2rem;
473+
padding: clamp(1.5rem, 4vw, 3rem) 2rem;
474+
background: #f3f3fb;
481475
border: 1px solid #e3e3f2;
482-
border-radius: 4px;
483-
}
484-
485-
.org-spotlight p {
486-
flex: 1 1 22rem;
487-
margin: 0;
488-
color: #4a4a55;
476+
border-radius: 16px;
489477
}
490-
491-
.org-row,
492-
.org-grid {
493-
list-style: none;
478+
.ecosystem-intro { max-width: 43rem; margin-bottom: 2rem; }
479+
.ecosystem-intro h2 {
480+
color: var(--text);
481+
font-size: clamp(2rem, 4vw, 2.8rem);
482+
line-height: 1.15;
483+
letter-spacing: -0.035em;
494484
margin: 0 0 1rem;
495-
padding: 0;
496-
display: flex;
497-
flex-wrap: wrap;
498-
align-items: flex-start;
499-
gap: 1.75rem 2.5rem;
500485
}
501-
502-
.org-logo {
486+
.ecosystem-intro > p { font-size: 1.1rem; color: #505064; margin: 0; }
487+
.supporters { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; }
488+
.supporter {
503489
display: flex;
504490
flex-direction: column;
505-
align-items: center;
506-
gap: 0.5rem;
507-
text-decoration: none;
491+
align-items: flex-start;
492+
padding: 2rem;
493+
border-radius: 10px;
494+
background: white;
495+
border: 1px solid #e1e1ef;
508496
color: var(--text);
509-
flex: 0 0 auto;
510-
}
511-
512-
.org-logo:hover .org-logo-label {
513-
color: var(--primary);
514-
text-decoration: underline;
515-
}
516-
517-
.org-logo img {
518-
height: 2.5rem;
519-
width: auto;
520-
max-width: 13rem;
521-
object-fit: contain;
522-
}
523-
524-
.org-logo-spotlight img {
525-
height: 3.25rem;
526-
max-width: 16rem;
527-
}
528-
529-
.org-row .org-logo img {
530-
height: 2.75rem;
531-
max-width: 17rem;
532497
}
533-
534-
.org-logo-dark img {
535-
/* Interoperable Europe's logo asset is white-only; give it a dark tile to sit on. */
536-
padding: 0.85rem 1.1rem;
537-
background: #1b3d5d;
538-
border-radius: 4px;
539-
box-sizing: content-box;
498+
.supporter-primary { background: #1b3d5d; border-color: #1b3d5d; color: white; }
499+
.supporter-flanders { border-top: 4px solid #f2cf35; padding-top: calc(2rem - 3px); }
500+
.supporter-logo { display: flex; align-items: center; height: 5.5rem; width: 100%; margin-bottom: 1.75rem; }
501+
.supporter-logo img { width: 100%; max-width: 18rem; max-height: 5.5rem; object-fit: contain; object-position: left center; }
502+
.supporter-flanders .supporter-logo img { width: 11rem; }
503+
.supporter h3 { color: inherit; font-size: 1.35rem; margin: 0; line-height: 1.3; }
504+
.supporter p { margin: 0.75rem 0 1.5rem; }
505+
.supporter-primary p { color: #e0e9f3; }
506+
.org-link { margin-top: auto; font-size: 0.85rem; font-weight: 700; color: var(--primary-dark); }
507+
.supporter-primary .org-link { color: white; }
508+
.supporter:hover, .adopter:hover { text-decoration: none; color: var(--text); box-shadow: 0 8px 24px rgba(27, 30, 70, 0.1); }
509+
.supporter-primary:hover { color: white; }
510+
.supporter:hover .org-link, .adopter:hover .org-link { text-decoration: underline; }
511+
.adopters-intro { margin: 2.5rem 0 1.25rem; }
512+
.adopters-intro h3 { color: var(--text); font-size: 1.4rem; margin: 0 0 0.4rem; }
513+
.adopters-intro p { margin: 0; color: #505064; }
514+
.adopters { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
515+
.adopters li { display: flex; min-width: 0; }
516+
.adopter { display: flex; flex-direction: column; width: 100%; padding: 1.25rem; background: white; border: 1px solid #e1e1ef; border-radius: 8px; color: var(--text); }
517+
.adopter-logo { height: 5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
518+
.adopter-logo img { width: 100%; max-height: 4.5rem; object-fit: contain; }
519+
.adopter h4 { font-size: 1rem; line-height: 1.4; margin: 0; }
520+
.adopter p { font-size: 0.9rem; color: #505064; margin: 0.6rem 0 1.25rem; }
521+
.adopter .org-link { font-size: 0.8rem; }
522+
.ecosystem-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; font-weight: 700; }
523+
.ecosystem-button { display: inline-flex; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; border-radius: 4px; background: var(--primary); color: white; }
524+
.ecosystem-button:hover { background: var(--primary-dark); color: white; }
525+
@media (max-width: 1050px) {
526+
.ecosystem { margin-left: 0; margin-right: 0; }
527+
.adopters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
540528
}
541-
542-
.org-logo-label {
543-
font-size: 0.85rem;
544-
text-align: center;
545-
max-width: 11rem;
546-
}
547-
548-
.org-logo-spotlight .org-logo-label {
549-
font-size: 0.95rem;
550-
font-weight: 700;
529+
@media (max-width: 640px) {
530+
.ecosystem { padding: 1.5rem; margin-top: 3rem; margin-bottom: 3rem; }
531+
.supporters { grid-template-columns: minmax(0, 1fr); }
532+
.supporter { padding: 1.5rem; }
533+
.supporter-flanders { padding-top: calc(1.5rem - 3px); }
534+
.adopters { grid-template-columns: minmax(0, 1fr); }
535+
.adopter { padding: 1.5rem; }
536+
.adopter-logo { justify-content: flex-start; }
537+
.adopter-logo img { width: auto; max-width: 100%; max-height: 4rem; }
551538
}

0 commit comments

Comments
 (0)