yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-22 12:10:11 +09:00
Code Releases Activity

Fix status badge position on smartphone (or narrow width devices)

Browse Source
This commit is contained in:
yude 2021-06-02 15:06:27 +09:00
parent 36d18de96d
commit ca8dcf7cf5
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pages/components/DiscordStatus.js
View File

@ -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>
} }
})() })()
} }

4
pages/profile.js
View File

@ -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 />

8
tailwind.config.js
View File

@ -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%',
},
}, },
} }
}, },