chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive sizing MTG

Browse Source
This commit is contained in:
chris 2022-09-21 17:41:28 -04:00
parent 0729f1e22b
commit 4ff746474c
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
MTG/style.css
View File

@ -18,6 +18,7 @@ background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131)
} }
html{ html{
height: 100vh; height: 100vh;
font-size:110%;
} }
#full{ #full{
color:rgb(165, 162, 162); color:rgb(165, 162, 162);
@ -38,7 +39,7 @@ main {
} }
.name { .name {
font-size: 1.5rem; font-size: 4vw;
display: flex; display: flex;
margin: 0 0 10px; margin: 0 0 10px;
padding: 10px 0; padding: 10px 0;
@ -94,7 +95,7 @@ main {
/* height:2rem; */ /* height:2rem; */
height: calc(100%-35px); height: calc(100%-35px);
min-width: auto; min-width: auto;
font-size: 3em; font-size: 7vw;
user-select: none; user-select: none;
/* margin-bottom: -50px; */ /* margin-bottom: -50px; */
@ -120,7 +121,7 @@ main {
.buttons { .buttons {
font-size: 2.95rem; font-size: 2.95em;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
Verdana, sans-serif; Verdana, sans-serif;
@ -157,11 +158,11 @@ color:rgb(141, 140, 140);
align-content: center; align-content: center;
} }
.buttonText { .buttonText {
font-size: 1.5rem; font-size: 1.5vw;
} }
#d20 { #d20 {
width: 2.95rem; width: 2.95em;
} }
#center{ #center{
color: red; color: red;
@ -176,11 +177,11 @@ color:rgb(141, 140, 140);
} }
.lifeUp{ .lifeUp{
font-size: 4rem; font-size: 8vw;
color: #00cc00 color: #00cc00
} }
.lifeDown{ .lifeDown{
font-size: 4rem; font-size: 8vw;
color:#e60000 color:#e60000
} }
.vert{ .vert{
@ -210,7 +211,7 @@ color:rgb(141, 140, 140);
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #792f22; color: #792f22;
font-size: .70rem; font-size: .70em;
} }
/* /*