From 152f22ee27bdc5b519436e92a63557f7a05473d9 Mon Sep 17 00:00:00 2001 From: roryjshelton <76418221+roryjshelton@users.noreply.github.com> Date: Sat, 6 May 2023 18:35:54 +0200 Subject: [PATCH] grid fix --- src/components/.DS_Store | Bin 8196 -> 8196 bytes src/components/P1/.DS_Store | Bin 6148 -> 6148 bytes .../P1/Footer/1 Footer.astro.BACKUP | 63 +++++++++ .../P1/Footer/1 FooterStyles.css.BACKUP.css | 68 +++++++++ src/components/P1/Footer/Footer.astro | 132 ++++++++++-------- src/components/P1/Footer/FooterStyles.css | 111 ++++++++------- src/components/P1/Grid/Grid.astro | 26 +++- src/components/P1/Grid/GridStyles.css | 62 ++------ src/components/P1/Message/MessageStyles.css | 3 +- 9 files changed, 300 insertions(+), 165 deletions(-) create mode 100644 src/components/P1/Footer/1 Footer.astro.BACKUP create mode 100644 src/components/P1/Footer/1 FooterStyles.css.BACKUP.css diff --git a/src/components/.DS_Store b/src/components/.DS_Store index 7bff693e55580766e743fefdc24b7c2964af5792..a3056f9d446a4d6bb7d7afefaf338d675023f633 100644 GIT binary patch delta 20 bcmZp1XmQwJD8R@u*+?Lok#lpOKp8&(KBNVc delta 20 bcmZp1XmQwJD8R@**+?Lokz;e8Kp8&(K9U8I diff --git a/src/components/P1/.DS_Store b/src/components/P1/.DS_Store index d0a219367303dacab831958f1ef4bb6e53266332..e1ab0cf1595152775592dbaa4d985cb163ea9328 100644 GIT binary patch delta 108 zcmZoMXfc=|#>B)qu~2NHo}wr-0|Nsi1A_nqLn=d2S#VKaPJUkcW=5vvjItmpHU>9_ sd>|}AmIi6r%)@w}bu&8$KL^k(p!)C3lles~IeB`mu~2NHo}wrd0|Nsi1A_oVQh9MfQcivnkiTPM;qu7_A}pJ=neMP| jY>;8x%+A5j0o1cukoi0FWPTA#4xlQKHm1!1B3qaNTjmo@ diff --git a/src/components/P1/Footer/1 Footer.astro.BACKUP b/src/components/P1/Footer/1 Footer.astro.BACKUP new file mode 100644 index 0000000..23740f0 --- /dev/null +++ b/src/components/P1/Footer/1 Footer.astro.BACKUP @@ -0,0 +1,63 @@ +--- +import React from "react"; +import Grid from "dynamic-react-grid"; +import "./FooterStyles.css"; +--- + +
+
+ + +
+ +
    +
  • + contact@lumeweb.com +
    • +
  • + Freedom, privacy,
    ownership.     +
    • +
+
+ + +
General

