diff --git a/css/index.css b/css/index.css index e6b2b589c1..de1a761014 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,150 @@ -/* Should be empty until you compile your LESS */ \ No newline at end of file +/* Your Code Goes Here */ +html { + background-color: red; +} +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ +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, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + outline: 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; +} +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} +html { + font-size: 62.5%; + font-family: 'Roboto, Arial, sans-serif'; +} +.container { + max-width: 1024px; + margin: 0 auto; +} diff --git a/index.html b/index.html index 8a84a17304..5335182fc9 100644 --- a/index.html +++ b/index.html @@ -10,87 +10,147 @@ +

You got this! Good luck.

- - - +
\ No newline at end of file diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000000..7bd15beb43 --- /dev/null +++ b/less/global.less @@ -0,0 +1,13 @@ +* { + box-sizing: border-box; + } + +html { + font-size: 62.5%; + font-family: 'Roboto, Arial, sans-serif'; + } + +.container { + max-width: 1024px; + margin: 0 auto; +} \ No newline at end of file diff --git a/less/index.less b/less/index.less index 6d3fc81ef9..b1aa14199c 100644 --- a/less/index.less +++ b/less/index.less @@ -1,60 +1,11 @@ -/*------------------------------------*\ -RESET -\*------------------------------------*/ -/* http://meyerweb.com/eric/tools/css/reset/ -v2.0b1 | 201101 -NOTE:WORK IN PROGRESS -USE WITH CAUTION AND TEST WITH ABANDON */ -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,figcaption,figure, -footer,header,hgroup,menu,nav,section,summary, -time,mark,audio,video{ - margin:0; - padding:0; - border:0; - outline: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; -} -ins{ - text-decoration:none; -} -del{ - text-decoration:line-through; -} -table{ - border-collapse:collapse; - border-spacing:0; +/* Your Code Goes Here */ +html { + background-color: red; } -/* Your Code Goes Here */ \ No newline at end of file +@import "variables"; +@import "reset"; +@import "mixins"; +@import "global"; \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000000..f8c4e14a46 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,9 @@ +.center() { + display: flex; + justify-content: center; + align-items: center; +} + +.bordered() { + border: 2px solid plum; +} \ No newline at end of file diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000000..83a4d32775 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,58 @@ +/*------------------------------------*\ +RESET +\*------------------------------------*/ +/* http://meyerweb.com/eric/tools/css/reset/ +v2.0b1 | 201101 +NOTE:WORK IN PROGRESS +USE WITH CAUTION AND TEST WITH ABANDON */ + +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,figcaption,figure, +footer,header,hgroup,menu,nav,section,summary, +time,mark,audio,video{ + margin:0; + padding:0; + border:0; + outline: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; +} +ins{ + text-decoration:none; +} +del{ + text-decoration:line-through; +} + +table{ + border-collapse:collapse; + border-spacing:0; +} \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000000..8c716b46ad --- /dev/null +++ b/less/variables.less @@ -0,0 +1,2 @@ +//Mobile +@phone: (max-width: 500px); \ No newline at end of file