diff --git a/package-lock.json b/package-lock.json index dfb9fac..7c2297f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2353,6 +2353,24 @@ "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=" }, + "csslint": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/csslint/-/csslint-1.0.5.tgz", + "integrity": "sha1-Gcw+2jIhYP0/cjKvHLKjYOiYouk=", + "dev": true, + "requires": { + "clone": "2.1.1", + "parserlib": "1.1.1" + }, + "dependencies": { + "clone": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz", + "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=", + "dev": true + } + } + }, "cssnano": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz", @@ -7836,6 +7854,12 @@ "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=" }, + "parserlib": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/parserlib/-/parserlib-1.1.1.tgz", + "integrity": "sha1-pkz6ckBiQ0/fw1HJpOwtkrlMBvQ=", + "dev": true + }, "parseurl": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", diff --git a/package.json b/package.json index 3913d6d..a3e4c6d 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "eject": "react-scripts eject" }, "devDependencies": { + "csslint": "^1.0.5", "standard": "^11.0.1" } } diff --git a/src/Website.css b/src/Website.css index c1f8a79..335cc8a 100644 --- a/src/Website.css +++ b/src/Website.css @@ -1,16 +1,15 @@ .Website { - display: flex; - justify-content: center; - flex-flow: column nowrap; color: white; - margin-bottom: 15%; + display: flex; + flex-flow: column nowrap; + justify-content: center; } .MainContainer { + margin: auto; + margin-bottom: 50px; max-width: 700px; min-width: 60%; - margin: auto; - padding-bottom: 10%; text-align: center; } diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index 9409a05..8c6838d 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -1,19 +1,19 @@ .Navbar { - position: fixed; - bottom: 0px; - right: 0px; - left: 0px; background-color: rgb(59, 65, 82); + bottom: 0; box-shadow: -1px -1px 1px rgb(42, 46, 60); + left: 0; + position: fixed; + right: 0; } .Navbar-Button { background-color: rgb(126, 161, 187); - float: right; border-radius: 2px; + color: white; + float: right; margin: 5px; padding: 5px; - color: white; } .Navbar-Button:hover { @@ -25,30 +25,33 @@ } .Navbar-Menu { - width: 100%; - float: left; - padding: 0 20%; + margin: 0 20%; + width: 60%; } .Navbar-Menu div { + background-color: grey; border-radius: 2px; color: white; float: left; - width: 23%; - background-color: grey; - padding: 5px; margin: 1% 1%; overflow: hidden; + padding: 5px 0; text-overflow: ellipsis; + width: 23%; } @media screen and ( max-width: 500px ) { + .Navbar { + padding-bottom: 5px; + } .Navbar-Menu { - padding: 0 5% 3px 5%; + margin: 5%; + width: 90%; } .Navbar-Menu div { - width: 100%; margin: 5px 0; + width: 100%; } } diff --git a/src/index.css b/src/index.css index 886502c..4472949 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,6 @@ -* { - box-sizing: border-box; -} - body { @import url('https://fonts.googleapis.com/css?family=Roboto'); + background-color: rgb(46, 51, 64); font-family: 'Roboto', sans-serif; font-size: 100%; - background-color: rgb(46, 51, 64); } diff --git a/src/screens/Home/Home.css b/src/screens/Home/Home.css index 0cdfa9e..356a528 100644 --- a/src/screens/Home/Home.css +++ b/src/screens/Home/Home.css @@ -1,14 +1,13 @@ .HomeContainer p { text-align: left; - display: block; } .HomeContainer img { - float: left; + border-radius: 3px; display: block; - width: 40%; - margin-right: 5px; - border-radius: 2px; + float: left; + margin-right: 1%; + width: 39%; } .signature { @@ -19,8 +18,7 @@ @media screen and ( max-width: 500px ) { .HomeContainer img { - width: 100%; - padding: 5%; - margin: auto; + margin: 5%; + width: 90%; } } diff --git a/src/screens/Projects/Projects.css b/src/screens/Projects/Projects.css index 8e8c6c3..7eec9ff 100644 --- a/src/screens/Projects/Projects.css +++ b/src/screens/Projects/Projects.css @@ -2,16 +2,16 @@ display: flex; flex-flow: row wrap; } + .ProjectsContainer div { - text-align: center; - padding: 5px; - margin: auto; flex: 1 0 100%; - max-width: 50%; + margin: auto; + max-width: 45%; + text-align: center; } @media screen and ( max-width: 500px ) { .ProjectsContainer div { - max-width: 100%; + max-width: 95%; } }