diff --git a/src/_layouts/homepage.html b/src/_layouts/homepage.html index b9d3bdb5f3..bb428eaeea 100644 --- a/src/_layouts/homepage.html +++ b/src/_layouts/homepage.html @@ -5,10 +5,14 @@ {% render 'cookie-notice.html' %} {% render 'gtags.html' %} {% include 'page-header.html' %} - {% include 'navigation-side.html' %} -
- {{content}} -
- {% render 'page-footer.html' %} +
+
+ {% include 'navigation-side.html' %} +
+ {{content}} +
+
+ {% render 'page-footer.html' %} +
diff --git a/src/_sass/_dash.scss b/src/_sass/_dash.scss index dc0b8f168a..ed019ba893 100644 --- a/src/_sass/_dash.scss +++ b/src/_sass/_dash.scss @@ -4,392 +4,402 @@ // Homepage styles // Sizes -$dash-row-height: 640px; -$dash-info-size: 512px; -$dash-info-padding: 24px; $dash-max-width: 1330px; -.dash-align-right { - display: block; - margin-right: 0; - margin-left: auto; -} - -.dash-align-left { - display: block; - margin-left: 0; - margin-right: auto; -} - -.dash-header-callout { - font-family: $site-font-family-alt; - background-color: $dash-callout; - text-align: center; - padding: 64px 0 64px 0 !important; - - .callout-button { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 17px; +body.homepage { + .dash-header-callout { + font-family: $site-font-family-alt; + background-color: $dash-callout; + text-align: center; + padding: 4rem 0 4rem 0 !important; - > button { + .callout-button { display: flex; - flex-direction: row; - text-decoration: none; + flex-direction: column; align-items: center; - color: $site-color-card-link; + margin-top: 1.25rem; - &:hover { + > a { + display: flex; + flex-direction: row; text-decoration: none; - color: darken($site-color-card-link, 20%); - } + align-items: center; + gap: 0.5rem; + color: $site-color-card-link; - > i { - margin-right: 8px; + &:hover { + text-decoration: none; + color: darken($site-color-card-link, 20%); + } } } - } - .callout-title { - font-size: 28px; - color: white; + .callout-oss { + font-size: .95rem; + color: $dash-dark-grey; + margin-left: 2rem; + margin-right: 2rem; + margin-top: 1rem; + + @media (min-width: 992px) { + font-size: 1.25rem; + margin-left: 0; + margin-right: 0; + } - @include bootstrap.media-breakpoint-down(md) { - font-size: 17px; - margin-left: 30px; - margin-right: 30px; - } - } + & svg { + width: 1em; + height: 1em; + } - .callout-oss { - font-size: 20px; - color: $dash-dark-grey; - margin-top: 16px; + p { + display: inline-flex; + align-items: center; + } - & svg { - width: 1em; - height: 1em; - } + a { + color: $dash-dark-grey; + display: inline-flex; + text-decoration: none; - @include bootstrap.media-breakpoint-down(md) { - font-size: 14px; - margin-left: 30px; - margin-right: 30px; + &:hover, &:focus, &:active { + color: $white-base; + } + } } - a { - color: $dash-dark-grey; - vertical-align: bottom; + .callout-title { + font-size: 1.125rem; + color: white; + margin-left: 2rem; + margin-right: 2rem; - &:hover, &:focus, &:active { - color: $white-base; + @media (min-width: 768px) { + font-size: 1.25rem; + margin-left: 3rem; + margin-right: 3rem; } - } - } - .made-by { - width: 180px; - margin-top: 27px; - opacity: 0.5; - } -} - -.embedded-video-wrapper { - width: 100%; - padding-bottom: 56.25%; // 16:9 aspect ratio - position: relative; + @media (min-width: 992px) { + font-size: 1.75rem; + } + } - #video-player { - height: 100%; - position: absolute; - width: 100%; + .made-by { + width: 180px; + margin-top: 27px; + opacity: 0.5; + } } -} -.dash-dart-features { - font-family: $site-font-family-alt; - padding-bottom: 80px !important; - background-color: $dark-darker-black; + .dash-dart-features { + font-family: $site-font-family-alt; + padding: 2rem 1rem 4rem; + background-color: $dark-darker-black; - .feature { - margin-left: auto; - margin-right: auto; - text-align: center; - width: 325px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 1rem; + align-items: center; - @include bootstrap.media-breakpoint-down(md) { - width: 225px; + @media (min-width: 768px) { + flex-direction: row; + align-items: unset; } - } - .feature-title { - font-size: 28px; - color: $dash-off-white; - margin-top: 25px; - margin-bottom: 20px; - line-height: 33px; + .feature { + margin-top: 2rem; + text-align: center; + width: 14rem; - @include bootstrap.media-breakpoint-down(md) { - font-size: 22px; + @media (min-width: 992px) { + width: 18rem; + } } - } - - .feature-icon img { - width: 80px; - height: 80px; - margin-top: 50px; - border-radius: 50%; - } - .feature-desc { - font-size: 16px; - color: $dash-dark-grey; - line-height: 20px; - } - -} + .feature-title { + font-size: 1.375rem; + color: $dash-off-white; + margin-top: 1.25rem; + margin-bottom: 1.25rem; + line-height: 33px; -.dash-row { - background-color: white; - padding-bottom: 20px; + @media (min-width: 992px) { + font-size: 1.75rem; + } + } - a, button { - color: $dash-dark-black; + .feature-icon img { + width: 5rem; + height: 5rem; + border-radius: 50%; + } - &:focus { - outline: $dash-highlight auto 2px; + .feature-desc { + font-size: 1rem; + color: $dash-dark-grey; + line-height: 1.25rem; } } - .content-info { + .dash-row { display: flex; - align-items: center; + background-color: $dash-off-white; + width: 100%; - .content-container { - padding: $dash-info-padding; - max-width: $dash-info-size; - - @include bootstrap.media-breakpoint-down(md) { - position: relative; - left: 0; - top: 0; - margin: 20px auto 0; - transform: none !important; - padding: 20px; - } + a, button { + color: $dash-dark-black; - @include bootstrap.media-breakpoint-down(sm) { - width: 100%; + &:focus { + outline: $dash-highlight auto 2px; } } - .content-icon img { - width: 68px; - height: 68px; - border-radius: 50%; - margin-bottom: 18px; + .content-info { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem 1.5rem 0.5rem; + min-width: 45%; + + .content-container { + padding: 1rem; + max-width: 512px; + width: 100%; - @include bootstrap.media-breakpoint-down(md) { - margin-bottom: 10px; + @media (min-width: 992px) { + padding: 1.5rem; + } } - } - .content-feature { - font-size: 43px; - margin-bottom: 34px; - line-height: 1.2; - color: $dash-dark-black; + .content-icon img { + width: 68px; + height: 68px; + border-radius: 50%; + margin-bottom: 12px; - @include bootstrap.media-breakpoint-down(md) { - font-size: 24px; + @media (min-width: 992px) { + margin-bottom: 16px; + } } - } - - .content-desc { - font-family: $site-font-family-base; - font-weight: lighter; - font-size: 17px; - line-height: 24px; - color: $dash-dark-black; - list-style: none; - .highlight { - color: $dash-highlight; + .content-feature { + font-size: 24px; + margin-bottom: 1.75rem; + line-height: 1.2; + color: $dash-dark-black; - .animated-bullet { - height: 25px; - background-color: $dash-highlight; + @media (min-width: 992px) { + font-size: 43px; } + } - a, button { + .content-desc { + font-family: $site-font-family-base; + font-size: .9rem; + line-height: 24px; + color: $dash-dark-black; + list-style: none; + + .highlight { color: $dash-highlight; + + .animated-bullet { + height: 25px; + background-color: $dash-highlight; + } + + a, button { + color: $dash-highlight; + } } - } - @include bootstrap.media-breakpoint-down(md) { - font-size: 14px; - } + @media (min-width: 992px) { + font-size: 1.125rem; + } - ul li { - margin-bottom: 10px; - list-style: none; + ul li { + margin-bottom: 10px; + list-style: none; - &:focus { - outline: none; + &:focus { + outline: none; + } } } + } - .current-item { - color: black !important; - } + .animated-bullet { + background-color: $dark-darker-black; + height: 10px; + width: 5px; + margin-top: 5px; + transition: height 0.5s, background-color 0.5s; } - } - .animated-bullet { - background-color: $dark-darker-black; - height: 10px; - width: 5px; - margin-top: 5px; - transition: height 0.5s, background-color 0.5s; - } + .bullet-container { + float: left; + margin-right: 10px; + } + + .bullet-text { + margin-left: 20px; + } - .bullet-container { - float: left; - margin-right: 10px; + .content-image { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + min-width: 40%; + background-color: $dark-darker-black; + + img { + max-height: 640px; + } + } } - .bullet-text { - margin-left: 20px; + .dash-try-dart { + background-color: $dash-off-black; + padding: 40px 80px !important; + height: 745px; + + .title { + color: $dash-off-white; + font-size: 43px; + } } - .content-image { + .dash-header { + background-color: $dash-header-bg; display: flex; flex-direction: column; - justify-content: center; + align-items: center; - background-color: $dark-darker-black; - padding: 0 !important; + > video { + display: none; + width: 100%; + max-width: $dash-max-width; + } - img { - max-height: $dash-row-height; + @media (min-width: 768px) { + > video { + display: block; + } + + > img { + display: none; + } } } -} -.dash-try-dart { - background-color: $dash-off-black; - padding: 40px 80px !important; - height: 745px; + .dash-dartpad-row { + background-color: $dash-callout; + display: none; - .title { - color: $dash-off-white; - font-size: 43px; + @media (min-width: 768px) { + display: block; + } } -} -.dash-header { - background-color: $dash-header-bg; - display: flex; - flex-direction: column; - align-items: center; -} + .dash-dartpad { + display: flex; + flex-direction: column; + align-items: center; -.dash-header video { - width: 100%; - max-width: $dash-max-width; - margin-bottom: -10px; + width: 100vw; + height: 102vh; + padding: 3rem 2rem; - @include bootstrap.media-breakpoint-down(md) { - padding-top: 30px; - padding-bottom: 30px; - } -} + background-color: $dash-callout; -.dash-dartpad-row { - background-color: $dash-callout; -} + h2 { + font-size: 43px; + margin: 0.5em 0 0.5em 0; + line-height: 1.2; + color: $dash-off-white; + } -.dash-dartpad { - flex: 1; + h3 { + color: $dash-off-white; + margin-left: 1rem; + margin-right: 1rem; + } - display: flex; - flex-direction: column; - align-items: center; + a { + color: $site-color-card-link; - width: 100vw; - height: 102vh; - padding: 32px; - margin-block-end: 48px; + &:hover, &:focus, &:active { + color: darken($site-color-card-link, 20%); + } + } - background-color: $dash-callout; + #dartpad-host { + height: 100%; + width: 100%; + max-width: $dash-max-width; + display: flex; - h2 { - font-size: 43px; - margin: 0.5em 0 0.5em 0; - line-height: 1.2; - color: $dash-off-white; + iframe { + border: 1px solid $dash-dartpad-border; + resize: none; + } + } } - h3 { - color: $dash-off-white - } + .dart-dash-details { + display: flex; + flex-direction: column; + font-family: $site-font-family-alt; - select { - margin: 8px 0 8px 0; - border-radius: 4px; + .dash-row { + justify-content: space-between; + flex-direction: column; - &:focus, &:active { - outline: none; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08), - 0 0 0 0.2rem rgba(255, 255, 255, 0.5); - } - } + @media (min-width: 768px) { + flex-direction: row-reverse; - a { - color: $site-color-card-link; + &:nth-child(even) { + flex-direction: row; + } - &:hover, &:focus, &:active { - color: darken($site-color-card-link, 20%); - } - } + > div.content-info { + justify-content: flex-end; + } - #dartpad-host { - height: 100%; - width: 100%; - max-width: $dash-max-width; - display: flex; + > div.content-image { + align-items: flex-start; + } - iframe { - flex: 1; - border: 1px solid $dash-dartpad-border; - resize: none; - } - } -} + &:nth-child(even) { + > div.content-info { + justify-content: flex-start; + } -#page-content { - padding-bottom: 0 !important; -} + > div.content-image { + align-items: flex-end; + } + } + } + } -.dart-dash-details { - font-family: $site-font-family-alt; + a { + text-decoration: underline; - a { - text-decoration: underline; - } + &:hover { + text-decoration-thickness: 1.5px; + } + } - .selector { - margin-left: -30px; + .selector { + padding-inline-start: 0.5rem; + } } -} -.nav-link { - &:focus { - outline: $dash-highlight auto 2px; + a.frontanchor { + padding-top: 2rem; } } - -a.frontanchor { - padding-top: 50px; -} diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss index 7ed1d5080b..c6bc440905 100644 --- a/src/_sass/_site.scss +++ b/src/_sass/_site.scss @@ -2,7 +2,6 @@ @use 'core/colors'; @use 'core/mixins' as *; -@use 'core/bootstrap'; @use 'core/base'; @use 'core/utils'; @@ -43,10 +42,6 @@ justify-content: center; } - body.homepage & { - padding: 0 0 60px; - } - body.obsolete & { border: 10px solid $alert-warning-bg; border-top: none; @@ -654,16 +649,6 @@ body.homepage { #sidenav { display: none; } - - section { - padding: 0; - } - - .card-grid { - justify-content: center; - margin-top: 30px; - margin-bottom: 30px; - } } // Error Page diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js index 6144cc1933..3ba0a64f87 100644 --- a/src/content/assets/js/main.js +++ b/src/content/assets/js/main.js @@ -60,44 +60,6 @@ function switchBanner(galleryName) { imgSelector.setAttribute('src', this.dataset.banner); } -function initVideoModal() { - let videoModalObject = $('[data-video-modal]'); - var player; - - function onPlayerReady() { - videoModalObject.on('shown.bs.modal', function (event) { - if (player) { - let videoId = event.relatedTarget.dataset.video; - player.loadVideoById(videoId); - player.playVideo(); - } - }); - - videoModalObject.on('hide.bs.modal', function (event) { - if (player) { - player.stopVideo(); - } - }); - } - - if (videoModalObject.length > 0) { - // there is a video modal in the DOM, load the YouTube API - let tag = document.createElement('script'); - tag.src = 'https://youtube.com/iframe_api'; - let firstScriptTag = document.getElementsByTagName('script')[0]; - firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); - - window.onYouTubeIframeAPIReady = function () { - player = new YT.Player('video-player', { - videoId: '5F-6n_2XWR8', - events: { - "onReady": onPlayerReady, - }, - }); - }; - } -} - function adjustToc() { // Adjustments to the jekyll-toc TOC. var tocWrapper = $('#site-toc--side'); @@ -235,9 +197,6 @@ $(function() { root.toggleClass('toc-collapsed'); }); - // Initialize the video on the homepage, if it exists. - initVideoModal(); - document.addEventListener('keydown', handleSearchShortcut); createGallery( diff --git a/src/content/index.html b/src/content/index.html index 1f9e376c38..32acc693d9 100644 --- a/src/content/index.html +++ b/src/content/index.html @@ -6,19 +6,14 @@ high-quality apps on any platform. --- -
-
- -
-
- -
+
+ Paint your UI to life
@@ -28,9 +23,9 @@ An approachable, portable, and productive language for high-quality apps on any platform
- + + play_circleWatch video +
Supported by Google @@ -46,300 +41,115 @@
-
-
-
-
-
Multiplatform performance
-
Approachable
-
Develop with a consistent, concise, and strongly typed - programming language that offers modern features like null safety and pattern matching. -
-
+
+
Multiplatform performance
+
Approachable
+
Develop with a consistent, concise, and strongly typed + programming language that offers modern features like null safety and pattern matching.
-
-
-
Client optimised
-
Productive
development
-
Make changes iteratively: use hot - reload to see the result instantly in your running app. -
-
-
-
-
-
Productive development
-
Portable and fast
on all platforms
-
Compile to ARM, x64, and RISC-V machine - code for mobile, desktop, and backend. Or, compile to JavaScript & WebAssembly - for the web.
-
-
+
+
+
Client optimised
+
Productive
development
+
Make changes iteratively: use hot + reload to see the result instantly in your running app.
+
+
Productive development
+
Portable and fast
on all platforms
+
Compile to ARM, x64, and RISC-V machine + code for mobile, desktop, and backend. Or, compile to JavaScript & WebAssembly + for the web.
+
- -
-
-
- Async await functions + +
+
+
+ Async await functions
-
+
-
- Multiplatform performance -
-
Approachable
-
- -
-
-
-
-
-
-
- Hot reload changes -
-
-
-
- Productive development -
-
Productive Development
-
-
    -
  • -
    -
    -
    -
    -
    - Make changes to your source code iteratively, using - hot - reload - to instantly see the effect in the running app. -
    -
    -
    • -
  • -
    -
    -
    -
    -
    - Write code using a flexible type system with rich - static analysis and powerful, configurable tooling. -
    -
    -
    • -
  • -
    -
    -
    -
    -
    - Do profiling, - logging, - and debugging - with your code editor of choice. -
    -
    -
    • -