+
  • Home
    • +
  • Get Started
    • +
  • Documentation
    • +
  • Projects
    • +
    +     + +
    Community

    +
  • GitHub
    • +
  • Discord
    • +
  • Twitter
    • +
  • facebook
    • +
    +     + +
    Other

    +
  • BrowserUniversal
    • +
  • Storage
    • +
    +     + +
    Other

    +
  • BrowserUniversal
    • +
  • Storage
    • +
    +     + +
    Support Us

    +
  • Donate
    • +
  • Download App
    • +
  • Partnerships
    • +
    +     +     +
    +
    diff --git a/src/components/P1/Footer/1 FooterStyles.css.BACKUP.css b/src/components/P1/Footer/1 FooterStyles.css.BACKUP.css new file mode 100644 index 0000000..e582807 --- /dev/null +++ b/src/components/P1/Footer/1 FooterStyles.css.BACKUP.css @@ -0,0 +1,68 @@ +.footer-logo { + background-image: url('../../../assets/lume-logo.webp'); + background-repeat: no-repeat; + background-size: contain; + margin-left: 5px; + height: 55px; + min-width: 150px; + display: inline-block; + text-align: left; + margin-inline: 5px; + margin-top: 3vh; + z-index: 998 !important; +} + +.footer-email { + background-image: url('../../../assets/email-icon.webp'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + padding-inline: 10px; + margin-inline: 10px; + height: 14px; + object-fit: cover; + width: 17px; +} + +.footer-column { + justify-content: center; + background-color: black; + list-style-type: none; + align-items: flex-start; + vertical-align: center; + padding-inline: 1%; + padding-left: 5%; +} + +.footer-container { + display: flex; + flex-direction: row; +} + +.footer-padding { + display: inline-block; + text-align: left; + font-family: var(--font-family-jaldi); + font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300))); + margin-inline: 5px; + margin-top: 5vh; +} + +.footer-li { + color: #808687; + font-family: var(--font-family-jaldi); + font-size: calc(10px + (21 - 10) * ((100vw - 300px) / (1600 - 300))); + font-weight: 100; + font-style: normal; + padding-left: 0; + line-height: 1px; + margin-inline: 5px; +} + +.footer-h2 { + font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300))); + color: var(--aquamarine); + line-height: 1vh; + z-index: 999; + +} \ No newline at end of file diff --git a/src/components/P1/Footer/Footer.astro b/src/components/P1/Footer/Footer.astro index 23740f0..bfb1db8 100644 --- a/src/components/P1/Footer/Footer.astro +++ b/src/components/P1/Footer/Footer.astro @@ -1,63 +1,81 @@ --- -import React from "react"; -import Grid from "dynamic-react-grid"; import "./FooterStyles.css"; --- -
    -
    - - -
    - -
      -
    • - contact@lumeweb.com -
      • -
    • - Freedom, privacy,
      ownership.       -
      • -
    -
    -     - -
    General

    -
  • Home
    • -
  • Get Started
    • -
  • Documentation
    • -
  • Projects
    • -
    -     - -
    Community

    -
  • GitHub
    • -
  • Discord
    • -
  • Twitter
    • -
  • facebook
    • -
    -     - -
    Other

    -
  • BrowserUniversal
    • -
  • Storage
    • -
    -     - -
    Other

    -
  • BrowserUniversal
    • -
  • Storage
    • -
    -     - -
    Support Us

    -
  • Donate
    • -
  • Download App
    • -
  • Partnerships
    • -
    -     -     +
    +
    +
    + +
      +
    • + contact@lumeweb.com +
      • + Freedom, privacy,
      ownership.       +
      +
    +
    +
    +
    +
    + General +

    +
  • Home
    • +
  • Get Started
    • +
  • Documentation
    • +
  • Projects
    • +
    +
    +
    +
    + Community +

    +
  • GitHub
    • +
  • Discord
    • +
  • Twitter
    • +
  • facebook
    • +
    +
    +
    +
    + Ecosystem +

    +
  • Browser
    • +
  • Extension
    • +
  • Universal Storage
    • +
    +
    +
    +
    + Other +

    +
  • BrowserUniversal
    • +
  • Storage
    • +
    +
    +
    +
    + Support Us +

    +
  • Donate
    • +
  • Download App
    • +
  • Partnerships
    • +
    diff --git a/src/components/P1/Footer/FooterStyles.css b/src/components/P1/Footer/FooterStyles.css index e582807..98ca5db 100644 --- a/src/components/P1/Footer/FooterStyles.css +++ b/src/components/P1/Footer/FooterStyles.css @@ -1,51 +1,6 @@ -.footer-logo { - background-image: url('../../../assets/lume-logo.webp'); - background-repeat: no-repeat; - background-size: contain; - margin-left: 5px; - height: 55px; - min-width: 150px; - display: inline-block; - text-align: left; - margin-inline: 5px; - margin-top: 3vh; - z-index: 998 !important; -} - -.footer-email { - background-image: url('../../../assets/email-icon.webp'); - background-repeat: no-repeat; - background-size: contain; - background-position: center; - padding-inline: 10px; - margin-inline: 10px; - height: 14px; - object-fit: cover; - width: 17px; -} - -.footer-column { - justify-content: center; - background-color: black; - list-style-type: none; - align-items: flex-start; - vertical-align: center; - padding-inline: 1%; - padding-left: 5%; -} - -.footer-container { - display: flex; - flex-direction: row; -} - -.footer-padding { - display: inline-block; - text-align: left; - font-family: var(--font-family-jaldi); - font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300))); - margin-inline: 5px; - margin-top: 5vh; +.footer-card { + height: auto; + background-color: #020E10; } .footer-li { @@ -57,12 +12,70 @@ padding-left: 0; line-height: 1px; margin-inline: 5px; + list-style-type: none; +} + +.footer-cards { + margin: 0 auto; + display: grid; + gap: 1rem; + padding: 5% 11.5%; + background-color: #020E10; + height: auto; +} + +@media (min-width: 600px) { + .footer-cards { + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + } +} + +@media (min-width: 900px) { + .footer-cards { + grid-template-columns: repeat(6, 1fr); + } +} + +.footer-logo { + background-image: url(../../../assets/lume-logo.webp); + background-repeat: no-repeat; + background-size: contain; + height: 55px; + min-width: 100px; + display: inline-block; + text-align: left; + z-index: 998 !important; +} + +.footer-email { + background-image: url(../../../assets/email-icon.webp); + background-repeat: no-repeat; + background-size: contain; + background-position: left; + padding-inline: 10px; + height: 14px; + object-fit: cover; + width: 17px; } .footer-h2 { - font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300))); + font-size: calc(15px + (20 - 10) * ((100vw - 300px) / (1600 - 300))); color: var(--aquamarine); line-height: 1vh; z-index: 999; + margin-top: 5em; +} +.footer-padding { + display: inline-block; + text-align: left; + font-family: var(--font-family-jaldi); + font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300))); + margin-inline: -5px; + margin-top: 5vh; +} + +.footer-span { + margin-top: 1em; } \ No newline at end of file diff --git a/src/components/P1/Grid/Grid.astro b/src/components/P1/Grid/Grid.astro index 1cd516f..22b4aaf 100644 --- a/src/components/P1/Grid/Grid.astro +++ b/src/components/P1/Grid/Grid.astro @@ -2,8 +2,10 @@ import "./GridStyles.css"; --- -
    -
    +
    +
    @@ -15,7 +17,9 @@ import "./GridStyles.css"; cloud. Enjoy portability to any device or platform you wish.
    -
    +
    @@ -27,7 +31,9 @@ import "./GridStyles.css"; Web3 internet on Opera, Vivaldi, Edge, and Firefox.
    -
    +
    @@ -39,7 +45,9 @@ import "./GridStyles.css"; like you are on the Web2 internet.
    -
    +
    @@ -51,7 +59,9 @@ import "./GridStyles.css"; cloud. Enjoy portability to any device or platform you wish.
    -
    +
    @@ -63,7 +73,9 @@ import "./GridStyles.css"; Web3 internet on Opera, Vivaldi, Edge, and Firefox.
    -
    +
    diff --git a/src/components/P1/Grid/GridStyles.css b/src/components/P1/Grid/GridStyles.css index 66b8c60..5e52d1b 100644 --- a/src/components/P1/Grid/GridStyles.css +++ b/src/components/P1/Grid/GridStyles.css @@ -1,56 +1,18 @@ -.grid-grid { +.cards { + max-width: 1200px; + margin: 10vh auto; display: grid; - grid: - "top-left top-mid top-right" 5% "bot-left bot-mid bot-right" 5% / 25% 25% 25%; - gap: 44.5% 0.5%; - margin-block: 15vh; - grid-auto-flow: row; - justify-content: center; - align-content: center; - justify-items: center; - align-items: center; + gap: 1rem; } -.top-left { - grid-area: top-left; - padding: 30px; +@media (width >=600px) { + .cards { + grid-template-columns: repeat(2, 1fr); + } } -.top-mid { - grid-area: top-mid; - padding: 30px; -} - -.top-right { - grid-area: top-right; - padding: 30px; -} - -.bot-left { - grid-area: bot-left; - padding: 30px; -} - -.bot-mid { - grid-area: bot-mid; - padding: 30px; -} - -.bot-right { - grid-area: bot-right; - padding: 30px; -} - -.bordered { - border: 2px solid transparent; - border-radius: 5px; - background-color: var(--blue-charcoal); - transition: 0.3s; - margin: 0.5em; -} - -.bordered:hover { - border: 2px solid var(--aquamarine); - border-radius: 5px; - transition: 0.1s; +@media (width >=900px) { + .cards { + grid-template-columns: repeat(3, 1fr); + } } \ No newline at end of file diff --git a/src/components/P1/Message/MessageStyles.css b/src/components/P1/Message/MessageStyles.css index 98a59c7..a451276 100644 --- a/src/components/P1/Message/MessageStyles.css +++ b/src/components/P1/Message/MessageStyles.css @@ -6,8 +6,7 @@ gap: 7px; min-height: 237px; padding: 5% 12%; - width: 120%; - margin-left: -1em; + width: 100%; } .message-header {