diff --git a/components/Avatar.js b/components/Avatar.js index 030d81a..7c2f6e3 100644 --- a/components/Avatar.js +++ b/components/Avatar.js @@ -14,7 +14,7 @@ const Container = styled.div` border-radius: 50%; - background-color: ${(props) => props.theme.secondary}; + background-color: ${(props) => props.theme.greyDark}; color: ${(props) => props.theme.light}; overflow: hidden; diff --git a/components/Header.js b/components/Header.js index 7327c81..6f1dcf5 100644 --- a/components/Header.js +++ b/components/Header.js @@ -24,13 +24,11 @@ const HeaderContainer = styled.header` display: flex; align-items: center; - justify-content: space-between; + justify-content: center; width: 100%; max-height: ${(props) => props.theme.headerHeight}; - padding: 0.75rem 2rem; - background-color: ${(props) => props.theme.darkLight}; font-size: 1em; @@ -38,6 +36,17 @@ const HeaderContainer = styled.header` color: ${(props) => props.theme.light}; `; +const HeaderContent = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + max-width: 1920px; + + padding: 0.75rem 2rem; +`; + const LinksContainer = styled.nav` display: flex; align-items: center; @@ -51,19 +60,25 @@ const LinksContainer = styled.nav` const SearchBarHolder = styled.div` position: absolute; - z-index: 0; + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; - left: 0; top: ${(props) => (props.show ? props.theme.headerHeight : "0%")}; - padding: 0 2rem; width: 100%; + padding: 0 2rem; + transition: top ease-out 0.15s; `; const HeaderSearchBar = styled(SearchBar)` && { + max-width: 1856px; + margin: 0; background-color: ${(props) => props.theme.darkLight}; } `; @@ -124,6 +139,44 @@ const DrawerMenuButton = styled(HeaderButton)` } `; +const menuLinks = [ + { + label: "Home", + slug: "", + id: 1, + }, + { + label: "Kit Map", + slug: "map", + id: 3, + }, + { + label: "Challenges", + slug: "challenges", + id: 4, + }, + { + label: "News", + slug: "news", + id: 5, + }, + { + label: "Help", + slug: "help", + id: 6, + }, + { + label: "Library", + slug: "library", + id: 7, + }, + { + label: "Roadmap", + slug: "roadmap", + id: 8, + }, +]; + export default function Header() { const { user, isLogged } = useAuth(); @@ -144,127 +197,95 @@ export default function Header() { setOpenSearch(!openSearch); } - const menuLinks = [ - { - label: "Home", - slug: "", - id: 1, - }, - { - label: "Kit Map", - slug: "map", - id: 3, - }, - { - label: "Challenges", - slug: "challenges", - id: 4, - }, - { - label: "News", - slug: "news", - id: 5, - }, - { - label: "Help", - slug: "help", - id: 6, - }, - { - label: "Library", - slug: "library", - id: 7, - }, - { - label: "Roadmap", - slug: "roadmap", - id: 8, - }, - ]; - return ( <> - - - - {menuLinks.map((link) => ( - - ))} - - - - : } - onClick={() => toggleSearch()} - /> - - } - onClick={() => toggleDrawer()} - /> - - - - {isLogged ? ( - -
+ + + + + {menuLinks.map((link) => ( + + ))} + + + + : } + onClick={() => toggleSearch()} + /> + + } + onClick={() => toggleDrawer()} + /> + + + + {isLogged ? ( + +
+ } + /> + } + > + Notifications + +

No notifications yet

+ +
+ + + + + } - /> - } + name="user" + trigger={} > - Notifications - -

No notifications yet

- -
+ {user.username} - - - - - } - > - {user.username} - - + - - My profile - - - Settings - - - - Log out + + My profile + + + Settings + + + + Log out + + + + ) : ( + + + - - - ) : ( - - - - - - )} - + + )} + + diff --git a/components/InProgress.js b/components/InProgress.js index c24a66a..3a7e833 100644 --- a/components/InProgress.js +++ b/components/InProgress.js @@ -15,18 +15,6 @@ const AnimatedIcon = styled(Icon)` position: relative; animation: float 3s ease-in-out infinite; - - @keyframes float { - 0% { - transform: translatey(0px); - } - 50% { - transform: translatey(-10px); - } - 100% { - transform: translatey(0px); - } - } `; const InfoTitle = styled.h3` diff --git a/components/Modal.js b/components/Modal.js index 5f53cde..a1f9c67 100644 --- a/components/Modal.js +++ b/components/Modal.js @@ -54,7 +54,7 @@ const ModalContainer = styled(Card)` const ModalHead = styled.div` display: flex; - background-color: #252525; + background-color: ${(props) => props.theme.textBackground}; border-bottom: 1px solid ${(props) => props.theme.grey}; width: 100%; diff --git a/components/Path.js b/components/Path.js index 4e82a2b..04a4769 100644 --- a/components/Path.js +++ b/components/Path.js @@ -2,8 +2,8 @@ import Link from "next/link"; import { withRouter } from "next/router"; import React from "react"; import styled from "styled-components"; -import Icon from "./Icon"; import ArrowIcon from "../public/icons/arrow-down.svg"; +import Icon from "./Icon"; const PathContainer = styled.nav` display: flex; @@ -27,6 +27,7 @@ const LinkContainer = styled.div` const Separator = styled(Icon)` transform: rotate(-90deg); + cursor: default; `; /*** diff --git a/components/cards/ArticleCard.js b/components/cards/ArticleCard.js index 3f59160..e285675 100644 --- a/components/cards/ArticleCard.js +++ b/components/cards/ArticleCard.js @@ -1,19 +1,30 @@ import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; +import Arrow from "../../public/icons/long-arrow.svg"; import Breaks from "../../utils/breakpoints"; import Cover from "../Cover"; import Date from "../Date"; +import Icon from "../Icon"; import WrapInLink from "../WrapInLink"; import Card from "./Card"; +const AnimatedArrow = styled(Icon)` + && { + margin: 0; + } +`; + const Container = styled(Card)` && { padding: 0; } - display: flex; flex-direction: column; + + &:hover ${AnimatedArrow} { + animation: cta-arrow 1s ease-in-out infinite; + } `; const CoverHolder = styled(Cover)` @@ -28,31 +39,34 @@ const CoverHolder = styled(Cover)` } `; -const Content = styled.div` - width: 100%; +const DetailsHolder = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; - background-color: ${(props) => props.theme.darkLight}; + background-color: ${(props) => props.theme.textBackground}; padding: 1rem 1.25rem; `; const Title = styled.b` - height: 1.5em; - - margin-bottom: 0.5rem; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; - font-size: 18px; - text-overflow: ellipsis; + margin-bottom: 1rem; - color: ${(props) => props.theme.primary}; overflow: hidden; + text-overflow: ellipsis; + word-break: break-word; `; const Preview = styled.p` - max-height: 3em; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + height: 3em; margin-bottom: 0.5rem; @@ -66,18 +80,46 @@ const ArticleDate = styled(Date)` margin-bottom: 0.5rem; `; -export default function ArticleCard({ article, showCover, className }) { +const ReadRow = styled.div` + display: flex; + align-items: center; + + width: 100%; + + margin-top: 0.25rem; +`; + +const ReadLabel = styled.label` + font-weight: bold; + font-size: 14px; + text-transform: uppercase; + + margin-right: auto; + + letter-spacing: 0.1em; + color: ${(props) => props.theme.secondary}; +`; + +export default function ArticleCard({ article, className, showCover }) { return ( - + {showCover && } - + {article.title} {article.preview} - + {showCover && ( + + Read + + + + + )} + ); diff --git a/components/cards/AuthorCard.js b/components/cards/AuthorCard.js index a8025f4..b14e293 100644 --- a/components/cards/AuthorCard.js +++ b/components/cards/AuthorCard.js @@ -55,7 +55,7 @@ export default function AuthorCard({ author, ...props }) { {author.description} - + ); diff --git a/components/cards/Card.js b/components/cards/Card.js index de1af3d..3cb0eb1 100644 --- a/components/cards/Card.js +++ b/components/cards/Card.js @@ -2,21 +2,6 @@ import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; -const HoverBar = styled.div` - position: absolute; - z-index: 2; - - top: 0%; - left: 0%; - - height: 4px; - width: 100%; - transform: scale(0); - - background-color: transparent; - transition: background-color 0.2s ease, transform 0.2s ease; -`; - const Container = styled.div` position: relative; display: flex; @@ -26,26 +11,30 @@ const Container = styled.div` padding: 1.5rem; + color: ${(props) => props.theme.light}; background-color: ${(props) => props.theme.darkLight}; border-radius: ${(props) => props.theme.radiusMin}; overflow: hidden; - &:hover { - cursor: ${(props) => props.clickable && "pointer"}; + transition: ${(props) => + props.animateOnHover && "color 0.3s ease-out, transform 0.3s ease"}; + + &:hover h3 { + color: ${(props) => props.animateOnHover && props.theme.primary}; } - &:hover ${HoverBar} { - background-color: ${(props) => props.theme.primary}; - transform: scale(1); + &:hover { + transform: ${(props) => + props.animateOnHover && "translateY(-10px) scale(1)"}; + cursor: ${(props) => props.animateOnHover && "pointer"}; } `; export default function Card({ animateOnHover, children, ...props }) { return ( - - {animateOnHover && } + {children} ); diff --git a/components/cards/DashboardLinkCard.js b/components/cards/DashboardLinkCard.js new file mode 100644 index 0000000..1d167ca --- /dev/null +++ b/components/cards/DashboardLinkCard.js @@ -0,0 +1,82 @@ +import PropTypes from "prop-types"; +import React from "react"; +import styled from "styled-components"; +import Breaks from "../../utils/breakpoints"; +import Icon from "../Icon"; +import WrapInLink from "../WrapInLink"; +import Card from "./Card"; + +const Container = styled(Card)` + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +`; + +const TitleRow = styled.div` + display: flex; + align-items: center; + justify-content: center; +`; + +const IconHolder = styled(Icon)` + transition: fill 0.2s ease-out; + + ${Container}:hover & { + fill: ${(props) => props.theme.primary} !important; + } +`; + +const Title = styled.h3` + margin: 0 0 0 1rem; + + transition: color 0.2s ease-out; + + ${Container}:hover & { + color: ${(props) => props.theme.primary}; + } + + @media screen and (max-width: ${Breaks.medium}) { + width: min-content; + } +`; + +const Description = styled.p` + margin: 1rem 0; + max-width: 520px; +`; + +export default function DashboardLinkCard({ href, icon, title, description }) { + return ( + + + + + {icon} + + {title} + + {description} + + + ); +} + +DashboardLinkCard.propTypes = { + /** + * Destination of the link + */ + href: PropTypes.string.isRequired, + /** + * Icon to use + */ + icon: PropTypes.node.isRequired, + /** + * Title of the card + */ + title: PropTypes.string.isRequired, + /** + * Description of the card destination + */ + description: PropTypes.string.isRequired, +}; diff --git a/components/cards/FeaturedArticleCard.js b/components/cards/FeaturedArticleCard.js index f1884f7..4a9962e 100644 --- a/components/cards/FeaturedArticleCard.js +++ b/components/cards/FeaturedArticleCard.js @@ -9,19 +9,21 @@ import WrapInLink from "../WrapInLink"; import Card from "./Card"; const Container = styled(Card)` - display: grid; - grid-template-columns: 0.75fr 1fr; + && { + display: grid; + grid-template-columns: 0.75fr 1fr; - padding: 0; - margin: 2rem 0; + padding: 0; + margin: 2rem 0; - @media screen and (max-width: ${Breaks.large}) { - display: flex; - flex-direction: column; + @media screen and (max-width: ${Breaks.large}) { + display: flex; + flex-direction: column; - height: unset; + height: unset; - margin: 2rem 0 0 0; + margin: 2rem 0 0 0; + } } `; @@ -40,10 +42,13 @@ const CoverHolder = styled(Cover)` } `; -const InfosContainer = styled.div` +const DetailsHolder = styled.div` display: flex; flex-direction: column; + padding: 2rem; + + background-color: ${(props) => props.theme.textBackground}; `; const Title = styled.h2` @@ -71,15 +76,15 @@ const UserDetails = styled(UserPreview)` export default function FeaturedArticleCard({ featuredArticle }) { return ( - + - + {featuredArticle.title} {featuredArticle.preview} - + ); diff --git a/components/cards/HelpCard.js b/components/cards/HelpCard.js index fbf7d42..9c3b45f 100644 --- a/components/cards/HelpCard.js +++ b/components/cards/HelpCard.js @@ -6,7 +6,6 @@ import WrapInLink from "../WrapInLink"; import Card from "./Card"; const Container = styled(Card)` - display: flex; align-items: center; justify-content: center; `; @@ -17,6 +16,14 @@ const ContentRow = styled.div` justify-content: center; `; +const IconHolder = styled(Icon)` + transition: fill 0.2s ease-out; + + ${Container}:hover & { + fill: ${(props) => props.theme.primary} !important; + } +`; + const CardTitle = styled.h3` width: min-content; `; @@ -25,9 +32,9 @@ export function PureCard(props) { return ( - + {props.iconSVG} - + {props.title} diff --git a/components/cards/HelpSectionCard.js b/components/cards/HelpSectionCard.js index 21afff5..042291e 100644 --- a/components/cards/HelpSectionCard.js +++ b/components/cards/HelpSectionCard.js @@ -1,6 +1,7 @@ import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; +import Breaks from "../../utils/breakpoints"; import WrapInLink from "../WrapInLink"; import Card from "./Card"; @@ -10,6 +11,12 @@ const Container = styled(Card)` align-items: center; justify-content: center; text-align: center; + + min-height: 300px; + + @media screen and (max-width: ${Breaks.medium}) { + min-height: 180px; + } `; export default function HelpSectionCard(props) { diff --git a/components/cards/LibraryCard.js b/components/cards/LibraryCard.js deleted file mode 100644 index 932face..0000000 --- a/components/cards/LibraryCard.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import LibraryIcon from "../../public/icons/library.svg"; -import Breaks from "../../utils/breakpoints"; -import Icon from "../Icon"; -import WrapInLink from "../WrapInLink"; -import Card from "./Card"; - -const Container = styled(Card)` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; -`; - -const TitleRow = styled.div` - display: flex; - align-items: center; - justify-content: center; -`; - -const Title = styled.h3` - margin: 0 0 0 1rem; - - @media screen and (max-width: ${Breaks.medium}) { - width: min-content; - } -`; - -const Description = styled.p` - margin: 1rem 0; - max-width: 520px; -`; - -export default function LibraryCard(props) { - return ( - - - - - - - AstroPlant Library - - - Documentation, tutorials, research, community highlights... Everything - you need to get started with AstroPlant ! - - - - ); -} diff --git a/components/cards/LibraryMediaCard.js b/components/cards/LibraryMediaCard.js index 75ecf10..79d122d 100644 --- a/components/cards/LibraryMediaCard.js +++ b/components/cards/LibraryMediaCard.js @@ -5,6 +5,7 @@ import AlbumIcon from "../../public/icons/album.svg"; import ArticleIcon from "../../public/icons/article.svg"; import LinkIcon from "../../public/icons/external-link.svg"; import FileIcon from "../../public/icons/file.svg"; +import Arrow from "../../public/icons/long-arrow.svg"; import TutorialIcon from "../../public/icons/tutorial.svg"; import Cover from "../Cover"; import Date from "../Date"; @@ -17,7 +18,6 @@ const Container = styled(Card)` padding: 0; } - display: flex; flex-direction: column; `; @@ -42,22 +42,23 @@ const FloatingIcon = styled(Icon)` border-radius: ${(props) => props.theme.radiusMax}; `; -const InfoHolder = styled.div` +const DetailsHolder = styled.div` display: flex; flex-direction: column; padding: 1rem; + + background-color: ${(props) => props.theme.textBackground}; `; const MediaTitle = styled.b` - max-height: 20px; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; - - font-size: 18px; - line-height: 20px; - white-space: nowrap; + word-break: break-word; `; const MediaDate = styled(Date)` @@ -65,6 +66,36 @@ const MediaDate = styled(Date)` margin-bottom: 0.5rem; `; +const ReadRow = styled.div` + display: flex; + align-items: center; + + width: 100%; + + margin-top: 0.25rem; +`; + +const ReadLabel = styled.label` + font-weight: bold; + font-size: 14px; + text-transform: uppercase; + + margin-right: auto; + + letter-spacing: 0.1em; + color: ${(props) => props.theme.secondary}; +`; + +const AnimatedArrow = styled(Icon)` + && { + margin: 0; + } + + ${Container}:hover & { + animation: cta-arrow 1s ease-in-out infinite; + } +`; + export default function LibraryMediaCard({ className, media }) { return ( } - + {media.title} - + + + {(media.type === "article" || media.type === "tutorial") && + "Read"} + {(media.type === "album" || + media.type === "files" || + media.type === "links") && + "View"} + + + + + + ); diff --git a/components/cards/LibrarySectionCard.js b/components/cards/LibrarySectionCard.js index 9d8ff9a..d7672a2 100644 --- a/components/cards/LibrarySectionCard.js +++ b/components/cards/LibrarySectionCard.js @@ -5,11 +5,11 @@ import WrapInLink from "../WrapInLink"; import Card from "./Card"; const Container = styled(Card)` + flex-direction: column; + align-items: center; + justify-content: center; + && { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; text-align: center; min-height: 340px; @@ -18,14 +18,14 @@ const Container = styled(Card)` const Subtitle = styled.b` color: ${(props) => props.theme.primary}; - margin: 0.25rem 0 0 0; + margin: 0.75rem 0 0 0; `; const Description = styled.p` width: 100%; max-width: 448px; - margin: 1rem 0; + margin: 1rem 0 0 0; `; export default function LibrarySectionCard({ diff --git a/components/cards/MapCard.js b/components/cards/MapCard.js index f624785..628fb25 100644 --- a/components/cards/MapCard.js +++ b/components/cards/MapCard.js @@ -5,7 +5,6 @@ import WrapInLink from "../WrapInLink"; import Card from "./Card"; const Container = styled(Card)` - display: flex; flex-direction: column; align-items: center; justify-content: flex-start; diff --git a/components/cards/NewsCard.js b/components/cards/NewsCard.js deleted file mode 100644 index 27d69ff..0000000 --- a/components/cards/NewsCard.js +++ /dev/null @@ -1,124 +0,0 @@ -import Link from "next/link"; -import PropTypes from "prop-types"; -import React from "react"; -import styled from "styled-components"; -import Breaks from "../../utils/breakpoints"; -import Button from "../Button"; -import Cover from "../Cover"; -import Card from "./Card"; - -const EmptyContainer = styled(Card)` - align-items: center; - justify-content: center; -`; - -const Container = styled(Card)` - && { - padding: 0; - height: unset; - } - - flex-direction: column; - align-items: flex-end; - justify-content: center; -`; - -const CoverHolder = styled(Cover)` - max-height: 188px; -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - - width: 100%; - - padding: 1.5rem; - - background-color: ${(props) => props.theme.darkLight}; -`; - -const Title = styled.b` - height: 1.5em; - - margin-bottom: 0.5rem; - - font-size: 18px; - line-height: 1.5em; - overflow: hidden; - text-overflow: ellipsis; -`; - -const Preview = styled.p` - margin-bottom: 0.5rem; - - max-height: 3em; - overflow: hidden; - text-overflow: ellipsis; -`; - -const ButtonRow = styled.div` - display: grid; - grid-gap: 1rem; - grid-template-columns: 1fr 1fr; - - width: 100%; - margin-top: 0.5rem; - - @media screen and (max-width: ${Breaks.small}) { - grid-template-columns: unset; - } -`; - -const ActionButton = styled(Button)` - && { - margin: 0; - width: 100%; - } -`; - -export default function NewsCard({ className, featuredArticle }) { - if (!featuredArticle) { - return ( - -

