mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
update sport awesome, rename to .html and .css
This commit is contained in:
konnorrogers
181
docs/_includes/layout-templates/sport-awesome.css
Normal file
181
docs/_includes/layout-templates/sport-awesome.css
Normal file
@@ -0,0 +1,181 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
--wa-color-brand-fill-vivid: var(--wa-color-blue-20);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/** https://andy-bell.co.uk/my-favourite-3-lines-of-css/ */
|
||||
.flow > * + * {
|
||||
margin-block-start: var(--wa-flow-spacing);
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navigation--desktop::part(nav-items) {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.navigation--top::part(nav-items) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navigation--top wa-nav-item {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navigation--top wa-nav-item::part(content) {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navigation--top wa-nav-item {
|
||||
--text-color: var(--wa-color-brand-text-on-vivid);
|
||||
--text-color-hover: var(--wa-color-text-normal);
|
||||
--background-color: transparent;
|
||||
--background-color-hover: var(--wa-color-neutral-fill-muted-alt);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--wa-color-brand-fill-vivid);
|
||||
background-color: var(--wa-color-white);
|
||||
}
|
||||
|
||||
.header > * {
|
||||
padding-top: var(--wa-space-base);
|
||||
padding-bottom: var(--wa-space-base);
|
||||
}
|
||||
|
||||
.header__navigation {
|
||||
display: flex;
|
||||
clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%);
|
||||
padding-inline-start: 2.5rem;
|
||||
padding-inline-end: var(--wa-space-base);
|
||||
background-color: var(--wa-color-brand-fill-vivid);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header > .logo {
|
||||
padding-inline-start: var(--wa-space-base);
|
||||
/** Responsive font size for the top header to make it flow nicer */
|
||||
font-size: clamp(1rem, 4vw, 1.4rem);
|
||||
}
|
||||
|
||||
a.logo {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: var(--wa-color-text-normal);
|
||||
text-decoration: none;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
a.logo:is(:hover, :focus) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logo__accent {
|
||||
color: var(--wa-color-yellow-70);
|
||||
}
|
||||
|
||||
.navigation--desktop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigation--desktop wa-nav-item[current="page"] {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 8px;
|
||||
text-decoration-thickness: 4px;
|
||||
text-decoration-color: var(--wa-color-red-50);
|
||||
}
|
||||
|
||||
.navigation--extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
wa-layout[view="desktop"] [data-toggle-nav],
|
||||
wa-layout[view="desktop"]::part(navigation) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
wa-layout[view="mobile"] .navigation--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-banner {
|
||||
padding: var(--wa-space-base);
|
||||
text-align: center;
|
||||
background-color: var(--wa-color-yellow-80);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(clamp(175px, 100%, 400px), 1fr));
|
||||
gap: var(--wa-space-base);
|
||||
grid-template-rows: 1fr;
|
||||
align-items: start;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.stats-grid table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--wa-color-surface-outline);
|
||||
}
|
||||
|
||||
|
||||
.table-scroll {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stats-grid table * {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.stats-grid table th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-grid table td:nth-child(2) {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.navigation--top.navigation--social::part(nav-items) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.navigation--social {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.navigation--top .social-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
.navigation--top .social-link {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
292
docs/_includes/layout-templates/sport-awesome.html
Normal file
292
docs/_includes/layout-templates/sport-awesome.html
Normal file
@@ -0,0 +1,292 @@
|
||||
<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
|
||||
<header class="layout-banner" slot="banner">
|
||||
Reminder! Get your insurance paperwork in by Oct 12!
|
||||
</header>
|
||||
|
||||
<header class="header" slot="header">
|
||||
<a href="#" class="logo">
|
||||
<span>Sport</span> <span class="logo__accent">Awesome</span>
|
||||
</a>
|
||||
|
||||
<div class="header__navigation">
|
||||
<wa-nav-group class="navigation navigation--top navigation--desktop">
|
||||
<wa-nav-item href="#" current="page">Home</wa-nav-item>
|
||||
<wa-nav-item href="#">Schedule</wa-nav-item>
|
||||
<wa-nav-item href="#">Roster</wa-nav-item>
|
||||
<wa-nav-item href="#">Stats</wa-nav-item>
|
||||
<wa-nav-item href="#">Videos</wa-nav-item>
|
||||
|
||||
</wa-nav-group>
|
||||
|
||||
<wa-nav-group class="navigation navigation--top navigation--social">
|
||||
<wa-nav-item class="social-link" href="#"><wa-icon name="instagram"></wa-icon></wa-nav-item>
|
||||
<wa-nav-item class="social-link" href="#"><wa-icon name="facebook"></wa-icon></wa-nav-item>
|
||||
<wa-nav-item data-toggle-nav href="#"><wa-icon name="list"></wa-icon></wa-nav-item>
|
||||
</wa-nav-group>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a href="#" class="logo" slot="navigation-header">
|
||||
Sport <span class="logo__accent">Awesome</span>
|
||||
</a>
|
||||
|
||||
<wa-nav-group slot="navigation">
|
||||
<wa-nav-item href="#" current="page">
|
||||
<wa-icon name="house-door" slot="prefix"></wa-icon>
|
||||
Home
|
||||
</wa-nav-item>
|
||||
<wa-nav-item href="#">
|
||||
<wa-icon name="calendar" slot="prefix"></wa-icon>
|
||||
Schedule
|
||||
</wa-nav-item>
|
||||
<wa-nav-item href="#">
|
||||
<wa-icon name="people" slot="prefix"></wa-icon>
|
||||
Roster
|
||||
</wa-nav-item>
|
||||
<wa-nav-item href="#">
|
||||
<wa-icon name="graph-up-arrow" slot="prefix"></wa-icon>
|
||||
Stats
|
||||
</wa-nav-item>
|
||||
<wa-nav-item href="#">
|
||||
<wa-icon name="camera-video" slot="prefix"></wa-icon>
|
||||
Videos
|
||||
</wa-nav-item>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<wa-nav-group>
|
||||
<wa-nav-item href="#">
|
||||
<wa-icon name="instagram" slot="prefix"></wa-icon>
|
||||
Instagram
|
||||
</wa-nav-item>
|
||||
<wa-nav-item href="#">
|
||||
<wa-icon name="facebook" slot="prefix"></wa-icon>
|
||||
Facebook
|
||||
</wa-nav-item>
|
||||
</wa-nav-group>
|
||||
</wa-nav-group>
|
||||
|
||||
<main id="main-content" class="flow" style="padding: var(--wa-space-base);">
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 16px;">
|
||||
<img src="https://via.placeholder.com/1600x900" height="512" width="300" style="aspect-ratio: 16/9; min-width: 75%; flex-grow: 1;">
|
||||
<aside style="display: flex; flex-direction: column; border-radius: var(--wa-corners-1x); flex-grow: 1; flex-shrink: 1;">
|
||||
<header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-brand-fill-vivid); padding: var(--wa-space-base); text-align: center; border-top-left-radius: inherit; border-top-right-radius: inherit;">
|
||||
Upcoming
|
||||
</header>
|
||||
|
||||
<div style="color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-red-40); padding: 0.5rem; text-align: center; font-weight: bold;">
|
||||
Tryouts!
|
||||
</div>
|
||||
|
||||
<div style="background-color: var(--wa-color-neutral-90); padding: var(--wa-space-base); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; text-align: center;">
|
||||
<span style="font-weight: bold; font-size: 1.2rem;">Barclay's Center</span>
|
||||
|
||||
<br>
|
||||
|
||||
<time>Sat, Jul 3rd • 11:30am</time>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h1>Welcome to Sport <span class="logo__accent">Awesome</span></h1>
|
||||
|
||||
<p>
|
||||
Dolor quam voluptate nostrum neque eius. Quo nemo corporis repellat quia sunt molestiae! Dolorem labore laudantium nobis numquam reprehenderit? Voluptatibus odio animi nemo maiores accusamus eaque Assumenda perferendis omnis quae.
|
||||
Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus consequatur illo Cum eos adipisci ut!
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 style="text-align: center; font-weight: bold; font-size: 1.5em;">Stats</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Serve
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>2936</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serve %</td>
|
||||
<td>93.6%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aces</td>
|
||||
<td>268</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>189</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Serve Receive
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>2428</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pass Rating</td>
|
||||
<td>1.72</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pass Error %</td>
|
||||
<td>13.3%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3-pass %</td>
|
||||
<td>28.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Attack
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>3624</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kills</td>
|
||||
<td>1431</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>268</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hitting Efficiency</td>
|
||||
<td>0.254</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Kill %</td>
|
||||
<td>39.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Dig
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>3124</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Digs</td>
|
||||
<td>2235</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>889</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Dig %</td>
|
||||
<td>71.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Block
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Blocks</td>
|
||||
<td>348</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>414</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Block %</td>
|
||||
<td>31.6%</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Error %</td>
|
||||
<td>24.6%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Set
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Assists</td>
|
||||
<td>1364</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>81</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer slot="main-footer" style="background-color: var(--wa-color-brand-fill-vivid); color: var(--wa-color-text-inverse); padding: var(--wa-space-base); text-align: center;">
|
||||
© 2023 - Sport Awesome
|
||||
</footer>
|
||||
</wa-layout>
|
||||
@@ -61,6 +61,16 @@ module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy(assetsDir);
|
||||
eleventyConfig.setServerPassthroughCopyBehavior('passthrough'); // emulates passthrough copy during --serve
|
||||
|
||||
//
|
||||
// Add additional extensions. This allows things like {% include "layout.css" %}
|
||||
//
|
||||
eleventyConfig.setTemplateFormats([
|
||||
"html",
|
||||
"md",
|
||||
"njk",
|
||||
"css",
|
||||
])
|
||||
|
||||
//
|
||||
// Functions
|
||||
//
|
||||
|
||||
@@ -33,9 +33,11 @@ Reasons why you may want to disable sticky:
|
||||
|
||||
Toggling navigation can be done in a number of ways.
|
||||
|
||||
1. `<wa-layout><button data-navigation-toggle></button></wa-layout>` - The button with `data-navigation-toggle` must be inside the `<wa-layout>` component.
|
||||
1. `<wa-layout nav-state="open"></wa-layout>` -
|
||||
1. `document.querySelector("button").addEventListener("click", () => document.querySelector("wa-layout").toggleNavigation())`
|
||||
`<wa-layout><button data-navigation-toggle></button></wa-layout>` - The button with `data-navigation-toggle` must be inside the `<wa-layout>` component.
|
||||
|
||||
`<wa-layout nav-state="open"></wa-layout>` -
|
||||
|
||||
`document.querySelector("button").addEventListener("click", () => document.querySelector("wa-layout").toggleNavigation())`
|
||||
|
||||
```html:preview
|
||||
<style>
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: layout-example.njk
|
||||
---
|
||||
|
||||
{% set in_playground = true %}
|
||||
{% set html_file = "layout-templates/advanced-example.html.njk" %}
|
||||
{% set css_file = "layout-templates/advanced-example.css.njk" %}
|
||||
{% set html_file = "layout-templates/advanced-example.html" %}
|
||||
{% set css_file = "layout-templates/advanced-example.css" %}
|
||||
|
||||
{% include "playground.njk" %}
|
||||
|
||||
@@ -3,8 +3,8 @@ layout: layout-example.njk
|
||||
---
|
||||
|
||||
<style>
|
||||
{% include "layout-templates/advanced-example.css.njk" %}
|
||||
{% include "layout-templates/advanced-example.css" %}
|
||||
</style>
|
||||
|
||||
{% include "layout-templates/advanced-example.html.njk" %}
|
||||
{% include "layout-templates/advanced-example.html" %}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
layout: layout-example.njk
|
||||
---
|
||||
|
||||
{% set html_file = "layout-templates/app.html.njk" %}
|
||||
{% set css_file = "layout-templates/app.css.njk" %}
|
||||
{% set html_file = "layout-templates/app.html" %}
|
||||
{% set css_file = "layout-templates/app.css" %}
|
||||
|
||||
{% include "playground.njk" %}
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: layout-example.njk
|
||||
---
|
||||
|
||||
<style>
|
||||
{% include "layout-templates/app.css.njk" %}
|
||||
{% include "layout-templates/app.css" %}
|
||||
</style>
|
||||
|
||||
{% include "layout-templates/app.html.njk" %}
|
||||
{% include "layout-templates/app.html" %}
|
||||
|
||||
@@ -4,7 +4,7 @@ layout: layout-example.njk
|
||||
|
||||
<!-- Required for load layout widget -->
|
||||
{% set in_playground = true %}
|
||||
{% set html_file = "layout-templates/example.html.njk" %}
|
||||
{% set css_file = "layout-templates/example.css.njk" %}
|
||||
{% set html_file = "layout-templates/example.html" %}
|
||||
{% set css_file = "layout-templates/example.css" %}
|
||||
|
||||
{% include "playground.njk" %}
|
||||
|
||||
@@ -3,8 +3,8 @@ layout: layout-example.njk
|
||||
---
|
||||
|
||||
<style>
|
||||
{% include "layout-templates/example.css.njk" %}
|
||||
{% include "layout-templates/example.css" %}
|
||||
</style>
|
||||
|
||||
{% include "layout-templates/example.html.njk" %}
|
||||
{% include "layout-templates/example.html" %}
|
||||
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
layout: layout-example.njk
|
||||
---
|
||||
|
||||
{% set html_file = "layout-templates/hero.html.njk" %}
|
||||
{% set css_file = "layout-templates/hero.css.njk" %}
|
||||
{% set in_playground = true %}
|
||||
{% set html_file = "layout-templates/hero.html" %}
|
||||
{% set css_file = "layout-templates/hero.css" %}
|
||||
|
||||
{% include "playground.njk" %}
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: layout-example.njk
|
||||
---
|
||||
|
||||
<style>
|
||||
{% include "layout-templates/example.css.njk" %}
|
||||
{% include "layout-templates/example.css" %}
|
||||
</style>
|
||||
|
||||
{% include "layout-templates/example.html.njk" %}
|
||||
{% include "layout-templates/example.html" %}
|
||||
|
||||
@@ -14,5 +14,5 @@ window.Turbo.session.drive = false
|
||||
- [Hero Layout](/layouts/hero/index.html)
|
||||
- [Hero Playground](/layouts/hero-playground/index.html)
|
||||
|
||||
- [SportAwesome Layout](/layouts/sport-awesome/index.html)
|
||||
- [SportAwesome Playgroud](/layouts/sport-awesome-playground/index.html)
|
||||
- [Sport Awesome Layout](/layouts/sport-awesome/index.html)
|
||||
- [Sport Awesome Playgroud](/layouts/sport-awesome-playground/index.html)
|
||||
10
docs/pages/layouts/sport-awesome-playground.njk
Normal file
10
docs/pages/layouts/sport-awesome-playground.njk
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
layout: layout-example.njk
|
||||
---
|
||||
|
||||
{% set in_playground = true %}
|
||||
{% set html_file = "layout-templates/sport-awesome.html" %}
|
||||
{% set css_file = "layout-templates/sport-awesome.css" %}
|
||||
|
||||
{% include "playground.njk" %}
|
||||
|
||||
@@ -3,419 +3,8 @@ layout: layout-example.njk
|
||||
---
|
||||
|
||||
<style>
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
--wa-color-brand-fill-vivid: var(--wa-color-blue-20);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/** https://andy-bell.co.uk/my-favourite-3-lines-of-css/ */
|
||||
.flow > * + * {
|
||||
margin-block-start: var(--wa-flow-spacing);
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navigation--desktop::part(nav-items) {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.navigation--top::part(nav-items) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navigation--top wa-nav-item {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navigation--top wa-nav-item::part(content) {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navigation--top wa-nav-item {
|
||||
--text-color: var(--wa-color-brand-text-on-vivid);
|
||||
--text-color-hover: var(--wa-color-text-normal);
|
||||
--background-color: transparent;
|
||||
--background-color-hover: var(--wa-color-neutral-fill-muted-alt);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--wa-color-brand-fill-vivid);
|
||||
background-color: var(--wa-color-white);
|
||||
}
|
||||
|
||||
.header > * {
|
||||
padding: var(--wa-space-base);
|
||||
}
|
||||
|
||||
.header__navigation {
|
||||
display: flex;
|
||||
clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%);
|
||||
padding-inline-start: 2.5rem;
|
||||
background-color: var(--wa-color-brand-fill-vivid);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.logo {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: var(--wa-color-text-normal);
|
||||
text-decoration: none;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
a.logo:is(:hover, :focus) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logo__accent {
|
||||
color: var(--wa-color-yellow-70);
|
||||
}
|
||||
|
||||
.navigation--desktop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigation--desktop wa-nav-item[current="page"] {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 8px;
|
||||
text-decoration-thickness: 4px;
|
||||
text-decoration-color: var(--wa-color-red-50);
|
||||
}
|
||||
|
||||
.navigation--extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
wa-layout[view="desktop"] [data-toggle-nav],
|
||||
wa-layout[view="desktop"]::part(navigation) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
wa-layout[view="mobile"] .navigation--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: var(--wa-space-base);
|
||||
grid-template-rows: 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.stats-grid table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--wa-color-surface-outline);
|
||||
}
|
||||
|
||||
.stats-grid table * {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.stats-grid table th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-grid table td:nth-child(2) {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.layout-banner {
|
||||
padding: var(--wa-space-base);
|
||||
text-align: center;
|
||||
background-color: var(--wa-color-yellow-80);
|
||||
}
|
||||
|
||||
.layout-header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100vw;
|
||||
height: var(--banner-height);
|
||||
z-index: -1;
|
||||
background-color: var(--wa-color-yellow-80);
|
||||
}
|
||||
{% include "layout-templates/sport-awesome.css" %}
|
||||
</style>
|
||||
|
||||
<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
|
||||
<header class="layout-banner" slot="banner">
|
||||
Reminder! Get your insurance paperwork in by Oct 12!
|
||||
</header>
|
||||
{% include "layout-templates/sport-awesome.html" %}
|
||||
|
||||
<header class="header" slot="header">
|
||||
<a href="#" class="logo">
|
||||
Sport <span class="logo__accent">Awesome</span>
|
||||
</a>
|
||||
|
||||
<div class="header__navigation">
|
||||
<wa-nav-group class="navigation navigation--top navigation--desktop">
|
||||
<wa-nav-item href="#" current="page">Home</wa-nav-item>
|
||||
<wa-nav-item href="#">Schedule</wa-nav-item>
|
||||
<wa-nav-item href="#">Roster</wa-nav-item>
|
||||
<wa-nav-item href="#">Stats</wa-nav-item>
|
||||
<wa-nav-item href="#">Videos</wa-nav-item>
|
||||
|
||||
</wa-nav-group>
|
||||
|
||||
<wa-nav-group class="navigation navigation--top navigation--extra">
|
||||
<wa-nav-item href="#"><wa-icon name="instagram"></wa-icon></wa-nav-item>
|
||||
<wa-nav-item href="#"><wa-icon name="facebook"></wa-icon></wa-nav-item>
|
||||
<wa-nav-item data-toggle-nav href="#"><wa-icon name="list"></wa-icon></wa-nav-item>
|
||||
</wa-nav-group>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a href="#" class="logo" slot="navigation-header">
|
||||
Sport <span class="logo__accent">Awesome</span>
|
||||
</a>
|
||||
|
||||
<wa-nav-group slot="navigation">
|
||||
<wa-nav-item href="#" current="page">Home</wa-nav-item>
|
||||
<wa-nav-item href="#">Schedule</wa-nav-item>
|
||||
<wa-nav-item href="#">Roster</wa-nav-item>
|
||||
<wa-nav-item href="#">Stats</wa-nav-item>
|
||||
<wa-nav-item href="#">Videos</wa-nav-item>
|
||||
</wa-nav-group>
|
||||
|
||||
<main id="main-content" class="flow" style="padding: var(--wa-space-base);">
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 16px;">
|
||||
<img src="https://via.placeholder.com/1600x900" height="512" width="300" style="aspect-ratio: 16/9; min-width: 75%; flex-grow: 1;">
|
||||
<aside style="display: flex; flex-direction: column; border-radius: var(--wa-corners-1x); flex-grow: 1; flex-shrink: 1;">
|
||||
<header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-brand-fill-vivid); padding: var(--wa-space-base); text-align: center; border-top-left-radius: inherit; border-top-right-radius: inherit;">
|
||||
Upcoming
|
||||
</header>
|
||||
|
||||
<div style="color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-red-40); padding: 0.5rem; text-align: center; font-weight: bold;">
|
||||
Tryouts!
|
||||
</div>
|
||||
|
||||
<div style="background-color: var(--wa-color-neutral-90); padding: var(--wa-space-base); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; text-align: center;">
|
||||
<span style="font-weight: bold; font-size: 1.2rem;">Barclay's Center</span>
|
||||
|
||||
<br>
|
||||
|
||||
<time>Sat, Jul 3rd • 11:30am</time>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h1>Welcome to Sport <span class="logo__accent">Awesome</span></h1>
|
||||
|
||||
<p>
|
||||
Dolor quam voluptate nostrum neque eius. Quo nemo corporis repellat quia sunt molestiae! Dolorem labore laudantium nobis numquam reprehenderit? Voluptatibus odio animi nemo maiores accusamus eaque Assumenda perferendis omnis quae.
|
||||
Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus consequatur illo Cum eos adipisci ut!
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 style="text-align: center; font-weight: bold; font-size: 1.5em;">Stats</h2>
|
||||
<div class="stats-grid">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Serve
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>2936</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serve %</td>
|
||||
<td>93.6%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aces</td>
|
||||
<td>268</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>189</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Serve Receive
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>2428</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pass Rating</td>
|
||||
<td>1.72</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pass Error %</td>
|
||||
<td>13.3%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3-pass %</td>
|
||||
<td>28.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Attack
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>3624</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kills</td>
|
||||
<td>1431</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>268</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hitting Efficiency</td>
|
||||
<td>0.254</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Kill %</td>
|
||||
<td>39.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Dig
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Attempts</td>
|
||||
<td>3124</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Digs</td>
|
||||
<td>2235</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>889</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Dig %</td>
|
||||
<td>71.5%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Block
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Blocks</td>
|
||||
<td>348</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>414</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Block %</td>
|
||||
<td>31.6%</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Error %</td>
|
||||
<td>24.6%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Set
|
||||
</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Assists</td>
|
||||
<td>1364</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Errors</td>
|
||||
<td>81</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer slot="main-footer" style="background-color: var(--wa-color-brand-fill-vivid); color: var(--wa-color-text-inverse); padding: var(--wa-space-base); text-align: center;">
|
||||
© 2023 - Sport Awesome
|
||||
</footer>
|
||||
</wa-layout>
|
||||
|
||||
Reference in New Issue
Block a user