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

Made element sizes dynamic, improved mobile design

Browse source
This commit is contained in:
Kars van Velzen 2024-10-21 19:07:30 +02:00
parent e6c47b4b28
commit ddf9b27a16
3 changed files with 11 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app.css
View file

@ -1,23 +1,25 @@
#root { #root {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 1vh;
text-align: center; text-align: center;
display: block;
/*position: relative;*/
} }
h1 { h1 {
margin: 0; font-size: 10vh;
font-size: 8em; margin-top: 5vh;
line-height: 1.1; margin-bottom: 3vh;
} }
h2 { h2 {
font-size: 3em; font-size: 4vh;
line-height: 1; margin-top: 0;
margin-bottom: 3em; margin-bottom: 5vh;
} }
h3 { h3 {
font-size: 2em; font-size: 3vh;
} }

2
src/button.css
View file

@ -1,7 +1,7 @@
button { button {
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
margin: 1em; margin: 1vw;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1.2em; font-size: 1.2em;
font-weight: 500; font-weight: 500;

10
src/main.css
View file

@ -1,7 +1,5 @@
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -12,11 +10,3 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}