mirror of
https://github.com/TrentSPalmer/fcc-challenges.git
synced 2024-11-25 04:31:29 -08:00
update random-quote-machine
This commit is contained in:
parent
2627db15bd
commit
5ef5e70118
@ -1,22 +1,22 @@
|
|||||||
{
|
{
|
||||||
"files": {
|
"files": {
|
||||||
"main.css": "/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css",
|
"main.css": "/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css",
|
||||||
"main.js": "/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js",
|
"main.js": "/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js",
|
||||||
"main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js.map",
|
"main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js.map",
|
||||||
"runtime-main.js": "/fcc-challenges/random-quote-machine/build/static/js/runtime-main.905bafdb.js",
|
"runtime-main.js": "/fcc-challenges/random-quote-machine/build/static/js/runtime-main.905bafdb.js",
|
||||||
"runtime-main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/runtime-main.905bafdb.js.map",
|
"runtime-main.js.map": "/fcc-challenges/random-quote-machine/build/static/js/runtime-main.905bafdb.js.map",
|
||||||
"static/js/2.a720d7f8.chunk.js": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js",
|
"static/js/2.a720d7f8.chunk.js": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js",
|
||||||
"static/js/2.a720d7f8.chunk.js.map": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.map",
|
"static/js/2.a720d7f8.chunk.js.map": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.map",
|
||||||
"index.html": "/fcc-challenges/random-quote-machine/build/index.html",
|
"index.html": "/fcc-challenges/random-quote-machine/build/index.html",
|
||||||
"precache-manifest.00884933380590505cabd88c9e1af2d6.js": "/fcc-challenges/random-quote-machine/build/precache-manifest.00884933380590505cabd88c9e1af2d6.js",
|
"precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js": "/fcc-challenges/random-quote-machine/build/precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js",
|
||||||
"service-worker.js": "/fcc-challenges/random-quote-machine/build/service-worker.js",
|
"service-worker.js": "/fcc-challenges/random-quote-machine/build/service-worker.js",
|
||||||
"static/css/main.899e3888.chunk.css.map": "/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css.map",
|
"static/css/main.5a3875ee.chunk.css.map": "/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css.map",
|
||||||
"static/js/2.a720d7f8.chunk.js.LICENSE.txt": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.LICENSE.txt"
|
"static/js/2.a720d7f8.chunk.js.LICENSE.txt": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.LICENSE.txt"
|
||||||
},
|
},
|
||||||
"entrypoints": [
|
"entrypoints": [
|
||||||
"static/js/runtime-main.905bafdb.js",
|
"static/js/runtime-main.905bafdb.js",
|
||||||
"static/js/2.a720d7f8.chunk.js",
|
"static/js/2.a720d7f8.chunk.js",
|
||||||
"static/css/main.899e3888.chunk.css",
|
"static/css/main.5a3875ee.chunk.css",
|
||||||
"static/js/main.b6838136.chunk.js"
|
"static/js/main.13413d36.chunk.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
@ -1 +1 @@
|
|||||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/fcc-challenges/random-quote-machine/build/manifest.json"/><title>Random Quote Machine - Build a Random Quote Machine - Front End Libraries Projects</title><link href="/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div><br/></div><script>!function(e){function r(r){for(var n,a,l=r[0],i=r[1],c=r[2],p=0,s=[];p<l.length;p++)a=l[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/fcc-challenges/random-quote-machine/build/";var l=this["webpackJsonprandom-quote-machine"]=this["webpackJsonprandom-quote-machine"]||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var c=0;c<l.length;c++)r(l[c]);var f=i;t()}([])</script><script src="/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js"></script><script src="/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js"></script></body></html>
|
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/fcc-challenges/random-quote-machine/build/manifest.json"/><title>Random Quote Machine - Build a Random Quote Machine - Front End Libraries Projects</title><link href="/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div><br/></div><script>!function(e){function r(r){for(var n,a,l=r[0],i=r[1],c=r[2],p=0,s=[];p<l.length;p++)a=l[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/fcc-challenges/random-quote-machine/build/";var l=this["webpackJsonprandom-quote-machine"]=this["webpackJsonprandom-quote-machine"]||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var c=0;c<l.length;c++)r(l[c]);var f=i;t()}([])</script><script src="/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js"></script><script src="/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js"></script></body></html>
|
@ -1,11 +1,11 @@
|
|||||||
self.__precacheManifest = (self.__precacheManifest || []).concat([
|
self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||||
{
|
{
|
||||||
"revision": "6a2813c9c6957d8e6199403c5c886df0",
|
"revision": "99ef77b17413e6450fa3790ae1af27ad",
|
||||||
"url": "/fcc-challenges/random-quote-machine/build/index.html"
|
"url": "/fcc-challenges/random-quote-machine/build/index.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "048b92ff9f1302b8fcae",
|
"revision": "cccf938117650c611ad2",
|
||||||
"url": "/fcc-challenges/random-quote-machine/build/static/css/main.899e3888.chunk.css"
|
"url": "/fcc-challenges/random-quote-machine/build/static/css/main.5a3875ee.chunk.css"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "d3143f0d5b138769b7fe",
|
"revision": "d3143f0d5b138769b7fe",
|
||||||
@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
|
|||||||
"url": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.LICENSE.txt"
|
"url": "/fcc-challenges/random-quote-machine/build/static/js/2.a720d7f8.chunk.js.LICENSE.txt"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "048b92ff9f1302b8fcae",
|
"revision": "cccf938117650c611ad2",
|
||||||
"url": "/fcc-challenges/random-quote-machine/build/static/js/main.b6838136.chunk.js"
|
"url": "/fcc-challenges/random-quote-machine/build/static/js/main.13413d36.chunk.js"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "eb03df68ff6e16ade204",
|
"revision": "eb03df68ff6e16ade204",
|
@ -14,7 +14,7 @@
|
|||||||
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
|
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
|
||||||
|
|
||||||
importScripts(
|
importScripts(
|
||||||
"/fcc-challenges/random-quote-machine/build/precache-manifest.00884933380590505cabd88c9e1af2d6.js"
|
"/fcc-challenges/random-quote-machine/build/precache-manifest.46f3e4e9f0fc0a551e5d11c3cf0c4b89.js"
|
||||||
);
|
);
|
||||||
|
|
||||||
self.addEventListener('message', (event) => {
|
self.addEventListener('message', (event) => {
|
||||||
|
@ -0,0 +1,2 @@
|
|||||||
|
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.App-header{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin)}.blue-background{color:#fff}.yellow-background{color:#000}.QuoteBox{background-color:#fff;text-align:center;max-width:80%;max-height:60vh;width:800px;height:500px;border-radius:10px;box-shadow:4px 3px #000}.red-complimentary-background{background-color:#006aff;color:#fff}.blue-complimentary-background{background-color:#ff1500;color:#fff}.yellow-complimentary-background{background-color:#9400ff;color:#000}.quote-box-top{height:20%}.quote-box-middle{height:40%;display:flex;flex-direction:column;justify-content:space-around}.quote-box-bottom{height:40%;display:flex;flex-direction:row;justify-content:flex-start}.quote-box-underneath{height:0%}.quote-box-bottom-left,.quote-box-bottom-right{width:50%;display:flex;flex-direction:row;justify-content:space-around}@media (orientation:portrait) and (max-device-width:767px){.QuoteBox{max-height:60vh}.quote-box-top{height:10%}.quote-box-middle{height:50%}.quote-box-bottom{height:40%}.quote-box-underneath{height:0%}}.NewQuote{text-align:center;height:45%;width:45%;border:none;border-radius:5px;font-size:.8em;font-weight:700;margin:auto}.NewQuote:focus{outline:0}@media (orientation:portrait) and (max-device-width:767px){.NewQuote{height:40%}}@media (orientation:landscape) and (max-device-height:450px){.NewQuote{height:60%;font-size:1em}}.TweetQuote{height:45%;width:45%;border:none;border-radius:5px;font-size:2.2em;font-weight:700;display:flex;flex-direction:column;margin:auto}.TweetQuote:focus{outline:0}.red-background{background-color:#ff1500;color:#000}.blue-background{background-color:#006aff;color:#eaff00}.yellow-background{background-color:#eaff00;color:#006bff}.TweetQuote>a{margin:auto}@media (orientation:portrait) and (max-device-width:767px){.TweetQuote{height:40%}}@media (orientation:landscape) and (max-device-height:450px){.TweetQuote{height:60%}}.red{color:#00ff94}.blue,.yellow{color:#fff}.text{font-weight:700}.author,.text{margin-left:10%;margin-right:10%}.author{font-style:oblique}p{font-size:.7em;margin:auto}@media (orientation:portrait) and (max-device-width:767px){p{font-size:.9em}}@media (orientation:landscape) and (max-device-height:450px){p{font-size:.9em}}
|
||||||
|
/*# sourceMappingURL=main.5a3875ee.chunk.css.map */
|
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@
|
|||||||
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.App-header{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin)}.blue-background{color:#fff}.yellow-background{color:#000}.QuoteBox{background-color:#fff;text-align:center;max-width:80%;max-height:60vh;width:500px;height:500px;border-radius:10px;box-shadow:4px 3px #000}.red-complimentary-background{background-color:#0080ff;color:#fff}.blue-complimentary-background{background-color:#7fff00;color:#fff}.yellow-complimentary-background{background-color:#8000ff;color:#000}.quote-box-top{height:70%;display:flex;flex-direction:column;justify-content:space-around}.quote-box-bottom{height:30%;display:flex;flex-direction:row;justify-content:flex-start}.quote-box-bottom-left,.quote-box-bottom-right{width:50%;display:flex;flex-direction:row;justify-content:space-around}.NewQuote{text-align:center;height:60%;width:45%;border:none;border-radius:5px;font-size:.8em;font-weight:700}.NewQuote:focus{outline:0}.TweetQuote{height:60%;width:45%;border:none;border-radius:5px;font-size:2.2em;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-content:center}.tweetQuoteContainer{height:100%;width:100%;display:flex;flex-direction:row;justify-content:space-around}.TweetQuote:focus{outline:0}.red-background{background-color:red;color:#000}.blue-background{background-color:#00f;color:#ff8000}.yellow-background{background-color:#ff0;color:#0080ff}.red{color:#00ff80}.blue{color:#00f}.yellow{color:#ff0}.text{font-weight:700}.author,.text{margin-left:10%;margin-right:10%}.author{font-style:oblique}
|
|
||||||
/*# sourceMappingURL=main.899e3888.chunk.css.map */
|
|
@ -1 +0,0 @@
|
|||||||
{"version":3,"sources":["index.css","App.css","QuoteBox.css","NewQuote.css","TweetQuote.css","TextAuthor.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,KACE,iBACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BACF,CAOA,iBAEE,UACF,CAEA,mBAEE,UACF,CC1BA,UACE,qBAAuB,CACvB,iBAAkB,CAClB,aAAc,CACd,eAAgB,CAChB,WAAY,CACZ,YAAa,CACb,kBAAmB,CACnB,uBACF,CAEA,8BACE,wBAAyB,CACzB,UACF,CAEA,+BACE,wBAAyB,CACzB,UACF,CAEA,iCACE,wBAAyB,CACzB,UACF,CAEA,eACE,UAAW,CACX,YAAa,CACb,qBAAsB,CACtB,4BACF,CAEA,kBACE,UAAW,CACX,YAAa,CACb,kBAAmB,CACnB,0BACF,CASA,+CACE,SAAU,CACV,YAAa,CACb,kBAAmB,CACnB,4BACF,CCpDA,UACE,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,WAAY,CACZ,iBAAkB,CAClB,cAAgB,CAChB,eACF,CAEA,gBACE,SACF,CCZA,YACE,UAAW,CACX,SAAU,CACV,WAAY,CACZ,iBAAkB,CAClB,eAAgB,CAChB,eAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,sBAAuB,CACvB,oBACF,CAEA,qBACE,WAAY,CACZ,UAAW,CACX,YAAa,CACb,kBAAmB,CACnB,4BACF,CAEA,kBACE,SACF,CAEA,gBACE,oBAAyB,CACzB,UACF,CAEA,iBACE,qBAAyB,CACzB,aACF,CAEA,mBACE,qBAAyB,CACzB,aACF,CCtCA,KACE,aACF,CAEA,MACE,UACF,CAEA,QACE,UACF,CAEA,MAGE,eACF,CAEA,cALE,eAAgB,CAChB,gBAQF,CAJA,QAGE,kBACF","file":"main.899e3888.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",".App {\n text-align: center;\n}\n\n.App-header {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n}\n\n.red-background {\n background-color: #ff0000;\n color: black;\n}\n\n.blue-background {\n background-color: #0000ff;\n color: white;\n}\n\n.yellow-background {\n background-color: #ffff00;\n color: black;\n}\n",".QuoteBox {\n background-color: white;\n text-align: center;\n max-width: 80%;\n max-height: 60vh;\n width: 500px;\n height: 500px;\n border-radius: 10px;\n box-shadow: 4px 3px black;\n}\n\n.red-complimentary-background {\n background-color: #0080ff;\n color: white;\n}\n\n.blue-complimentary-background {\n background-color: #7fff00;\n color: white;\n}\n\n.yellow-complimentary-background {\n background-color: #8000ff;\n color: black;\n}\n\n.quote-box-top {\n height: 70%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n\n.quote-box-bottom {\n height: 30%;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n}\n\n.quote-box-bottom-left {\n width: 50%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.quote-box-bottom-right {\n width: 50%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n",".NewQuote {\n text-align: center;\n height: 60%;\n width: 45%;\n border: none;\n border-radius: 5px;\n font-size: 0.8em;\n font-weight: bold;\n}\n\n.NewQuote:focus {\n outline: 0;\n}\n\n.red-background {\n background-color: #ff0000;\n color: #000000;\n}\n\n.blue-background {\n background-color: #0000ff;\n color: #ff8000;\n}\n\n.yellow-background {\n background-color: #ffff00;\n color: #0080ff;\n}\n",".TweetQuote {\n height: 60%;\n width: 45%;\n border: none;\n border-radius: 5px;\n font-size: 2.2em;\n font-weight: bold;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-content: center;\n}\n\n.tweetQuoteContainer {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.TweetQuote:focus {\n outline: 0;\n}\n\n.red-background {\n background-color: #ff0000;\n color: #000000;\n}\n\n.blue-background {\n background-color: #0000ff;\n color: #ff8000;\n}\n\n.yellow-background {\n background-color: #ffff00;\n color: #0080ff;\n}\n",".red {\n color: #00ff80;\n}\n\n.blue {\n color: #0000ff;\n}\n\n.yellow {\n color: #ffff00;\n}\n\n.text {\n margin-left: 10%;\n margin-right: 10%;\n font-weight: bold;\n}\n\n.author {\n margin-left: 10%;\n margin-right: 10%;\n font-style: oblique;\n}\n"]}
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -12,16 +12,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.red-background {
|
.red-background {
|
||||||
background-color: #ff0000;
|
background-color: #ff1500;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-background {
|
.blue-background {
|
||||||
background-color: #0000ff;
|
background-color: #006aff;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow-background {
|
.yellow-background {
|
||||||
background-color: #ffff00;
|
background-color: #eaff00;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
.NewQuote {
|
.NewQuote {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 60%;
|
height: 45%;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.NewQuote:focus {
|
.NewQuote:focus {
|
||||||
@ -13,16 +14,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.red-background {
|
.red-background {
|
||||||
background-color: #ff0000;
|
background-color: #ff1500;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-background {
|
.blue-background {
|
||||||
background-color: #0000ff;
|
background-color: #006Aff;
|
||||||
color: #ff8000;
|
color: #eaff00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow-background {
|
.yellow-background {
|
||||||
background-color: #ffff00;
|
background-color: #eaff00;
|
||||||
color: #0080ff;
|
color: #006bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) and (max-device-width: 767px) {
|
||||||
|
.NewQuote {
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: landscape) and (max-device-height: 450px) {
|
||||||
|
.NewQuote {
|
||||||
|
height: 60%;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -30,11 +30,7 @@ class NewQuote extends React.Component {
|
|||||||
const colors = ["red-background", "blue-background", "yellow-background"];
|
const colors = ["red-background", "blue-background", "yellow-background"];
|
||||||
const newQuoteClass = "NewQuote " + colors[this.props.colorCount];
|
const newQuoteClass = "NewQuote " + colors[this.props.colorCount];
|
||||||
return (
|
return (
|
||||||
<button
|
<button onClick={this.handleClick} className={newQuoteClass} id="new-quote">
|
||||||
onClick={this.handleClick}
|
|
||||||
className={newQuoteClass}
|
|
||||||
id="new-quote"
|
|
||||||
>
|
|
||||||
Click Me!
|
Click Me!
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
@ -3,41 +3,49 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
width: 500px;
|
width: 800px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 4px 3px black;
|
box-shadow: 4px 3px black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red-complimentary-background {
|
.red-complimentary-background {
|
||||||
background-color: #0080ff;
|
background-color: #006aff;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-complimentary-background {
|
.blue-complimentary-background {
|
||||||
background-color: #7fff00;
|
background-color: #ff1500;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow-complimentary-background {
|
.yellow-complimentary-background {
|
||||||
background-color: #8000ff;
|
background-color: #9400ff;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote-box-top {
|
.quote-box-top {
|
||||||
height: 70%;
|
height: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-box-middle {
|
||||||
|
height: 40%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote-box-bottom {
|
.quote-box-bottom {
|
||||||
height: 30%;
|
height: 40%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quote-box-underneath {
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
.quote-box-bottom-left {
|
.quote-box-bottom-left {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -51,3 +59,21 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) and (max-device-width: 767px) {
|
||||||
|
.QuoteBox {
|
||||||
|
max-height: 60vh;
|
||||||
|
}
|
||||||
|
.quote-box-top {
|
||||||
|
height: 10%;
|
||||||
|
}
|
||||||
|
.quote-box-middle {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.quote-box-bottom {
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
.quote-box-underneath {
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -19,6 +19,8 @@ class QuoteBox extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div className={quoteBoxClass} id="quote-box">
|
<div className={quoteBoxClass} id="quote-box">
|
||||||
<div className="quote-box-top">
|
<div className="quote-box-top">
|
||||||
|
</div>
|
||||||
|
<div className="quote-box-middle">
|
||||||
<TextAuthor />
|
<TextAuthor />
|
||||||
</div>
|
</div>
|
||||||
<div className="quote-box-bottom">
|
<div className="quote-box-bottom">
|
||||||
@ -29,6 +31,8 @@ class QuoteBox extends React.Component {
|
|||||||
<NewQuote />
|
<NewQuote />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="quote-box-underneath">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
.red {
|
.red {
|
||||||
color: #00ff80;
|
color: #00ff94;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue {
|
.blue {
|
||||||
color: #0000ff;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow {
|
.yellow {
|
||||||
color: #ffff00;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
@ -21,3 +21,20 @@
|
|||||||
margin-right: 10%;
|
margin-right: 10%;
|
||||||
font-style: oblique;
|
font-style: oblique;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: .7em;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) and (max-device-width: 767px) {
|
||||||
|
p {
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: landscape) and (max-device-height: 450px) {
|
||||||
|
p {
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -27,7 +27,7 @@ class TextAuthor extends React.Component {
|
|||||||
const textClass = "text " + colors[this.props.colorCount];
|
const textClass = "text " + colors[this.props.colorCount];
|
||||||
const authorClass = "author " + colors[this.props.colorCount];
|
const authorClass = "author " + colors[this.props.colorCount];
|
||||||
return (
|
return (
|
||||||
<div style={{ fontSize: ".7em" }}>
|
<div>
|
||||||
<p className={textClass} id="text">
|
<p className={textClass} id="text">
|
||||||
{quote}
|
{quote}
|
||||||
</p>
|
</p>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.TweetQuote {
|
.TweetQuote {
|
||||||
height: 60%;
|
height: 45%;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@ -7,16 +7,7 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
margin: auto;
|
||||||
align-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tweetQuoteContainer {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.TweetQuote:focus {
|
.TweetQuote:focus {
|
||||||
@ -24,16 +15,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.red-background {
|
.red-background {
|
||||||
background-color: #ff0000;
|
background-color: #ff1500;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-background {
|
.blue-background {
|
||||||
background-color: #0000ff;
|
background-color: #006aff;
|
||||||
color: #ff8000;
|
color: #eaff00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow-background {
|
.yellow-background {
|
||||||
background-color: #ffff00;
|
background-color: #eaff00;
|
||||||
color: #0080ff;
|
color: #006bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TweetQuote > a {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) and (max-device-width: 767px) {
|
||||||
|
.TweetQuote {
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: landscape) and (max-device-height: 450px) {
|
||||||
|
.TweetQuote {
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -21,21 +21,11 @@ class TweetQuote extends React.Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="tweetQuoteContainer">
|
|
||||||
<div className={tweetQuoteClass}>
|
<div className={tweetQuoteClass}>
|
||||||
<a
|
<a href={href} target="_blank" rel="noopener noreferrer" id="tweet-quote">
|
||||||
href={href}
|
<FontAwesomeIcon icon={faTwitter} className={colors[this.props.colorCount]}/>
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
id="tweet-quote"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faTwitter}
|
|
||||||
className={colors[this.props.colorCount]}
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user