masiv/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transfer to git

Browse Source
This commit is contained in:
masiv
2026-02-03 19:37:38 -03:00
commit 35d8517e56
137 changed files with 5817 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
css/articles/diy-calculator/layout/base.css Normal file
View File

@@ -0,0 +1,65 @@
.primary > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--gap);}
.primary > div > div {
height: min(auto, 100%);
flex-basis: 45%;
flex-grow: 1;
display: flex;}
/* I could tecnically change all of this to use
display: grid, it would make a lot more sense
taking into account the mess this code is*/
.calc {
height: auto;
min-width: fit-content;
gap: var(--gap);
padding: var(--gap);
flex-direction: column;
justify-content: center;
align-items: center;}
.buttons {
width: fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: right;
align-items: stretch;
max-width: calc((70px * 4) + ( 5 * (4px * 2) ) );}
button {
border: 0;
margin: 5px;
height: 70px;
width: 70px;
transition: 0.05s background-color ease-in;}
#equal { flex-grow: 1; }
.viewing {
border-top: 0;
border-left: 0;
border-right: 0;
display: flex;
align-items: center;
width: calc((70px * 4) + ( 2 * (15px) ));
height: 3em;}
.viewing > #output {
padding: 0.5em;
font-size: 40px;
text-align: right;
text-overflow: clip;
overflow-y: auto;
width: 100%;}
.info {
min-width: 50%;
flex-shrink: 1;
flex-direction: column;}