mirror of
https://github.com/yude-jp/yude.jp
synced 2024-06-08 23:14:30 +09:00
Fix status badge position on smartphone (or narrow width devices)
This commit is contained in:
parent
36d18de96d
commit
ca8dcf7cf5
|
@ -15,17 +15,17 @@ const App = () => {
|
||||||
const status = data.members && data.members[0].status;
|
const status = data.members && data.members[0].status;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="z-50 transform translate-x-96 -translate-y-10 w-5">
|
<div className="z-50 w-6 transform translate-y-3/4 -translate-x-full">
|
||||||
{
|
{
|
||||||
(() => {
|
(() => {
|
||||||
if (status == "online"){
|
if (status == "online"){
|
||||||
return <div className="z-1000 text-green-700 rounded-full bg-green-500 flex w-5 h-5"></div>
|
return <div className="text-green-700 rounded-full bg-green-500 flex w-6 h-6"></div>
|
||||||
} else if (status == "idle"){
|
} else if (status == "idle"){
|
||||||
return <div className="z-1000 text-yellow-700 rounded-full bg-green-500 flex w-5 h-5"></div>
|
return <div className="text-yellow-700 rounded-full bg-green-500 flex w-6 h-6"></div>
|
||||||
} else if (status == "dnd"){
|
} else if (status == "dnd"){
|
||||||
return <div className="z-1000 text-yellow-700 rounded-full bg-red-500 flex w-5 h-5"></div>
|
return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
|
||||||
} else {
|
} else {
|
||||||
return <div className="z-1000 text-gray-700 rounded-full bg-red-500 flex w-5 h-5"></div>
|
return <div className="text-gray-700 rounded-full bg-red-500 flex w-6 h-6"></div>
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,8 +41,9 @@ export default function About(props) {
|
||||||
// Heading
|
// Heading
|
||||||
}
|
}
|
||||||
<div>
|
<div>
|
||||||
|
<div className="flex mb-10 justify-center">
|
||||||
<Image
|
<Image
|
||||||
className = "object-contain rounded-full hover:animate-rumble z-0"
|
className = "rounded-full hover:animate-rumble z-0"
|
||||||
src = "/static/images/avatar.png"
|
src = "/static/images/avatar.png"
|
||||||
alt = "yude's avatar"
|
alt = "yude's avatar"
|
||||||
width = {200}
|
width = {200}
|
||||||
|
@ -50,6 +51,7 @@ export default function About(props) {
|
||||||
unoptimized = {true}
|
unoptimized = {true}
|
||||||
/>
|
/>
|
||||||
<DiscordStatus />
|
<DiscordStatus />
|
||||||
|
</div>
|
||||||
<p className="text-4xl transform -translate-y-4">yude</p>
|
<p className="text-4xl transform -translate-y-4">yude</p>
|
||||||
<div>
|
<div>
|
||||||
<DiscordPlaying />
|
<DiscordPlaying />
|
||||||
|
|
|
@ -50,6 +50,14 @@ module.exports = {
|
||||||
'0%, 100%': {filter: 'drop-shadow(0px 0px 1px rgb(255, 255, 255))'},
|
'0%, 100%': {filter: 'drop-shadow(0px 0px 1px rgb(255, 255, 255))'},
|
||||||
'50%': {filter: 'drop-shadow(0px 0px 8px rgb(255, 255, 255))'}
|
'50%': {filter: 'drop-shadow(0px 0px 8px rgb(255, 255, 255))'}
|
||||||
},
|
},
|
||||||
|
translate: {
|
||||||
|
'1/7': '14.2857143%',
|
||||||
|
'2/7': '28.5714286%',
|
||||||
|
'3/7': '42.8571429%',
|
||||||
|
'4/7': '57.1428571%',
|
||||||
|
'5/7': '71.4285714%',
|
||||||
|
'6/7': '85.7142857%',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue
Block a user