diff --git a/src/components/mobile/toolbar.css b/src/components/mobile/toolbar.css index 44584f6..f0f0ba5 100644 --- a/src/components/mobile/toolbar.css +++ b/src/components/mobile/toolbar.css @@ -11,15 +11,12 @@ } .mobile-toolbar-logo { - margin-top: auto; - margin-bottom: auto; + margin: auto 20px; min-width: 50px; } .mobile-toolbar-sidebar-toggle { - margin-top: auto; - margin-bottom: auto; - margin-left: auto; + margin: auto 20px; font-size: 35px; min-width: 50px; color: #ffa62b; diff --git a/src/components/mobile/toolbar.jsx b/src/components/mobile/toolbar.jsx index 521120e..3aedc49 100644 --- a/src/components/mobile/toolbar.jsx +++ b/src/components/mobile/toolbar.jsx @@ -10,6 +10,7 @@ import Search from "../search" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faBars } from "@fortawesome/free-solid-svg-icons" import { Link } from "gatsby" +import ScrollToTop from "../scrollToTop" const Toolbar = ({ showSearch }) => { const [isSidebarVisible, setSidebarVisibilty] = useState(false) @@ -21,6 +22,7 @@ const Toolbar = ({ showSearch }) => { return (
+ {!isSidebarVisible && }
{showSearch ? ( diff --git a/src/components/notification.jsx b/src/components/notification.jsx index 4e98248..afd51d9 100644 --- a/src/components/notification.jsx +++ b/src/components/notification.jsx @@ -3,8 +3,7 @@ import { Message } from "semantic-ui-react" const Notification = () => { const style = { - width: "100%", - margin: "1rem", + width: "fit-content", } return ( diff --git a/src/components/org-card.css b/src/components/org-card.css index 244629b..fe5ddd7 100644 --- a/src/components/org-card.css +++ b/src/components/org-card.css @@ -1,92 +1,119 @@ .org-card-container { + z-index: 100; width: 100%; - border: 1px solid rgb(230, 236, 241); + padding: 0 1rem; height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; cursor: pointer; + border-radius: 10px; + background: linear-gradient(to bottom, var(--background), var(--card)); + transition: all 1ms ease-in; + border: 2px solid var(--background); + filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) + drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); + color: rgba(37, 37, 37, 0.794); } .org-card-container:hover { - box-shadow: 0 4.5px 5.5px -2.5px rgba(0, 0, 0, 0.2), - 0 9px 14px 1px rgba(0, 0, 0, 0.14), 0 3.5px 17px 3px rgba(0, 0, 0, 0.12); + background: linear-gradient(to bottom, var(--background), #fafafa); + border: 2px solid var(--card); } .org-card-logo-container { height: 128px; - padding: 5% 10%; + border-radius: 10px; + margin: 20px 0; } .org-card-logo { + margin: auto; background-size: contain; background-position: center center; background-repeat: no-repeat; - height: 100%; - width: 100%; + height: 80%; + width: 80%; } .org-card-name-container { justify-content: center; text-align: center; - padding-top: 2%; - padding-left: 10%; - padding-right: 10%; - font-size: 16px; + padding: 2% 5%; + letter-spacing: 1px; + font-size: 1.2em; font-family: "Galano Grotesque Alt Medium"; } .org-card-description-container { - padding: 2% 3%; + padding: 3%; + text-align: center; font-family: "Galano Grotesque Alt Light"; } .org-card-category-container { + border-radius: 10px; text-align: center; - padding: 2% 2%; + background-color: var(--primary); + border: 2px solid white; + color: #29531b; + padding: 2%; + margin: 10px 0; } .org-card-category-container span { display: inline-block; width: inherit; padding: 3px; - background-color: #db6400; - color: #ffffff; border-radius: 5px; font-family: "Galano Grotesque Alt Medium"; } .org-card-years-container { - padding: 2% 2%; + padding: 5px 2px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + flex: 0 0 1; } .org-card-year { + border-radius: 5px; display: inline-block; - margin: 3px; - padding: 3px; - background-color: #16697a; - color: white; - border-radius: 2px; + padding: 5px 10px; + font-size: xx-small; + color: rgba(37, 37, 37, 0.6); + font-weight: 200; font-family: "Galano Grotesque Alt Medium"; } .org-card-technologies-container { - padding: 2% 2%; + height: 150px; + padding: 10px 0; + margin: 10px; + border-top: 1px solid #d3d3d3; + font-family: "Galano Grotesque Alt Medium"; + display: flex; + justify-content: center; + align-items: center; + align-content: start; + flex-wrap: wrap; + color: #29531bda; + overflow: hidden; } .org-card-technology { - display: inline-block; - margin: 3px; - padding: 3px; - border: 1px solid #db6400; - color: #db6400; - border-radius: 2px; - font-family: "Galano Grotesque Alt Medium"; + box-sizing: border-box; + text-wrap: wrap; + padding: 5px; + text-align: center; } .org-card-technology-extra { - text-decoration: underline; display: inline-block; + text-decoration: underline; margin: 3px; padding: 3px; - color: #db6400; border-radius: 2px; - font-family: "Galano Grotesque Alt Medium"; } diff --git a/src/components/org-card.jsx b/src/components/org-card.jsx index ffa7a17..c997526 100644 --- a/src/components/org-card.jsx +++ b/src/components/org-card.jsx @@ -40,25 +40,27 @@ const OrgCard = ({ data }) => { const card = (
-
+
+ > +
+
+
{data.name}
+
+ {data.category} +
+
{data.description}
+
{years}
-
{data.name}
-
- {data.category} -
-
{data.description}
-
{years}
{technologies}
) diff --git a/src/components/org-info.css b/src/components/org-info.css index 04fc91f..144097b 100644 --- a/src/components/org-info.css +++ b/src/components/org-info.css @@ -1,7 +1,9 @@ .org-info-container { margin: 3%; - border: 2px solid rgb(230, 236, 241); - box-shadow: 9px 9px 10px #d1d9e6, -6px -6px 10px rgb(230, 236, 241); + background: var(--background); + border-radius: 5px; + filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.1)); + overflow: hidden; } .org-info-logo-container { diff --git a/src/components/projects-graph.css b/src/components/projects-graph.css index fa70e00..8ead990 100644 --- a/src/components/projects-graph.css +++ b/src/components/projects-graph.css @@ -1,5 +1,6 @@ .projects-graph-container { margin: 3%; - border: 2px solid rgb(230, 236, 241); - box-shadow: 9px 9px 10px #d1d9e6, -6px -6px 10px rgb(230, 236, 241); + background: var(--background); + border-radius: 5px; + filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.1)); } diff --git a/src/components/scrollToTop.css b/src/components/scrollToTop.css new file mode 100644 index 0000000..a405130 --- /dev/null +++ b/src/components/scrollToTop.css @@ -0,0 +1,20 @@ +.gotoTopButton { + height: 60px; + width: 60px; + border-radius: 100%; + display: flex; + padding: 20px; + align-items: center; + justify-content: center; + z-index: 100; + top: calc(100vh - 90px); + position: fixed; + right: 100px; + font-size: 2rem; + font-weight: bolder; + cursor: pointer; + color: white; + background-color: var(--hero); + filter: drop-shadow(0 0.5px 2px rgba(89, 89, 89, 0.6)) + drop-shadow(0 0.5px 2px rgba(60, 60, 60, 0.6)); +} diff --git a/src/components/scrollToTop.jsx b/src/components/scrollToTop.jsx new file mode 100644 index 0000000..dcb8b02 --- /dev/null +++ b/src/components/scrollToTop.jsx @@ -0,0 +1,15 @@ +import React from "react" +const scrollToTop = () => { + if (typeof window !== "undefined") { + window.scrollTo({ top: 0, behavior: "smooth" }) + } +} +function ScrollToTop() { + return ( +
+ ↑ +
+ ) +} + +export default ScrollToTop diff --git a/src/components/search.css b/src/components/search.css index 33a3aa9..91b60fb 100644 --- a/src/components/search.css +++ b/src/components/search.css @@ -1,3 +1,5 @@ .search-search * { - width: 90%; + width: 70%; + filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 0.04)) + drop-shadow(0 0 0.5px rgb(0 0 0 / 0.06)); } diff --git a/src/components/sidebar.css b/src/components/sidebar.css index a1c45a5..d5e1373 100644 --- a/src/components/sidebar.css +++ b/src/components/sidebar.css @@ -1,19 +1,22 @@ .sidebar-sidebar { - z-index: 20; + overflow: hidden; height: 100%; + z-index: 20; + border-radius: 20px; + padding: 10px; position: fixed; - transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform; - overflow: hidden; - background-color: #f5f7f9; - border-right: 1px solid rgb(230, 236, 241); + transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-div { height: 100%; - width: 100%; + border-radius: inherit; display: flex; flex-direction: column; + background-color: white; + filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) + drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); } .sidebar-content { @@ -42,11 +45,10 @@ } .sidebar-description { - font-family: "Galano Grotesque Alt Medium"; - font-size: 18px; - color: #ffa62b; + display: grid; + place-content: center; + padding: 1rem 10px; } - .sidebar-footer { text-align: center; margin-top: auto; diff --git a/src/components/sidebar.jsx b/src/components/sidebar.jsx index ff80950..ac101d0 100644 --- a/src/components/sidebar.jsx +++ b/src/components/sidebar.jsx @@ -8,7 +8,7 @@ import Filter from "./filters/filter" import GitHubButton from "react-github-btn" import { OutboundLink } from "gatsby-plugin-google-gtag" import { Link } from "gatsby" -import { Container, Divider, Button, Icon } from "semantic-ui-react" +import { Container, Divider, Button, Icon, Image } from "semantic-ui-react" import { useAppDispatch } from "../store" import { clearFilters } from "../store/filters" @@ -79,10 +79,18 @@ const Sidebar = ({ config, showFilters }) => {
{showFilters ? ( - GSoC Organizations + logo ) : ( - GSoC Organizations + logo )}
diff --git a/src/layouts/desktop/layout.css b/src/layouts/desktop/layout.css index 351c8c9..ac12cdb 100644 --- a/src/layouts/desktop/layout.css +++ b/src/layouts/desktop/layout.css @@ -18,12 +18,31 @@ .desktop-layout-search { position: fixed; - z-index: 10; - padding-top: 10px; - padding-bottom: 10px; + z-index: 100; + padding: 20px 0; /* 75% because sidebar is 25% of the width. */ width: 75%; - background-color: #ffff; - border-bottom: 1px solid rgb(212, 218, 223); - box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px; +} +.desktop-layout-content { + z-index: 10; +} +.gotoTopButton { + height: 60px; + width: 60px; + border-radius: 100%; + display: flex; + padding: 20px; + align-items: center; + justify-content: center; + z-index: 100; + top: calc(100vh - 90px); + position: fixed; + right: 20px; + font-size: 2rem; + font-weight: bolder; + cursor: pointer; + color: white; + background-color: var(--hero); + filter: drop-shadow(0 0.5px 2px rgba(89, 89, 89, 0.6)) + drop-shadow(0 0.5px 2px rgba(60, 60, 60, 0.6)); } diff --git a/src/layouts/desktop/layout.jsx b/src/layouts/desktop/layout.jsx index 4e1e3e4..69ef98e 100644 --- a/src/layouts/desktop/layout.jsx +++ b/src/layouts/desktop/layout.jsx @@ -6,16 +6,27 @@ import "./layout.css" import Sidebar from "../../components/sidebar" import Search from "../../components/search" import { Grid } from "semantic-ui-react" +import ScrollToTop from "../../components/scrollToTop" const Layout = ({ children, showFiltersAndSearch }) => { const searchStyle = showFiltersAndSearch ? {} : { display: "none" } const contentStyle = showFiltersAndSearch ? { paddingTop: "60px" } : {} + const scrollToTop = () => { + window.scrollTo({ top: 0 }) + } return ( + {/*
+ ↑ +
*/} + - +
diff --git a/src/layouts/layout.css b/src/layouts/layout.css index 14766c2..d72e928 100644 --- a/src/layouts/layout.css +++ b/src/layouts/layout.css @@ -1,8 +1,19 @@ +:root { + --background: rgba(255, 255, 255, 1); + --card: rgb(246, 246, 246); + --primary: rgba(247, 247, 247, 0.9); + --primary-foreground: rgba(240, 240, 240, 1); + --secondary: rgba(127, 127, 127, 1); + --secondary-foreground: rgba(237, 237, 237, 1); + --hero: rgba(219, 100, 0, 1); +} + body { margin: 0px; padding: 0px; min-height: 100vh; - background-color: #fdfdfd; + background-color: var(--primary); + scroll-behavior: smooth; } a { diff --git a/src/layouts/mobile/layout.jsx b/src/layouts/mobile/layout.jsx index 4ba0344..f4b0ed7 100644 --- a/src/layouts/mobile/layout.jsx +++ b/src/layouts/mobile/layout.jsx @@ -4,11 +4,13 @@ import PropTypes from "prop-types" import "./layout.css" import Toolbar from "../../components/mobile/toolbar" +import ScrollToTop from "../../components/scrollToTop" const Layout = ({ children, showFiltersAndSearch }) => { return (
+
{children}
) diff --git a/src/pages/index.css b/src/pages/index.css index d6fbb6b..7b6b1f1 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -1,3 +1,16 @@ .index-org-cards-grid { - margin: 0px !important; + margin: 10px !important; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.results-container { + user-select: none; + margin: 1rem 0; + text-align: center; +} +.results { + letter-spacing: 2px; + font-weight: 700; } diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 10a61c3..ace00fa 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -219,12 +219,11 @@ const IndexPage = ({ data }) => { -
- - {filteredOrganizations.length} results - + +
+

{filteredOrganizations.length} results

- + {filteredOrganizations.map(org => ( diff --git a/src/templates/organization.css b/src/templates/organization.css index 5b01c16..2434d15 100644 --- a/src/templates/organization.css +++ b/src/templates/organization.css @@ -13,6 +13,7 @@ .organization-graph-ad-container { margin: 3%; - border: 2px solid rgb(230, 236, 241); - box-shadow: 9px 9px 10px #d1d9e6, -6px -6px 10px rgb(230, 236, 241); + border-radius: 5px; + border: 2px solid var(--secondary-foreground); + /* box-shadow: 9px 9px 10px #d1d9e6, -6px -6px 10px rgb(230, 236, 241); */ } diff --git a/static/images/Gsoc Organizations.svg b/static/images/Gsoc Organizations.svg new file mode 100644 index 0000000..dca2532 --- /dev/null +++ b/static/images/Gsoc Organizations.svg @@ -0,0 +1,3 @@ + + +