feat: implement submit mode page
This commit is contained in:
daniyal
parent
e56a29356b
commit
ea5f113246
284
src/components/ModForm.tsx
Normal file
284
src/components/ModForm.tsx
Normal file
@ -0,0 +1,284 @@
|
|||||||
|
import '../styles/styles.css'
|
||||||
|
|
||||||
|
export const ModForm = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<InputField
|
||||||
|
label='Game'
|
||||||
|
description="Can't find the game you're looking for? Send us a DM mentioning it so we can add it."
|
||||||
|
placeholder='The mod is for a game called...'
|
||||||
|
name='game'
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
label='Title'
|
||||||
|
placeholder='Return the banana mod'
|
||||||
|
name='title'
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
label='Body'
|
||||||
|
type='textarea'
|
||||||
|
placeholder="Here's what this mod is all about"
|
||||||
|
name='body'
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
label='Featured Image URL'
|
||||||
|
description='We recommend to upload images to https://nostr.build/'
|
||||||
|
type='text'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='Image URL'
|
||||||
|
name='featuredImageUrl'
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
label='Summary'
|
||||||
|
type='textarea'
|
||||||
|
placeholder='This is a quick description of my mod'
|
||||||
|
name='summary'
|
||||||
|
/>
|
||||||
|
<CheckboxField label='This mod not safe for work (NSFW)' name='nsfw' />
|
||||||
|
<ImageUploadField
|
||||||
|
label='Screenshots URLs'
|
||||||
|
description='We recommend to upload images to https://nostr.build/'
|
||||||
|
/>
|
||||||
|
<InputField
|
||||||
|
label='Tags'
|
||||||
|
description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
|
||||||
|
placeholder='Tags'
|
||||||
|
name='tags'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<div className='labelWrapperMain'>
|
||||||
|
<label className='form-label labelMain'>Download URLs</label>
|
||||||
|
<button className='btn btnMain btnMainAdd' type='button'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-32 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className='labelDescriptionMain'>
|
||||||
|
You can upload your game mod to Github, as an example, and keep
|
||||||
|
updating it there. Also, its advisable that you hash your package as
|
||||||
|
well with your nostr public key.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<DownloadUrlFields />
|
||||||
|
<DownloadUrlFields />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InputFieldProps {
|
||||||
|
label: string
|
||||||
|
description?: string
|
||||||
|
type?: 'text' | 'textarea'
|
||||||
|
placeholder: string
|
||||||
|
name: string
|
||||||
|
inputMode?: 'url'
|
||||||
|
}
|
||||||
|
|
||||||
|
const InputField = ({
|
||||||
|
label,
|
||||||
|
description,
|
||||||
|
type = 'text',
|
||||||
|
placeholder,
|
||||||
|
name,
|
||||||
|
inputMode
|
||||||
|
}: InputFieldProps) => (
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain'>{label}</label>
|
||||||
|
{description && <p className='labelDescriptionMain'>{description}</p>}
|
||||||
|
{type === 'textarea' ? (
|
||||||
|
<textarea
|
||||||
|
className='inputMain'
|
||||||
|
placeholder={placeholder}
|
||||||
|
name={name}
|
||||||
|
></textarea>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className='inputMain'
|
||||||
|
placeholder={placeholder}
|
||||||
|
name={name}
|
||||||
|
inputMode={inputMode}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
interface CheckboxFieldProps {
|
||||||
|
label: string
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
|
||||||
|
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
|
||||||
|
<label className='form-label labelMain'>{label}</label>
|
||||||
|
<input type='checkbox' className='CheckboxMain' name={name} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
interface ImageUploadFieldProps {
|
||||||
|
label: string
|
||||||
|
description: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ImageUploadField = ({ label, description }: ImageUploadFieldProps) => (
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain'>{label}</label>
|
||||||
|
{description && <p className='labelDescriptionMain'>{description}</p>}
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='We recommend to upload images to https://nostr.build/'
|
||||||
|
/>
|
||||||
|
<button className='btn btnMain btnMainRemove' type='button'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-32 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const DownloadUrlFields = () => {
|
||||||
|
return (
|
||||||
|
<div className='inputWrapperMainWrapper'>
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='https://...'
|
||||||
|
value='https://github.com/'
|
||||||
|
/>
|
||||||
|
<button className='btn btnMain btnMainRemove' type='button'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-32 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<div className='inputWrapperMainBox'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-96 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='SHA-256 Hash'
|
||||||
|
/>
|
||||||
|
<div className='inputWrapperMainBox'></div>
|
||||||
|
</div>
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<div className='inputWrapperMainBox'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-96 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='Signature public key'
|
||||||
|
value='npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
|
||||||
|
/>
|
||||||
|
<div className='inputWrapperMainBox'></div>
|
||||||
|
</div>
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<div className='inputWrapperMainBox'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-96 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='Malware scan link'
|
||||||
|
/>
|
||||||
|
<div className='inputWrapperMainBox'></div>
|
||||||
|
</div>
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<div className='inputWrapperMainBox'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-96 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='Mod version (1.0)'
|
||||||
|
/>
|
||||||
|
<div className='inputWrapperMainBox'></div>
|
||||||
|
</div>
|
||||||
|
<div className='inputWrapperMain'>
|
||||||
|
<div className='inputWrapperMainBox'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-96 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
className='inputMain'
|
||||||
|
inputMode='url'
|
||||||
|
placeholder='Custome note/message'
|
||||||
|
/>
|
||||||
|
<div className='inputWrapperMainBox'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -40,9 +40,9 @@ export const Header = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
Tip
|
Tip
|
||||||
</a>
|
</a>
|
||||||
<a
|
<Link
|
||||||
|
to={appRoutes.submitMod}
|
||||||
className={navStyles.NMTI_SecInside_Link}
|
className={navStyles.NMTI_SecInside_Link}
|
||||||
href='submit-mod.html'
|
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@ -54,7 +54,7 @@ export const Header = () => {
|
|||||||
<path d='M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z'></path>
|
<path d='M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z'></path>
|
||||||
</svg>
|
</svg>
|
||||||
Submit Mod
|
Submit Mod
|
||||||
</a>
|
</Link>
|
||||||
<a className={navStyles.NMTI_SecInside_Link} href='write.html'>
|
<a className={navStyles.NMTI_SecInside_Link} href='write.html'>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
|||||||
259
src/pages/submitMod.tsx
Normal file
259
src/pages/submitMod.tsx
Normal file
@ -0,0 +1,259 @@
|
|||||||
|
import { ModForm } from '../components/ModForm'
|
||||||
|
import '../styles/author.css'
|
||||||
|
import '../styles/innerPage.css'
|
||||||
|
import '../styles/styles.css'
|
||||||
|
import '../styles/write.css'
|
||||||
|
import '../styles/socialPosts.css'
|
||||||
|
|
||||||
|
export const SubmitModPage = () => {
|
||||||
|
return (
|
||||||
|
<div className='InnerBodyMain'>
|
||||||
|
<div className='ContainerMain'>
|
||||||
|
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
|
||||||
|
<div className='IBMSMSplitMain'>
|
||||||
|
<div className='IBMSMSplitMainBigSide'>
|
||||||
|
<div className='IBMSMTitleMain'>
|
||||||
|
<h2 className='IBMSMTitleMainHeading'>Submit a mod</h2>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBS_Write'>
|
||||||
|
<ModForm />
|
||||||
|
<div className='IBMSMSMBS_WriteAction'>
|
||||||
|
<button className='btn btnMain' type='button'>
|
||||||
|
Publish
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProfileComponent author={author} posts={posts} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Author {
|
||||||
|
name: string
|
||||||
|
handle: string
|
||||||
|
address: string
|
||||||
|
bio: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const author: Author = {
|
||||||
|
name: 'Freakoverse',
|
||||||
|
handle: 'freakoverse@degmods.com',
|
||||||
|
address: 'npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r',
|
||||||
|
bio: `I guess I'm one of those #vtubers . Having fun talking about general topics, vrchat/similar, and games. Also #indiedev #gamedev You can call me: Freak فْرِيكٌ <20><><EFBFBD>リク (still learning Nihongo). #envtuber #podcast #gaming #gamedev`
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Post {
|
||||||
|
name: string
|
||||||
|
link: string
|
||||||
|
content: string
|
||||||
|
imageUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const posts: Post[] = [
|
||||||
|
{
|
||||||
|
name: 'Freakoverse',
|
||||||
|
link: `feed-note.html`,
|
||||||
|
content: ` So I know HTML/CSS pretty well and I'm confident with
|
||||||
|
them.\n\n\n\nI also know UI and UX, as
|
||||||
|
well as graphic design (nowhere near pros, but I'm the
|
||||||
|
guy they call when the pro isn't around or when
|
||||||
|
something is needed quickly).\n\n\n\nI
|
||||||
|
don't know much java. Usually, I'd search for what I
|
||||||
|
want, find something close, and fiddle with it until
|
||||||
|
it works/gets the desired result ish. AI is helping
|
||||||
|
with this a lot actually.\n\n\n\nThis
|
||||||
|
helped me create my own sites and my own designs to
|
||||||
|
life, though just at a static level. I always wanted
|
||||||
|
to make dynamic sites, but the idea of doing backend
|
||||||
|
stuff is complex to me. However...\n\n\n\n"Let
|
||||||
|
me look into it again" and thought if I could make a
|
||||||
|
simple blog. Digging a bit, and watching/skimming
|
||||||
|
through tutorials, I realized that I think I can.\n\n\n\nNot
|
||||||
|
sure when I'll start/attempt this, but will journey
|
||||||
|
into learning the basics of PHP and attempting to make
|
||||||
|
a blog. I guess I'll learn the basics of PHP, and then
|
||||||
|
head into Laravel. If I manage to get the hang of it,
|
||||||
|
I'll attempt to make a complex old project I had, and
|
||||||
|
if I do manage to do it, I'll be pretty confident
|
||||||
|
=3\n\n\n\nAside from that, would be
|
||||||
|
nice to make a website, a personal blog, that shows my
|
||||||
|
long-form articles only. Hopefully by then things
|
||||||
|
would be more stable nostr-wise, cleaner, and easier
|
||||||
|
in terms of learning, so I'd be able to do it (or
|
||||||
|
collab with someone to do it / to make a template for
|
||||||
|
all to have and deploy easily).\n\n\n\n`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Freakoverse',
|
||||||
|
link: 'https://primal.net/e/note1j7zmj4g6grc39zq30xq2de95dfszjpwlqvsktv65h7kuzjzsytjqgx73c7',
|
||||||
|
content: `Happy to see some gamedevs port their games from Unity to Godot, after that Unity fiasco, like this one here called Road To Vostok`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Freakoverse',
|
||||||
|
link: `feed-note.html`,
|
||||||
|
content: `This is good.`,
|
||||||
|
imageUrl: 'assets/img/media-cache%20(1).jpg'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
author: Author
|
||||||
|
posts: Post[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProfileComponent = ({ author, posts }: Props) => {
|
||||||
|
return (
|
||||||
|
<div className='IBMSMSplitMainSmallSide'>
|
||||||
|
<div className='IBMSMSplitMainSmallSideSec'>
|
||||||
|
<div className='IBMSMSMSSS_Author'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left'>
|
||||||
|
<a
|
||||||
|
className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
|
||||||
|
href='profile.html'
|
||||||
|
>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left_Inside'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_PPWrapper'>
|
||||||
|
<div
|
||||||
|
className='IBMSMSMSSS_Author_Top_PP'
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"url('assets/img/media-cache%20(4).png') center / cover no-repeat"
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
|
||||||
|
<div className='IBMSMSMSSS_Author_TopWrapper'>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Name'>
|
||||||
|
{author.name}
|
||||||
|
</p>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Handle'>
|
||||||
|
{author.handle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
|
||||||
|
<p
|
||||||
|
id='SiteOwnerAddress'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Address'
|
||||||
|
>
|
||||||
|
{author.address}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_IconWrapper'>
|
||||||
|
<div
|
||||||
|
id='copySiteOwnerAddress'
|
||||||
|
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_IconWrapped IBMSMSMSSS_Author_Top_IconWrappedQR'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-32 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M144 32C170.5 32 192 53.49 192 80V176C192 202.5 170.5 224 144 224H48C21.49 224 0 202.5 0 176V80C0 53.49 21.49 32 48 32H144zM128 96H64V160H128V96zM144 288C170.5 288 192 309.5 192 336V432C192 458.5 170.5 480 144 480H48C21.49 480 0 458.5 0 432V336C0 309.5 21.49 288 48 288H144zM128 352H64V416H128V352zM256 80C256 53.49 277.5 32 304 32H400C426.5 32 448 53.49 448 80V176C448 202.5 426.5 224 400 224H304C277.5 224 256 202.5 256 176V80zM320 160H384V96H320V160zM352 448H384V480H352V448zM448 480H416V448H448V480zM416 288H448V416H352V384H320V480H256V288H352V320H416V288z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
||||||
|
href='https://primal.net/p/npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
|
||||||
|
target='_blank'
|
||||||
|
rel='noopener noreferrer'
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-32 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z'></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Details'>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Bio'>{author.bio}</p>
|
||||||
|
<div
|
||||||
|
id='OwnerFollowLogin'
|
||||||
|
className='IBMSMSMSSS_Author_Top_NostrLinks'
|
||||||
|
style={{ display: 'flex' }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className='btn btnMain' type='button'>
|
||||||
|
Follow
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSplitMainSmallSideSec'>
|
||||||
|
<div className='IBMSMSMSSS_ShortPosts'>
|
||||||
|
{posts.map((post, index) => (
|
||||||
|
<a
|
||||||
|
key={'post' + index}
|
||||||
|
className='IBMSMSMSSS_ShortPostsPostLink'
|
||||||
|
href={post.link}
|
||||||
|
>
|
||||||
|
<div className='IBMSMSMSSS_ShortPostsPost'>
|
||||||
|
<div className='IBMSMSMSSS_ShortPostsPost_Top'>
|
||||||
|
<p className='IBMSMSMSSS_ShortPostsPost_TopName'>
|
||||||
|
{post.name}
|
||||||
|
</p>
|
||||||
|
<div className='IBMSMSMSSS_ShortPostsPost_TopLink'>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-32 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_ShortPostsPost_TopLinkIcon'
|
||||||
|
style={{ width: '100%', height: '100%' }}
|
||||||
|
>
|
||||||
|
<path d='M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_ShortPostsPost_Bottom'>
|
||||||
|
<p>{post.content}</p>
|
||||||
|
{post.imageUrl && (
|
||||||
|
<div
|
||||||
|
className='IBMSMSMSSS_ShortPostsPost_BottomImg'
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(0deg, #232323 5%, rgba(255, 255, 255, 0)), url("${post.imageUrl}") top / cover no-repeat`
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -3,6 +3,7 @@ import { BlogsPage } from '../pages/blogs'
|
|||||||
import { GamesPage } from '../pages/games'
|
import { GamesPage } from '../pages/games'
|
||||||
import { HomePage } from '../pages/home'
|
import { HomePage } from '../pages/home'
|
||||||
import { ModsPage } from '../pages/mods'
|
import { ModsPage } from '../pages/mods'
|
||||||
|
import { SubmitModPage } from '../pages/submitMod'
|
||||||
|
|
||||||
export const appRoutes = {
|
export const appRoutes = {
|
||||||
index: '/',
|
index: '/',
|
||||||
@ -10,7 +11,8 @@ export const appRoutes = {
|
|||||||
games: '/games',
|
games: '/games',
|
||||||
mods: '/mods',
|
mods: '/mods',
|
||||||
about: '/about',
|
about: '/about',
|
||||||
blog: '/blog'
|
blog: '/blog',
|
||||||
|
submitMod: '/submit-mod'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const routes = [
|
export const routes = [
|
||||||
@ -37,5 +39,9 @@ export const routes = [
|
|||||||
{
|
{
|
||||||
path: appRoutes.blog,
|
path: appRoutes.blog,
|
||||||
element: <BlogsPage />
|
element: <BlogsPage />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: appRoutes.submitMod,
|
||||||
|
element: <SubmitModPage />
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
267
src/styles/author.css
Normal file
267
src/styles/author.css
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
.IBMSMSMSSS_Author {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 10px;
|
||||||
|
border: solid 1px rgba(255,255,255,0.1);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 15px;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.IBMSMSMSSS_Author_Top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 15px;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_PP {
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 75px;
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Details {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.HBSS_Author_Top_NostrLinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_AddressWrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.75fr 0.75fr;
|
||||||
|
grid-gap: 0;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
border-radius: 7px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Icon {
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Address {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Bio {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_NostrLinksLink {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(255,255,255,0.25);
|
||||||
|
text-decoration: unset;
|
||||||
|
padding: 15px 15px;
|
||||||
|
background: rgba(38,38,38,0);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: solid 1px rgba(255,255,255,0);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
grid-gap: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_NostrLinksLink:hover {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
border: solid 1px rgba(255,255,255,0);
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_NostrLinksLink:active {
|
||||||
|
transition: ease 0.1s;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_NostrLinksLink::before {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 0;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(to top right, #262626, #292929, #262626);
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_NostrLinksLink:hover::before {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Left {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.IBMSMSMSSS_Author_Top_Left {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Name {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_PPWrapper {
|
||||||
|
background: linear-gradient(to bottom right, #4b4b4b 00%, rgba(35,35,35,0) 50%, #4b4b4b 150%);
|
||||||
|
/*padding: 2px;*/
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Handle {
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_NostrLinksLink.IBMSMSMSSS_A_T_NLL_IBMSMSMSSSFollow {
|
||||||
|
width: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
border: solid 1px rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Left_Inside {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 15px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
color: unset;
|
||||||
|
text-decoration: unset;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper:hover {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
color: unset;
|
||||||
|
text-decoration: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: scale(1.02);
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Left_InsidePic {
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Left_InsideDetails {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 5px;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_AddressWrapped {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_IconWrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 0px;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_TopWrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_IconWrapped {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
color: rgba(255,255,255,0.25);
|
||||||
|
cursor: pointer;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_IconWrappedQR {
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_IconWrapped > .IBMSMSMSSS_Author_Top_Icon {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_IconWrapped:hover > .IBMSMSMSSS_Author_Top_Icon {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_IconWrapped:active > .IBMSMSMSSS_Author_Top_Icon {
|
||||||
|
transition: ease 0.1s;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Author_Top_Banner {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 20%;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
131
src/styles/innerPage.css
Normal file
131
src/styles/innerPage.css
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
.IBMSMSplitMain {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.5fr 0.5fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.IBMSMSplitMain {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMain.IBMSMSplitMainThree {
|
||||||
|
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainBigSide {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainSmallSide {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainBigSideSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainSmallSideSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainFullSide {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainFullSideSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainFullSideSec.IBMSMSMFSSNav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 15px;
|
||||||
|
background: #1c1c1c;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border: solid 1px rgba(255,255,255,0.05);
|
||||||
|
box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.IBMSMSMFSSNavBtn {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: unset;
|
||||||
|
color: rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.IBMSMSMFSSNavBtn::before {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 0;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(rgba(255,255,255,0.01), rgba(255,255,255,0.01)), linear-gradient(to top right, #262626, #292929, #262626);
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.IBMSMSMFSSNavBtn:hover::before {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.IBMSMSMFSSNavBtn.IBMSMSMFSSNavBtnActive {
|
||||||
|
background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626);
|
||||||
|
/*border: solid 1px rgba(255,255,255,0.05);*/
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSplitMainFullSideSec.IBMSMSMFSSContent {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMFSSContentPosts {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.IBMSMSMFSSNavBtn.IBMSMSMFSSNavBtnAlt {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMFSSContentPost {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Buttons {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: solid 1px rgba(255,255,255,0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_Text {
|
||||||
|
font-size: 28px;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
124
src/styles/socialPosts.css
Normal file
124
src/styles/socialPosts.css
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
.IBMSMSMSSS_ShortPosts {
|
||||||
|
border-radius: 15px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.IBMSMSMSSS_ShortPosts {
|
||||||
|
border-radius: 15px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost_Top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.75fr 0.25fr;
|
||||||
|
grid-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost_Bottom {
|
||||||
|
flex-direction: column;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost_TopName {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost_TopLink {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(255,255,255,0.25);
|
||||||
|
padding: 7px;
|
||||||
|
/*background: rgba(255,255,255,0.1);*/
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPostLink {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: unset;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0);
|
||||||
|
transform: scale(1);
|
||||||
|
background-color: rgba(38,38,38,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPostLink:hover {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: unset;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPostLink:active {
|
||||||
|
transition: ease 0.1s;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPostLink::before {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
background: linear-gradient(to top right, #262626, #292929, #262626);
|
||||||
|
opacity: 0;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPostLink:hover::before {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
background: linear-gradient(to top right, #262626, #292929, #262626);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost_TopLinkIcon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMSSS_ShortPostsPost_BottomImg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
15
src/styles/write.css
Normal file
15
src/styles/write.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.IBMSMSMBS_Write {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IBMSMSMBS_WriteAction {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user