diff --git a/package-lock.json b/package-lock.json index 9d7d7ab..1bf1817 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,9 +18,11 @@ "react-dom": "^17.0.2", "react-icons": "^4.3.1", "react-scripts": "5.0.0", + "styles": "file:@mui/core/styles", "web-vitals": "^2.1.3" } }, + "@mui/core/styles": {}, "node_modules/@babel/code-frame": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", @@ -4435,6 +4437,8 @@ "version": "8.8.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz", "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==", + "optional": true, + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -4449,7 +4453,9 @@ "node_modules/ajv-formats/node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "optional": true, + "peer": true }, "node_modules/ajv-keywords": { "version": "3.5.2", @@ -14588,6 +14594,10 @@ "postcss": "^8.2.15" } }, + "node_modules/styles": { + "resolved": "@mui/core/styles", + "link": true + }, "node_modules/stylis": { "version": "4.0.13", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", @@ -19388,14 +19398,13 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": { - "ajv": "^8.0.0" - }, + "requires": {}, "dependencies": { "ajv": { - "version": "8.8.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz", + "version": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz", "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==", + "optional": true, + "peer": true, "requires": { "fast-deep-equal": "^3.1.1", "json-schema-traverse": "^1.0.0", @@ -19406,7 +19415,9 @@ "json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "optional": true, + "peer": true } } }, @@ -26687,6 +26698,9 @@ "postcss-selector-parser": "^6.0.4" } }, + "styles": { + "version": "file:@mui/core/styles" + }, "stylis": { "version": "4.0.13", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", diff --git a/package.json b/package.json index 44cd65d..6a9aef1 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "react-dom": "^17.0.2", "react-icons": "^4.3.1", "react-scripts": "5.0.0", - "styles": "link:@mui/core/styles", + "styles": "file:@mui/core/styles", "web-vitals": "^2.1.3" }, "scripts": { diff --git a/src/App.css b/src/App.css index e442aed..f15d775 100644 --- a/src/App.css +++ b/src/App.css @@ -1,16 +1,18 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;800&display=swap'); + * { - box-sizing: border-box; - padding: 0; - margin: 0; - scroll-behavior: smooth; + box-sizing: border-box; + padding: 0; + margin: 0; + scroll-behavior: smooth; } body { - background: var(--color-bg); + background: var(--color-bg); } a { - color: unset; + color: unset; } a, @@ -19,85 +21,85 @@ a:visited, a:focus, a:hover, a:active { - text-decoration: none; + text-decoration: none; } -.gradient_bg { - /* ff 3.6+ */ - background: -moz-radial-gradient(circle at 3% 25%, rgba(137, 141, 196, 1) 0%, rgba(39, 40, 56, 1) 100%); - - /* safari 5.1+,chrome 10+ */ - background: -webkit-radial-gradient(circle at 3% 25%, rgba(137, 141, 196, 1) 0%, rgba(39, 40, 56, 1) 100%); - - /* opera 11.10+ */ - background: -o-radial-gradient(circle at 3% 25%, rgba(137, 141, 196, 1) 0%, rgba(39, 40, 56, 1) 100%); - - /* ie 10+ */ - background: -ms-radial-gradient(circle at 3% 25%, rgba(137, 141, 196, 1) 0%, rgba(39, 40, 56, 1) 100%); +.app_bg { + /* ff 3.6+ */ + background-color: #272838; +} - /* global 92%+ browsers support */ - background: radial-gradient(circle at 3% 25%, rgba(137, 141, 196, 1) 0%, rgba(39, 40, 56, 1) 100%); +.theta_header-text { + color: white; + font-weight: 800; } -.gradient_text { - background: var(--gradient--text); - -webkit-background-clip: text; +.theta_header-desc { + color: var(--color-subtext); background-clip: text; + font-weight: 500; } +.theta_header-text-span { + color: var(--color-subtext); +} + + .section_padding { - padding: 1rem 6rem; + padding: 1rem 6rem; + margin-top: 60px; } .section_margin { - margin: 4rem 6rem; + margin: 4rem 6rem; } .scale-up-center { - -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; - animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) + both; + animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; } @-webkit-keyframes scale-up-center { - 0% { - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } } @keyframes scale-up-center { - 0% { - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } } @media screen and (max-width: 700px) { - .section_padding { - padding: 4rem - } + .section_padding { + padding: 4rem; + } - .section_margin { - margin: 4rem - } + .section_margin { + margin: 4rem; + } } @media screen and (max-width: 550px) { - .section_padding { - padding: 4rem 2rem; - } - - .section_margin { - margin: 4rem 2rem; - } -} \ No newline at end of file + .section_padding { + padding: 4rem 2rem; + } + + .section_margin { + margin: 4rem 2rem; + } +} diff --git a/src/App.js b/src/App.js index 891301e..aba5ee1 100644 --- a/src/App.js +++ b/src/App.js @@ -15,7 +15,7 @@ import { } from "./containers"; const App = () => (
-
+
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx index 5f8799b..97ce7e8 100644 --- a/src/components/navbar/Navbar.jsx +++ b/src/components/navbar/Navbar.jsx @@ -6,20 +6,11 @@ import "./navbar.css"; const Menu = () => ( <>

- Home -

-

- Accomplishments + About

Schedule

-

- Merch -

-

- Prizes -

Volunteers

diff --git a/src/containers/accomplishments/accomplishments.css b/src/containers/accomplishments/accomplishments.css index d0c91b4..3b76d75 100644 --- a/src/containers/accomplishments/accomplishments.css +++ b/src/containers/accomplishments/accomplishments.css @@ -2,6 +2,7 @@ width: 100%; } + .theta_accomplishments-heading h1 { font-family: var(--font-family); color: #fff; diff --git a/src/containers/header/Header.jsx b/src/containers/header/Header.jsx index 15a8d9e..5375aef 100644 --- a/src/containers/header/Header.jsx +++ b/src/containers/header/Header.jsx @@ -5,18 +5,9 @@ export const Header = () => { return (
-

- ThetaHacks II will return this April for an even bigger and better - Hackathon. -

-

- Excepteur est et culpa do eu incididunt aute esse. Minim laborum do - sit sint dolor culpa qui ut laborum incididunt excepteur. Do voluptate - nulla tempor duis veniam mollit do aute et est consectetur do. Mollit - qui eiusmod exercitation nostrud nisi voluptate tempor officia ipsum. - Adipisicing exercitation excepteur qui deserunt aute ullamco officia - voluptate pariatur. Consectetur qui reprehenderit reprehenderit magna - adipisicing elit eu velit. Amet tempor ad culpa minim. +

ThetaHacks II is here.

+

+ 36 hours. $20k in prizes. What will you build?

@@ -28,14 +19,6 @@ export const Header = () => { Discord
-
- -
diff --git a/src/containers/header/header.css b/src/containers/header/header.css index 8fb61a5..b25a8fa 100644 --- a/src/containers/header/header.css +++ b/src/containers/header/header.css @@ -11,16 +11,19 @@ flex-direction: column; margin-right: 5rem; + margin: 3%; } .theta_header-content h1 { font-family: var(--font-family); font-weight: 800; - font-size: 48px; + font-size: 70px; line-height: 50px; letter-spacing: -0.04em; + margin-bottom: 2%; } + .theta_header-content p { font-family: var(--font-family); font-weight: 400; @@ -40,7 +43,7 @@ } #discord { - background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5); + background: linear-gradient(-45deg, #6fdbdf, #47b7e4); background-size: 800% 400%; font-family: var(--font-family); padding: 1em 1em; @@ -55,6 +58,8 @@ -webkit-animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both; animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both; text-decoration: none; + width: 150px; + text-align: center; } #discord:hover { @@ -75,10 +80,8 @@ #signup { background: linear-gradient(to right, - #6253e1, - #852d91, - #a3a1ff, - #f24645); + #f57171, + #d13636); background-size: 800% 400%; font-family: var(--font-family); padding: 1em 1em; @@ -94,6 +97,8 @@ animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both; text-decoration: none; margin-right: 10px; + width: 150px; + text-align: center; } #signup:hover { @@ -140,79 +145,12 @@ } } -.subscribe-button { - font-size: 16px; - font-weight: 600; - color: #fff; - cursor: pointer; - height: 55px; - text-align: center; - border: none; - background-size: 300% 100%; - moz-transition: all .4s ease-in-out; - -o-transition: all .4s ease-in-out; - -webkit-transition: all .4s ease-in-out; - transition: all .4s ease-in-out; -} - -.subscribe-button:hover { - background-position: 100% 0; - moz-transition: all .4s ease-in-out; - -o-transition: all .4s ease-in-out; - -webkit-transition: all .4s ease-in-out; - transition: all .4s ease-in-out; -} - -.subscribe-button:focus { - outline: none; -} - -.subscribe-button { - background-image: linear-gradient(to right, - #667eea, - #764ba2, - #6b8dd6, - #8e37d7); - box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75); -} - .email-form { display: inline-flex; margin-left: 20px; font-family: var(--font-family); } -.subscribe-button { - height: 40px; - display: inline-block; - padding: 15px 15px 34px; - background-color: grey; - color: white; - border: 0; - line-height: inherit; - text-decoration: none; - cursor: pointer; - font-family: var(--font-family); -} - -.subscribe-input { - display: inline-block; - width: 150px; - padding: 9px 12px; - vertical-align: middle; - color: #fff; - margin: 0; - line-height: 1.42857143; - text-align: center; - font-size: 15px; - background: var(--color-footer); - border: 2px solid var(--color-footer); -} - -.subscribe-input:focus { - outline: none; -} - .theta_header-image { flex: 1; display: flex; diff --git a/src/index.css b/src/index.css index 4870ec1..a8d373e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,16 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"); + :root { - --font-family: 'Montserrat', sans-serif; + --font-family: "Inter", sans-serif; - --gradient-text: linear-gradient(89.97deg, #AE67FA 1.84%, #F49867 102.67%); - --gradient-bar: linear-gradient(103.22deg, #AE67FA -13.86%, #F49867 99.55%); + --gradient-text: linear-gradient(89.97deg, #ae67fa 1.84%, #f49867 102.67%); + --gradient-bar: linear-gradient(103.22deg, #ae67fa -13.86%, #f49867 99.55%); - --color-bg: #303245; - --color-footer: #031B34; - --color-text: #81AFDD; - --color-subtext: #FF8A71; - /* #898DC4,#5D5F85,#272838,#303245,#242533 */ - /* #3D8DBF,#295E80,#51BBFE,#142F40,#49AAE6 */ - /* #BA495D,#7A303D,#F9627D,#3B171D,#E05871 */ -} \ No newline at end of file + --color-bg: #303245; + --color-footer: #031b34; + --color-text: #8cd4dd; + --color-subtext: #cf7c92; + /* #898DC4,#5D5F85,#272838,#303245,#242533 */ + /* #3D8DBF,#295E80,#51BBFE,#142F40,#49AAE6 */ + /* #BA495D,#7A303D,#F9627D,#3B171D,#E05871 */ +}