Whoops! Something went wrong...

- - ); - } - - return ( - - - - {featuredArticle.title} - {featuredArticle.preview} - - - - - - - - - - - - ); -} - -NewsCard.propTypes = { - /** - * Styling class of the container. Used by styled-components. - */ - className: PropTypes.string, - /** - * Object containing the featured article information - */ - featuredArticle: PropTypes.object.isRequired, -}; diff --git a/components/cards/ProfileCard.js b/components/cards/ProfileCard.js index c4bdb0e..45e13e4 100644 --- a/components/cards/ProfileCard.js +++ b/components/cards/ProfileCard.js @@ -13,7 +13,6 @@ import Modal from "../Modal"; import Card from "./Card"; const Container = styled(Card)` - display: flex; flex-direction: column; align-items: center; justify-content: center; diff --git a/components/grids/DashboardGrid.js b/components/grids/DashboardGrid.js index 3f06aec..ad29907 100644 --- a/components/grids/DashboardGrid.js +++ b/components/grids/DashboardGrid.js @@ -7,7 +7,7 @@ import Grid from "./Grid"; const GridContainer = styled(Grid)` && { grid-template-columns: repeat(12, 1fr); - grid-template-rows: 1fr 0.5fr 1fr; + grid-template-rows: 2fr 1fr 2fr; padding: 1rem 0; diff --git a/components/grids/ItemsGrid.js b/components/grids/ItemsGrid.js index 586ed49..05c529b 100644 --- a/components/grids/ItemsGrid.js +++ b/components/grids/ItemsGrid.js @@ -11,7 +11,6 @@ const EmptyGrid = styled.div` const GridContainer = styled(Grid)` && { grid-template-columns: repeat(${(props) => props.columns}, 1fr); - grid-template-rows: repeat(${(props) => props.columns}, 1fr); @media screen and (max-width: ${Breaks.large}) { grid-template-columns: repeat(2, 1fr); diff --git a/components/layouts/MainLayout.js b/components/layouts/MainLayout.js index 4ca298b..06c5cdc 100644 --- a/components/layouts/MainLayout.js +++ b/components/layouts/MainLayout.js @@ -1,36 +1,26 @@ import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; -import Breaks from "../../utils/breakpoints"; import Path from "../Path"; import PageLayout from "./PageLayout"; -const HeadRow = styled.div` +const PageContent = styled.div` display: flex; - align-items: center; - justify-content: flex-end; - - @media screen and (max-width: ${Breaks.medium}) { - flex-direction: column-reverse; - } -`; - -const PageTitle = styled.h2` - margin-right: auto; + flex-direction: column; `; -export default function MainLayout(props) { +export default function MainLayout({ + metaDescription, + metaTitle, + pageTitle, + children, +}) { return ( - + - - {props.pageTitle} - +

{pageTitle}

- {props.children} + {children} ); } diff --git a/components/layouts/PageLayout.js b/components/layouts/PageLayout.js index f1fb3ee..de3e1cc 100644 --- a/components/layouts/PageLayout.js +++ b/components/layouts/PageLayout.js @@ -13,7 +13,7 @@ const Content = styled.div` min-height: calc(100vh - ${(props) => props.theme.headerHeight}); margin: ${(props) => props.theme.headerHeight} auto 0 auto; - padding: 3.75rem 2rem 2rem 2rem; + padding: 0rem 2rem 2rem 2rem; max-width: ${(props) => (props.limitWidth ? "1920px" : "unset")}; diff --git a/components/posts/Post.js b/components/posts/Post.js index b325725..bec685d 100644 --- a/components/posts/Post.js +++ b/components/posts/Post.js @@ -17,7 +17,7 @@ const Container = styled.div` margin: 0 2rem 0 auto; padding: 0; - background-color: ${(props) => props.theme.darkLight}; + background-color: ${(props) => props.theme.textBackground}; border-radius: ${(props) => props.theme.radiusMax}; @media screen and (max-width: ${Breaks.large}) { diff --git a/components/posts/PostLayout.js b/components/posts/PostLayout.js index 215c024..d5825ab 100644 --- a/components/posts/PostLayout.js +++ b/components/posts/PostLayout.js @@ -8,7 +8,7 @@ import ArticleCard from "../cards/ArticleCard"; const Layout = styled.div` display: flex; - margin: 0 auto; + margin: 2rem auto 0 auto; @media screen and (max-width: ${Breaks.large}) { flex-direction: column; diff --git a/pages/index.js b/pages/index.js index 419432c..1b8f432 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,18 +1,28 @@ +import styled from "styled-components"; import ChallengeCard from "../components/cards/ChallengeCard"; +import DashboardLinkCard from "../components/cards/DashboardLinkCard"; import HelpCard from "../components/cards/HelpCard"; import KitCard from "../components/cards/KitCard"; -import LibraryCard from "../components/cards/LibraryCard"; import MapCard from "../components/cards/MapCard"; -import NewsCard from "../components/cards/NewsCard"; import DashboardGrid from "../components/grids/DashboardGrid"; import PageLayout from "../components/layouts/PageLayout"; import { getLoggedUser, useAuth } from "../providers/Auth"; +import NewsIcon from "../public/icons/campaign.svg"; import HelpIcon from "../public/icons/help.svg"; +import LibraryIcon from "../public/icons/library.svg"; import SlackIcon from "../public/icons/slack.svg"; -import { getFeaturedArticle } from "../services/community"; import { getFullKit, getUserMemberships } from "../services/data-api"; +import Breaks from "../utils/breakpoints"; -function Home({ featuredArticle, mainKit }) { +const WelcomeMessage = styled.h1` + margin: 4rem 0 0.25rem 0; + + @media screen and (max-width: ${Breaks.large}) { + margin: 1.5rem 0 0.25rem 0; + } +`; + +function Home({ mainKit }) { const { user, isLogged } = useAuth(); return ( @@ -22,14 +32,21 @@ function Home({ featuredArticle, mainKit }) { "AstroPlant platform. Grow with the community, manage your kits. Growing a new generation of urban and space farmers." } > -

+ Welcome {isLogged && ` ${user.firstName ? user.firstName : user.username}`}! -

+ - + } + title={"Astro' News"} + description={ + "The official blog of the astroplant core team! Everything you need to know about the project in one place." + } + /> } @@ -44,15 +61,20 @@ function Home({ featuredArticle, mainKit }) { href="http://astroplant.slack.com/" /> - + } + title={"AstroPlant Library"} + description={ + "Documentation, tutorials, research, community highlights... Everything you need to get started with AstroPlant !" + } + /> ); } export async function getServerSideProps(ctx) { - const featuredArticle = await getFeaturedArticle(); - let memberships = []; let mainKit = {}; @@ -66,7 +88,6 @@ export async function getServerSideProps(ctx) { return { props: { - featuredArticle: featuredArticle || null, mainKit: mainKit || null, }, }; diff --git a/public/icons/campaign.svg b/public/icons/campaign.svg new file mode 100644 index 0000000..b87ef60 --- /dev/null +++ b/public/icons/campaign.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/long-arrow.svg b/public/icons/long-arrow.svg new file mode 100644 index 0000000..09eb94d --- /dev/null +++ b/public/icons/long-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/services/community.js b/services/community.js index b0af884..fd8ebfc 100644 --- a/services/community.js +++ b/services/community.js @@ -197,29 +197,6 @@ export async function getArticles() { return res.data; } -/*** - * Fetches the latest article to be displayed on the home page - */ -export async function getFeaturedArticle() { - const query = `{ - articles( - where: { published: true } - sort: "published_at:desc" - limit: 1 - ) { - id - slug - title - preview - cover ${imageModel} - } - }`; - - const res = await getQuery(query); - - return res.data.articles[0]; -} - /*** * Fetches the first articles previews */ diff --git a/styles/global.js b/styles/global.js index 28882d6..38d8e43 100644 --- a/styles/global.js +++ b/styles/global.js @@ -80,6 +80,30 @@ export const GlobalStyle = createGlobalStyle` border-radius: ${(props) => props.theme.radiusMin}; } + @keyframes cta-arrow { + 0% { + transform: translatex(0px); + } + 50% { + transform: translatex(5px); + } + 100% { + transform: translatex(0px); + } + } + + @keyframes float { + 0% { + transform: translatey(0px); + } + 50% { + transform: translatey(-10px); + } + 100% { + transform: translatey(0px); + } + } + .custom-popup { top: -16px !important; left: -16px !important; @@ -115,12 +139,6 @@ export const GlobalStyle = createGlobalStyle` display: none; } - @media screen and (max-width: ${Breaks.medium}){ - p,b { - font-size: 14px; - } - } - @media screen and (max-width: ${Breaks.small}){ h1 { font-size: 2rem; diff --git a/styles/markdown.module.css b/styles/markdown.module.css index 29aa2eb..e42cae4 100644 --- a/styles/markdown.module.css +++ b/styles/markdown.module.css @@ -12,18 +12,20 @@ .md h5, .md h6 { color: #35ef7f; + font-weight: 500; + line-height: 1.5; } .md h1, .md h2 { - margin: 2rem 0 1rem 0; + margin: 4rem 0 1rem 0; } .md h3, .md h4, .md h5, .md h6 { - margin: 1rem 0; + margin: 2rem 0 0.5rem 0; } .md h1 { @@ -56,12 +58,14 @@ .md u, .md li { font-size: 1em; + font-weight: 300 !important; + line-height: 1.5; font-weight: 400; } .md p { - margin-bottom: 2em; + margin-bottom: 0.75rem; } .md a, @@ -70,7 +74,7 @@ } .md a { - color: #177fff; + color: #177fff !important; font-size: 1em; font-weight: 700; } @@ -89,7 +93,7 @@ .md blockquote, .md pre { - background-color: #292929; + background-color: #303030; } .md blockquote { diff --git a/styles/theme.js b/styles/theme.js index 17cc3f8..2433fde 100644 --- a/styles/theme.js +++ b/styles/theme.js @@ -8,6 +8,8 @@ const Theme = { grey: "#DEDEDE", greyDark: "#5A5A5A", + textBackground: "#252525", + dark: "#000", darkLight: "#1D1D1D", diff --git a/utils/useTabs.js b/utils/useTabs.js index 441dfe7..19a8bbb 100644 --- a/utils/useTabs.js +++ b/utils/useTabs.js @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; +import Breaks from "./breakpoints"; const TabsContainer = styled.div` display: flex; @@ -8,6 +9,11 @@ const TabsContainer = styled.div` width: 100%; margin: 0 0 1.5rem 0; + + @media screen and (max-width: ${Breaks.small}) { + flex-direction: column; + margin: 0 0 0.75rem 0; + } `; const Tab = styled.p` @@ -28,6 +34,10 @@ const Tab = styled.p` &:hover { color: ${(props) => props.theme.primary}; } + + @media screen and (max-width: ${Breaks.small}) { + margin: 0 1.5rem 0.25rem 0; + } `; /**