Disable separator being shown on page load; Increase description text…

… shadow
fawind · May 28, 2017 · 92d8c91 · 92d8c91
1 parent 5fa9ccf
commit 92d8c91
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/chrome/src/index.html b/chrome/src/index.html
@@ -6,7 +6,7 @@
 </head>
 <body>
   <div class="clock">
-    <span id="hours"></span><span class="separator">:</span><span id="minutes"></span>
+    <span id="hours"></span><span id="separator"></span><span id="minutes"></span>
   </div>
 
   <div class="widget" style="visibility: hidden">

diff --git a/chrome/src/js/clock.js b/chrome/src/js/clock.js
@@ -1,12 +1,15 @@
-import { HoursElement, MinutesElement } from './domElements';
+import { HoursElement, MinutesElement, SeparatorElement } from './domElements';
 
 export default class Clock {
 
-  static constitute() { return [HoursElement, MinutesElement]; }
+  static constitute() {
+    return [HoursElement, MinutesElement, SeparatorElement];
+  }
 
-  constructor(hoursElement, minutesElement, refreshInterval = 60000) {
+  constructor(hoursElement, minutesElement, separatorElement, refreshInterval = 60000) {
     this.hoursElement = hoursElement;
     this.minutesElement = minutesElement;
+    this.separatorElement = separatorElement;
     this.refreshInterval = refreshInterval;
   }
 
@@ -19,6 +22,7 @@ export default class Clock {
     const date = new Date();
     this.hoursElement.textContent = this._formatTime(date.getHours());
     this.minutesElement.textContent = this._formatTime(date.getMinutes());
+    this.separatorElement.textContent = ':';
   }
 
   _formatTime(time) {

diff --git a/chrome/src/js/domElements.js b/chrome/src/js/domElements.js
@@ -7,4 +7,5 @@ export const DescriptionElement = new Value(document.querySelector('#description
 export const SkipElement = new Value(document.querySelector('#skip'));
 export const HoursElement = new Value(document.querySelector('#hours'));
 export const MinutesElement = new Value(document.querySelector('#minutes'));
+export const SeparatorElement = new Value(document.querySelector('#separator'));
 export const LoadingElement = new Value(document.querySelector('.loading'));
diff --git a/chrome/src/main.css b/chrome/src/main.css
@@ -9,7 +9,6 @@ html, body, .bg {
   padding: 0;
   font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
   color: white;
-  text-shadow: 0 0 200px #000;
 }
 
 .bg {
@@ -26,23 +25,28 @@ html, body, .bg {
   transform: translateX(-50%) translateY(-50%);
   font-size: 7vw;
   font-weight: 700;
+  text-shadow: 0 0 200px #000;
   cursor: default;
   user-select: none;
 }
 
-.clock .separator {
+.clock #separator {
   display: inline-block;
   transform: translateY(-0.7vw);
 }
 
-#info {
+.widget {
+  text-shadow: 0 0 20px #000;
+}
+
+.widget #info {
   position: fixed;
   bottom: 0;
   left: 0;
   padding: 1em;
 }
 
-#actions {
+.widget #actions {
   position: fixed;
   bottom: 0;
   right: 0;

diff --git a/chrome/src/manifest.json b/chrome/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Picasso - New Tab Page",
   "description": "Art masterpieces in your browser tabs.",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "incognito": "split",
   "permissions": [
     "http://picasso-tab.appspot.com/*",