ale/aiexperiments-ai-duet
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updating splash links and style

Browse Source
This commit is contained in:
Yotam Mann 2017-02-14 14:43:52 -05:00
parent 620fc897fe
commit 5602b1ac88
4 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
static/src/interface/About.js
View File

@ -18,14 +18,17 @@ import 'style/about.css'
import YouTubeIframeLoader from 'youtube-iframe' import YouTubeIframeLoader from 'youtube-iframe'
import events from 'events' import events from 'events'
const magentaLink = 'https://github.com/tensorflow/magenta' const magentaLink = 'https://magenta.tensorflow.org/'
const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet' const tfLink = 'https://www.tensorflow.org/'
const toneLink = 'https://github.com/Tonejs/Tone.js' const toneLink = 'https://github.com/Tonejs/Tone.js'
const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet'
const blurbCopy = `Built by Yotam Mann with friends on the Magenta and Creative Lab teams at Google. const blurbCopy = `Built by Yotam Mann with friends on the Magenta and Creative Lab teams at Google.
It uses <a target='_blank' href='${toneLink}'>Tone.js</a> and tools It uses <a target='_blank' href='${tfLink}'>TensorFlow</a>,
<a target='_blank' href='${toneLink}'>Tone.js</a> and tools
from the <a target='_blank' href='${magentaLink}'>Magenta project</a>. from the <a target='_blank' href='${magentaLink}'>Magenta project</a>.
The open-source code is <a target='_blank' href='${sourceCode}'>available here</a>.` The open-source code is <a target='_blank' href='${sourceCode}'>available here</a>.
Click the keyboard, use your computer keys, or even plug in a MIDI keyboard.`
export class About extends events.EventEmitter{ export class About extends events.EventEmitter{
constructor(container){ constructor(container){

6
static/src/interface/Splash.js
View File

@ -84,11 +84,13 @@ class Splash extends events.EventEmitter{
break1.classList.add('badgeBreak') break1.classList.add('badgeBreak')
badges.appendChild(break1) badges.appendChild(break1)
const magenta = document.createElement('div') const magenta = document.createElement('a')
magenta.href = 'https://magenta.tensorflow.org/'
magenta.target = '_blank'
magenta.id = 'magentaLink' magenta.id = 'magentaLink'
magenta.classList.add('badge') magenta.classList.add('badge')
const imgHtml = '<div id="img"></div>' const imgHtml = '<div id="img"></div>'
magenta.innerHTML = imgHtml + '<div id="text">Built using <a href="https://magenta.tensorflow.org/" target="_blank">Magenta</a></div>' magenta.innerHTML = imgHtml + '<div id="text">Built using <span>Magenta</span></div>'
badges.appendChild(magenta) badges.appendChild(magenta)
const privacyAndTerms = document.createElement('div') const privacyAndTerms = document.createElement('div')

2
static/style/about.css
View File

@ -148,7 +148,7 @@
position: relative; position: relative;
text-transform: none; text-transform: none;
margin-top: 50px; margin-top: 50px;
font-size: 16px; font-size: 14px;
line-height: 25px; line-height: 25px;
a { a {

13
static/style/splash.css
View File

@ -172,12 +172,12 @@ $topMargin: 35px;
margin-top: $topMargin; margin-top: $topMargin;
} }
$badgeWidth : 110px; $badgeWidth : 120px;
$badgeHeight: 60px; $badgeHeight: 60px;
$badgeMargin : 20px; $badgeMargin : 20px;
$badegOpacity: 0.7; $badegOpacity: 0.7;
$smallScreen : 520px; $smallScreen : 575px;
$smallBadgeWidth : 90px; $smallBadgeWidth : 90px;
$smallBadgeHeight: 40px; $smallBadgeHeight: 40px;
$smallBadgeMargin: 8px; $smallBadgeMargin: 8px;
@ -240,16 +240,17 @@ $topMargin: 35px;
#magentaLink { #magentaLink {
font-weight: bold; font-weight: bold;
font-size: 10px; font-size: 12px;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
color: white;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
@media (max-width: $smallScreen) { @media (max-width: $smallScreen) {
font-size: 8px; font-size: 7px;
} }
@ -276,7 +277,7 @@ $topMargin: 35px;
} }
#text { #text {
margin-top: 15px; margin-top: 14px;
float: right; float: right;
height: 100%; height: 100%;
width: $badgeWidth - $imgSize; width: $badgeWidth - $imgSize;
@ -286,7 +287,7 @@ $topMargin: 35px;
width: $smallBadgeWidth - $smallImg; width: $smallBadgeWidth - $smallImg;
} }
a { span {
color: $orange; color: $orange;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;