diff --git a/catalog/site/_includes/default.html b/catalog/site/_includes/default.html new file mode 100644 index 0000000000..c1020e331a --- /dev/null +++ b/catalog/site/_includes/default.html @@ -0,0 +1,67 @@ + + + + + + + + {% if title %}{{ title }}{% endif %} + + + {% inlinecss "global.css" %} + + + + + + {% inlinejs "inline/apply-saved-theme.js" %} + + + + + + {% block head %}{% endblock %} + + + + + {% inlinejs "ssr-utils/dsd-polyfill.js" %} + + + + {% block topappbar %}{{ topappbar | safe }}{% endblock %} + +
+ + + {% block content %}{{ content | safe }}{% endblock %} +
+ + {% for component in collections.component|filtersort('data.name') %} +
  • + +
    • + {% endfor %} +     +     +     + + diff --git a/catalog/site/css/global.css b/catalog/site/css/global.css new file mode 100644 index 0000000000..88b9566163 --- /dev/null +++ b/catalog/site/css/global.css @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +/* latin */ +@font-face { + font-family: 'Google Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/material-web/fonts/google-sans/regular.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin -mono */ +@font-face { + font-family: 'Google Sans Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/material-web/fonts/google-sans/mono.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +:root { + font-family: 'Google Sans', Roboto, system-ui; + background-color: var(--md-sys-color-background); + color: var(--md-sys-color-on-background); + --catalog-top-app-bar-height: 48px; + --catalog-top-app-bar-padding-block: 12px; + scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2); + + /* These values are copied from mio */ + --catalog-display-xl-font-size: 88px; + --catalog-display-m-font-size: 45px; + --catalog-title-l-font-size: 22px; + --catalog-title-m-font-size: 16px; + --catalog-title-s-font-size: 14px; + --catalog-body-l-font-size: 16px; + --catalog-body-m-font-size: 14px; +} + +@media screen and (max-width: 600px) { + :root { + --catalog-display-xl-font-size: 55px; + --catalog-title-l-font-size: 16px; + --catalog-body-l-font-size: 14px; + --catalog-body-m-font-size: 12px; + } +} + +body { + margin: 0; + font-size: var(--catalog-body-l-font-size); +} + +a { + color: var(--md-sys-color-primary); + text-decoration: none; +} + +a:hover, +a:focus-visible { + text-decoration: underline; +} + +nav-drawer md-list-item-link[selected] { + --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-highest); +} + +md-list { + --md-list-container-color: transparent; + display: block; + margin-inline: 12px; + min-width: unset; +} + +md-list-item-link { + margin-block: 12px; + display: block; +} + +md-list-item-link:first-of-type { + margin-block: 4px; +} + +h1 { + font-size: 48px; +} diff --git a/catalog/site/css/home-page.css b/catalog/site/css/home-page.css new file mode 100644 index 0000000000..4bb1529f87 --- /dev/null +++ b/catalog/site/css/home-page.css @@ -0,0 +1,10 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + + h1, +.subtitle { + text-align: center; +} diff --git a/catalog/site/fonts/google-sans/mono.woff2 b/catalog/site/fonts/google-sans/mono.woff2 new file mode 100644 index 0000000000..6047f4f284 Binary files /dev/null and b/catalog/site/fonts/google-sans/mono.woff2 differ diff --git a/catalog/site/fonts/google-sans/regular.woff2 b/catalog/site/fonts/google-sans/regular.woff2 new file mode 100644 index 0000000000..3ad0456c6a Binary files /dev/null and b/catalog/site/fonts/google-sans/regular.woff2 differ diff --git a/catalog/site/index.html b/catalog/site/index.html new file mode 100644 index 0000000000..22e5a06704 --- /dev/null +++ b/catalog/site/index.html @@ -0,0 +1,17 @@ +{% extends 'default.html' %} + +{% block head %} + + +{% endblock %} + +{% block content %} + +

    Material Web

    +
    The official web component set for Material 3
    + +
    + TODO +
    + +{% endblock %} \ No newline at end of file