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 events from 'events'
const magentaLink = 'https://github.com/tensorflow/magenta'
const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet'
const magentaLink = 'https://magenta.tensorflow.org/'
const tfLink = 'https://www.tensorflow.org/'
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.
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>.
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{
constructor(container){

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

@ -84,11 +84,13 @@ class Splash extends events.EventEmitter{
break1.classList.add('badgeBreak')
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.classList.add('badge')
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)
const privacyAndTerms = document.createElement('div')

2
static/style/about.css
View File

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

13
static/style/splash.css
View File

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