diff --git a/README.md b/README.md index 5912e2c97..249809871 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,9 @@ Follow these steps for completing your project. - [ ] Your project manager will count the project as complete by merging the branch back into master. ## Task 2: Set up your preprocessor -* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your cohort's help channel or your team lead for help. -* [ ] In your project's root folder, run the following command `less-watch-compiler less css index.less` +* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help. +* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command +* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less` * [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` * [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task @@ -40,7 +41,7 @@ Follow these steps for completing your project. ## Stretch Goals: * [ ] Incorporate a google font of your choosing -* [ ] Convert your portfolio project (from last week) CSS into LESS. Introduce variables, mixins, nesting, etc. +* [ ] Convert the great idea CSS into LESS. Introduce variables, mixins, nesting, etc. * [ ] Create a link to the portfolio page and create a layout that would allow users to see your work. A good idea is to link projects back to their github repos so employers can see your code. diff --git a/css/index.css b/css/index.css index 7dd97920d..dec152619 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,252 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +html { + font-family: "Quicksand", sans-serif; +} +.spacing { + text-align: center; + padding-top: 2rem; + font-size: 2.5rem; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} +html, +body { + height: 100%; +} +header { + width: 100%; +} +header nav { + width: 100%; + display: flex; + justify-content: center; + background-color: black; +} +header a { + margin: 1rem 2rem 1rem 4rem; + text-decoration: none; + color: white; +} +@media (max-width: 500px) { + header a { + margin: 1rem 0.5rem 1rem 0.5rem; + } +} +header a:hover { + color: rgba(194, 255, 220, 0.5); +} +.heading { + width: 100%; + background-color: #1d1d1d; + padding-bottom: 2rem; +} +.heading h2 { + text-align: center; + padding-top: 5rem; + font-size: 3rem; + color: rgba(194, 255, 220, 0.8); +} +@media (max-width: 500px) { + .heading h2 { + padding-top: 2rem; + font-size: 1.5rem; + } +} +.heading h3 { + text-align: center; + padding-top: 2rem; + font-size: 2.5rem; + color: lightcyan; + font-size: 1.5rem; + font-weight: 300; +} +@media (max-width: 500px) { + .heading h3 { + padding-top: 2rem; + font-size: 1rem; + } +} +.bg-canvas { + background-color: rgba(243, 240, 240, 0.9); + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: row; + height: 40rem; +} +@media (max-width: 500px) { + .bg-canvas { + background: white; + flex-direction: column; + align-items: center; + width: 100%; + } +} +.bg-canvas .left-color { + background-color: rgba(194, 255, 220, 0.5); + width: 50%; + height: 40rem; +} +.bg-canvas .left-color .resume { + width: 80%; + flex-wrap: wrap; + align-items: center; + margin: 0 auto; +} +.bg-canvas h2 { + padding: 1rem; + font-weight: bold; +} +.bg-canvas p { + font-weight: 200; + padding: 1rem; +} +.bg-canvas .right-color { + background-color: white; + width: 50%; + z-index: 1; + height: 40rem; +} +.bg-canvas .right-color .resume2 { + width: 80%; + flex-wrap: wrap; + align-items: flex-end; + margin: 0 auto; +} +.bg-canvas .right-color h2 { + padding: 1rem; + font-weight: bold; +} +.bg-canvas .right-color p { + font-weight: 200; + padding: 1rem; +} diff --git a/index.html b/index.html index a7f9e3ad1..49b949e5e 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,69 @@ - - - My Resume + + - + My Resume - - + + + + +
+ +
+
+

Cameron Lares

+

Full Stack Developer

+
- -

My Resume

- +
+
+

Professional Summary

+

Nam mollis purus arcu, vel condimentum purus accumsan suscipit. + Suspendisse viverra nulla accumsan sem convallis tristique. Phasellus + facilisis, libero eu ultricies bibendum, risus felis vulputate lacus, + in euismod lectus tortor non nibh. Sed hendrerit tellus ut est + laoreet, vitae tincidunt enim semper. Aenean ultrices sollicitudin + metus sed laoreet.

+

Achievements

+

Integer ornare, velit dictum ultricies condimentum, ex arcu tincidunt + turpis, et mattis felis sem vitae libero. Curabitur commodo sem mi, in + aliquam tortor aliquet ac.

