PR#245: Tweaks for the index page, some temporary - centos/centos.org

centos / centos.org

#245 Tweaks for the index page, some temporary

Merged 2 months ago by carlwgeorge. Opened 2 months ago by shaunm.

centos/ shaunm/centos.org index-tweaks into staging

Tweaks for the index page, some temporary

Shaun McCance • 2 months ago

92227c

file modified

		`@@ -9,3 +9,7 @@`
		`- title: "CentOS Hyperscale"`
		`page: "/hyperscale"`
		`description: "CentOS stability built for massively large-scale deployments."`
		`+ - title: "CentOS Connect"`
		`+ page: "https://connect.centos.org/"`
		`+ description: "Join us January 30-31 in Brussels to collaborate on the future of Enterprise Linux."`
		`+ background: images/connecttilebg.png`

_layouts/home.html

file modified

+3 -3

		`@@ -59,7 +59,7 @@`
		`</div>`
		`{% endif %}`

		`- <div class="d-flex justify-content-center bg-dark bg-image text-bg-dark py-5">`
		`+ <div class="d-flex justify-content-center bg-dark bg-image text-bg-dark py-5 px-sm-5">`
		`<div class="col-sm-12 col-lg-8">`
		`<div class="mb-5"><img src="{{ site.url }}{{ site.baseurl }}/assets/img/centos-symbol.svg" height="92" alt="CentOS"></div>`
		`<div class="h1">{{ site.data.centos.project.title }}</div>`
		`@@ -68,7 +68,7 @@`
		`</div>`
		`</div>`

		`- <div class="bg-primary d-flex justify-content-around py-3 mb-5">`
		`+ <div class="d-sm-none d-lg-flex bg-primary justify-content-around py-3">`
		`{% assign community_items = site.data.centos.navbar \| where: "name", "Community" %}`
		`{% for community_item in community_items %}`
		`{% for shortcut in community_item.menu %}`
		`@@ -78,7 +78,7 @@`
		`</div>`

		`{% if page.with_content == true %}`
		`- <div class="row justify-content-center mb-4">`
		`+ <div class="row justify-content-center mt-5 mb-4">`
		`<div class="col-sm-12 col-lg-12">`
		`<div class="content">`
		`{{ content }}`

images/connecttilebg.png

file added

empty or binary file added

index.md

file modified

+7 -8

		`@@ -14,22 +14,17 @@`
		`with_sponsors: true`
		`---`

		`- <div class="row mb-5">`
		`- <div style="text-align:center;min-height:90px">`
		`- <a href="https://connect.centos.org/"><img src="https://connect.centos.org/2025-fosdem/connect-banner.png" alt="CentOS Connect, January 30-31, Brussels, Belgium" style="max-width:100%"></a>`
		`- </div>`
		`- </div>`
		`-`
		`<style>`
		`div.hero-signal {`
		`height: 30px;`
		`- min-height: 40px;`
		`+ min-height: 30px;`
		`background-color: #a14f8c;`
		background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
		`}`
		`.card:hover div.hero-signal {`
		background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
		`}`
		`+ .card-img-top {overflow:hidden;}`
		`</style>`

		`<div class="row">`
		`@@ -37,7 +32,11 @@`
		`{% for distro in distributions %}`
		`<div class="col-sm-12 col-md-6 col-lg-4 mb-3">`
		`<div class="card">`
		`- <div class="hero-signal"> </div>`
		`+ {% if distro.background %}`
		`+ <div class="card-img-top"><img src="{{ distro.background }}"></div>`
		`+ {% else %}`
		`+ <div class="hero-signal" style="min-height:60px;height:60px;"> </div>`
		`+ {% endif %}`
		`<div class="card-body">`
		`<div class="card-title h5">{{ distro.title }}</div>`
		`<p class="card-text">{{ distro.description }}</p>`

shaunm commented 2 months ago

Hiding the secondary navbar at mobile sizes because it doens't scale well currently. Adding padding to the banner at mobile sizes. Moving the Connect announcement to the editions tiles, because we have a blank space right now. We need to think hard about this presentation going forward as we add editions, but for now it works.