Add Crossed / Fates

2021-06-01 14:47:53 -05:00
parent 8b4b7366d1
commit 948df329d8
38 changed files with 8775 additions and 0 deletions
@@ -0,0 +1,24 @@
+
+mixin header
+  div.rivals-header
+    div.rival.header-left
+      div.rival-stat
+        span.header-label(data-i18n='header_side')=locals['header_side']
+        span.header-value(name='attr_left_side')
+      div.rival-stat
+        span.header-label(data-i18n='name')=locals['name']
+        span.header-value(name='attr_left_name')
+      div.rival-stat
+        span.header-label(data-i18n='pronouns')=locals['pronouns']
+        span.header-value(name='attr_left_pronouns')
+    div.logo
+    div.rival.header-right
+      div.rival-stat
+        span.header-value(name='attr_right_side')
+        span.header-label(data-i18n='header_side')=locals['header_side']
+      div.rival-stat
+        span.header-value(name='attr_right_name')
+        span.header-label(data-i18n='name')=locals['name']
+      div.rival-stat
+        span.header-value(name='attr_right_pronouns')
+        span.header-label(data-i18n='pronouns')=locals['pronouns']
@@ -0,0 +1,61 @@
+
+.rivals-header {
+  display: inline-grid;
+  grid-template-columns: auto 100px auto;
+  background-color: $light-gray;
+  @include fill-available();
+  height: 100px;
+  padding: 0.5em;
+  margin-bottom: 1em;
+
+  .rival {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .logo {
+    background-image: url();
+    background-repeat: no-repeat;
+    // background-position: bottom center;
+  }
+
+  .header-left, .header-right {
+    .rival-stat {
+      display: inline-grid;
+      grid-template-columns: 20% 80%;
+      border-bottom: 4px solid $dark-gray;
+      align-items: center;
+      @include fill-available();
+
+      .header-value {
+        margin-bottom: 0;
+        border: none;
+      }
+
+      .header-label {
+        font-weight: bold;
+        font-size: 1.2em;
+        @include std-font($narrow-font);
+      }
+    }
+  }
+
+  .header-right {
+    .rival-stat {
+      grid-template-columns: 80% 20%;
+    }
+
+    .header-label {
+      text-align: right;
+     }
+
+    .header-value { text-align: right; }
+  }
+
+  .header-left .header-label:after,
+  .header-right .header-label:before {
+    content: ' : ';
+    @include std-font($narrow-font);
+  }
+}