1
0
mirror of https://github.com/Bayselonarrend/OpenIntegrations.git synced 2024-12-25 02:42:28 +02:00

Бегущая строка docusaurus

This commit is contained in:
Anton 2024-02-19 23:05:00 +03:00
parent 530fe2ddc6
commit 85ebe3c48a
4 changed files with 64 additions and 0 deletions

View File

@ -18,6 +18,7 @@ sidebar_position: 1
<a href="/docs/Twitter/"><img src={require('../static/img/APIs/Twitter.png').default} width='32px'/> </a> <a href="/docs/Twitter/"><img src={require('../static/img/APIs/Twitter.png').default} width='32px'/> </a>
<a href="/docs/Notion/"><img src={require('../static/img/APIs/Notion.png').default} width='32px'/> </a> <a href="/docs/Notion/"><img src={require('../static/img/APIs/Notion.png').default} width='32px'/> </a>
<a href="/docs/Yandex_Disk/"><img src={require('../static/img/APIs/YandexDisk.png').default} width='32px'/> </a> <a href="/docs/Yandex_Disk/"><img src={require('../static/img/APIs/YandexDisk.png').default} width='32px'/> </a>
<a href="/docs/Google_Calendar/"><img src={require('../static/img/APIs/GoogleCalendar.png').default} width='32px'/> </a>
## Начало работы ## Начало работы

View File

@ -55,6 +55,30 @@ export default function HomepageFeatures() {
<Feature key={idx} {...props} /> <Feature key={idx} {...props} />
))} ))}
</div> </div>
<hr/>
<section className={styles.container}>
<span className={styles.looptext}>
<a className={styles.ico} href="/docs/Telegram/"> <img src={require('../../../static/img/APIs/Telegram.png').default} width='32px' /></a>
<a className={styles.ico} href="/docs/VK/"><img src={require('../../../static/img/APIs/VK.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Viber/"><img src={require('../../../static/img/APIs/Viber.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Twitter/"><img src={require('../../../static/img/APIs/Twitter.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Notion/"><img src={require('../../../static/img/APIs/Notion.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Yandex_Disk/"><img src={require('../../../static/img/APIs/YandexDisk.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Google_Calendar/"><img src={require('../../../static/img/APIs/GoogleCalendar.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Telegram/"> <img src={require('../../../static/img/APIs/Telegram.png').default} width='32px' /></a>
</span>
<span className={styles.looptext}>
<a className={styles.ico} href="/docs/Telegram/"> <img src={require('../../../static/img/APIs/Telegram.png').default} width='32px' /></a>
<a className={styles.ico} href="/docs/VK/"><img src={require('../../../static/img/APIs/VK.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Viber/"><img src={require('../../../static/img/APIs/Viber.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Twitter/"><img src={require('../../../static/img/APIs/Twitter.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Notion/"><img src={require('../../../static/img/APIs/Notion.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Yandex_Disk/"><img src={require('../../../static/img/APIs/YandexDisk.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Google_Calendar/"><img src={require('../../../static/img/APIs/GoogleCalendar.png').default} width='32px'/> </a>
<a className={styles.ico} href="/docs/Telegram/"> <img src={require('../../../static/img/APIs/Telegram.png').default} width='32px' /></a>
</span>
</section>
</div> </div>
</section> </section>
); );

View File

@ -1,3 +1,11 @@
marquee{
padding: auto;
}
.api{
margin-right: 200px;
}
.features { .features {
display: flex; display: flex;
align-items: center; align-items: center;
@ -9,3 +17,34 @@
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
.ico{
padding: 112px;
}
.container {
display: flex;
white-space: nowrap;
width: 100%;
height: clamp(3em, 10vw, 6em);
overflow: hidden;
font-family: sans-serif;
}
.looptext {
animation: loopText 27s infinite linear;
}
@keyframes loopText {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB