mirror of
https://github.com/pmndrs/zustand.git
synced 2025-12-08 19:45:52 +00:00
example: clean up styles
This commit is contained in:
—
parent
307c025066
commit
1c660b4de3
@ -2,7 +2,6 @@ import { create } from 'zustand'
|
||||
import { Highlight } from 'prism-react-renderer'
|
||||
import CopyButton from './CopyButton'
|
||||
import SnippetLang from './SnippetLang'
|
||||
import 'prismjs/themes/prism-okaidia.css'
|
||||
import javascriptCode from '../resources/javascript-code'
|
||||
import typescriptCode from '../resources/typescript-code'
|
||||
|
||||
|
||||
@ -32,9 +32,9 @@ function Experience() {
|
||||
|
||||
useFrame((state, delta) => {
|
||||
movement.lerp(temp.set(state.pointer.x, state.pointer.y * 0.2, 0), 0.2)
|
||||
group.current.position.x = MathUtils.lerp(group.current.position.x, state.pointer.x * 20, 0.2)
|
||||
group.current.rotation.x = MathUtils.lerp(group.current.rotation.x, state.pointer.y / 20, 0.2)
|
||||
group.current.rotation.y = MathUtils.lerp(group.current.rotation.y, -state.pointer.x / 2, 0.2)
|
||||
group.current.position.x = MathUtils.lerp(group.current.position.x, state.pointer.x * 20, 0.05)
|
||||
group.current.rotation.x = MathUtils.lerp(group.current.rotation.x, state.pointer.y / 20, 0.05)
|
||||
group.current.rotation.y = MathUtils.lerp(group.current.rotation.y, -state.pointer.x / 2, 0.05)
|
||||
layersRef.current[4].uniforms.time.value = layersRef.current[5].uniforms.time.value += delta
|
||||
}, 1)
|
||||
|
||||
@ -105,7 +105,7 @@ function Canvas({ children }) {
|
||||
const resize = () => root.current.configure({ width: window.innerWidth, height: window.innerHeight })
|
||||
window.addEventListener('resize', resize)
|
||||
root.current.render(children)
|
||||
return () => window.removeEventListener(resize)
|
||||
return () => window.removeEventListener('resize', resize)
|
||||
}, [])
|
||||
|
||||
return <canvas ref={canvas} style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', display: 'block' }} />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './styles.css'
|
||||
import './pmndrs.css'
|
||||
import App from './App'
|
||||
|
||||
createRoot(document.getElementById('root')).render(<App />)
|
||||
|
||||
123
examples/demo/src/pmndrs.css
Normal file
123
examples/demo/src/pmndrs.css
Normal file
@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Pmndrs theme for JavaScript, CSS and HTML
|
||||
* Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs
|
||||
* @author Paul Henschel
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #e4f0fb!important;
|
||||
background: none!important;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3)!important;
|
||||
font-family: Menlo, Monaco, 'Courier New', monospace!important;
|
||||
font-size: 0.95em!important;
|
||||
text-align: left!important;
|
||||
white-space: pre!important;
|
||||
word-spacing: normal!important;
|
||||
word-break: normal!important;
|
||||
word-wrap: normal!important;
|
||||
line-height: 1.5!important;
|
||||
|
||||
-moz-tab-size: 4!important;
|
||||
-o-tab-size: 4!important;
|
||||
tab-size: 4!important;
|
||||
|
||||
-webkit-hyphens: none!important;
|
||||
-moz-hyphens: none!important;
|
||||
-ms-hyphens: none!important;
|
||||
hyphens: none!important;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 3.75em!important;
|
||||
margin: -2.5em 0!important;
|
||||
overflow: auto!important;
|
||||
border-radius: 0.75em!important;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #252b37!important;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em!important;
|
||||
border-radius: 0.3em!important;
|
||||
white-space: normal!important;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #a6accd!important;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #e4f0fb!important;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7!important;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #e4f0fb!important;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #5de4c7!important;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-value,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #5de4c7!important;
|
||||
}
|
||||
|
||||
.token.attr-name,
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #add7ff!important;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #5de4c7!important;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #add7ff!important;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fffac2!important;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold!important;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic!important;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help!important;
|
||||
}
|
||||
@ -7,7 +7,6 @@ const useStore = create((set) => ({
|
||||
|
||||
function Counter() {
|
||||
const { count, inc } = useStore()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{count}</span>
|
||||
|
||||
@ -12,7 +12,6 @@ const useStore = create<Store>()((set) => ({
|
||||
|
||||
function Counter() {
|
||||
const { count, inc } = useStore()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{count}</span>
|
||||
|
||||
@ -19,8 +19,8 @@ body,
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto,
|
||||
segoe ui, arial, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.main {
|
||||
@ -32,49 +32,6 @@ body {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
.canvas-container {
|
||||
height: unset;
|
||||
flex: 1 0 0px;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
.canvas-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, black, transparent);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.canvas-container {
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
.canvas-container::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main > .code {
|
||||
position: absolute;
|
||||
right: 10vw;
|
||||
@ -110,7 +67,7 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
margin-top: -15px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
|
||||
@ -136,168 +93,25 @@ body {
|
||||
padding: 40px 50px 40px 45px;
|
||||
font-size: 0.8rem !important;
|
||||
border-radius: 10px !important;
|
||||
box-shadow: 0 16px 40px -5px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 16px 40px -5px rgba(0, 0, 0, 1);
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.main > .code {
|
||||
position: relative;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
bottom: 0;
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
.code-container > pre[class*='language-'] {
|
||||
font-size: 0.6rem;
|
||||
padding: 20px 50px 70px 20px;
|
||||
border-radius: 10px 10px 0 0 !important;
|
||||
}
|
||||
.counter {
|
||||
top: -100px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.code-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-container > pre[class*='language-'] {
|
||||
font-size: 0.6rem !important;
|
||||
padding: 20px 20px 70px;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.counter {
|
||||
top: 70px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 600px) {
|
||||
.code-container {
|
||||
bottom: 0;
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
.code-container > pre[class*='language-'] {
|
||||
font-size: 0.6rem;
|
||||
padding: 20px 20px 70px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
transform: scale(0.8);
|
||||
transform-origin: bottom right;
|
||||
top: 100px;
|
||||
right: -30px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
.counter {
|
||||
top: -160px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 430px) {
|
||||
.code-container {
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
.code-container > pre[class*='language-'] {
|
||||
font-size: 0.6rem;
|
||||
padding: 20px 20px 70px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
transform: scale(0.8);
|
||||
transform-origin: bottom right;
|
||||
top: -160px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 480px) {
|
||||
.counter {
|
||||
transform: scale(0.8);
|
||||
transform-origin: bottom right;
|
||||
bottom: 70px;
|
||||
right: 20px;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 500px) {
|
||||
.code-container > pre[class*='language-'] {
|
||||
font-size: 0.5rem !important;
|
||||
}
|
||||
|
||||
.counter {
|
||||
top: 40px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 500px) and (min-width: 600px) {
|
||||
.counter {
|
||||
top: 40px;
|
||||
right: -80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 360px) and (min-width: 600px) {
|
||||
.counter {
|
||||
top: 50px;
|
||||
right: -80px;
|
||||
}
|
||||
}
|
||||
|
||||
span.header-left {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 30px;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
font-size: 3em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.bear {
|
||||
left: -20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1140px) {
|
||||
.bear {
|
||||
left: -25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.bear {
|
||||
left: -20%;
|
||||
}
|
||||
.code {
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
pre[class*='language-'] {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto,
|
||||
segoe ui, arial, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial,
|
||||
sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: inherit;
|
||||
@ -306,19 +120,12 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.top-left {
|
||||
font-size: 0.8em;
|
||||
top: 90px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: flex-end;
|
||||
left: 40px;
|
||||
min-height: 38px;
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
top: 40px;
|
||||
@ -339,71 +146,6 @@ a.bottom-right {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.main .bottom {
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
a.bottom-left {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
a.bottom-right {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
a.top-left {
|
||||
position: fixed;
|
||||
font-size: 0.8em;
|
||||
top: 90px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
justify-content: flex-start;
|
||||
left: 40px;
|
||||
right: 40px;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
span.header-left {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
pre[class*='language-'] {
|
||||
font-size: 0.6rem !important;
|
||||
}
|
||||
span.header-left {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
}
|
||||
a.top-left {
|
||||
top: 70px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
a.bottom-left {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
a.bottom-right {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.snippet-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -440,3 +182,20 @@ a.bottom-right {
|
||||
.copy-button:hover {
|
||||
background-color: #5f5e5d;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
span.header-left {
|
||||
font-size: 1em;
|
||||
}
|
||||
.main > .code {
|
||||
margin-right: -0px;
|
||||
}
|
||||
.code-container > pre[class*='language-'] {
|
||||
font-size: 0.6rem!important;
|
||||
border-radius: 10px 10px 0 0 !important;
|
||||
}
|
||||
.counter {
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user