Skip to content

Commit 17f5776

Browse files
gaurav-nelsongaurav-nelson
committed
Enhance landing page and mobile navigation
- Added mobile navigation toggle and sidebar - Updated CSS for responsive design - Added new sections on the main page - Enhanced the layout and content structure for better engagement.
1 parent 2e2794c commit 17f5776

File tree

10 files changed

+806
-29
lines changed

10 files changed

+806
-29
lines changed

‎content/_index.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
---
22
title: "Validated Patterns"
3+
youtube_id: "dGsoUNjHYOw"
4+
video_title: "Watch how Validated Patterns enhance your cloud-native applications"
5+
video_description: "Our GitOps-driven framework simplifies complex deployments, ensuring your applications are production-ready from day one. Watch the video to see how it works."
36
---
47

58
![Logo](/images/logo.png)
69

7-
# Reference architectures with added value
10+
# Deploy complex solutions with unprecedented speed and confidence.
811

9-
Validated Patterns are an evolution of how you deploy applications in a hybrid cloud. With a pattern, you can automatically deploy a full application stack through a GitOps-based framework. With this framework, you can create business-centric use cases while maintaining a level of Continuous Integration (CI) over your application.
12+
Go beyond traditional reference architectures. Validated Patterns deliver automated, rigorously tested application stacks for your hybrid cloud, powered by GitOps.

‎layouts/_default/baseof.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
</div>
1111
<script src="{{ "js/codeblock.js" | relURL }}"></script>
1212
<script src="{{ "js/select-report-issue-popup.js" | relURL }}"></script>
13+
<script src="{{ "js/mobile-nav.js" | relURL }}"></script>
1314
</body>
1415
<!-- Uncomment when you have sorted out the feedback partials option
1516
<body>

‎layouts/index.html‎

Lines changed: 226 additions & 24 deletions
Large diffs are not rendered by default.

‎layouts/partials/head.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<head>
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
24
{{ $sass := resources.Get "sass/patternfly.scss" }}
35
{{ $style := $sass | resources.ToCSS }}
46
<link rel="stylesheet" href="{{ $style.Permalink }}">

‎layouts/partials/header.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<header class="pf-c-page__header">
22
<div class="pf-c-page__header-brand">
3+
<div class="pf-c-page__header-brand-toggle">
4+
<button class="pf-c-button pf-m-plain mobile-nav-toggle" type="button" aria-label="Global navigation" id="mobile-nav-toggle">
5+
<i class="fas fa-bars" aria-hidden="true"></i>
6+
</button>
7+
</div>
38
<a href="{{ .Site.Home.RelPermalink }}" class="pf-c-page__header-brand-link">
49
{{ with .Site.Params.site_logo }}
510
<img src="{{ relURL . }}" alt="{{ $.Site.Title }}" />

‎layouts/partials/site-navigation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="pf-c-nav pf-m-horizontal" role="navigation">
1+
<nav class="pf-c-nav pf-m-horizontal mobile-nav" role="navigation" id="mobile-nav">
22
{{ if .Site.Menus.main }}
33
<ul class="pf-c-nav__list">
44
{{ range .Site.Menus.main }}

‎static/css/custom.css‎

