mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 03:39:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve website

Browse Source
This commit is contained in:
Rene Haas
2022-11-14 10:49:13 +01:00
parent 712785c6a5
commit 60c5cc8a9a
17 changed files with 58 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/404.html
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="description" content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."/><link rel="icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><link rel="shortcut icon" type="image/x-icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="theme-color" content="#36befd"/><meta name="msapplication-TileColor" content="#36befd"/><meta name="msapplication-navbutton-color" content="#36befd"/><meta name="application-name" content="OverlayScrollbars"/><meta name="msapplication-tooltip" content="OverlayScrollbars"/><meta name="apple-mobile-web-app-title" content="OverlayScrollbars"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareSourceCode","url":"https://kingsora.github.io/OverlayScrollbars","name":"OverlayScrollbars","description":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.","license":"https://en.wikipedia.org/wiki/MIT_License","keywords":"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking","isAccessibleForFree":true,"image":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png","codeRepository":"https://github.com/KingSora/OverlayScrollbars","runtimePlatform":"browser","maintainer":{"@type":"Person","name":"Rene Haas","additionalName":"KingSora","url":"https://github.com/KingSora"},"programmingLanguage":{"@type":"ComputerLanguage","name":"javascript","alternateName":"js"}}</script><title>404: This page could not be found</title><meta name="next-head-count" content="14"/><link rel="preload" href="/OverlayScrollbars/_next/static/css/6d4acf96faa56924.css" as="style"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/6d4acf96faa56924.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/OverlayScrollbars/_next/static/chunks/webpack-38447e448aec86dd.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/framework-80c43e603d70cda7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-ea1211b077f8a1ed.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_app-6150d4a4a7f94bc7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_error-fa37e1d4331cc885.js" defer=""></script><script src="/OverlayScrollbars/_next/static/tQOy37nmg763bauC5xcoV/_buildManifest.js" defer=""></script><script src="/OverlayScrollbars/_next/static/tQOy37nmg763bauC5xcoV/_ssgManifest.js" defer=""></script></head><body data-overlayscrollbars-initialize=""><div id="__next"><div class="font-sans font-normal text-primary-dark"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
<!DOCTYPE html><html lang="en" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="description" content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."/><link rel="icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><link rel="shortcut icon" type="image/x-icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="theme-color" content="#36befd"/><meta name="msapplication-TileColor" content="#36befd"/><meta name="msapplication-navbutton-color" content="#36befd"/><meta name="application-name" content="OverlayScrollbars"/><meta name="msapplication-tooltip" content="OverlayScrollbars"/><meta name="apple-mobile-web-app-title" content="OverlayScrollbars"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareSourceCode","url":"https://kingsora.github.io/OverlayScrollbars","name":"OverlayScrollbars","description":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.","license":"https://en.wikipedia.org/wiki/MIT_License","keywords":"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking","isAccessibleForFree":true,"image":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png","codeRepository":"https://github.com/KingSora/OverlayScrollbars","runtimePlatform":"browser","maintainer":{"@type":"Person","name":"Rene Haas","additionalName":"KingSora","url":"https://github.com/KingSora"},"programmingLanguage":{"@type":"ComputerLanguage","name":"javascript","alternateName":"js"}}</script><title>404: This page could not be found</title><meta name="next-head-count" content="14"/><link rel="preload" href="/OverlayScrollbars/_next/static/css/5f33822f712d42a1.css" as="style"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/5f33822f712d42a1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/OverlayScrollbars/_next/static/chunks/webpack-38447e448aec86dd.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/framework-80c43e603d70cda7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-ea1211b077f8a1ed.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_app-ac0e1f2fc4980ec7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_error-fa37e1d4331cc885.js" defer=""></script><script src="/OverlayScrollbars/_next/static/wkOU74O7kOlik2LTdPTsJ/_buildManifest.js" defer=""></script><script src="/OverlayScrollbars/_next/static/wkOU74O7kOlik2LTdPTsJ/_ssgManifest.js" defer=""></script></head><body data-overlayscrollbars-initialize=""><div id="__next"><div class="font-sans font-normal text-primary-dark"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
body { margin: 0; color: #000; background: #fff; }
.next-error-h1 {
border-right: 1px solid rgba(0, 0, 0, .3);
@@ -9,4 +9,4 @@
.next-error-h1 {
border-right: 1px solid rgba(255, 255, 255, .3);
}
}</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"tQOy37nmg763bauC5xcoV","assetPrefix":"/OverlayScrollbars","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
}</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"wkOU74O7kOlik2LTdPTsJ","assetPrefix":"/OverlayScrollbars","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
docs/_next/static/chunks/pages/_app-6150d4a4a7f94bc7.js → docs/_next/static/chunks/pages/_app-ac0e1f2fc4980ec7.js
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/_next/static/chunks/pages/index-188ae9b9804badb3.js
-5
View File
File diff suppressed because one or more lines are too long
docs/_next/static/chunks/pages/index-6cf432147fa9d4da.js
+5
View File
File diff suppressed because one or more lines are too long
docs/_next/static/css/054cd89f2e050c9e.css
+1
View File
@@ -0,0 +1 @@
.assets_logo__UC59w{position:relative}.assets_logo__UC59w:after,.assets_logo__UC59w:before{content:"";position:absolute;top:10px;left:0;width:100%;height:100%;background:url(/OverlayScrollbars/_next/static/media/logo.5dcad24b.svg);background-size:contain;background-position:50%;background-repeat:no-repeat;z-index:-1;transform:translateZ(0)}.assets_logo__UC59w:before{filter:blur(33px) saturate(1.22);opacity:.5}.assets_logo__UC59w:after{filter:drop-shadow(0 6px 22px #5242e3) saturate(1.5);top:0;opacity:.1}.assets_usedBySeparator__yqt5h{position:relative}.assets_usedBySeparator__yqt5h:before{content:"";position:absolute;display:block;height:1px;width:100%;top:50%;left:50%;border-width:1px;transform:translate(-50%,-50%);z-index:-1}.assets_usedBy__FHTGG{filter:brightness(.8) sepia(1) saturate(1.3) hue-rotate(175deg);opacity:.6}
docs/_next/static/css/5f33822f712d42a1.css
+12
View File
File diff suppressed because one or more lines are too long
docs/_next/static/css/6d4acf96faa56924.css
-12
View File
File diff suppressed because one or more lines are too long
docs/_next/static/css/84d874cedcd57975.css
-1
View File
@@ -1 +0,0 @@
.assets_logo__UC59w{position:relative}.assets_logo__UC59w:after,.assets_logo__UC59w:before{content:"";position:absolute;top:10px;left:0;width:100%;height:100%;background:url(/OverlayScrollbars/_next/static/media/logo.5dcad24b.svg);background-size:contain;background-position:50%;background-repeat:no-repeat;z-index:-1}.assets_logo__UC59w:before{filter:blur(33px) saturate(1.22);opacity:.5}.assets_logo__UC59w:after{filter:drop-shadow(0 6px 22px #5242e3) saturate(1.5);top:0;opacity:.1}.assets_usedBySeparator__yqt5h{position:relative}.assets_usedBySeparator__yqt5h:before{content:"";position:absolute;display:block;height:1px;width:100%;top:50%;left:50%;border-width:1px;transform:translate(-50%,-50%);z-index:-1}.assets_usedBy__FHTGG{filter:brightness(.8) sepia(1) saturate(1.3) hue-rotate(175deg);opacity:.6}
docs/_next/static/tQOy37nmg763bauC5xcoV/_buildManifest.js → docs/_next/static/wkOU74O7kOlik2LTdPTsJ/_buildManifest.js
+1 -1
View File
@@ -1 +1 @@
self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/84d874cedcd57975.css","static/chunks/pages/index-188ae9b9804badb3.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-6cf432147fa9d4da.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
docs/_next/static/tQOy37nmg763bauC5xcoV/_ssgManifest.js → docs/_next/static/wkOU74O7kOlik2LTdPTsJ/_ssgManifest.js
View File
docs/img/browserstack.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

docs/index.html
+3 -3
View File
File diff suppressed because one or more lines are too long
local/tailwind/tailwind.config.js
+3 -2
View File
@@ -70,6 +70,7 @@ module.exports = {
fontWeight: theme('fontWeight.medium'),
padding: theme('padding[1]'),
borderRadius: theme('borderRadius.md'),
overflowWrap: 'break-word',
},
'code::before': {
content: '',
@@ -78,11 +79,11 @@ module.exports = {
content: '',
},
'summary > *:only-child,': {
display: 'inline-block',
display: 'inline',
margin: 0,
},
summary: {
display: 'inline list-item',
display: 'list-item',
cursor: 'pointer',
},
},
website/src/assets/css/styles.css
+13
View File
@@ -16,3 +16,16 @@
font-weight: 800;
font-style: normal;
}
/* disable ios bounce on overscroll */
html,
body,
.os-viewport,
[data-overlayscrollbars='viewport'] {
overscroll-behavior: none;
}
/* elements wont be suddenly cropped after initialization is done */
[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html) {
overflow: auto;
}
website/src/components/index.mdx
+6 -6
View File
@@ -23,12 +23,12 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
Additionally to the vanilla JavaScript version you can use the official framework components & utilities:
<div className="flex">
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" /></a>
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" /></a>
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" /></a>
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg" width="80" height="80" alt="Svelte" /></a>
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg" width="80" height="80" alt="Solid" /></a>
<div className="flex flex-wrap">
<a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" /></a>
<a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" /></a>
<a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" /></a>
<a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg" width="80" height="80" alt="Svelte" /></a>
<a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg" width="80" height="80" alt="Solid" /></a>
</div>
## Getting started
website/src/pages/index.module.scss
+1
View File
@@ -14,6 +14,7 @@
background-position: center;
background-repeat: no-repeat;
z-index: -1;
transform: translateZ(0);
}
&::before {
filter: blur(33px) saturate(1.22);
website/src/pages/index.tsx
+8 -4
View File
@@ -36,18 +36,22 @@ const IndexPage: NextPage = () => {
<PageContainer className="px-6">
<div className="mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44">
<div className={classnames('h-full', styles.logo)}>
<img src={logo.src} className="h-full" alt="Overlay Scrollbars Logo" />
<img src={logo.src} className="h-full" alt="OverlayScrollbars Logo" />
</div>
</div>
<h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">Overlay Scrollbars</h1>
<h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">
Overlay
<wbr />
Scrollbars
</h1>
<p className="text-center mx-auto max-w-screen-sm my-11 font-medium">
A javascript scrollbar plugin that hides native scrollbars, provides custom styleable
overlay scrollbars and keeps the native functionality and feeling.
</p>
{separator('used by')}
<div ref={usedByRef}>
<div className="flex my-7 justify-center">
<div className={classnames('inline-flex items-center gap-6 py-4', styles.usedBy)}>
<div className="flex justify-center">
<div className={classnames('inline-flex items-center gap-6 py-6', styles.usedBy)}>
<div
className="h-11 px-3 flex-grow flex-shrink-0"
style={{ filter: 'brightness(0.35)' }}>