Merge pull request #14 from ibm-client-engineering/bo-updates

Bo updates

Author: bokulbackiibm

landing_page.qmd

@@ -24,6 +24,7 @@
 /* Navbar Logo Size */
 .navbar-logo {
     max-height: 75px; /* Restrict the height of the logo */
+    margin-left: -20px;
 }
 
 /* Navbar Margin Sizing Target */
@@ -187,7 +188,7 @@ nav .nav-link i, nav .dropdown-item i {
 
 /* Only apply hover effect to nav items with content */
 .nav-page:has(a):hover {
-    background-color: #c6c3c3;
+    background-color: #E8E8E8;
 }
 
 /* Remove hover effect from empty nav items */
@@ -221,7 +222,7 @@ nav .nav-link i, nav .dropdown-item i {
 /* Media Query for Grid Layout on Larger Screens */
 @media (min-width: 992px) {
     #quarto-content.page-columns {
-        grid-template-columns: 2.5em [screen-start] 1.5em [screen-start-inset page-start] minmax(50px, 100px) [page-start-inset] 50px [body-start-outset] 150px [body-start] minmax(1.5em, var(--margin-max-width)) [body-content-start] minmax(500px, calc(1000px - 3em)) [body-content-end] minmax(1.5em, var(--margin-max-width)) [body-end] 50px [body-end-outset] minmax(50px, 100px) [page-end-inset] 50px [page-end] 5fr [screen-end-inset] 1.5em [screen-end];
+        grid-template-columns: 1.5em [screen-start] 1.5em [screen-start-inset page-start] minmax(50px, 100px) [page-start-inset] 50px [body-start-outset] 150px [body-start] minmax(1.5em, var(--margin-max-width)) [body-content-start] minmax(500px, calc(1000px - 3em)) [body-content-end] minmax(1.5em, var(--margin-max-width)) [body-end] 50px [body-end-outset] minmax(50px, 100px) [page-end-inset] 50px [page-end] 5fr [screen-end-inset] 1.5em [screen-end];
     }
 }
 
@@ -298,4 +299,4 @@ a[role=listitem] {
 .footerLogo {
     color: #f7f2f2; /* Light gray logo color */
     vertical-align: top; /* Aligns logo to the top */
-}
+}

src/custom.scss

@@ -0,0 +1,37 @@
+---
+format:
+  html:
+    theme: [src/custom.scss , landing_page.scss]
+
+---
+
+# Project Name
+
+Subtitle
+
+:::: {.columns}
+
+::: {.column width="40%"}
+ <button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-our-doc">Our Documentation </button>
+:::
+
+::: {.column width="60%"}
+![](images/IBMlogo.png){width=400}
+:::
+
+:::: 
+
+### Next Steps
+
+:::: {.columns}
+
+::: {.column width="50%"}  
+<button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-external-link">L ink 1</button> 
+:::
+
+::: {.column width="50%"}
+<button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-external-link">Link 2</button>
+:::
+
+:::: 
+

src/landing_page/landing_page.qmd

@@ -0,0 +1,37 @@
+/*-- scss:rules --*/
+.btn-our-doc {
+    cursor: pointer;
+    background: #0f62fe !important; /* IBM primary blue color */
+    color: white;
+    border-radius: 999em;
+    align-items: center;
+    gap: .5em;
+    font-size: 16px;
+    padding: 1.5rem;
+    margin-top: 110px;
+}
+
+
+.btn-external-link {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: .5rem;
+    border-radius: .5em;
+    padding: 1rem;
+    box-shadow: blue;
+    position: relative;
+    border-color: #e4e4e7;
+    padding-right: 200px;
+}
+
+@media (min-width: 1200px) {
+    h1, .h1 {
+        font-size: 3.5rem;
+    }
+}
+
+@media (min-width: 1200px) {
+    h3, .h3 {
+        font-size: 2rem;
+    }
+}