From 8675aeb2a055fc476ab65e3ab87c85168a691080 Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 29 May 2022 00:03:18 +0200 Subject: [PATCH 1/2] responsive index page --- components/Footer/Footer.tsx | 7 +++++-- pages/index.tsx | 32 +++++++++++++++++++++++++++++++- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx index 34252af..4660510 100644 --- a/components/Footer/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -14,7 +14,7 @@ export default function Footer(props) {
  • - Privacy + Privacy
  • @@ -34,7 +34,6 @@ export default function Footer(props) { const FooterWrapper: any = styled.div` position: relative; - font-size: 14px; display: flex; margin: auto; justify-content: center; @@ -42,6 +41,10 @@ const FooterWrapper: any = styled.div` margin-top: ${(props: any) => (props.home ? "8%" : "2%")}; padding-bottom: ${(props: any) => (props.home ? "0%" : "3%")}; + @media (max-width: 768px) { + font-size: 10px; + } + ul { margin: 0; display: flex; diff --git a/pages/index.tsx b/pages/index.tsx index eb1152b..ff1911c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -27,7 +27,7 @@ export default function Home() {
    {" "} - {" "} Beta + {" "} Beta Internet's git time machine @@ -57,6 +57,15 @@ const LogoBox = styled.div` align-items: center; padding-top: 90px; + + img { + height: 70px; + + @media (max-width: 768px) { + height: 30px; + } + } + span{ font-size: 7px; text-transform: uppercase; @@ -74,6 +83,10 @@ const DescriptionBox = styled.div` img { width: 30%; + + @media (max-width: 768px) { + width: 50%; + } } `; @@ -106,11 +119,28 @@ const SearchBox = styled.input` color: white; transition: all 0.3s ease-in-out; + @media (max-width: 768px) { + width: 250px; + margin-top: 10px; + font-size: 9px; + height: 31px; + + + } + &:focus { outline: none; width: 700px; font-size: 16px; + @media (max-width: 768px) { + width: 270px; + font-size: 10px; + height: 31px; + + + } + ::placeholder { color: rgba(255, 255, 255, 0.33); } From 6ba0ae05d995ffb519de6b04a4d58574b590dbf6 Mon Sep 17 00:00:00 2001 From: swve Date: Sat, 4 Jun 2022 11:19:14 +0200 Subject: [PATCH 2/2] adapt to mobile devices --- components/Dialog/Dialog.tsx | 7 +++- components/Header/Header.tsx | 15 +++++++-- pages/404.tsx | 33 ++++++++++++------- pages/about.tsx | 29 ++++++++++++---- pages/calendar/[[...slug]].tsx | 60 ++++++++++++++++++++++++++++++++++ pages/commits/[[...slug]].tsx | 17 +++++++++- pages/index.tsx | 23 +++++-------- pages/privacy.tsx | 9 +++-- pages/repo-not-found.tsx | 10 ++++++ styles/globals.css | 2 +- 10 files changed, 165 insertions(+), 40 deletions(-) diff --git a/components/Dialog/Dialog.tsx b/components/Dialog/Dialog.tsx index 7377ccc..5a872c6 100644 --- a/components/Dialog/Dialog.tsx +++ b/components/Dialog/Dialog.tsx @@ -10,7 +10,7 @@ function Dialog(props) { You've reached the GitHub Public API limitation

    GitStory uses the GitHub Public API which have a usage rate limitation for non-authenticated users, you've just reached that limit.

    -

    Please consider sign in using your GitHub account to be able to continue using GitStory, or wait for 1 hour.

    +

    Please consider sign in using your GitHub account to be able to continue using GitStory, or please wait for 1 hour.

    Privacy Policy @@ -59,6 +59,11 @@ const DialogBox = styled.div` box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); z-index: 100; + + @media (max-width: 768px) { + width: 300px; + height: 410px; + } p { font-size: 14px; color: #ffffffad; diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 973c4d7..bb47554 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -59,7 +59,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p saveGitHubSessionToCookie(); if (props.disable_api_usage_check) { //setOpenApiPopup(true); - }else{ + } else { checkApiUsage(); } @@ -182,7 +182,12 @@ const SessionWrapper = styled.div` margin-right: 20px; } `; -const RightWrapper = styled.div``; +const RightWrapper = styled.div` + @media (max-width: 768px) { + margin: auto; + margin-bottom: 30px; + } +`; // CSS const HeaderWrapper: any = styled.div` display: flex; @@ -190,6 +195,12 @@ const HeaderWrapper: any = styled.div` padding-left: ${(props: any) => (props.withPaddings === true ? 130 : 0)}px; padding-right: ${(props: any) => (props.withPaddings === true ? 130 : 0)}px; padding-top: ${(props: any) => (props.withPaddings === true ? 30 : 0)}px; + + @media (max-width: 768px) { + flex-direction: column-reverse; + padding-left: ${(props: any) => (props.withPaddings === true ? 60 : 0)}px; + padding-right: ${(props: any) => (props.withPaddings === true ? 60 : 0)}px; + } `; const LeftWrapper: any = styled.div` diff --git a/pages/404.tsx b/pages/404.tsx index e21597f..65cd7d2 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -6,13 +6,13 @@ import styled from "styled-components"; function Error(props) { return ( <> - -
    -

    404

    -

    Page Not found

    - -     -
    + +
    +

    404

    +

    Page Not found

    +     +
    + ); } @@ -26,10 +26,19 @@ const GradientHeader = styled.div` background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%); - - h1 { - padding-top: 20px; - font-size: 45px; - } + @media (max-width: 768px) { + padding-left: 60px; + padding-right: 60px; + } + + h1 { + padding-top: 20px; + font-size: 45px; + } + + // media query for mobile + @media (max-width: 1500px) { + height: 650px; + } `; diff --git a/pages/about.tsx b/pages/about.tsx index 17c18d9..07a8fb6 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -41,7 +41,6 @@ function About() { by

    -
    @@ -111,6 +110,11 @@ const AboutElements = styled.div` justify-content: space-between; margin-left: 120px; margin-right: 120px; + + @media (max-width: 768px) { + margin-left: 60px; + margin-right: 60px; + } flex-wrap: wrap; `; @@ -127,8 +131,15 @@ const AboutWrapper = styled.div` margin: auto; padding-top: 20px; font-size: 45px; - line-height: 46px; - letter-spacing: -2px; + line-height: 42px; + letter-spacing: -1.2px; + + @media (max-width: 768px) { + width: 90%; + line-height: 25px; + font-weight: bolder; + font-size: 25px !important; + } } `; @@ -136,6 +147,11 @@ const GradientHeader = styled.div` height: 820px; padding-left: 130px; padding-right: 130px; + @media (max-width: 768px) { + padding-left: 60px; + padding-right: 60px; + } + padding-top: 30px; background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%), @@ -147,9 +163,8 @@ const GradientHeader = styled.div` } // media query for mobile - @media (max-width: 1500px) { - - height: 1650px; - } + @media (max-width: 1500px) { + height: 1650px; + } `; export default About; diff --git a/pages/calendar/[[...slug]].tsx b/pages/calendar/[[...slug]].tsx index fc633c2..637a50b 100644 --- a/pages/calendar/[[...slug]].tsx +++ b/pages/calendar/[[...slug]].tsx @@ -96,6 +96,31 @@ export default function Repo() { ); })} + + +
    @@ -113,18 +138,53 @@ const GradientHeader = styled.div` linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%); //background: linear-gradient(180deg, #13161a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(243.33deg, #280b7d 5.62%, #245aaa 74.42%, #0dd1dd 127.92%); + + @media (max-width: 768px) { + padding-left: 60px; + padding-right: 60px; + } `; const RepoBar = styled.div` padding-top: 40px; font-size: 40px; font-weight: bold; + + @media (max-width: 768px) { + text-align: center; + font-size: 30px; + } `; const Years = styled.div` padding-top: 30px; display: flex; flex-wrap: wrap; + @media (max-width: 768px) { + display: none; + } +`; + +const MobileYears = styled.div` + padding-top: 30px; + margin: auto; + display: none; + + select { + width: 100%; + background-color: #12161aba; + padding: 10px; + border-radius: 5px; + border: none; + text-align: center; + color: white; + box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%); + } + + @media (max-width: 768px) { + text-align: center; + display: flex; + } `; const YearBox: any = styled.div` diff --git a/pages/commits/[[...slug]].tsx b/pages/commits/[[...slug]].tsx index d9a0e7c..95b7460 100644 --- a/pages/commits/[[...slug]].tsx +++ b/pages/commits/[[...slug]].tsx @@ -138,7 +138,7 @@ export default function Repo() { {console.log(commit)} - + @@ -168,6 +168,10 @@ const ListOfCommitsBox = styled.div` width: 85%; top: -150px; + + @media (max-width: 768px) { + top: -50px; + } position: relative; display: flex; flex-direction: row; @@ -190,6 +194,11 @@ const GradientHeader = styled.div` padding-right: 130px; padding-top: 30px; + @media (max-width: 768px) { + padding-left: 60px; + padding-right: 60px; + } + background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%); @@ -250,6 +259,12 @@ const CommitRightGlobal = styled.div` a { margin-left: 20px; } + + svg{ + background-color: #10131b8f; + padding: 5px; + border-radius: 3px; + } `; const CommitLeftTopInfo = styled.div` font-size: 19px; diff --git a/pages/index.tsx b/pages/index.tsx index ff1911c..3c51e23 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -27,7 +27,7 @@ export default function Home() {
    {" "} - {" "} Beta + Beta Internet's git time machine @@ -57,7 +57,6 @@ const LogoBox = styled.div` align-items: center; padding-top: 90px; - img { height: 70px; @@ -66,11 +65,11 @@ const LogoBox = styled.div` } } - span{ + span { font-size: 7px; text-transform: uppercase; font-weight: bold; - opacity: 0.20; + opacity: 0.2; letter-spacing: 0.5px; } `; @@ -124,8 +123,6 @@ const SearchBox = styled.input` margin-top: 10px; font-size: 9px; height: 31px; - - } &:focus { @@ -134,16 +131,14 @@ const SearchBox = styled.input` font-size: 16px; @media (max-width: 768px) { - width: 270px; - font-size: 10px; - height: 31px; - - - } + width: 270px; + font-size: 10px; + height: 31px; + } ::placeholder { - color: rgba(255, 255, 255, 0.33); - } + color: rgba(255, 255, 255, 0.33); + } } ::placeholder { diff --git a/pages/privacy.tsx b/pages/privacy.tsx index 411f938..d9a1746 100644 --- a/pages/privacy.tsx +++ b/pages/privacy.tsx @@ -13,8 +13,8 @@ function Privacy() {

    GitHub account

    GitStory uses your account to generate a token on your behalf that is used to get data from the GitHub API

    - GitStory Connect's only purpose is to generate a token to allow you to make requests on the GitHubAPI without limitations, the following - permissions required are: + GitStory Connect's only purpose is to generate a token to allow you to make requests on the GitHubAPI without limitations, the following permissions + required are:

    • @@ -138,6 +138,11 @@ const GradientHeader = styled.div` padding-left: 130px; padding-right: 130px; padding-top: 30px; + + @media (max-width: 768px) { + padding-left: 60px; + padding-right: 60px; + } background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%); diff --git a/pages/repo-not-found.tsx b/pages/repo-not-found.tsx index bdf1195..a8b26cd 100644 --- a/pages/repo-not-found.tsx +++ b/pages/repo-not-found.tsx @@ -31,8 +31,18 @@ const GradientHeader = styled.div` linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%); + @media (max-width: 768px) { + padding-left: 60px; + padding-right: 60px; + } + h1 { padding-top: 20px; font-size: 45px; } + + // media query for mobile + @media (max-width: 1500px) { + height: 650px; + } `; diff --git a/styles/globals.css b/styles/globals.css index 44a8b55..62ab11f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap"); html, body {