andrew/mana
andrew/mana
1
0
Fork 0
mirror of https://github.com/andrewgioia/mana.git synced 2024-11-21 14:54:45 +00:00
Code Issues Projects Releases Wiki Activity

Adds Goad ability (#101), land DFC (#58), and commander type (#59). Adds initial support for level symbol (#60). Fixes internal font name.

Browse Source
This commit is contained in:
Andrew Gioia 2023-03-08 23:27:04 -05:00
parent 43d2035dcd
commit c1633665c0
13 changed files with 231 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
css/mana.css
View File

@ -1,14 +1,14 @@
@font-face { @font-face {
font-family: 'Mana'; font-family: 'Mana';
src: url('../fonts/mana.eot?v=1.15.3'); src: url('../fonts/mana.eot?v=1.15.4');
src: url('../fonts/mana.eot?#iefix&v=1.15.3') format('embedded-opentype'), url('../fonts/mana.woff?v=1.15.3') format('woff'), url('../fonts/mana.ttf?v=1.15.3') format('truetype'), url('../fonts/mana.svg?v=1.15.3#mana') format('svg'); src: url('../fonts/mana.eot?#iefix&v=1.15.4') format('embedded-opentype'), url('../fonts/mana.woff?v=1.15.4') format('woff'), url('../fonts/mana.ttf?v=1.15.4') format('truetype'), url('../fonts/mana.svg?v=1.15.4#mana') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'MPlantin'; font-family: 'MPlantin';
src: url('../fonts/mplantin.eot?v=1.15.3'); src: url('../fonts/mplantin.eot?v=1.15.4');
src: url('../fonts/mplantin.eot?#iefix&v=1.15.3') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.15.3') format('woff'), url('../fonts/mplantin.ttf?v=1.15.3') format('truetype'), url('../fonts/mplantin.svg?v=1.15.3#mplantin') format('svg'); src: url('../fonts/mplantin.eot?#iefix&v=1.15.4') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.15.4') format('woff'), url('../fonts/mplantin.ttf?v=1.15.4') format('truetype'), url('../fonts/mplantin.svg?v=1.15.4#mplantin') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -162,6 +162,9 @@
.ms-artifact::before { .ms-artifact::before {
content: "\e61e"; content: "\e61e";
} }
.ms-commander::before {
content: "\e9c6";
}
.ms-conspiracy::before { .ms-conspiracy::before {
content: "\e972"; content: "\e972";
} }
@ -298,36 +301,45 @@
.ms-loyalty-start::before { .ms-loyalty-start::before {
content: "\e628"; content: "\e628";
} }
.ms-dfc-night::before { .ms-level::before {
content: "\e905"; content: "\e9c7";
}
.ms-level::after {
content: "\e9c8";
} }
.ms-dfc-day::before { .ms-dfc-day::before {
content: "\e906"; content: "\e906";
} }
.ms-dfc-ignite::before {
content: "\e908";
}
.ms-dfc-spark::before {
content: "\e909";
}
.ms-dfc-emrakul::before { .ms-dfc-emrakul::before {
content: "\e90a"; content: "\e90a";
} }
.ms-dfc-lesson::before {
content: "\e98f";
}
.ms-dfc-moon::before {
content: "\e90b";
}
.ms-dfc-enchantment::before { .ms-dfc-enchantment::before {
content: "\e920"; content: "\e920";
} }
.ms-dfc-modal-face::before { .ms-dfc-ignite::before {
content: "\e983"; content: "\e908";
}
.ms-dfc-land::before {
content: "\e9c5";
}
.ms-dfc-lesson::before {
content: "\e98f";
} }
.ms-dfc-modal-back::before { .ms-dfc-modal-back::before {
content: "\e984"; content: "\e984";
} }
.ms-dfc-modal-face::before {
content: "\e983";
}
.ms-dfc-moon::before {
content: "\e90b";
}
.ms-dfc-night::before {
content: "\e905";
}
.ms-dfc-spark::before {
content: "\e909";
}
.ms-flashback::before { .ms-flashback::before {
content: "\e629"; content: "\e629";
} }
@ -657,6 +669,9 @@
.ms-ability-foretell::before { .ms-ability-foretell::before {
content: "\e990"; content: "\e990";
} }
.ms-ability-goad::before {
content: "\e9c9";
}
.ms-ability-haste::before { .ms-ability-haste::before {
content: "\e953"; content: "\e953";
} }
@ -1517,6 +1532,29 @@ span.ms-half > .ms-cost {
.ms-saga-5::after { .ms-saga-5::after {
content: "V"; content: "V";
} }
/**
* Level card levels */
.ms-level > span {
font-size: 0.33em;
position: absolute;
left: 0;
top: 0;
color: #000;
font-family: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
width: 76%;
text-align: center;
line-height: 3.8;
}
.ms-level::after {
color: rgba(0, 0, 0, 0.25);
display: block;
font-size: 1em;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.ms-dfc { .ms-dfc {
color: #111; color: #111;
border: 0.05em solid #111; border: 0.05em solid #111;

2
css/mana.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
fonts/mana.eot
View File

Binary file not shown.

111
fonts/mana.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 828 KiB

After

Width:  |  Height:  |  Size: 831 KiB

BIN
fonts/mana.ttf
View File

Binary file not shown.

BIN
fonts/mana.woff
View File

Binary file not shown.

BIN
fonts/mana.woff2
View File

Binary file not shown.

26
index.html
View File

@ -37,6 +37,11 @@
p { p {
margin: 10px 0 20px; margin: 10px 0 20px;
} }
p.grid {
display:flex;
flex-wrap:wrap;
gap: 0.5rem;
}
footer { footer {
border-top: 1px solid #eee; border-top: 1px solid #eee;
margin: 40px 0 0; margin: 40px 0 0;
@ -247,11 +252,13 @@
<i class="ms ms-saga ms-saga-2 ms-2x"></i> <i class="ms ms-saga ms-saga-2 ms-2x"></i>
<i class="ms ms-saga ms-saga-3 ms-2x"></i> <i class="ms ms-saga ms-saga-3 ms-2x"></i>
<i class="ms ms-saga ms-saga-4 ms-2x"></i> <i class="ms ms-saga ms-saga-4 ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-level ms-3x"><span>1-2</span></i>
</p> </p>
</div> </div>
<div class="right"> <div class="right">
<h3>Arena Ability Symbols</h3> <h3>Arena Ability Symbols</h3>
<p style="display:flex; flex-wrap:wrap; gap: 0.5rem;"> <p class="grid">
<i class="ms ms-ability-activated ms-2x ms-fw" title="Activated"></i> <i class="ms ms-ability-activated ms-2x ms-fw" title="Activated"></i>
<i class="ms ms-ability-adamant ms-2x ms-fw" title="Adamant"></i> <i class="ms ms-ability-adamant ms-2x ms-fw" title="Adamant"></i>
<i class="ms ms-ability-adapt ms-2x ms-fw" title="Adapt"></i> <i class="ms ms-ability-adapt ms-2x ms-fw" title="Adapt"></i>
@ -298,6 +305,7 @@
<i class="ms ms-ability-flying ms-2x ms-fw" title="Flying"></i> <i class="ms ms-ability-flying ms-2x ms-fw" title="Flying"></i>
<i class="ms ms-ability-for-mirrodin ms-2x ms-fw" title="For Mirrodin!"></i> <i class="ms ms-ability-for-mirrodin ms-2x ms-fw" title="For Mirrodin!"></i>
<i class="ms ms-ability-foretell ms-2x ms-fw" title="Foretell"></i> <i class="ms ms-ability-foretell ms-2x ms-fw" title="Foretell"></i>
<i class="ms ms-ability-goad ms-2x ms-fw" title="Goad"></i>
<i class="ms ms-ability-haste ms-2x ms-fw" title="Haste"></i> <i class="ms ms-ability-haste ms-2x ms-fw" title="Haste"></i>
<i class="ms ms-ability-hexproof ms-2x ms-fw" title="Hexproof: Generic"></i> <i class="ms ms-ability-hexproof ms-2x ms-fw" title="Hexproof: Generic"></i>
<i class="ms ms-ability-hexproof-white ms-2x ms-fw" title="Hexproof: White"></i> <i class="ms ms-ability-hexproof-white ms-2x ms-fw" title="Hexproof: White"></i>
@ -347,12 +355,12 @@
<i class="ms ms-ability-ward ms-2x ms-fw" title="Ward"></i> <i class="ms ms-ability-ward ms-2x ms-fw" title="Ward"></i>
</p> </p>
<h3>Arena Exclusive Counters</h3> <h3>Arena Exclusive Counters</h3>
<p> <p class="grid">
<i class="ms ms-counter-shield ms-2x ms-fw" title="Shield"></i> <i class="ms ms-counter-shield ms-2x ms-fw" title="Shield"></i>
<i class="ms ms-counter-stun ms-2x ms-fw" title="Stun"></i> <i class="ms ms-counter-stun ms-2x ms-fw" title="Stun"></i>
</p> </p>
<h3>Magic Online Counters</h3> <h3>Magic Online Counters</h3>
<p> <p class="grid">
<i class="ms ms-counter-arrow ms-2x ms-fw"></i> <i class="ms ms-counter-arrow ms-2x ms-fw"></i>
<i class="ms ms-counter-brick ms-2x ms-fw"></i> <i class="ms ms-counter-brick ms-2x ms-fw"></i>
<i class="ms ms-counter-charge ms-2x ms-fw"></i> <i class="ms ms-counter-charge ms-2x ms-fw"></i>
@ -383,8 +391,9 @@
<i class="ms ms-counter-vortex ms-2x ms-fw"></i> <i class="ms ms-counter-vortex ms-2x ms-fw"></i>
</p> </p>
<h3>Future Sight and other type symbols</h3> <h3>Future Sight and other type symbols</h3>
<p> <p class="grid">
<i class="ms ms-artifact ms-2x ms-fw" title="Artifact"></i> <i class="ms ms-artifact ms-2x ms-fw" title="Artifact"></i>
<i class="ms ms-commander ms-2x ms-fw" title="Commander"></i>
<i class="ms ms-creature ms-2x ms-fw" title="Creature"></i> <i class="ms ms-creature ms-2x ms-fw" title="Creature"></i>
<i class="ms ms-enchantment ms-2x ms-fw" title="Enchantment"></i> <i class="ms ms-enchantment ms-2x ms-fw" title="Enchantment"></i>
<i class="ms ms-instant ms-2x ms-fw" title="Instant"></i> <i class="ms ms-instant ms-2x ms-fw" title="Instant"></i>
@ -404,7 +413,7 @@
<i class="ms ms-vanguard ms-2x ms-fw" title="Vangaurd"></i> <i class="ms ms-vanguard ms-2x ms-fw" title="Vangaurd"></i>
</p> </p>
<h3>Double-faced card symbols</h3> <h3>Double-faced card symbols</h3>
<p> <p class="grid">
<i class="ms ms-dfc ms-dfc-day ms-2x ms-fw"></i> <i class="ms ms-dfc ms-dfc-day ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-night ms-2x ms-fw"></i> <i class="ms ms-dfc ms-dfc-night ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-spark ms-2x ms-fw"></i> <i class="ms ms-dfc ms-dfc-spark ms-2x ms-fw"></i>
@ -413,12 +422,13 @@
<i class="ms ms-dfc ms-dfc-emrakul ms-2x ms-fw"></i> <i class="ms ms-dfc ms-dfc-emrakul ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-enchantment ms-2x ms-fw"></i> <i class="ms ms-dfc ms-dfc-enchantment ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-lesson ms-2x ms-fw"></i> <i class="ms ms-dfc ms-dfc-lesson ms-2x ms-fw"></i>
<i class="ms ms-dfc ms-dfc-land ms-2x ms-fw"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
<i class="ms ms-dfc-modal-face ms-2x ms-fw"></i> <i class="ms ms-dfc-modal-face ms-2x ms-fw"></i>
<i class="ms ms-dfc-modal-back ms-2x ms-fw"></i> <i class="ms ms-dfc-modal-back ms-2x ms-fw"></i>
</p> </p>
<h3>Guild Symbols</h3> <h3>Guild Symbols</h3>
<p> <p class="grid">
<i class="ms ms-guild-azorius ms-2x ms-fw"></i> <i class="ms ms-guild-azorius ms-2x ms-fw"></i>
<i class="ms ms-guild-boros ms-2x ms-fw"></i> <i class="ms ms-guild-boros ms-2x ms-fw"></i>
<i class="ms ms-guild-dimir ms-2x ms-fw"></i> <i class="ms ms-guild-dimir ms-2x ms-fw"></i>
@ -431,7 +441,7 @@
<i class="ms ms-guild-simic ms-2x ms-fw"></i> <i class="ms ms-guild-simic ms-2x ms-fw"></i>
</p> </p>
<h3>Clan Symbols</h3> <h3>Clan Symbols</h3>
<p> <p class="grid">
<i class="ms ms-clan-abzan ms-2x ms-fw"></i> <i class="ms ms-clan-abzan ms-2x ms-fw"></i>
<i class="ms ms-clan-jeskai ms-2x ms-fw"></i> <i class="ms ms-clan-jeskai ms-2x ms-fw"></i>
<i class="ms ms-clan-mardu ms-2x ms-fw"></i> <i class="ms ms-clan-mardu ms-2x ms-fw"></i>
@ -445,7 +455,7 @@
<i class="ms ms-clan-silumgar ms-2x ms-fw"></i> <i class="ms ms-clan-silumgar ms-2x ms-fw"></i>
</p> </p>
<h3>Strixhaven School Symbols</h3> <h3>Strixhaven School Symbols</h3>
<p> <p class="grid">
<i class="ms ms-school-lorehold ms-2x ms-fw"></i> <i class="ms ms-school-lorehold ms-2x ms-fw"></i>
<i class="ms ms-school-lorehold ms-duo ms-duo-color ms-2x ms-fw"></i> <i class="ms ms-school-lorehold ms-duo ms-duo-color ms-2x ms-fw"></i>
&nbsp; &nbsp;

21
less/icons.less
View File

@ -54,6 +54,7 @@
// card types // card types
&-artifact::before { content: "\e61e"; } &-artifact::before { content: "\e61e"; }
&-commander::before { content: "\e9c6"; }
&-conspiracy::before { content: "\e972"; } &-conspiracy::before { content: "\e972"; }
&-creature::before { content: "\e61f"; } &-creature::before { content: "\e61f"; }
&-enchantment::before { content: "\e620"; } &-enchantment::before { content: "\e620"; }
@ -143,18 +144,25 @@
&-start::before { content: "\e628"; } // Start &-start::before { content: "\e628"; } // Start
} }
// levelers
&-level {
&::before { content: "\e9c7"; }
&::after { content: "\e9c8"; }
}
// double-faced cards // double-faced cards
&-dfc { &-dfc {
&-night::before { content: "\e905"; }
&-day::before { content: "\e906"; } &-day::before { content: "\e906"; }
&-ignite::before { content: "\e908"; }
&-spark::before { content: "\e909"; }
&-emrakul::before { content: "\e90a"; } &-emrakul::before { content: "\e90a"; }
&-lesson::before { content: "\e98f"; }
&-moon::before { content: "\e90b"; }
&-enchantment::before { content: "\e920"; } &-enchantment::before { content: "\e920"; }
&-modal-face::before { content: "\e983"; } &-ignite::before { content: "\e908"; }
&-land::before { content: "\e9c5"; }
&-lesson::before { content: "\e98f"; }
&-modal-back::before { content: "\e984"; } &-modal-back::before { content: "\e984"; }
&-modal-face::before { content: "\e983"; }
&-moon::before { content: "\e90b"; }
&-night::before { content: "\e905"; }
&-spark::before { content: "\e909"; }
} }
// other card elements // other card elements
@ -289,6 +297,7 @@
&-flying::before { content: "\e952"; } &-flying::before { content: "\e952"; }
&-for-mirrodin::before { content: "\e9c1"; } &-for-mirrodin::before { content: "\e9c1"; }
&-foretell::before { content: "\e990"; } &-foretell::before { content: "\e990"; }
&-goad::before { content: "\e9c9"; }
&-haste::before { content: "\e953"; } &-haste::before { content: "\e953"; }
&-hexproof { &-hexproof {
&::before { content: "\e954"; } &::before { content: "\e954"; }

32
less/loyalty.less
View File

@ -159,4 +159,36 @@
&-4::after { content: "IV"; } &-4::after { content: "IV"; }
&-5::after { content: "V"; } &-5::after { content: "V"; }
}
/**
* Level card levels */
.@{ms-prefix}-level {
// level numbers must be in a span for now unfortunately
> span {
font-size: 0.33em;
position: absolute;
left: 0;
top: 0;
color: #000;
font-family: @ms-serif-font;
width: 76%;
text-align: center;
line-height: 3.8;
}
// alt border similar to duo handling
&::after {
color: rgba(0,0,0,0.25);
display: block;
font-size: 1em;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
} }

21
sass/_icons.scss
View File

@ -54,6 +54,7 @@
// card types // card types
&-artifact::before { content: "\e61e"; } &-artifact::before { content: "\e61e"; }
&-commander::before { content: "\e9c6"; }
&-conspiracy::before { content: "\e972"; } &-conspiracy::before { content: "\e972"; }
&-creature::before { content: "\e61f"; } &-creature::before { content: "\e61f"; }
&-enchantment::before { content: "\e620"; } &-enchantment::before { content: "\e620"; }
@ -144,18 +145,25 @@
&-start::before { content: "\e628"; } // start &-start::before { content: "\e628"; } // start
} }
// levelers
&-level {
&::before { content: "\e9c7"; }
&::after { content: "\e9c8"; }
}
// double-faced cards // double-faced cards
&-dfc { &-dfc {
&-night::before { content: "\e905"; }
&-day::before { content: "\e906"; } &-day::before { content: "\e906"; }
&-ignite::before { content: "\e908"; }
&-spark::before { content: "\e909"; }
&-emrakul::before { content: "\e90a"; } &-emrakul::before { content: "\e90a"; }
&-lesson::before { content: "\e98f"; }
&-moon::before { content: "\e90b"; }
&-enchantment::before { content: "\e920"; } &-enchantment::before { content: "\e920"; }
&-modal-face::before { content: "\e983"; } &-ignite::before { content: "\e908"; }
&-land::before { content: "\e9c5"; }
&-lesson::before { content: "\e98f"; }
&-modal-back::before { content: "\e984"; } &-modal-back::before { content: "\e984"; }
&-modal-face::before { content: "\e983"; }
&-moon::before { content: "\e90b"; }
&-night::before { content: "\e905"; }
&-spark::before { content: "\e909"; }
} }
// other card elements // other card elements
@ -290,6 +298,7 @@
&-flying::before { content: "\e952"; } &-flying::before { content: "\e952"; }
&-for-mirrodin::before { content: "\e9c1"; } &-for-mirrodin::before { content: "\e9c1"; }
&-foretell::before { content: "\e990"; } &-foretell::before { content: "\e990"; }
&-goad::before { content: "\e9c9"; }
&-haste::before { content: "\e953"; } &-haste::before { content: "\e953"; }
&-hexproof { &-hexproof {
&::before { content: "\e954"; } &::before { content: "\e954"; }

32
sass/_loyalty.scss
View File

@ -161,4 +161,36 @@
&-4::after { content: "IV"; } &-4::after { content: "IV"; }
&-5::after { content: "V"; } &-5::after { content: "V"; }
}
/**
* Level card levels */
.#{$ms-prefix}-level {
// level numbers must be in a span for now unfortunately
> span {
font-size: 0.33em;
position: absolute;
left: 0;
top: 0;
color: #000;
font-family: @ms-serif-font;
width: 76%;
text-align: center;
line-height: 3.8;
}
// alt border similar to duo handling
&::after {
color: rgba(0,0,0,0.25);
display: block;
font-size: 1em;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
} }

4
sass/_variables.scss
View File

@ -19,7 +19,7 @@ $ms-black: #383431;
$ms-red: #c6553e; $ms-red: #c6553e;
$ms-green: #3d684b; $ms-green: #3d684b;
// colors // project colors
$ms-multicolor-flat: #cca753; $ms-multicolor-flat: #cca753;
$ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%); $ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
$ms-ability-grad: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%); $ms-ability-grad: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);