+

Contact Info

+

Ut finibus ornare tempor. Vestibulum ut felis sit amet sapien + eleifend aliquet. Praesent elementum diam id erat aliquet posuere. + Nullam congue mi vel purus tincidunt ullamcorper.

+
+ +
+

Employment Background

+

Nam mollis purus arcu, vel condimentum purus accumsan suscipit. + Suspendisse viverra nulla accumsan sem convallis tristique. Phasellus + facilisis, libero eu ultricies bibendum, risus felis vulputate lacus, + in euismod lectus tortor non nibh. Sed hendrerit tellus ut est + laoreet, vitae tincidunt enim semper. Aenean ultrices sollicitudin + metus sed laoreet.

+

Academic Education

+

Integer ornare, velit dictum ultricies condimentum, ex arcu tincidunt + turpis, et mattis felis sem vitae libero. Curabitur commodo sem mi, in + aliquam tortor aliquet ac.

+

Core Skills

+

Ut finibus ornare tempor. Vestibulum ut felis sit amet sapien + eleifend aliquet. Praesent elementum diam id erat aliquet posuere. + Nullam congue mi vel purus tincidunt ullamcorper.

+
+
+ \ No newline at end of file diff --git a/less/dist/index.css b/less/dist/index.css new file mode 100644 index 000000000..633cbd447 --- /dev/null +++ b/less/dist/index.css @@ -0,0 +1,254 @@ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +html { + font-family: "Quicksand", sans-serif; +} +.spacing { + text-align: center; + padding-top: 2rem; + font-size: 2.5rem; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} +html, +body { + height: 100%; +} +header { + width: 100%; +} +header nav { + width: 100%; + display: flex; + justify-content: center; + background-color: black; +} +header a { + margin: 1rem 2rem 1rem 4rem; + text-decoration: none; + color: white; +} +@media (max-width: 500px) { + header a { + margin: 1rem 0.5rem 1rem 0.5rem; + } +} +header a:hover { + color: rgba(194, 255, 220, 0.5); +} +.heading { + width: 100%; + background-color: #1d1d1d; + padding-bottom: 2rem; +} +.heading h2 { + text-align: center; + padding-top: 5rem; + font-size: 3rem; + color: rgba(194, 255, 220, 0.8); +} +@media (max-width: 500px) { + .heading h2 { + padding-top: 2rem; + font-size: 1.5rem; + } +} +.heading h3 { + text-align: center; + padding-top: 2rem; + font-size: 2.5rem; + color: lightcyan; + font-size: 1.5rem; + font-weight: 300; +} +@media (max-width: 500px) { + .heading h3 { + padding-top: 2rem; + font-size: 1rem; + } +} +.bg-canvas { + background-color: rgba(243, 240, 240, 0.9); + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: row; + height: 40rem; +} +@media (max-width: 500px) { + .bg-canvas { + background: white; + flex-direction: column; + align-items: center; + width: 100%; + } +} +.bg-canvas .left-color { + background-color: rgba(194, 255, 220, 0.5); + width: 50%; + height: 40rem; +} +.bg-canvas .left-color .resume { + width: 80%; + flex-wrap: wrap; + align-items: center; + margin: 0 auto; +} +.bg-canvas h2 { + padding: 1rem; + font-weight: bold; +} +.bg-canvas p { + font-weight: 200; + padding: 1rem; +} +.bg-canvas .right-color { + background-color: white; + width: 50%; + z-index: 1; + height: 40rem; +} +.bg-canvas .right-color .resume2 { + width: 80%; + flex-wrap: wrap; + align-items: flex-end; + margin: 0 auto; +} +.bg-canvas .right-color h2 { + padding: 1rem; + font-weight: bold; +} +.bg-canvas .right-color p { + font-weight: 200; + padding: 1rem; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/less/dist/index.css.map b/less/dist/index.css.map new file mode 100644 index 000000000..1d9f37035 --- /dev/null +++ b/less/dist/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.less"],"names":[],"mappings":";;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACI,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,aAAA;EACA,wBAAA;;;AAIJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACI,cAAA;;AAGJ;EACI,cAAA;;AAGJ;AACA;EACI,gBAAA;;AAGJ;AACA;EACI,YAAA;;AAGJ,UAAU;AACV,UAAU;AACV,CAAC;AACD,CAAC;EACG,SAAS,EAAT;EACA,aAAA;;AAGJ;EACI,yBAAA;EACA,iBAAA;;AAGJ;EACI,aAAa,uBAAb;;AASJ;EACI,kBAAA;EACA,iBAAA;EACA,iBAAA;;;AAMJ;EACI,sBAAA;;AAGJ;AACA;EACI,YAAA;;AAGJ;EACI,WAAA;;AADJ,MAGI;EACI,WAAA;EACA,aAAA;EACA,uBAAA;EACA,uBAAA;;AAPR,MAUI;EACI,2BAAA;EACA,qBAAA;EACA,YAAA;;AAEA,QAA0B;EAA1B,MALJ;IAMQ,+BAAA;;;AAGJ,MATJ,EASK;EACG,+BAAA;;AAKZ;EACI,WAAA;EACA,yBAAA;EACA,oBAAA;;AAHJ,QAKI;EACI,kBAAA;EACA,iBAAA;EACA,eAAA;EACA,+BAAA;;AAEA,QAA0B;EAA1B,QANJ;IAOQ,iBAAA;IACA,iBAAA;;;AAbZ,QAiBI;EA3DA,kBAAA;EACA,iBAAA;EACA,iBAAA;EA2DI,gBAAA;EACA,iBAAA;EACA,gBAAA;;AAEA,QAA0B;EAA1B,QANJ;IAOQ,iBAAA;IACA,eAAA;;;AAKZ;EACI,0CAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,aAAA;;AAEA,QAA0B;EAA1B;IACI,iBAAA;IACA,sBAAA;IACA,mBAAA;IACA,WAAA;;;AAZR,UAeI;EACI,0CAAA;EACA,UAAA;EACA,aAAA;;AAlBR,UAeI,YAKI;EACI,UAAA;EACA,eAAA;EACA,mBAAA;EACA,cAAA;;AAxBZ,UA4BI;EACI,aAAA;EACA,iBAAA;;AA9BR,UAiCI;EACI,gBAAA;EACA,aAAA;;AAnCR,UAsCI;EACI,uBAAA;EACA,UAAA;EACA,UAAA;EACA,aAAA;;AA1CR,UAsCI,aAMI;EACI,UAAA;EACA,eAAA;EACA,qBAAA;EACA,cAAA;;AAhDZ,UAsCI,aAaI;EACI,aAAA;EACA,iBAAA;;AArDZ,UAsCI,aAkBI;EACI,gBAAA;EACA,aAAA","sourcesContent":["// Is this working?\n/* http://meyerweb.com/eric/tools/css/reset/\nv2.0 | 20110126\nLicense: 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}\n\nhtml {\n font-family: \"Quicksand\", sans-serif;\n}\n\n//----------Varbiables Begin--------------\n@main-color: rgba(194, 255, 220, 0.5);\n@secondary-color: white;\n//----------Varbiables End--------------\n\n//----------Mixins Begin--------------\n.spacing {\n text-align: center;\n padding-top: 2rem;\n font-size: 2.5rem;\n}\n\n//----------Mixins End--------------\n\n/* Set every element's box-sizing to border-box */\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n\nheader {\n width: 100%;\n\n nav {\n width: 100%;\n display: flex;\n justify-content: center;\n background-color: black;\n }\n\n a {\n margin: 1rem 2rem 1rem 4rem;\n text-decoration: none;\n color: white;\n\n @media (max-width: 500px) {\n margin: 1rem 0.5rem 1rem 0.5rem;\n }\n\n &:hover {\n color: @main-color;\n }\n }\n}\n\n.heading {\n width: 100%;\n background-color: #1d1d1d;\n padding-bottom: 2rem;\n\n h2 {\n text-align: center;\n padding-top: 5rem;\n font-size: 3rem;\n color: rgba(194, 255, 220, 0.8);\n\n @media (max-width: 500px) {\n padding-top: 2rem;\n font-size: 1.5rem;\n }\n }\n\n h3 {\n .spacing(); //Mixin\n color: lightcyan;\n font-size: 1.5rem;\n font-weight: 300;\n\n @media (max-width: 500px) {\n padding-top: 2rem;\n font-size: 1rem;\n }\n }\n}\n\n.bg-canvas {\n background-color: rgba(243, 240, 240, 0.9);\n width: 100%;\n margin: 0 auto;\n display: flex;\n flex-direction: row;\n height: 40rem;\n\n @media (max-width: 500px) {\n background: white;\n flex-direction: column;\n align-items: center;\n width: 100%;\n }\n\n .left-color {\n background-color: @main-color;\n width: 50%;\n height: 40rem;\n\n .resume {\n width: 80%;\n flex-wrap: wrap;\n align-items: center;\n margin: 0 auto;\n }\n }\n\n h2 {\n padding: 1rem;\n font-weight: bold;\n }\n\n p {\n font-weight: 200;\n padding: 1rem;\n }\n\n .right-color {\n background-color: @secondary-color;\n width: 50%;\n z-index: 1;\n height: 40rem;\n\n .resume2 {\n width: 80%;\n flex-wrap: wrap;\n align-items: flex-end;\n margin: 0 auto;\n }\n\n h2 {\n padding: 1rem;\n font-weight: bold;\n }\n\n p {\n font-weight: 200;\n padding: 1rem;\n }\n }\n}"],"file":"index.css"} \ No newline at end of file diff --git a/less/dist/index.min.css b/less/dist/index.min.css new file mode 100644 index 000000000..3586216d4 --- /dev/null +++ b/less/dist/index.min.css @@ -0,0 +1,2 @@ +.heading h2,.heading h3,.spacing{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.bg-canvas,header nav{width:100%;display:flex}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:Quicksand,sans-serif}.spacing{padding-top:2rem;font-size:2.5rem}*{box-sizing:border-box}body,html{height:100%}header{width:100%}header nav{justify-content:center;background-color:#000}header a{margin:1rem 2rem 1rem 4rem;text-decoration:none;color:#fff}header a:hover{color:rgba(194,255,220,.5)}.heading{width:100%;background-color:#1d1d1d;padding-bottom:2rem}.heading h2{padding-top:5rem;font-size:3rem;color:rgba(194,255,220,.8)}.heading h3{padding-top:2rem;color:#e0ffff;font-size:1.5rem;font-weight:300}@media (max-width:500px){header a{margin:1rem .5rem}.heading h2{padding-top:2rem;font-size:1.5rem}.heading h3{padding-top:2rem;font-size:1rem}}.bg-canvas{background-color:rgba(243,240,240,.9);margin:0 auto;flex-direction:row;height:40rem}@media (max-width:500px){.bg-canvas{background:#fff;flex-direction:column;align-items:center;width:100%}}.bg-canvas .left-color{background-color:rgba(194,255,220,.5);width:50%;height:40rem}.bg-canvas .left-color .resume{width:80%;flex-wrap:wrap;align-items:center;margin:0 auto}.bg-canvas h2{padding:1rem;font-weight:700}.bg-canvas p{font-weight:200;padding:1rem}.bg-canvas .right-color{background-color:#fff;width:50%;z-index:1;height:40rem}.bg-canvas .right-color .resume2{width:80%;flex-wrap:wrap;align-items:flex-end;margin:0 auto}.bg-canvas .right-color h2{padding:1rem;font-weight:700}.bg-canvas .right-color p{font-weight:200;padding:1rem} +/*# sourceMappingURL=index.min.css.map */ diff --git a/less/dist/index.min.css.map b/less/dist/index.min.css.map new file mode 100644 index 000000000..029f30d5a --- /dev/null +++ b/less/dist/index.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.less"],"names":[],"mappings":"AA8LA,YAAA,YA3CA,SACI,WAAA,OA9HJ,EACA,KACA,QACA,QAfA,OAyDA,QACA,MAiBA,MAxCA,EAnBA,IANA,WAbA,KA8DA,OATA,QAZA,OArBA,KACA,KAuBA,GAtBA,IAyCA,QAxCA,IAtBA,IAyCA,GACA,GAnBA,GAwCA,MAhBA,SAkBA,WADA,OAEA,OAlBA,KA3CA,GACA,GACA,GACA,GACA,GACA,GAyDA,OACA,OAtEA,KAyCA,EAnCA,OAoBA,IACA,IACA,IAuBA,MACA,OAJA,GA8BA,KAPA,KACA,IAnEA,OAyCA,GA2BA,OA5DA,EAEA,IAcA,EA6CA,KA5CA,EACA,KA4CA,QA3CA,MA7BA,KA8BA,OACA,OACA,IAyCA,QAxCA,IAiBA,MAEA,MAKA,GAJA,MAGA,GAFA,MAoBA,KAnBA,GArBA,GAGA,EAOA,GATA,IA0CA,MACI,OAAA,EACA,QAAA,EACA,OAAA,EAEA,KAAA,QACA,eAAA,SAIJ,QACA,MACA,QACA,WACA,OACA,OACA,OACA,OACA,KACA,IACA,QACI,QAAA,MAiHJ,WAvDA,WAyDI,MAAA,KAEA,QAAA,KAlHJ,KACI,YAAA,EAGJ,GACA,GACI,WAAA,KAGJ,WACA,EACI,OAAA,KAIJ,iBADA,kBAGA,QADA,SAEI,QAAS,GACT,QAAA,KAGJ,MACI,gBAAA,SACA,eAAA,EAGJ,KACI,YAAa,UAAA,WASjB,SAEI,YAAA,KACA,UAAA,OAMJ,EACI,WAAA,WAIJ,KADA,KAEI,OAAA,KAGJ,OACI,MAAA,KADJ,WAMQ,gBAAA,OACA,iBAAA,KAPR,SAWQ,OAAA,KAAA,KAAA,KAAA,KACA,gBAAA,KACA,MAAA,KAMA,eACI,MAAA,qBAKZ,SACI,MAAA,KACA,iBAAA,QACA,eAAA,KAHJ,YAOQ,YAAA,KACA,UAAA,KACA,MAAA,qBATR,YAzCI,YAAA,KA4DI,MAAA,QACA,UAAA,OACA,YAAA,IAEA,yBAjCA,SACI,OAAA,KAAA,MAoBJ,YACI,YAAA,KACA,UAAA,OAUJ,YACI,YAAA,KACA,UAAA,MAKZ,WACI,iBAAA,qBAEA,OAAA,EAAA,KAEA,eAAA,IACA,OAAA,MAEA,yBAAA,WACI,WAAA,KACA,eAAA,OACA,YAAA,OACA,MAAA,MAZR,uBAgBQ,iBAAA,qBACA,MAAA,IACA,OAAA,MAlBR,+BAqBY,MAAA,IACA,UAAA,KACA,YAAA,OACA,OAAA,EAAA,KAxBZ,cA6BQ,QAAA,KACA,YAAA,IA9BR,aAkCQ,YAAA,IACA,QAAA,KAnCR,wBAuCQ,iBAAA,KACA,MAAA,IACA,QAAA,EACA,OAAA,MA1CR,iCA6CY,MAAA,IACA,UAAA,KACA,YAAA,SACA,OAAA,EAAA,KAhDZ,2BAoDY,QAAA,KACA,YAAA,IArDZ,0BAyDY,YAAA,IACA,QAAA","file":"index.min.css","sourcesContent":["// Is this working?\n/* http://meyerweb.com/eric/tools/css/reset/\nv2.0 | 20110126\nLicense: 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}\n\nhtml {\n font-family: \"Quicksand\", sans-serif;\n}\n\n//----------Varbiables Begin--------------\n@main-color: rgba(194, 255, 220, 0.5);\n@secondary-color: white;\n//----------Varbiables End--------------\n\n//----------Mixins Begin--------------\n.spacing {\n text-align: center;\n padding-top: 2rem;\n font-size: 2.5rem;\n}\n\n//----------Mixins End--------------\n\n/* Set every element's box-sizing to border-box */\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n\nheader {\n width: 100%;\n\n nav {\n width: 100%;\n display: flex;\n justify-content: center;\n background-color: black;\n }\n\n a {\n margin: 1rem 2rem 1rem 4rem;\n text-decoration: none;\n color: white;\n\n @media (max-width: 500px) {\n margin: 1rem 0.5rem 1rem 0.5rem;\n }\n\n &:hover {\n color: @main-color;\n }\n }\n}\n\n.heading {\n width: 100%;\n background-color: #1d1d1d;\n padding-bottom: 2rem;\n\n h2 {\n text-align: center;\n padding-top: 5rem;\n font-size: 3rem;\n color: rgba(194, 255, 220, 0.8);\n\n @media (max-width: 500px) {\n padding-top: 2rem;\n font-size: 1.5rem;\n }\n }\n\n h3 {\n .spacing(); //Mixin\n color: lightcyan;\n font-size: 1.5rem;\n font-weight: 300;\n\n @media (max-width: 500px) {\n padding-top: 2rem;\n font-size: 1rem;\n }\n }\n}\n\n.bg-canvas {\n background-color: rgba(243, 240, 240, 0.9);\n width: 100%;\n margin: 0 auto;\n display: flex;\n flex-direction: row;\n height: 40rem;\n\n @media (max-width: 500px) {\n background: white;\n flex-direction: column;\n align-items: center;\n width: 100%;\n }\n\n .left-color {\n background-color: @main-color;\n width: 50%;\n height: 40rem;\n\n .resume {\n width: 80%;\n flex-wrap: wrap;\n align-items: center;\n margin: 0 auto;\n }\n }\n\n h2 {\n padding: 1rem;\n font-weight: bold;\n }\n\n p {\n font-weight: 200;\n padding: 1rem;\n }\n\n .right-color {\n background-color: @secondary-color;\n width: 50%;\n z-index: 1;\n height: 40rem;\n\n .resume2 {\n width: 80%;\n flex-wrap: wrap;\n align-items: flex-end;\n margin: 0 auto;\n }\n\n h2 {\n padding: 1rem;\n font-weight: bold;\n }\n\n p {\n font-weight: 200;\n padding: 1rem;\n }\n }\n}"]} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..ba0f0f224 100644 --- a/less/index.less +++ b/less/index.less @@ -1,59 +1,282 @@ // Is this working? -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0 | 20110126 +License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } + body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; + +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; + +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } + table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; +} + +html { + font-family: "Quicksand", sans-serif; } +//----------Varbiables Begin-------------- +@main-color: rgba(194, 255, 220, 0.5); +@secondary-color: white; +//----------Varbiables End-------------- + +//----------Mixins Begin-------------- +.spacing { + text-align: center; + padding-top: 2rem; + font-size: 2.5rem; +} + +//----------Mixins End-------------- + /* Set every element's box-sizing to border-box */ * { box-sizing: border-box; } -html, body { +html, +body { height: 100%; } +header { + width: 100%; + + nav { + width: 100%; + display: flex; + justify-content: center; + background-color: black; + } + + a { + margin: 1rem 2rem 1rem 4rem; + text-decoration: none; + color: white; + + @media (max-width: 500px) { + margin: 1rem 0.5rem 1rem 0.5rem; + } + + &:hover { + color: @main-color; + } + } +} + +.heading { + width: 100%; + background-color: #1d1d1d; + padding-bottom: 2rem; + + h2 { + text-align: center; + padding-top: 5rem; + font-size: 3rem; + color: rgba(194, 255, 220, 0.8); + + @media (max-width: 500px) { + padding-top: 2rem; + font-size: 1.5rem; + } + } + + h3 { + .spacing(); //Mixin + color: lightcyan; + font-size: 1.5rem; + font-weight: 300; + + @media (max-width: 500px) { + padding-top: 2rem; + font-size: 1rem; + } + } +} + +.bg-canvas { + background-color: rgba(243, 240, 240, 0.9); + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: row; + height: 40rem; + + @media (max-width: 500px) { + background: white; + flex-direction: column; + align-items: center; + width: 100%; + } + + .left-color { + background-color: @main-color; + width: 50%; + height: 40rem; + + .resume { + width: 80%; + flex-wrap: wrap; + align-items: center; + margin: 0 auto; + } + } + + h2 { + padding: 1rem; + font-weight: bold; + } + + p { + font-weight: 200; + padding: 1rem; + } + + .right-color { + background-color: @secondary-color; + width: 50%; + z-index: 1; + height: 40rem; + + .resume2 { + width: 80%; + flex-wrap: wrap; + align-items: flex-end; + margin: 0 auto; + } + + h2 { + padding: 1rem; + font-weight: bold; + } + + p { + font-weight: 200; + padding: 1rem; + } + } +} \ No newline at end of file diff --git a/resume-example2.png b/resume-example2.png new file mode 100644 index 000000000..910ab6d08 Binary files /dev/null and b/resume-example2.png differ