feat: add first tooling

phodal · Mar 10, 2020 · c2e2ede · c2e2ede
1 parent a8cf9fb
commit c2e2ede
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 76 deletions.
diff --git a/src/app/features/atom/atom.component.html b/src/app/features/atom/atom.component.html
@@ -1,27 +1,20 @@
-<div
- class="atom-container {{ data.category }}"
- [ngClass]="backgroundStyles"
- (mouseenter)="debounceMouseEnter()"
- (mouseleave)="debounceMouseLeave()"
->
- <p class="category">{{ data.phase }}</p>
- <p class="atomic">{{ data.number }}</p>
- <p
- class="symbol"
- [class.solid]="data.phase === 'solid' && !backgroundStyles['solid-selected']"
- [class.liquid]="data.phase === 'liquid' && !backgroundStyles['liquid-selected']"
- [class.gas]="data.phase === 'gas' && !backgroundStyles['gas-selected']"
- [class.unknown]="data.phase === 'unknown' && !backgroundStyles['unknown-selected']"
- *ngIf="data.symbol; else blankSymbol"
- >
+<div class="atom-container {{ data.category }}"
+ [ngClass]="backgroundStyles"
+ (mouseenter)="debounceMouseEnter()"
+ (mouseleave)="debounceMouseLeave()">
+
+ <p class="atomic">
+ {{ data.number }}
+ <span class="pay-type">{{ data.pay }}</span>
+ </p>
+ <p class="symbol">
  {{ data.symbol }}
  </p>
  <p class="name" *ngIf="data.name; else blankName">{{ data.name }}</p>
- <p class="weight" *ngIf="data.atomic_mass; else blankWeight">{{ data.atomic_mass }}</p>
 </div>
 
-<ng-template #blankSymbol> <p class="symbol">&nbsp;</p> </ng-template>
+<ng-template #blankSymbol><p class="symbol">&nbsp;</p></ng-template>
 
-<ng-template #blankName> <p class="name">&nbsp;</p> </ng-template>
+<ng-template #blankName><p class="name">&nbsp;</p></ng-template>
 
-<ng-template #blankWeight> <p class="weight">&nbsp;</p> </ng-template>
+<ng-template #blankWeight><p class="weight">&nbsp;</p></ng-template>
diff --git a/src/app/features/atom/atom.component.scss b/src/app/features/atom/atom.component.scss
@@ -21,6 +21,7 @@ $selected-color: #fff;
  padding-left: 3px;
  width: 64px;
  height: 64px;
+ color: #fff;
 
  &:hover {
  transform: scale(2);
@@ -34,19 +35,31 @@ $selected-color: #fff;
 
  &.atomic {
  font-size: 0.7em;
+ top: 0.2em;
+ }
+
+ .pay-type {
+ float: right;
+ margin-right: 4px;
  }
 
  &.symbol {
+ margin-top: 0.2em;
  font-size: 1em;
  font-weight: bold;
  }
 
  &.name,
  &.weight {
- font-size: 0.7em;
+ margin-top: 0.2em;
+ font-size: 0.8em;
  }
  }
 
+ &.sourceControl {
+ background: #7f195e;
+ }
+
  &.blurry {
  opacity: 0.5;
  }

diff --git a/src/assets/periodic-table.json b/src/assets/periodic-table.json
@@ -1,24 +1,9 @@
 [
  {
  "name": "GitHub",
- "atomic_mass": 1.008,
- "category": "nonmetal",
+ "category": "sourceControl",
  "number": 1,
- "phase": "gas",
- "source": "https://en.wikipedia.org/wiki/Hydrogen",
- "spectral_img": "https://en.wikipedia.org/wiki/File:Hydrogen_Spectra.jpg",
- "symbol": "Gh",
- "xpos": 1,
- "ypos": 1,
- "shells": [
- 1
- ]
- }, {
- "name": "GitHub",
- "atomic_mass": 1.008,
- "category": "nonmetal",
- "number": 57,
- "phase": "gas",
+ "pay": "Fm",
  "source": "https://en.wikipedia.org/wiki/Hydrogen",
  "spectral_img": "https://en.wikipedia.org/wiki/File:Hydrogen_Spectra.jpg",
  "symbol": "Gh",

diff --git a/src/styles.scss b/src/styles.scss
@@ -8,44 +8,11 @@
 body {
  min-height: 100vh;
  background: #fff;
+ font-size: 16px;
 }
 
-.alkali-metal {
- background: #ffcc33;
-}
-
-.alkaline-earth-metal {
- background: #ffff44;
-}
-
-.lanthanide {
- background: #ffbb99;
-}
-
-.actinide {
- background: #eebbdd;
-}
-
-.transition-metal {
- background: #ddbbbb;
-}
-
-.post-transition-metal {
- background: #99ddcc;
-}
-
-.metalloid {
- background: #77dd88;
-}
-
-.nonmetal {
- background: #22ff22;
-}
-
-.noble-gas {
- background: #77ccff;
-}
-
-.unknown-metal {
- background: #dddddd;
+@media screen and (min-width: 2501px) and (max-width: 4000px) {
+ body {
+ font-size: 20px;
+ }
 }