kopia lustrzana https://github.com/badgen/badgen.net
feat: optimize home styles
rodzic
32c8575935
commit
9f935b34f8
|
@ -40,5 +40,6 @@ rules:
|
||||||
no-unused-vars: off # TODO: warn later
|
no-unused-vars: off # TODO: warn later
|
||||||
react/no-unescaped-entities: off
|
react/no-unescaped-entities: off
|
||||||
react/no-unused-prop-types: warn
|
react/no-unused-prop-types: warn
|
||||||
|
react/no-unknown-property: [2, { ignore: jsx }]
|
||||||
react/react-in-jsx-scope: off
|
react/react-in-jsx-scope: off
|
||||||
react/prop-types: off # TODO: open later
|
react/prop-types: off # TODO: open later
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default function BadgenTitle ({ host }) {
|
||||||
</h1>
|
</h1>
|
||||||
<div>Fast badge generating service</div>
|
<div>Fast badge generating service</div>
|
||||||
</div>
|
</div>
|
||||||
<style>{`
|
<style jsx>{`
|
||||||
.title-block {
|
.title-block {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
|
@ -73,7 +73,7 @@ const StyleSwitch = ({ host }) => {
|
||||||
if (!host) return null
|
if (!host) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span className='style-switch'>
|
<div className='style-switch'>
|
||||||
{host.includes('https://flat.') ? [
|
{host.includes('https://flat.') ? [
|
||||||
<Link key='2' href='https://flat.badgen.net'>FLAT</Link>,
|
<Link key='2' href='https://flat.badgen.net'>FLAT</Link>,
|
||||||
<Link key='1' href='https://badgen.net'>CLASSIC</Link>
|
<Link key='1' href='https://badgen.net'>CLASSIC</Link>
|
||||||
|
@ -91,25 +91,25 @@ const StyleSwitch = ({ host }) => {
|
||||||
font: 16px/26px sans-serif;
|
font: 16px/26px sans-serif;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
a {
|
.style-switch a {
|
||||||
color: #999;
|
color: #999;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
padding: 1px 3px;
|
padding: 1px 3px;
|
||||||
}
|
}
|
||||||
a:first-child {
|
.style-switch a:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
}
|
}
|
||||||
.style-switch:hover a:first-child {
|
.style-switch:hover a:first-child {
|
||||||
margin-top: -26px;
|
margin-top: -26px;
|
||||||
}
|
}
|
||||||
a:focus {
|
.style-switch a:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
color: #08C;
|
color: #08C;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
</span>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,7 +43,7 @@ export default function Footer () {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<style>{`
|
<style jsx>{`
|
||||||
footer {
|
footer {
|
||||||
margin-top: 8rem;
|
margin-top: 8rem;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
|
|
|
@ -59,7 +59,7 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
turn an api endpoint into a svg live badge.
|
turn an api endpoint into a svg live badge.
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<style>{`
|
<style jsx>{`
|
||||||
pre {
|
pre {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-family: Menlo, Courier New, monospace;
|
font-family: Menlo, Courier New, monospace;
|
||||||
|
@ -73,12 +73,13 @@ export default function HomeIntro ({ isFlat = false }) {
|
||||||
.home-intro h3 {
|
.home-intro h3 {
|
||||||
font-family: Merriweather, serif;
|
font-family: Merriweather, serif;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul { padding-left: 2em; }
|
ul { padding-left: 2em; }
|
||||||
li { vertical-align: top; font-size: 14px; color: #777 }
|
li { vertical-align: top; font-size: 14px; line-height: 24px; color: #777; margin: 5px 0 }
|
||||||
li code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
|
li code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
|
||||||
li a { display: inline }
|
li a { display: inline; margin-left: 0.3em; text-decoration: underline }
|
||||||
a code { color: #06D }
|
a code { color: #06D }
|
||||||
`}
|
`}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"build:api": "tsc -p server.tsconfig.json",
|
"build:api": "tsc -p server.tsconfig.json",
|
||||||
"build:web": "next build && next export -o dist",
|
"build:web": "next build && next export -o dist",
|
||||||
"build-0": "npm run tools && npm run build:web && npm run build:api",
|
"build-0": "npm run tools && npm run build:web && npm run build:api",
|
||||||
"build": "next build",
|
"build": "npm run tools && next build",
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"dev:api": "nodemon --config nodemon.json index.ts",
|
"dev:api": "nodemon --config nodemon.json index.ts",
|
||||||
"dev:web": "next",
|
"dev:web": "next",
|
||||||
|
|
|
@ -23,9 +23,7 @@ const merriweather = Inter({ subsets: ['latin'] })
|
||||||
// }
|
// }
|
||||||
|
|
||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import BadgeExamples from '../components/badge-examples'
|
|
||||||
import BadgenTitle from '../components/badgen-title'
|
import BadgenTitle from '../components/badgen-title'
|
||||||
// import TopBar from '../components/top-bar'
|
|
||||||
import Intro from '../components/home-intro'
|
import Intro from '../components/home-intro'
|
||||||
import Footer from '../components/footer'
|
import Footer from '../components/footer'
|
||||||
import examples from '../static/.meta/badges.json'
|
import examples from '../static/.meta/badges.json'
|
||||||
|
@ -41,12 +39,18 @@ export default function Index () {
|
||||||
})
|
})
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
|
<Head>
|
||||||
|
<title>Badgen: fast badge generating service</title>
|
||||||
|
<meta name="description" content="fast badge generating service" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
<BadgenTitle host={host} />
|
<BadgenTitle host={host} />
|
||||||
<div className='body-wrapper'>
|
<div className='body-wrapper'>
|
||||||
<Intro />
|
<Intro />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
<style>{`
|
<style jsx>{`
|
||||||
.docs {
|
.docs {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-bottom: 6em;
|
padding-bottom: 6em;
|
||||||
|
|
|
@ -26,6 +26,7 @@ body {
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body-wrapper {
|
.body-wrapper {
|
||||||
|
|
Ładowanie…
Reference in New Issue