pokémon related style stuff

2021-03-13 05:28:43 +01:00 · 2021-03-13 05:28:43 +01:00 · 4690b3597e
commit 4690b3597e
parent 11c7cc425b
22 changed files with 405 additions and 0 deletions
--- a/style/shiny/pkmn.css
+++ b/style/shiny/pkmn.css
@ -0,0 +1,134 @@
+.pkmn-type, .pkmn-move {
+  --icon-size: 20px;
+}
+
+.pkmn-type {
+  text-transform: uppercase;
+  font-size: 80%;
+  font-weight: 600;
+  text-shadow: none;
+  padding: 3px 4px 2px calc(var(--offset) + 0.4ex);
+  background:
+    var(--type-sym) left center no-repeat,
+    linear-gradient(105deg,
+      var(--type-col) 0,
+      var(--type-col) var(--offset),
+      #5d4e5d calc(var(--offset) + 1px)
+    );
+  --offset: calc(var(--icon-size) * 1.5);
+}
+
+.pkmn-move::before {
+  content: var(--type-sym);
+  display: inline-block;
+  height: var(--icon-size);
+  width: var(--icon-size);
+  vertical-align: -15%;
+  margin-right: 0.4ex;
+}
+
+.pkmn-type + .pkmn-type {
+  margin-left: 0.25ex;
+}
+
+.pkmn-species {
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 75%;
+}
+
+.pkmn-stats dt {
+  font-size: 100%;
+  font-weight: 700;
+}
+
+.pkmn-stats table {
+  width: 80%;
+  text-align: center;
+  margin: 0;
+}
+
+
+
+.bug {
+  --type-col: #83c300;
+  --type-sym: url('pkmn-types/bug.svg');
+}
+.dark {
+  --type-col: #5b5466;
+  --type-sym: url('pkmn-types/dark.svg');
+}
+.dragon {
+  --type-col: #0a6cc2;
+  --type-sym: url('pkmn-types/dragon.svg');
+}
+.electric {
+  --type-col: #fbd100;
+  --type-sym: url('pkmn-types/electric.svg');
+}
+.fairy  {
+  --type-col: #ed9be8;
+  --type-sym: url('pkmn-types/fairy.svg');
+}
+.fighting {
+  --type-col: #e0306a;
+  --type-sym: url('pkmn-types/fighting.svg');
+}
+.fire {
+  --type-col: #ff9741;
+  --type-sym: url('pkmn-types/fire.svg');
+}
+.flying {
+  --type-col: #89aae3;
+  --type-sym: url('pkmn-types/flying.svg');
+}
+.ghost {
+  --type-col: #4c6ab2;
+  --type-sym: url('pkmn-types/ghost.svg');
+}
+.grass {
+  --type-col: #38bf4b;
+  --type-sym: url('pkmn-types/grass.svg');
+}
+.ground {
+  --type-col: #e87236;
+  --type-sym: url('pkmn-types/ground.svg');
+}
+.ice {
+  --type-col: #4cd1c0;
+  --type-sym: url('pkmn-types/ice.svg');
+}
+.normal {
+  --type-col: #919aa2;
+  --type-sym: url('pkmn-types/normal.svg');
+}
+.poison {
+  --type-col: #b567ce;
+  --type-sym: url('pkmn-types/poison.svg');
+}
+.psychic {
+  --type-col: #ff6675;
+  --type-sym: url('pkmn-types/psychic.svg');
+}
+.rock {
+  --type-col: #c8b686;
+  --type-sym: url('pkmn-types/rock.svg');
+}
+.steel {
+  --type-col: #5a8ea2;
+  --type-sym: url('pkmn-types/steel.svg');
+}
+.water  {
+  --type-col: #5090d6;
+  --type-sym: url('pkmn-types/water.svg');
+}
+
+.bed  {
+  /* inkscape notes:
+   * 340 ÷ 360 × 255 ≃ 241
+   * 0.83      × 255 ≃ 212
+   * 0.68      × 255 ≃ 173
+   */
+  --type-col: hsl(340deg, 83%, 68%);
+  --type-sym: url('pkmn-types/bed.svg');
+}