diff --git a/assets/nav-icons/github-icon.png b/assets/nav-icons/github-icon.png new file mode 100644 index 0000000..d8597a3 Binary files /dev/null and b/assets/nav-icons/github-icon.png differ diff --git a/assets/nav-icons/linkedin-icon.png b/assets/nav-icons/linkedin-icon.png new file mode 100644 index 0000000..7d6cea1 Binary files /dev/null and b/assets/nav-icons/linkedin-icon.png differ diff --git a/dist/main.css b/dist/main.css index ca03696..6425150 100644 --- a/dist/main.css +++ b/dist/main.css @@ -1,4 +1,3 @@ -@import url(https://fonts.googleapis.com/css2?family=Allura&display=swap); /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -134,6 +133,6 @@ table { border-collapse: collapse; border-spacing: 0; } -header{padding:20px}header h1{font-family:"Allura",cursive;font-size:4em;color:pink}#canvas{border:2px solid pink;background-color:#fff;cursor:crosshair}#menu{display:flex;align-items:center;justify-content:space-around;width:100%;position:fixed;bottom:0;left:50%;transform:translateX(-50%);padding:20px;cursor:pointer}input[type=color]{height:40px;width:40px;border-radius:50%;border:2px solid pink;margin:0 5px;padding:0;background-color:rgba(0,0,0,0)}input[type=color]::-webkit-color-swatch{border:2px solid pink;border-radius:50%;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border:none}input[type=radio]{display:none}input[type=radio]+label img{height:40px;width:40px;margin-bottom:5px}button{background-color:pink;color:#fff;padding:10px;border:none;border-radius:5px;height:40px}button img{max-height:100%}button:hover{transition:.5s;background-color:#000}body{background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:200;margin:0} +header{padding:20px;position:relative;display:flex;justify-content:space-between;align-items:center}header h1{font-family:"Allura",cursive;font-size:4em;color:pink}.links a{margin-left:20px}.links img{height:45px}#canvas{border:2px solid pink;background-color:#fff;cursor:crosshair}#menu{display:flex;align-items:center;justify-content:space-around;width:100%;position:fixed;bottom:0;left:50%;transform:translateX(-50%);padding:20px;cursor:pointer}input[type=color]{height:40px;width:40px;border-radius:50%;border:2px solid pink;margin:0 5px;padding:0;background-color:rgba(0,0,0,0)}input[type=color]::-webkit-color-swatch{border:2px solid pink;border-radius:50%;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border:none}input[type=radio]{display:none}input[type=radio]+label img{height:40px;width:40px;margin-bottom:5px}button{background-color:pink;color:#fff;padding:10px;border:none;border-radius:5px;height:40px}button img{max-height:100%}button:hover{transition:.5s;background-color:#000}body{background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:200;margin:0} /*# sourceMappingURL=main.css.map*/ \ No newline at end of file diff --git a/dist/main.css.map b/dist/main.css.map index 1a4e475..cdef967 100644 --- a/dist/main.css.map +++ b/dist/main.css.map @@ -1 +1 @@ -{"version":3,"file":"main.css","mappings":";AAAA;;;CAGC;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFE,SAAS;EACT,UAAU;EACV,SAAS;EACT,eAAe;EACf,aAAa;EACb,wBAAwB;AAC1B;;AAEA,gDAAgD;AAChD;;;;;;;;;;;EAWE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;;EAEE,YAAY;AACd;;AAEA;;;;EAIE,WAAW;EACX,aAAa;AACf;;AAEA;EACE,yBAAyB;EACzB,iBAAiB;AACnB,C;ACpIA,OACE,aAGF,UACE,6BACA,cACA,WCTF,QACE,sBACA,sBACA,iBCHF,MACE,aACA,mBACA,6BACA,WACA,eACA,SACA,SACA,2BACA,aACA,eAIF,kBACE,YACA,WACA,kBACA,sBACA,aACA,UACA,+BAGF,wCACE,sBACA,kBACA,UAGF,gDACE,YAGF,kBACE,aAGF,4BACE,YACA,WACA,kBAGF,OACE,sBACA,WACA,aACA,YACA,kBACA,YAGF,WACE,gBAGF,aACE,eACA,sBCtDF,KACE,sBACA,WACA,uCACA,gBACA,S","sources":["webpack://canvas-project/./src/styles/reset.css","webpack://canvas-project/./src/styles/header.scss","webpack://canvas-project/./src/styles/canvas.scss","webpack://canvas-project/./src/styles/menu.scss","webpack://canvas-project/./src/index.scss"],"sourcesContent":["/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: '';\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}","@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');\n\nheader {\n padding: 20px;\n}\n\nheader h1 {\n font-family: 'Allura', cursive;\n font-size: 4em;\n color: pink\n}","#canvas {\n border: 2px solid pink;\n background-color: white;\n cursor: crosshair;\n}\n\n","#menu {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 20px;\n cursor: pointer;\n}\n\n// colors\ninput[type=\"color\"] {\n height: 40px;\n width: 40px;\n border-radius: 50%;\n border: 2px solid pink;\n margin: 0 5px;\n padding: 0;\n background-color: transparent;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch {\n border: 2px solid pink;\n border-radius: 50%;\n padding: 0;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\n border: none;\n}\n\ninput[type=\"radio\"] {\n display: none;\n}\n\ninput[type=\"radio\"]+label img {\n height: 40px;\n width: 40px;\n margin-bottom: 5px;\n}\n\nbutton {\n background-color: pink;\n color: white;\n padding: 10px;\n border: none;\n border-radius: 5px;\n height: 40px;\n}\n\nbutton img {\n max-height: 100%;\n}\n\nbutton:hover {\n transition: 0.5s;\n background-color: black;\n}\n\n","@import \"./styles/reset.css\";\n@import \"./styles/header.scss\";\n@import \"./styles/canvas.scss\";\n@import \"./styles/menu.scss\";\n\nbody {\n background-color: black;\n color: white;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 200;\n margin: 0;\n}"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"main.css","mappings":"AAAA;;;CAGC;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFE,SAAS;EACT,UAAU;EACV,SAAS;EACT,eAAe;EACf,aAAa;EACb,wBAAwB;AAC1B;;AAEA,gDAAgD;AAChD;;;;;;;;;;;EAWE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;;EAEE,YAAY;AACd;;AAEA;;;;EAIE,WAAW;EACX,aAAa;AACf;;AAEA;EACE,yBAAyB;EACzB,iBAAiB;AACnB,C;ACtIQ,OCCN,aACA,kBACA,aACA,8BACA,mBAGF,UACE,6BACA,cACA,WAGF,SACE,iBAGF,WACE,YCnBF,QACE,sBACA,sBACA,iBCHF,MACE,aACA,mBACA,6BACA,WACA,eACA,SACA,SACA,2BACA,aACA,eAIF,kBACE,YACA,WACA,kBACA,sBACA,aACA,UACA,+BAGF,wCACE,sBACA,kBACA,UAGF,gDACE,YAGF,kBACE,aAGF,4BACE,YACA,WACA,kBAGF,OACE,sBACA,WACA,aACA,YACA,kBACA,YAGF,WACE,gBAGF,aACE,eACA,sBHtDF,KACE,sBACA,WACA,uCACA,gBACA,S","sources":["webpack://canvas-project/./src/styles/reset.css","webpack://canvas-project/./src/index.scss","webpack://canvas-project/./src/styles/header.scss","webpack://canvas-project/./src/styles/canvas.scss","webpack://canvas-project/./src/styles/menu.scss"],"sourcesContent":["/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: '';\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}","@import \"./styles/reset.css\";\n@import \"./styles/header.scss\";\n@import \"./styles/canvas.scss\";\n@import \"./styles/menu.scss\";\n\nbody {\n background-color: black;\n color: white;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 200;\n margin: 0;\n}","header {\n padding: 20px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\nheader h1 {\n font-family: 'Allura', cursive;\n font-size: 4em;\n color: pink;\n}\n\n.links a {\n margin-left: 20px;\n}\n\n.links img {\n height: 45px;\n}\n\n","#canvas {\n border: 2px solid pink;\n background-color: white;\n cursor: crosshair;\n}\n\n","#menu {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 20px;\n cursor: pointer;\n}\n\n// colors\ninput[type=\"color\"] {\n height: 40px;\n width: 40px;\n border-radius: 50%;\n border: 2px solid pink;\n margin: 0 5px;\n padding: 0;\n background-color: transparent;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch {\n border: 2px solid pink;\n border-radius: 50%;\n padding: 0;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\n border: none;\n}\n\ninput[type=\"radio\"] {\n display: none;\n}\n\ninput[type=\"radio\"]+label img {\n height: 40px;\n width: 40px;\n margin-bottom: 5px;\n}\n\nbutton {\n background-color: pink;\n color: white;\n padding: 10px;\n border: none;\n border-radius: 5px;\n height: 40px;\n}\n\nbutton img {\n max-height: 100%;\n}\n\nbutton:hover {\n transition: 0.5s;\n background-color: black;\n}\n\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/index.html b/index.html index b7b66af..0a453ad 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,19 @@

Canvas

+ + + + + +
diff --git a/src/styles/header.scss b/src/styles/header.scss index 9264e00..d74a1aa 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -1,11 +1,22 @@ -@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap'); - header { padding: 20px; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; } header h1 { font-family: 'Allura', cursive; font-size: 4em; - color: pink -} \ No newline at end of file + color: pink; +} + +.links a { + margin-left: 20px; +} + +.links img { + height: 45px; +} +