Merge pull request #10316 from suuus/community-page
Adding Community hub for microsite
This commit is contained in:
Suzanne Daniels
@@ -18,3 +18,45 @@ description: Support and Community Details and Links
|
||||
our email newsletter.
|
||||
- Give us a star ⭐️ - If you are using Backstage or think it is an interesting
|
||||
project, we would love a star! ❤️
|
||||
|
||||
## Community Hub
|
||||
|
||||
Check out the Backstage.io [Backstage Community Hub](https://backstage.io/community) for the Community Sessions, recordings, and community resources.
|
||||
|
||||
### Adding a recording to the meetup page
|
||||
|
||||
To add a new recording to the [meetup page](https://backstage.io/on-demand)
|
||||
create a file in
|
||||
[`microsite/data/on-demand`](https://github.com/backstage/backstage/tree/master/microsite/data/on-demand)
|
||||
with your recording's information. Example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: # name of the meetup
|
||||
date: February 23, 2022 # date, format: Month day, year. This is the index field.
|
||||
category: Meetup # Can be Event, Meetup, Webinar
|
||||
description: # description, summary
|
||||
youtubeUrl: # Url to youtube video
|
||||
youtubeImgUrl: # Url to the preview image, for Youtube this is the format: https://i1.ytimg.com/vi/<YOUTUBE_ID>/mqdefault.jpg
|
||||
```
|
||||
|
||||
### Adding an upcoming meetup to the meetup page
|
||||
|
||||
To add an upcoming meetup to the [meetup page](https://backstage.io/on-demand)
|
||||
create a file in
|
||||
[`microsite/data/on-demand`](https://github.com/backstage/backstage/tree/master/microsite/data/on-demand)
|
||||
with your meetup's information. Example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: # name of the meetup
|
||||
date: February 23, 2022 # date, format: Month day, year. This is the index field.
|
||||
category: Upcoming # Should be "Upcoming"
|
||||
description: # description, summary
|
||||
youtubeUrl: # Url to youtube video
|
||||
youtubeImgUrl: # Url to the preview image, for Youtube this is the format: https://i1.ytimg.com/vi/<YOUTUBE_ID>/mqdefault.jpg
|
||||
rsvpUrl: # Link to registration, calendar item, etc
|
||||
eventUrl: # Link to event landing page
|
||||
```
|
||||
|
||||
After the meetup is done, and the recording is ready you can change it to a meetup recording.
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Community Sessions
|
||||
date: February 16, 2022
|
||||
category: Meetup
|
||||
description: This community session marks one year of Backstage community sessions! In this session, we celebrate one year of the Backstage community, hear from Patrik on stabilizing core APIs, learn more about Homepage Templates, find hidden info about your catalog entities, and Q&A.
|
||||
youtubeUrl: https://youtu.be/evf_LV0KzIk
|
||||
youtubeImgUrl: https://i1.ytimg.com/vi/evf_LV0KzIk/mqdefault.jpg
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Community Sessions
|
||||
date: February 23, 2022
|
||||
category: Meetup
|
||||
description: Community Sessions Anniversary , SWAG opportunity❗, TechDocs add-on framework, URL Reader demo 👨💻, Q&A
|
||||
youtubeUrl: https://youtu.be/Buu_KWdIFwU
|
||||
youtubeImgUrl: https://i1.ytimg.com/vi/Buu_KWdIFwU/mqdefault.jpg
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Contributor Community Sessions
|
||||
date: March 23, 2022
|
||||
category: Upcoming
|
||||
description: Join the maintainers and contributors for the Contributor Community Sessions
|
||||
youtubeUrl: https://youtu.be/evf_LV0KzIk
|
||||
youtubeImgUrl: https://i1.ytimg.com/vi/evf_LV0KzIk/mqdefault.jpg
|
||||
rsvpUrl: https://calendar.google.com/calendar/embed?src=c_qup9gbhn9sqpuao6trttd8mk5s@group.calendar.google.com
|
||||
eventUrl: https://github.com/backstage/community/issues
|
||||
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Title>Backstage Community</Block.Title>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
What's the use of having fun if you can't share it? Exactly. Join
|
||||
the vibrant community around the Backstage project. Be it on
|
||||
GitHub, social media, Discord... You'll find a welcoming
|
||||
environment, to ensure this we follow the{' '}
|
||||
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
|
||||
{' '}
|
||||
CNCF Code of Conduct
|
||||
</a>{' '}
|
||||
in everything we do.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
Main community channels
|
||||
<br />- Chat and get support on our{' '}
|
||||
<a href="https://discord.gg/MUpMjP2">Discord</a>
|
||||
<br />- Get into contributing with the{' '}
|
||||
<a href="https://github.com/backstage/backstage/contribute">
|
||||
Good First Issues
|
||||
</a>
|
||||
<br />- Subscribe to the{' '}
|
||||
<a href="https://mailchi.mp/spotify/backstage-community">
|
||||
Community newsletter
|
||||
</a>
|
||||
<br />- Join the{' '}
|
||||
<a href="https://twitter.com/i/communities/1494019781716062215">
|
||||
Twitter community
|
||||
</a>
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Title>Community Sessions</Block.Title>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
<b>Adopters Community Sessions</b>
|
||||
<br />
|
||||
Backstage Community Sessions is the monthly meetup where we all
|
||||
come together to listen to the latest maintainer updates, learn
|
||||
from eachother about adopting, share exciting new demos or discuss
|
||||
any relevat topic like developer effectiveness, developer
|
||||
experience, developer portals, etc.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
<b>Contributor Community Sessions</b>
|
||||
<br />
|
||||
Discuss all things contributing, diving deep under the hood of
|
||||
Backstage (Backstage of Backstage? Backerstage?). An open
|
||||
discussion with maintainers and contributors of Backstage.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="/on-demand">Watch now</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Graphic
|
||||
x={60}
|
||||
y={12}
|
||||
width={30}
|
||||
src={`${baseUrl}img/b-sessions.png`}
|
||||
/>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Backstage official Newsletter</Block.Title>
|
||||
<Block.Paragraph>
|
||||
The official monthly Backstage newsletter. Containing the latest
|
||||
news from your favorite project.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://mailchi.mp/spotify/backstage-community">
|
||||
Subscribe
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.Graphic
|
||||
x={45}
|
||||
y={12}
|
||||
width={30}
|
||||
src={`${baseUrl}img/news-fpo.png`}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Spotlight</Block.Title>
|
||||
<Block.Paragraph>
|
||||
A recognition for valuable community work, the{' '}
|
||||
<b>Contributor Spotlight</b>. Nominate contributing members for
|
||||
their efforts! We'll put them in the spotlight ❤️.
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="nominate ">Nominate now</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Open Mic Meetup</Block.Title>
|
||||
<Block.Paragraph>
|
||||
A monthly casual get together of Backstage users sharing their
|
||||
experiences and helping each other. Hosted by{' '}
|
||||
<a href="https://roadie.io/">Roadie.io</a> and
|
||||
<a href="https://frontside.com/">Frontside Software</a>.
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://backstage-openmic.com/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Backstage Weekly</Block.Title>
|
||||
<Block.Paragraph>
|
||||
A weekly newsletter with news, updates and things community from
|
||||
your friends at <a href="https://roadie.io/">Roadie.io</a>.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton href="https://roadie.io/backstage-weekly/">
|
||||
Learn more
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Graphic
|
||||
x={41}
|
||||
y={12}
|
||||
width={40}
|
||||
src={`${baseUrl}img/roadie-newsletter.png`}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Community Sessions</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Please be aware we follow the{' '}
|
||||
<a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">
|
||||
{' '}
|
||||
CNCF Code of Conduct
|
||||
</a>
|
||||
.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Paragraph>
|
||||
<iframe
|
||||
width="1280"
|
||||
height="720"
|
||||
src="https://www.youtube.com/embed/OmXi6iwq5qo"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</Block.Paragraph>
|
||||
<Block.TextBox>
|
||||
<iframe
|
||||
src="https://www.youtube.com/live_chat?v=OmXi6iwq5qo&embed_domain=localhost&dark_theme=1"
|
||||
width="400px"
|
||||
height="680px"
|
||||
></iframe>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Don't be a stranger</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Main community channels
|
||||
<br />- Chat and get support on our{' '}
|
||||
<a href="https://discord.gg/MUpMjP2">Discord</a>
|
||||
<br />- Get into contributing with the{' '}
|
||||
<a href="https://github.com/backstage/backstage/contribute">
|
||||
Good First Issues
|
||||
</a>
|
||||
<br />- Subscribe to the{' '}
|
||||
<a href="https://mailchi.mp/spotify/backstage-community">
|
||||
Community newsletter
|
||||
</a>
|
||||
<br />- Join the{' '}
|
||||
<a href="https://twitter.com/i/communities/1494019781716062215">
|
||||
Twitter community
|
||||
</a>
|
||||
<br />
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.Title>Contributor Spotlight nomination</Block.Title>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph></Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<iframe
|
||||
src="https://docs.google.com/forms/d/e/1FAIpQLSdiZ28O7vwHo6NrwirEzGSbuVyBANSv7ItHqRlgVvSz3Z5xqQ/viewform?embedded=true"
|
||||
width="800"
|
||||
height="1262"
|
||||
frameborder="0"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
>
|
||||
Loading…
|
||||
</iframe>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const yaml = require('js-yaml');
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const {
|
||||
Block: { Container },
|
||||
BulletLine,
|
||||
} = Components;
|
||||
|
||||
const ondemandDirectory = require('path').join(process.cwd(), 'data/on-demand');
|
||||
const ondemandMetadata = fs
|
||||
.readdirSync(ondemandDirectory)
|
||||
.map(file => yaml.load(fs.readFileSync(`./data/on-demand/${file}`, 'utf8')))
|
||||
.sort((b, a) => a.date.toLowerCase().localeCompare(b.date.toLowerCase()));
|
||||
const truncate = text =>
|
||||
text.length > 170 ? text.substr(0, 170) + '...' : text;
|
||||
|
||||
const addVideoDocsLink = '/docs/overview/support';
|
||||
const defaultIconUrl = 'img/logo-gradient-on-dark.svg';
|
||||
|
||||
const Ondemand = () => (
|
||||
<main className="MainContent">
|
||||
<div className="VideoPageLayout">
|
||||
<div className="VideoPageHeader">
|
||||
<h2>Upcoming live events</h2>
|
||||
<p>Upcoming Backstage events</p>
|
||||
<span>
|
||||
<a className="VideoAddNewButton ButtonFilled" href={addVideoDocsLink}>
|
||||
<b>Add an event or recording</b>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<Container wrapped className="VideoGrid">
|
||||
{ondemandMetadata
|
||||
.filter(video => video.category === 'Upcoming')
|
||||
.map(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
date,
|
||||
youtubeUrl,
|
||||
youtubeImgUrl,
|
||||
rsvpUrl,
|
||||
eventUrl,
|
||||
}) => (
|
||||
<div className="VideoCard">
|
||||
<div className="VideoCardHeader">
|
||||
<div className="VideoCardInfo">
|
||||
<h3 className="VideoCardTitle">{title}</h3>
|
||||
<p className="VideoCardDate">on {date}</p>
|
||||
|
||||
<span className="VideoCardChipOutlined">{category}</span>
|
||||
<p>
|
||||
<br />
|
||||
<img src={youtubeImgUrl} alt={title} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="VideoCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="VideoCardFooter">
|
||||
<a className="VideoButtonFilled" href={eventUrl}>
|
||||
Event page
|
||||
</a>
|
||||
<a className="VideoButtonFilled" href={rsvpUrl}>
|
||||
Remind me
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</Container>
|
||||
<BulletLine style={{ width: '100%' }} />
|
||||
<div className="VideoPageHeader">
|
||||
<h2>Community on demand</h2>
|
||||
</div>
|
||||
<Container wrapped className="VideoGrid">
|
||||
{ondemandMetadata
|
||||
.filter(video => video.category !== 'Upcoming')
|
||||
.map(
|
||||
({
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
date,
|
||||
youtubeUrl,
|
||||
youtubeImgUrl,
|
||||
}) => (
|
||||
<div className="VideoCard">
|
||||
<div className="VideoCardHeader">
|
||||
<div className="VideoCardInfo">
|
||||
<h3 className="VideoCardTitle">{title}</h3>
|
||||
<p className="VideoCardDate">on {date}</p>
|
||||
|
||||
<span className="VideoCardChipOutlined">{category}</span>
|
||||
<p>
|
||||
<br />
|
||||
<img src={youtubeImgUrl} alt={title} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="VideoCardBody">
|
||||
<p>{truncate(description)}</p>
|
||||
</div>
|
||||
<div className="VideoCardFooter">
|
||||
<a className="VideoButtonFilled" href={youtubeUrl}>
|
||||
Watch on YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<div className="VideoCard" id="add-video-card">
|
||||
<div className="VideoCardBody">
|
||||
<p>Do you have a recording of a meetup to include on this page?</p>
|
||||
<p
|
||||
style={{
|
||||
marginTop: '20px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<a className="VideoButtonFilled" href={addVideoDocsLink}>
|
||||
<b>Add to the On-demand page</b>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Container className="VideoCardFooter">
|
||||
<p>
|
||||
Help us create a go-to place for hours of Backstage related
|
||||
content.
|
||||
</p>
|
||||
</Container>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
module.exports = Ondemand;
|
||||
@@ -70,6 +70,10 @@ const siteConfig = {
|
||||
page: 'demos',
|
||||
label: 'Demos',
|
||||
},
|
||||
{
|
||||
page: 'community',
|
||||
label: 'Community',
|
||||
},
|
||||
],
|
||||
|
||||
/* path to images for header/footer */
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
.VideoCard {
|
||||
background-color: #282828;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.VideoGrid {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.VideoGrid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 815px) {
|
||||
.VideoGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 485px) {
|
||||
.VideoGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.VideoCard img {
|
||||
float: left;
|
||||
margin: 0px 16px 8px 0px;
|
||||
height: 160px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.VideoCardHeader {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-height: fit-content;
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
.VideoCardImage {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.VideoCardImage img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.VideoCardTitle {
|
||||
color: white;
|
||||
vertical-align: top;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.VideoCardInfo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.VideoAddNewButton {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 485px) {
|
||||
.VideoAddNewButton {
|
||||
bottom: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.VideoButtonFilled {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: #69ddc7;
|
||||
}
|
||||
|
||||
.VideoButtonFilled:hover {
|
||||
border: 1px solid #69ddc7;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.VideoCardChipOutlined {
|
||||
font-size: small;
|
||||
border-radius: 16px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid #69ddc7;
|
||||
color: #69ddc7;
|
||||
}
|
||||
|
||||
.VideoCardFooter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
margin-top: auto;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.VideoCardFooter a {
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.VideoPageLayout {
|
||||
margin: auto;
|
||||
max-width: 1430px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.VideoPageHeader {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.VideoPageHeader h2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.VideoCardBody {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.VideoCardDate,
|
||||
.VideoCardDate a {
|
||||
margin-bottom: 0.25em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.VideoCardDate a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#add-video-card {
|
||||
border: 1px solid #69ddc7;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 797 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
Reference in New Issue
Block a user