-
-
-
-
-
-
-
- Compiling dart file -
-
-
-
- Client optimized -
-
Fast on all platforms
-
- -
-
-
-
-
- - -
-
-
-
Multiplatform performance
Approachable
-
- Async await functions -
-
-
- Hot reload your changes +
+
+ Hot reload your changes
-
-
+
+
Productive development
Productive development
  • -
    -
    -
    -
    -
    - Make changes to your source code iteratively, using - hot reload - to instantly see the effect in the running app. -
    + +
    + Make changes to your source code iteratively, using + hot reload + to instantly see the effect in the running app.
  • -
    -
    -
    -
    -
    - Write code using a flexible type system with rich - static analysis and powerful, configurable tooling. -
    + +
    + Write code using a flexible type system with rich + static analysis and powerful, configurable tooling.
  • -
    -
    -
    -
    -
    - Do profiling, - logging, - and debugging - with your code editor of choice. -
    + +
    + Do profiling, + logging, + and debugging + with your code editor of choice.
    -
@@ -347,59 +157,51 @@
-
-
-
-
Multiplatform performance
+
+
+ Compiling dart file +
+
+
+
Multiplatform performance
Fast on all platforms
-
- Compiling dart file -
-
+
- +

Try Dart in your browser

@@ -410,17 +212,3 @@

Want more practice? Learn the language,

- - -