Resume
/
calculator
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix styling (heights were messed up)
Gitea/calculator/pipeline/head This commit looks good Details

This commit is contained in:
andrzej 2024-05-26 10:34:49 +02:00
parent eea0ec1c62
commit 57a69a8e9c
2 changed files with 71 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.css
View File

@ -1,5 +1,3 @@
*, *,
*::before, *::before,
*::after { *::after {
@ -16,6 +14,7 @@ html{
} }
#calculator { #calculator {
height: 800px;
width: 550px; width: 550px;
margin: auto; margin: auto;
background: rgb(68, 64, 64); background: rgb(68, 64, 64);
@ -25,6 +24,7 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
} }
#calculator-content { #calculator-content {
height: 100%;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1.6fr repeat(5, 1fr); grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
@ -82,6 +82,7 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
.off { .off {
filter: brightness(0.5); filter: brightness(0.5);
} }
.off>p { .off>p {
display: none !important; display: none !important;
} }
@ -94,7 +95,7 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
#display { #display {
font-family: calculator; font-family: calculator;
font-size: 6rem; font-size: 5rem;
grid-area: main; grid-area: main;
align-self: center; align-self: center;

2
src/Components/Calculator.jsx
View File

@ -144,7 +144,7 @@ export default function Calculator(props) {
<div id="calculator"> <div id="calculator">
<div id="calculator-content"> <div id="calculator-content">
<header> <header>
<h1>CALCULATOR - CI/CD EDITION</h1> <h1>CALCULATOR</h1>
</header> </header>
<div id="display-container" className={on ? "on" : "off"}> <div id="display-container" className={on ? "on" : "off"}>
<p id="memory">{memory}</p> <p id="memory">{memory}</p>