✨

less/character-sheet.less

@@ -73,6 +73,9 @@
 
     .advancementBox {
         margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
     .lvlBox {
@@ -133,54 +136,51 @@
         text-align: center;
     }
 
+    .mainBox {
+        display: flex;
+    }
 
-    .sideBarBox {
-        float: left;
-        width: 185px;
-        min-height: 500px;
-        border-left-width: 18px;
-        border-right-width: 18px;
-        border-top-width: 21px;
-        border-bottom-width: 52px;
-        border-style: solid;
-        margin-top: 3px;
-    };
+    .sidebarBox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 200px
+    }
 
-    .menuBox {
-        float: left;
-        width: 400px;
-        height: 26px;
-        position: relative;
-    };
+    .imgBox {
+        height: 165px;
+        width: 180px;
+        padding: 0 20px;
+        background-color: #b0b0b0;
+        border-radius: 15px;
+        -webkit-border-radius: 15px;
+        -moz-border-radius: 15px;
+        -o-border-radius: 15px;
+    }
 
-    .contentBox {
-        float: left;
-        width: 430px;
-        min-height: 500px;
-    };
+    .imgBox:after {
+		content: "";
+		border-top: 40px solid #b0b0b0;
+		border-left: 40px solid #c00d0d;
+		height: 0;
 
-    // .imgBox {
-    //     float: left;
-    //     width: 135px;
-    //     height: 175px;
-    //     position: relative;
-    //     margin-left: 8px;
-    //     margin-top: 10px;
-    //     margin-bottom: 3px;
-    //     border: 3px #e99d76 solid;
-    // };
-    // .charImg {
-    //     width: 100%;
-    //     height: 100%;
-    //     object-fit: cover;
-    // };
-    // .imgOverlay {
-    //     width: 135px;
-    //     height: 210px;
-    //     position: absolute;
-    //     top: -3px;
-    //     left: -3px;
-    //     background-image: url(assets/img/imageBorder.png);
-    //     pointer-events: none;
-    // };
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+
+    .charImg {
+		height: 95px;
+		width: 174px;
+		margin-top: 20px;
+		margin-bottom: 9px;
+		background-color: #fff;
+		border: 3px solid #494949;
+		clear: both;
+
+		border-radius: 15px;
+		-webkit-border-radius: 15px;
+		-moz-border-radius: 15px;
+		-o-border-radius: 15px;
+	}
 }