Skip to content

Commit

Permalink
Fix styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@extremeheat
extremeheat committed Jun 5, 2024
1 parent 2ca3bfc commit 523d71a
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 34 deletions.
80 changes: 51 additions & 29 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ a:hover {
}

.promoBanner {
background-image: url(/images/background.svg), linear-gradient(45deg, #009688, #4db6ac)!important;
background-image: url(../public/images/background.svg), linear-gradient(45deg, #009688, #4db6ac) !important;
background-repeat: repeat;
background-size: 3.5rem, 100%;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
Expand All @@ -73,56 +73,78 @@ a:hover {
/* -------------------------------------------------------------------------- */

.headerTitle {
background-color: transparent;
color: #FFFFFF;
font-weight: 600;
background-color: transparent;
color: #FFFFFF;
font-weight: 600;
}

.meetTheTeam ul {
list-style: none;
padding-left: 0;
list-style: none;
padding-left: 0;
}

.meetTheTeam ul img {
border-radius: 15%;
height: 48px;
width: 48px;
border-radius: 15%;
height: 48px;
width: 48px;
}

.meetTheTeam ul {
list-style: none;
padding-left: 0;
list-style: none;
padding-left: 0;
}

.meetTheTeam ul li {
margin-bottom: 3px;
margin-bottom: 3px;
}

.meetTheTeam ul li img {
margin-right: 15px;
border-radius: 48px;
margin-right: 15px;
border-radius: 48px;
}

.meetTheTeam ul code {
background-color: #e83e8c;
color: #FFFFFF;
font-family: inherit;
padding: 0.2rem 0.5rem;
position: relative;
margin-left: 6px;
display: inline-block;
background-color: #e83e8c;
color: #FFFFFF;
font-family: inherit;
padding: 0.2rem 0.5rem;
position: relative;
margin-left: 6px;
display: inline-block;
}

.meetTheTeam ul code:before {
content: '';
border-right: 3px solid #E83E8C;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
position: absolute;
top: calc(50% - 2px);
left: -3px;
content: '';
border-right: 3px solid #E83E8C;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
position: absolute;
top: calc(50% - 2px);
left: -3px;
}

.meetTheTeam h3 {
margin-bottom: 1rem;
margin-bottom: 1rem;
}

.navbar {
display: flex;
justify-content: center;
width: fit-content;

.nav-button {
border-radius: 22px;
padding-left: 8px;
padding-right: 8px;

> a {
color: white;
display: flex;
gap: 8px;
> img {
filter: invert(1);
}
}
}
}

22 changes: 17 additions & 5 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function Members () {
}

return (
<div className='container'>
<div className='container' style={{ marginTop: 20 }}>
<h2>Main projects</h2>
<ul>
<li><a href='https://prismarinejs.github.io/minecraft-data'>Minecraft data</a> : Language independent module providing minecraft data for minecraft clients, servers and libraries.</li>
Expand Down Expand Up @@ -69,6 +69,17 @@ function Members () {
)
}

function NavEntry ({ name, link, image }) {
return (
<li className='nav-item nav-button'>
<a className='nav-link' href={link}>
<img src={image} style={{ width: 24, height: 24 }} />
{name}
</a>
</li>
)
}

export function App () {
const [backgroundPosition, setBackgroundPosition] = useState('0 0, 0 0')

Expand All @@ -85,17 +96,18 @@ export function App () {
<a className='navbar-brand' href='/'><img className='d-inline-block align-top' src='/images/prismarine_js.svg' width={32} height={32} alt='PrismarineJS' /></a><button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarContent' aria-controls='navbarContent' aria-expanded='false' aria-label='Toggle navigation'><span className='navbar-toggler-icon' /></button>
<div className='collapse navbar-collapse' id='navbarContent'>
<ul className='navbar-nav mr-auto'>
<li className='nav-item'><a className='nav-link' href='https://github.com/PrismarineJS'>GitHub</a></li>
<NavEntry name='GitHub' link='https://github.com/PrismarineJS' image='https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg' />
<NavEntry name='Discord' link='https://discord.gg/GsEFRM8' image='https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg' />
</ul>
</div>
</nav>
<div className='container promo pb-5 pt-5 mb-5'>
<div className='container promo pb-5 pt-5 mb-5' style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: 'fit-content' }}>
<h1 className='text-left display-4 col-md-auto'>PrismarineJS</h1>
<h3 className='text-left col-md-8'>Minecraft-compatible <a href='https://github.com/PrismarineJS/flying-squid' title='PrismarineJS/Flying-Squid on GitHub'>server</a>, <a href='https://github.com/PrismarineJS/mineflayer' title='PrismarineJS/Mineflayer on GitHub'>bot</a>, and <a href='https://github.com/PrismarineJS/node-minecraft-protocol' title='PrismarineJS/Node-Minecraft-Protocol on GitHub'>API</a>. All written in JavaScript.</h3>
<h3 className='text-left col-md-12'>Minecraft-compatible <a href='https://github.com/PrismarineJS/flying-squid' title='PrismarineJS/Flying-Squid on GitHub'>server</a>, <a href='https://github.com/PrismarineJS/mineflayer' title='PrismarineJS/Mineflayer on GitHub'>bot</a>, and <a href='https://github.com/PrismarineJS/node-minecraft-protocol' title='PrismarineJS/Node-Minecraft-Protocol on GitHub'>API</a>. All written in JavaScript.</h3>
<div className='col-md-auto mt-4'><a href='https://github.com/PrismarineJS'><button className='btn btn-light' type='button'>Check it out on GitHub</button></a></div>
</div>
</div>
<div className='content container-fluid'>
<div className='content container-fluid' style={{ display: 'flex', justifyContent: 'center' }}>
<div className='row markdown-render meetTheTeam'>
<Members />
</div>
Expand Down

0 comments on commit 523d71a

Please sign in to comment.