- -
diff --git a/site/app/css/components.css b/site/app/css/components.css index 7a38cbdc..2187d59d 100644 --- a/site/app/css/components.css +++ b/site/app/css/components.css @@ -48,7 +48,7 @@ html { body { margin: 0; min-height: 100%; - background-color: #fff; + background-color: transparent; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; @@ -328,8 +328,8 @@ label { width: 100%; height: 38px; padding: 8px 12px; - margin-bottom: 10px; - font-size: 14px; + /* margin-bottom: 10px; */ + font-size: 16px; line-height: 1.42857143; color: #333333; vertical-align: middle; diff --git a/site/app/css/sigma-dev-8020.css b/site/app/css/sigma-dev-8020.css index bd3b756a..8ecbf2b7 100644 --- a/site/app/css/sigma-dev-8020.css +++ b/site/app/css/sigma-dev-8020.css @@ -2973,7 +2973,9 @@ figure { } .section-hero { - background-image: linear-gradient(140deg, rgba(192, 149, 177, 0.15), rgba(47, 178, 175, 0.15)); + /* background-image: linear-gradient(140deg, rgba(192, 149, 177, 0.15), rgba(47, 178, 175, 0.15)); */ + background-color: transparent; + background-image: url(https://cdn.prod.website-files.com/666bbba4ff7240a20f4ccccf/685106838d461923ec10fc64_0ae8ba725281d3ce0757318ef80f6942_grid-fade.svg); } .section-hero.g-section-padding-medium.is-snowflake-page { @@ -3420,11 +3422,11 @@ figure { display: -ms-flexbox; display: flex; width: 100%; - max-width: 1248px; + /* max-width: 1248px; */ margin-right: auto; margin-left: auto; - padding-right: 16px; - padding-left: 16px; + padding-right: 25px; + padding-left: 25px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -71898,3 +71900,24 @@ a.buttons-wrapper .w-button { background-color: #0000FF !important; color: #FFFFFF !important; } + +/* Search placeholder styling */ +#search::placeholder { + font-weight: 500; + color: #999; +} + +#search::-webkit-input-placeholder { + font-weight: 500; + color: #999; +} + +#search::-moz-placeholder { + font-weight: 500; + color: #999; +} + +#search:-ms-input-placeholder { + font-weight: 500; + color: #999; +} diff --git a/site/app/data/featured-quickstarts.json b/site/app/data/featured-quickstarts.json new file mode 100644 index 00000000..0002c7c6 --- /dev/null +++ b/site/app/data/featured-quickstarts.json @@ -0,0 +1,35 @@ +{ + "recentQuickStarts": [ + { + "title": "First Friday Features - November 2025", + "id": "11_2025_first_friday_features", + "category": "Administration", + "date": "Dec 9, 2025" + }, + { + "title": "Popular Functions", + "id": "functions_popular_functions", + "category": "Functions", + "date": "Dec 3, 2025" + }, + { + "title": "Connect Snowflake Intelligence to Sigma Workbook", + "id": "partners_snowflake_intelligence", + "category": "Functions", + "date": "Dec 3, 2025" + }, + { + "title": "Plugin Use Case 01: Dashboard Builder (Embedding Series)", + "id": "embedding_plugin_useage_01_dashboard_builder", + "category": "Security", + "date": "Dec 3, 2025" + }, + { + "title": "QuickStarts API Toolkit", + "id": "developers_quickstarts_api_tookit", + "category": "Developers", + "date": "Sep 17, 2025" + } + ] +} + diff --git a/site/app/styles/_app.scss b/site/app/styles/_app.scss index c16e6e0b..5099fe43 100644 --- a/site/app/styles/_app.scss +++ b/site/app/styles/_app.scss @@ -72,8 +72,8 @@ ul, li { .site-width { margin: 0 auto; - width: 90vw; - max-width: 1024px; + width: 95vw; + // max-width: 1024px; commented out by PB } #banner { diff --git a/site/app/styles/_categories.scss b/site/app/styles/_categories.scss index 6d69f647..9f1c5166 100644 --- a/site/app/styles/_categories.scss +++ b/site/app/styles/_categories.scss @@ -103,6 +103,14 @@ $catagory-colors: ( .#{$category}-icon { background-image: url('/images/#{$icon}'); } + + .#{$category}-bar { + background-color: $color; + color: #000; + border-radius: 0 !important; + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + } } } diff --git a/site/app/styles/_codelab-card.scss b/site/app/styles/_codelab-card.scss index 13e1f905..fd6b5933 100644 --- a/site/app/styles/_codelab-card.scss +++ b/site/app/styles/_codelab-card.scss @@ -24,9 +24,9 @@ $card-col-height: 200px; // column mode #cards { display: flex; flex-wrap: wrap; - justify-content: space-evenly; + // justify-content: space-evenly; margin-bottom: $keyline * 1; - padding: 0 $keyline * 2 0 $keyline * 2; + // padding: 0 $keyline * 2 0 $keyline * 2; } .codelab-card { @@ -37,7 +37,8 @@ $card-col-height: 200px; // column mode margin: 0 $keyline * 2 $keyline * 4 $keyline * 2; max-width: $card-width; border-radius: 0; - border-bottom: 6px solid transparent; + border-bottom: 0; + overflow: hidden; -webkit-box-shadow: 2px 4px 10px 0 rgba(0,0,0,.1); box-shadow: 2px 4px 10px 0 rgba(0,0,0,.1); @@ -82,20 +83,24 @@ $card-col-height: 200px; // column mode } .description { - padding: $keyline * 2 $keyline * 2 0 $keyline * 2; - flex: 1 0 auto; + padding: $keyline * 2; color: #212121; -webkit-font-smoothing: antialiased; font-family: $lato-bold !important; + flex: 1; } } .card-footer { border-top: 0; - display: flex; - align-items: center; - justify-content: space-between; - padding: $keyline 2 * $keyline; + display: block; + padding: 0; + margin: 0; + margin-top: auto; + width: 100%; + position: relative; + left: 0; + right: 0; paper-button { @include md-font-button(); @@ -114,6 +119,19 @@ $card-col-height: 200px; // column mode background-repeat: no-repeat; background-position: 0 50%; } + + .category-bar { + width: 100%; + padding: 14px 16px; + text-align: center; + font-family: $lato-bold !important; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.5px; + border-radius: 0; + margin: 0; + display: block; + } } .card-pin { diff --git a/site/app/styles/_overrides.scss b/site/app/styles/_overrides.scss index be5834ec..ff01d2e1 100644 --- a/site/app/styles/_overrides.scss +++ b/site/app/styles/_overrides.scss @@ -26,7 +26,6 @@ Sigma specific category classes */ $color-administration: #000000; $color-aiapps: #4CAF50; -$color-dataapps: #4CAF50; $color-developers: #3F51B5; $color-embedding: #06dbf7; $color-fundamentals: #FFA726; @@ -39,7 +38,6 @@ $color-templates: #EC407A; $icon-administration: 'administration.svg'; $icon-aiapps: 'aiapps.svg'; -$icon-dataapps: 'dataapps.svg'; $icon-developers: 'developers.svg'; $icon-embedding: 'embedding.svg'; $icon-fundamentals: 'Solutions_MarkAnal.svg'; @@ -52,7 +50,6 @@ $icon-templates: 'workbook-template.svg'; @include codelab-card(['administration'], $color-administration, $icon-administration); @include codelab-card(['aiapps'], $color-aiapps, $icon-aiapps); -@include codelab-card(['dataapps'], $color-dataapps, $icon-dataapps); @include codelab-card(['developers'], $color-developers, $icon-developers); @include codelab-card(['embedding'], $color-embedding, $icon-embedding); @include codelab-card(['fundamentals'], $color-fundamentals, $icon-fundamentals); @@ -63,6 +60,17 @@ $icon-templates: 'workbook-template.svg'; @include codelab-card(['partners'], $color-partners, $icon-partners); @include codelab-card(['templates'], $color-templates, $icon-templates); +// Special override for dark category bars - white text +.administration-bar, +.functions-bar, +.partners-bar, +.use-cases-bar, +.security-bar, +.aiapps-bar, +.developers-bar { + color: #fff !important; +} + /** Categories in Use (so far): Administration AI Apps diff --git a/site/app/styles/_variables.scss b/site/app/styles/_variables.scss index b804e15d..055a0d81 100644 --- a/site/app/styles/_variables.scss +++ b/site/app/styles/_variables.scss @@ -108,7 +108,7 @@ $grey500: #9e9e9e; $grey700: #616161; $grey800: #424242; -$backgroundColor: #fff; +$backgroundColor: transparent; $mainColor: $snowflake-blue; $accentColor: $valencia-orange; diff --git a/site/app/styles/sigma-dev-8020.css b/site/app/styles/sigma-dev-8020.css index 3b6aa615..997e4b11 100644 --- a/site/app/styles/sigma-dev-8020.css +++ b/site/app/styles/sigma-dev-8020.css @@ -1034,7 +1034,7 @@ figure { .g-section-padding-medium { padding-top: 5rem; - padding-bottom: 5rem; + /* padding-bottom: 5rem; */ } .g-section-padding-small { @@ -2970,7 +2970,9 @@ figure { } .section-hero { - background-image: linear-gradient(140deg, rgba(192, 149, 177, 0.15), rgba(47, 178, 175, 0.15)); + /* background-image: linear-gradient(140deg, rgba(192, 149, 177, 0.15), rgba(47, 178, 175, 0.15)); */ + background-color: #f0f0f0; + background-image: url(https://cdn.prod.website-files.com/666bbba4ff7240a20f4ccccf/685106838d461923ec10fc64_0ae8ba725281d3ce0757318ef80f6942_grid-fade.svg); } .section-hero.g-section-padding-medium.is-snowflake-page { @@ -3417,11 +3419,11 @@ figure { display: -ms-flexbox; display: flex; width: 100%; - max-width: 1248px; + /* max-width: 1248px; commented out by PB */ margin-right: auto; margin-left: auto; - padding-right: 16px; - padding-left: 16px; + padding-right: 25px; + padding-left: 25px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; diff --git a/site/app/views/archive/index.html b/site/app/views/archive/index.html index f0e10e89..a21790f0 100644 --- a/site/app/views/archive/index.html +++ b/site/app/views/archive/index.html @@ -96,6 +96,205 @@ #displayText { display: none; } + + /* Header section - gradient background */ + .section-hero { + background: linear-gradient(to bottom, rgba(243, 234, 252, 0.5), #FFFFFF) !important; + border-bottom: 1px solid #E5E7EB !important; + padding-top: 6rem !important; + padding-bottom: 2rem !important; + } + + /* Responsive Grid System */ + #cards { + display: grid !important; + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; + gap: 1rem !important; + } + + @media (min-width: 640px) { + #cards { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + } + + @media (min-width: 768px) { + #cards { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + } + + @media (min-width: 1024px) { + #cards { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + } + + @media (min-width: 1280px) { + #cards { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + } + } + + @media (min-width: 1536px) { + #cards { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + } + + /* Card styling updates */ + .codelab-card { + background-color: #FFFFFF !important; + border-radius: 6px !important; + border: 1px solid #D1D5DB !important; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; + transition: all 0.2s ease !important; + overflow: hidden !important; + padding: 0 !important; + display: flex !important; + flex-direction: column !important; + cursor: pointer !important; + } + + .codelab-card:hover { + transform: translateY(-2px) !important; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; + border-color: #2563EB !important; + } + + /* Make card title a clickable link */ + .codelab-card .description { + color: #374151 !important; + font-size: 1rem !important; + line-height: 1.25rem !important; + padding: 1rem 1rem 0.5rem 1rem !important; + transition: color 0.2s ease !important; + min-height: 3.5rem !important; + cursor: pointer !important; + } + + .codelab-card:hover .description { + color: #2563EB !important; + } + + /* Hide the old Start button */ + .codelab-card .card-footer a.button-secondary { + display: none !important; + } + + /* Category bar at bottom */ + .card-footer { + margin-top: auto !important; + padding: 1rem !important; + display: flex !important; + align-items: flex-start !important; + justify-content: flex-start !important; + } + + .card-footer .category-icon { + display: none !important; + } + + /* Category pills with proper styling */ + .card-footer .category-bar, + .codelab-card .card-footer .category-bar, + .category-bar, + .administration-bg, + .aiapps-bg, + .dataapps-bg, + .developers-bg, + .embedding-bg, + .fundamentals-bg, + .functions-bg, + .partners-bg, + .security-bg, + .tables-bg, + .templates-bg, + .use-cases-bg { + display: inline-block !important; + width: auto !important; + padding: 0.25rem 0.75rem !important; + text-align: center !important; + font-family: 'Lato', sans-serif !important; + font-weight: 600 !important; + font-size: 0.75rem !important; + text-transform: uppercase !important; + letter-spacing: 0.025em !important; + border-radius: 9999px !important; + -webkit-border-radius: 9999px !important; + -moz-border-radius: 9999px !important; + margin: 0 !important; + color: #FFFFFF !important; + border: none !important; + box-shadow: none !important; + cursor: pointer !important; + } + + /* Footer link styling for better readability */ + .footer-link, + .footer-link:link, + .footer-link:visited { + color: #9CA3AF !important; + } + + .footer-link:hover { + color: #D1D5DB !important; + } + + /* Update header buttons to match Sigma homepage */ + .nav-button-wrapper a.button-secondary, + .nav-button-wrapper a.button-secondary:link, + .nav-button-wrapper a.button-secondary:visited, + .buttons-wrapper a.button-secondary, + .buttons-wrapper a.button-secondary:link, + .buttons-wrapper a.button-secondary:visited, + .section-hero a.button-secondary, + a.button-secondary.w-button { + background-color: #d4ff00 !important; + background-image: none !important; + border: 1px solid #000 !important; + color: #000 !important; + padding: 10px 24px !important; + border-radius: 50px !important; + font-size: 14px !important; + font-weight: 500 !important; + text-transform: none !important; + text-decoration: none !important; + display: inline-block !important; + } + + .nav-button-wrapper a.button-primary, + .nav-button-wrapper a.button-primary:link, + .nav-button-wrapper a.button-primary:visited, + .buttons-wrapper a.button-primary, + .buttons-wrapper a.button-primary:link, + .buttons-wrapper a.button-primary:visited, + .section-hero a.button-primary, + a.button-primary.w-button { + background-color: #d4ff00 !important; + background-image: none !important; + border: 1px solid #000 !important; + color: #000 !important; + padding: 10px 24px !important; + border-radius: 50px !important; + font-size: 14px !important; + font-weight: 500 !important; + text-transform: none !important; + text-decoration: none !important; + display: inline-block !important; + } + + .nav-button-wrapper a.button-secondary:hover, + .buttons-wrapper a.button-secondary:hover, + .section-hero a.button-secondary:hover { + background-color: rgba(0, 0, 0, 0.05) !important; + } + + .nav-button-wrapper a.button-primary:hover, + .buttons-wrapper a.button-primary:hover, + .section-hero a.button-primary:hover { + background-color: #c4ef00 !important; + } @@ -767,7 +966,7 @@