From 1a96c6244d892bc46161262f8b367f8b93931ee2 Mon Sep 17 00:00:00 2001 From: Christopher Whitley <103014489+AristurtleDev@users.noreply.github.com> Date: Tue, 4 Nov 2025 16:07:29 -0500 Subject: [PATCH] Add carousel for docs landing page --- images/learn/2d-tutorial.webp | Bin 0 -> 6590 bytes index.md | 53 +++++++++++++ templates/monogame/public/main.css | 115 ++++++++++++++++++++++++++++- 3 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 images/learn/2d-tutorial.webp diff --git a/images/learn/2d-tutorial.webp b/images/learn/2d-tutorial.webp new file mode 100644 index 0000000000000000000000000000000000000000..13a7d9a5b24322ab4cca93d250f0af67127799e7 GIT binary patch literal 6590 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 literal 0 HcmV?d00001 diff --git a/index.md b/index.md index cac838a3..c95b19bf 100644 --- a/index.md +++ b/index.md @@ -10,6 +10,59 @@ description: MonoGame Documentation Hub Whether you are just starting out with MonoGame or you have been using it for years, you can find all documentation and tutorials here.

+
diff --git a/templates/monogame/public/main.css b/templates/monogame/public/main.css index 674e5d69..b76fb87d 100644 --- a/templates/monogame/public/main.css +++ b/templates/monogame/public/main.css @@ -308,4 +308,117 @@ td > .xref { .question-answer.revealed * { opacity: 1; -} \ No newline at end of file +} + +/******************************************************************************* +*** Section: Carousel for docs landing page +*******************************************************************************/ +.carousel { + margin-bottom: 3rem; + border: 1px solid; + border-color: var(--bs-body-color); + border-radius: .5rem; + overflow: hidden; +} + +.carousel-item { + height: 400px; + position: relative; +} + +.carousel-item img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.carousel-item::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 50%); + pointer-events: none; +} + +.carousel-caption { + bottom: 0; + left: 0; + right: auto; + text-align: left; + padding: 3rem; + z-index: 10; + max-width: 600px; + color: white; +} + +.carousel-caption h1 { + margin-top: 0; + font-weight: 700; + color: white; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); +} + +.carousel-caption p { + color: white; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + margin-bottom: 1.5rem; +} + +.carousel-caption .btn { + background-color: var(--mg-orange-primary); + border-color: var(--mg-orange-primary); + color: white; + font-weight: 600; + padding: 0.75rem 2rem; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); + transition: all 0.2s ease-in-out; +} + +.carousel-caption .btn:hover, +.carousel-caption .btn:focus { + background-color: var(--mg-orange-secondary); + border-color: var(--mg-orange-secondary); + transform: translateY(-2px); + box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4); +} + +.carousel-indicators { + margin-bottom: 1rem; +} + +.carousel-indicators [data-bs-target] { + background-color: var(--mg-orange-secondary) !important; + opacity: 0.6; + width: 12px; + height: 12px; + border-radius: 50%; + border: none; +} + +.carousel-indicators .active { + opacity: 1; + background-color: var(--mg-orange-primary) !important; +} + +@media (max-width: 768px) { + .carousel-item { + height: 300px; + } + + .carousel-caption { + padding: 2rem 1rem; + max-width: 100%; + } + + .carousel-caption h1 { + font-size: 1.75rem; + } + + .carousel { + margin-bottom: 3rem; + } +}