ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hnnnnnnn

Browse Source
This commit is contained in:
ntr 2019-05-16 19:05:55 +10:00
parent bab62afba2
commit 3ab66d75d2
3 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/instance.css
View File

@ -5,10 +5,10 @@
.instance { .instance {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content min-content 1fr 2fr; grid-template-rows: min-content min-content min-content min-content;
grid-template-areas: grid-template-areas:
"top top top" "top top info"
"vbox vbox info" "vbox vbox info"
"equip equip info" "equip equip info"
"cryps cryps info"; "cryps cryps info";
@ -21,6 +21,9 @@
.instance .info { .instance .info {
margin-left: 1em; margin-left: 1em;
grid-area: info; grid-area: info;
display: flex;
flex-flow: column;
justify-content: center;
} }
.instance .cryps { .instance .cryps {
@ -117,21 +120,21 @@
.instance-cryp { .instance-cryp {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-rows: min-content min-content min-content 250px min-content;
grid-template-rows: min-content min-content min-content min-content min-content min-content;
grid-template-areas: grid-template-areas:
"name " "name "
"skills "
"specs "
"avatar " "avatar "
"skills" "stats ";
"stats "
"specs "; /*margin: 0 2em;*/
margin: 0 2em; padding: 0.5em;
/*border: 1px solid whitesmoke;*/ border: 2px solid #222;
transition-property: all; transition-property: all;
transition-duration: 0.5s; transition-duration: 0.5s;
transition-delay: 0; transition-delay: 0;
transition-timing-function: ease; transition-timing-function: ease;
/*max-height: 450px;*/
} }
.instance-cryp:first-child { .instance-cryp:first-child {
@ -149,6 +152,7 @@
} }
.instance-cryp img { .instance-cryp img {
justify-self: center;
grid-area: avatar; grid-area: avatar;
min-width: 150px; min-width: 150px;
} }
@ -176,9 +180,7 @@
} }
.instance-cryp .skills button { .instance-cryp .skills button {
height: 100%; flex: 1;
width: 100%;
padding: 10px;
border-width: 0px; border-width: 0px;
} }
@ -196,6 +198,7 @@
} }
*/ */
.instance-cryp .specs { .instance-cryp .specs {
margin-top: 1em;
grid-area: specs; grid-area: specs;
display: flex; display: flex;
flex: 1; flex: 1;
@ -238,6 +241,10 @@
justify-content: center; justify-content: center;
} }
.icons figure:nth-child(4n) {
margin: 0 1em;
}
.equip-icon { .equip-icon {
height: 2em; height: 2em;
stroke-width: 5px; stroke-width: 5px;
@ -275,11 +282,23 @@
.equip { .equip {
display: flex; display: flex;
margin: 1em 0; margin: 1em 0;
text-align: center;
}
.equip h3 {
margin-bottom: 0.5em;
text-transform: uppercase;
letter-spacing: 0.1em;
} }
.equip .specs { .equip .specs {
display: flex;
flex: 1; flex: 1;
border: 2px solid #222;
}
.equip .items {
display: flex;
flex-flow: row;
} }
.label { .label {
@ -287,13 +306,12 @@
} }
.equip .skills { .equip .skills {
display: flex;
flex: 1; flex: 1;
flex-direction: column; border: 2px solid #222;
} }
.equip .skills button { .equip .skills button {
flex: 1 1 100%; flex: 1;
color: whitesmoke; color: whitesmoke;
font-size: 16pt; font-size: 16pt;
padding: 5px; padding: 5px;
@ -318,17 +336,9 @@ button.equip {
} }
} }
.equip .specs {
display: flex;
padding-left: 5%;
flex-direction: column;
}
.equip .specs figure { .equip .specs figure {
flex: 1; flex: 1;
border: 0; border: 0;
padding: 0.5em 1em 0 0;
text-align: center; text-align: center;
} }

1
client/src/components/instance.cryps.jsx
View File

@ -113,7 +113,6 @@ function Cryp(props) {
return ( return (
<figure key={i} onClick={blankSpecClick} className={equip} > <figure key={i} onClick={blankSpecClick} className={equip} >
{shapes.diamond(`stat-icon ${equip}`)} {shapes.diamond(`stat-icon ${equip}`)}
<figcaption>+</figcaption>
</figure> </figure>
); );
} }

2
client/styles.css
View File

@ -180,7 +180,7 @@ table {
} }
table td { table td {
border: 1px solid whitesmoke; border: 1px solid #222;
padding: 0.2em; padding: 0.2em;
text-align: center; text-align: center;
height: 40px; height: 40px;