Octavia/odin-calculator
Watch
1
0
Fork
You've already forked odin-calculator
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust styles for smaller screens

Browse source
This commit is contained in:
lolabird 2023-12-29 12:47:23 -07:00
commit bf032fa8b6
1 changed files with 10 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

21
style.css
View file

@ -6,6 +6,11 @@
url("./fonts/SixteenSegments.ttf") format("truetype") url("./fonts/SixteenSegments.ttf") format("truetype")
} }
/* * {
box-sizing: border-box;
} */
html { html {
--digi-green: #79ff54; --digi-green: #79ff54;
--dark-green: #094909; --dark-green: #094909;
@ -82,20 +87,20 @@ main {
.top-screen { .top-screen {
height: 40%; height: 40%;
font-size: 30px; font-size: 30px;
max-width: 415px; max-width: 100%;
overflow: hidden; overflow: hidden;
} }
.main-screen { .main-screen {
height: 60%; height: 60%;
font-size: 70px; font-size: 70px;
max-width: 415px; max-width: 100%;
overflow: hidden; overflow: hidden;
} }
button { button {
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
height: 100px; height: 100%;
width: 100px; width: 100%;
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
border-color: var(--light-text); border-color: var(--light-text);
@ -164,7 +169,7 @@ button:active, .active {
.equal { .equal {
grid-column: span 2; grid-column: span 2;
width: 205px; width: 100%;
background-color: var(--digi-green); background-color: var(--digi-green);
} }
@ -194,7 +199,6 @@ footer a:hover, footer a:focus {
.calculator { .calculator {
max-width: 90vw; max-width: 90vw;
height: 70%; height: 70%;
box-sizing: border-box;
} }
.main-screen { .main-screen {
@ -204,11 +208,6 @@ footer a:hover, footer a:focus {
button { button {
font-size: 40px; font-size: 40px;
height: 100%;
width: 100%;
} }
.equal {
width: 100%;
}
} }