Lines changed: 301 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,10 +343,21 @@ main.pf-c-page__main {
343343
/*And also fixes how big this container is */
344344
.min-height {
345345
max-width: 832px;
346-
min-width: 832px;
346+
min-width: 300px; /* Reduced from 832px for mobile */
347+
width: 100%;
347348
padding-bottom: 5rem;
348349
}
349350

351+
/* Mobile responsive adjustments for min-height */
352+
@media (max-width: 768px) {
353+
.min-height {
354+
max-width: 100%;
355+
min-width: 280px;
356+
padding-left: 1rem;
357+
padding-right: 1rem;
358+
}
359+
}
360+
350361
/* STICKY NAV ON THE LEFT */
351362

352363
.sticky {
@@ -363,11 +374,21 @@ main.pf-c-page__main {
363374
margin: 0;
364375
position: sticky;
365376
top: 0;
366-
min-width: 400px;
377+
min-width: 250px; /* Reduced from 400px */
367378
align-self: flex-start;
368379
z-index: 501;
369380
}
370381

382+
/* Mobile adjustments for sticky navigation */
383+
@media (max-width: 992px) {
384+
.sticky {
385+
position: relative;
386+
min-width: 100%;
387+
max-height: none;
388+
padding: var(--pf-global--spacer--md);
389+
}
390+
}
391+
371392
.active {
372393
background-color: red;
373394
}
@@ -1043,3 +1064,281 @@ h6 .anchor::before {
10431064
.pf-c-content li.pf-c-nav__item + li.pf-c-nav__item {
10441065
margin-top: 0;
10451066
}
1067+
1068+
/* Landing Page Styles */
1069+
.hero-content h1 {
1070+
font-size: var(--pf-global--FontSize--4xl) !important;
1071+
line-height: var(--pf-global--LineHeight--sm) !important;
1072+
}
1073+
1074+
.hero-content p {
1075+
font-size: var(--pf-global--FontSize--xl) !important;
1076+
line-height: var(--pf-global--LineHeight--md) !important;
1077+
}
1078+
1079+
/* MOBILE RESPONSIVENESS */
1080+
1081+
/* Mobile Navigation Toggle */
1082+
.mobile-nav-toggle {
1083+
display: none;
1084+
}
1085+
1086+
/* Ensure header tools are visible on desktop */
1087+
@media (min-width: 769px) {
1088+
.pf-c-page__header-tools {
1089+
display: flex !important;
1090+
position: static !important;
1091+
width: auto !important;
1092+
background: none !important;
1093+
box-shadow: none !important;
1094+
padding: 0 !important;
1095+
flex-direction: row !important;
1096+
}
1097+
}
1098+
1099+
@media (max-width: 768px) {
1100+
.mobile-nav-toggle {
1101+
display: block;
1102+
}
1103+
1104+
/* Hide the header tools on mobile - they should only show when toggled */
1105+
.pf-c-page__header-tools {
1106+
display: none;
1107+
position: fixed;
1108+
top: 60px;
1109+
left: 0;
1110+
width: 100%;
1111+
background: var(--pf-global--BackgroundColor--light-100);
1112+
border: 1px solid var(--pf-global--BorderColor--200);
1113+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
1114+
z-index: 1000;
1115+
flex-direction: column;
1116+
padding: 0;
1117+
}
1118+
1119+
.pf-c-page__header-tools.active {
1120+
display: flex;
1121+
}
1122+
1123+
.mobile-nav {
1124+
width: 100%;
1125+
}
1126+
1127+
.mobile-nav .pf-c-nav__list {
1128+
flex-direction: column;
1129+
margin: 0;
1130+
padding: 0;
1131+
}
1132+
1133+
.mobile-nav .pf-c-nav__item {
1134+
margin: 0;
1135+
width: 100%;
1136+
}
1137+
1138+
.mobile-nav .pf-c-nav__link {
1139+
display: block;
1140+
padding: 1rem;
1141+
border-bottom: 1px solid var(--pf-global--BorderColor--100);
1142+
text-decoration: none;
1143+
width: 100%;
1144+
color: var(--pf-global--Color--dark-100) !important;
1145+
font-weight: 500;
1146+
}
1147+
1148+
.mobile-nav .pf-c-nav__link:hover {
1149+
background-color: var(--pf-global--BackgroundColor--light-200);
1150+
color: var(--pf-global--primary-color--100) !important;
1151+
}
1152+
1153+
.mobile-nav .pf-c-nav__item.pf-m-current .pf-c-nav__link {
1154+
color: var(--pf-global--primary-color--100) !important;
1155+
background-color: var(--pf-global--BackgroundColor--light-200);
1156+
font-weight: 600;
1157+
}
1158+
1159+
/* Search form styling in mobile */
1160+
.pf-c-page__header-tools form {
1161+
padding: 1rem;
1162+
border-top: 1px solid var(--pf-global--BorderColor--100);
1163+
background-color: var(--pf-global--BackgroundColor--light-50);
1164+
}
1165+
1166+
.pf-c-page__header-tools .pf-c-search-input__text-input {
1167+
background-color: white;
1168+
border: 1px solid var(--pf-global--BorderColor--200);
1169+
color: var(--pf-global--Color--dark-100);
1170+
}
1171+
}
1172+
1173+
/* Sidebar Responsiveness */
1174+
@media (max-width: 992px) {
1175+
.pf-c-page__sidebar {
1176+
position: fixed;
1177+
top: 60px;
1178+
left: -300px;
1179+
width: 300px;
1180+
height: calc(100vh - 60px);
1181+
transition: left 0.3s ease;
1182+
z-index: 999;
1183+
overflow-y: auto;
1184+
background: var(--pf-global--BackgroundColor--light-100);
1185+
box-shadow: 2px 0 4px rgba(0,0,0,0.1);
1186+
}
1187+
1188+
.pf-c-page__sidebar.active {
1189+
left: 0;
1190+
}
1191+
1192+
.pf-c-page__main {
1193+
margin-left: 0 !important;
1194+
width: 100%;
1195+
}
1196+
1197+
/* Overlay for sidebar */
1198+
.sidebar-overlay {
1199+
position: fixed;
1200+
top: 0;
1201+
left: 0;
1202+
width: 100%;
1203+
height: 100%;
1204+
background: rgba(0,0,0,0.5);
1205+
z-index: 998;
1206+
display: none;
1207+
}
1208+
1209+
.sidebar-overlay.active {
1210+
display: block;
1211+
}
1212+
}
1213+
1214+
/* Content Layout Mobile Adjustments */
1215+
@media (max-width: 768px) {
1216+
.pf-c-page__main-section {
1217+
padding-left: 10px !important;
1218+
padding-right: 10px !important;
1219+
}
1220+
1221+
.pf-u-display-flex {
1222+
flex-direction: column;
1223+
}
1224+
1225+
/* Hero section adjustments */
1226+
.hero-content h1 {
1227+
font-size: var(--pf-global--FontSize--2xl) !important;
1228+
}
1229+
1230+
.hero-content p {
1231+
font-size: var(--pf-global--FontSize--lg) !important;
1232+
}
1233+
1234+
/* Use case cards stack on mobile */
1235+
.usecase-card {
1236+
margin-bottom: 1rem;
1237+
}
1238+
1239+
/* Feature cards full width on mobile */
1240+
.feature-card {
1241+
margin-bottom: 1rem;
1242+
}
1243+
1244+
/* Pattern browser adjustments */
1245+
.pf-l-grid__item.pf-m-9-col {
1246+
grid-column: 1 / -1;
1247+
}
1248+
}
1249+
1250+
/* Feature Cards Animation */
1251+
.feature-card {
1252+
cursor: pointer;
1253+
transition: all 0.3s ease;
1254+
background-color: var(--pf-global--palette--white);
1255+
}
1256+
1257+
.feature-card:hover {
1258+
transform: translateY(-2px);
1259+
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
1260+
background-color: var(--pf-global--palette--blue-50);
1261+
}
1262+
1263+
.feature-details {
1264+
max-height: 0;
1265+
overflow: hidden;
1266+
transition: max-height 0.5s ease-in-out;
1267+
}
1268+
1269+
/* Pattern Cards (Use Cases) Hover Effects - Specific to use case section */
1270+
.usecase-card{
1271+
transition: all 0.3s ease;
1272+
}
1273+
1274+
.usecase-card:hover {
1275+
transform: translateY(-8px) scale(1.02);
1276+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
1277+
z-index: 10;
1278+
position: relative;
1279+
}
1280+
1281+
/* Additional Mobile Optimizations */
1282+
@media (max-width: 576px) {
1283+
/* Extra small mobile devices */
1284+
.pf-c-page__header-brand-toggle {
1285+
margin-right: 0.5rem;
1286+
}
1287+
1288+
.pf-c-page__header-brand-link img {
1289+
max-height: 40px;
1290+
}
1291+
1292+
/* Tables responsive */
1293+
.tableblock {
1294+
overflow-x: auto;
1295+
font-size: 0.9rem;
1296+
}
1297+
1298+
/* Code blocks */
1299+
pre {
1300+
font-size: 0.8rem;
1301+
padding: var(--pf-global--spacer--sm);
1302+
}
1303+
1304+
/* Search form adjustments */
1305+
.pf-c-search-input {
1306+
min-width: 200px;
1307+
}
1308+
1309+
/* Footer adjustments */
1310+
.prefooter-menu-grid {
1311+
padding-top: 0.5rem;
1312+
padding-bottom: 0.5rem;
1313+
}
1314+
1315+
.footer-dark {
1316+
font-size: 0.7rem;
1317+
}
1318+
}
1319+
1320+
/* Landscape mobile optimization */
1321+
@media (max-width: 768px) and (orientation: landscape) {
1322+
.pf-c-page__sidebar {
1323+
height: calc(100vh - 50px);
1324+
top: 50px;
1325+
}
1326+
1327+
.mobile-nav {
1328+
top: 50px;
1329+
}
1330+
}
1331+
1332+
/* Print styles for mobile */
1333+
@media print {
1334+
.mobile-nav-toggle,
1335+
.pf-c-page__sidebar,
1336+
.mobile-nav {
1337+
display: none !important;
1338+
}
1339+
1340+
.pf-c-page__main {
1341+
margin-left: 0 !important;
1342+
width: 100% !important;
1343+
}
1344+
}

0 commit comments

Comments
 (0)