watson/octubre
1
0
Fork 0
Code Issues 6 Pull requests 9 Projects Releases Packages Wiki Activity Actions

Fixed button design

Browse source
This commit is contained in:
Kars van Velzen 2024-10-21 21:05:38 +02:00
parent ddf9b27a16
commit c8c556221d
3 changed files with 32 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app.css
View file

@ -1,10 +1,15 @@
*{
margin: 0;
box-sizing: border-box;
}
#root { #root {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 1vh; padding: 1vh;
text-align: center; text-align: center;
display: block; display: block;
/*position: relative;*/ position: relative;
} }
h1 { h1 {
@ -20,6 +25,20 @@ h2 {
} }
h3 { h3 {
margin-top: 5vh;
margin-bottom: 5vh;
font-size: 3vh; font-size: 3vh;
} }
p {
margin-bottom: 5vh;
}
.App {
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
width: 50%;
}

12
src/app.jsx
View file

@ -14,15 +14,9 @@ function App() {
</p> </p>
<div className="App"> <div className="App">
<ButtonGroup buttons={[ ["Home", "https://home.octubre.be"], ["Cloud", "https://cloud.octubre.be"], ["Me", "https://me.octubre.be"]]}/> <ButtonGroup buttons={[ ["Home", "https://home.octubre.be"], ["Cloud", "https://cloud.octubre.be"], ["Me", "https://me.octubre.be"], ["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"], ["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://home.octubre.be"]]}/>
</div> {/*<ButtonGroup buttons={[["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"] ]}/>*/}
{/*<ButtonGroup buttons={[["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://home.octubre.be"]]}/>*/}
<div className="App">
<ButtonGroup buttons={[ ["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"]]}/>
</div>
<div className="App">
<ButtonGroup buttons={[["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://home.octubre.be"]]}/>
</div> </div>
<h3>Contact</h3> <h3>Contact</h3>

12
src/button.css
View file

@ -1,11 +1,17 @@
button { button {
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
margin: 1vw;
padding: 0.6em 1.2em; margin: 0.5vw;
font-size: 1.2em; padding: 10px 10px;
text-align: center;
width: 150px;
font-size: 20px;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: #1a1a1a; background-color: #1a1a1a;
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s;