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