diff --git a/components/UpdatesPage/index.scss b/components/UpdatesPage/index.scss index 283a27e2..01ce3fd7 100644 --- a/components/UpdatesPage/index.scss +++ b/components/UpdatesPage/index.scss @@ -1,41 +1,48 @@ .Updates.PageContent { - .version { + padding-bottom: $unit-12x; + + .Version { display: flex; flex-direction: column; gap: $unit-2x; - &.content { - .top h3 { + h3, + li, + p { + } + + &.Content { + .Header h3 { color: var(--accent-yellow); } - .update { - display: flex; - flex-direction: column; - gap: $unit-2x; - } - - .characters, - .weapons, - .summons { + .Contents { display: grid; - grid-template-rows: 1fr auto; - gap: $unit; - - & > h4 { - font-weight: $medium; - font-size: $font-regular; - } - } - - .items { - display: grid; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr; gap: $unit-4x; + + .characters, + .weapons, + .summons { + display: grid; + grid-template-rows: auto 1fr; + gap: $unit; + + & > h4 { + font-weight: $medium; + font-size: $font-regular; + } + + .items { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: $unit-4x; + } + } } } - .top { + .Header { align-items: baseline; display: flex; gap: $unit-half; @@ -54,32 +61,56 @@ } } - .Notes { - display: grid; - grid-template-columns: repeat(3, minmax(200px, 1fr)); - gap: $unit-2x; + .Contents { + display: flex; + flex-direction: column; + gap: $unit-4x; - li { + &.Bare { display: flex; flex-direction: column; - gap: $unit; + color: var(--text-primary); + list-style-type: disc; + list-style-position: inside; + gap: $unit-half; - h3 { - font-weight: $bold; - font-size: $font-regular; - } - - img { - aspect-ratio: 4 / 3; - background: var(--dialog-bg); - border-radius: $input-corner; - display: block; - width: 100%; - } - - p { - color: var(--text-primary); + li { font-size: 14px; + } + } + + section { + display: flex; + flex-direction: column; + gap: $unit-2x; + + h2 { + margin: 0; + } + } + + .Notes { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: $unit-2x; + + li { + display: flex; + flex-direction: column; + gap: $unit; + + h3 { + font-weight: $bold; + margin-top: $unit-half; + } + + img { + aspect-ratio: 4 / 3; + background: var(--dialog-bg); + border-radius: $input-corner; + display: block; + width: 100%; + } code { background: var(--button-bg); @@ -91,29 +122,14 @@ } } } - } - .Bugs { - display: flex; - flex-direction: column; - list-style-type: disc; - list-style-position: inside; - gap: $unit; - - li { - font-size: $font-regular; + .Bugs { + display: flex; + flex-direction: column; + list-style-type: disc; + gap: $unit-half; + padding-left: $unit-2x; } } } - - .notes { - color: var(--text-primary); - list-style-type: disc; - list-style-position: inside; - - li { - margin-bottom: $unit-half; - font-size: $font-regular; - } - } } diff --git a/components/UpdatesPage/index.tsx b/components/UpdatesPage/index.tsx index 87aadcf3..434006d3 100644 --- a/components/UpdatesPage/index.tsx +++ b/components/UpdatesPage/index.tsx @@ -32,151 +32,170 @@ const UpdatesPage: React.FC = (props: Props) => { return (

{common('about.segmented_control.updates')}

-
-
+
+

1.1.0

-
-

New features

-
    -
  • - {image( - 'Remix parties', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'remix', - 'jpg' - )} -

    Remix parties

    -

    - See a team you want to try but don't have Yatima? Now you - can remix teams from other users to showcase substitutes, swap - for items you have, or just give it your own flavor. -

    -
    • -
  • - {image( - 'Transcendence', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'transcendence', - 'jpg' - )} -

    Transcendence

    -

    - Now you can set the transcendence stage for Eternals and select - summons (namely, Bahamut). -

    -
    • -
  • - {image( - 'Shields and Manatura', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'accessories', - 'jpg' - )} -

    Shields and Manatura

    -

    - When using Paladin or Manadiver, you can set their respective - Shield or Manatura from the button next to the main character. -

    -
    • -
  • - {image( - 'Character Mastery', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'mastery', - 'jpg' - )} -

    Character Mastery

    -

    - You can now add individual values for your character's - rings, earrings, and awakenings. Make sure to set your - Perpetuity Rings! -

    -
    • -
  • - {image( - 'Updated team mechanics', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'mechanics', - 'jpg' - )} -

    Updated team mechanics

    -

    Sorry, each party is only big enough for one Beelzebub.

    -
    • -
  • - {image( - 'R Characters', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'rare', - 'jpg' - )} -

    R Characters

    -

    - R Characters have been added to the database for your - mem—Proving Grounds compositions. -

    -
    • -
  • - {image( - 'Unique URLs for team tabs', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'urls', - 'jpg' - )} -

    Unique URLs for team tabs

    -

    - You can now link to individual tabs directly. The site will do - it for you when you copy a URL, or you can append{' '} - /characters, /weapons or{' '} - /summons manually. -

    -
    • -
  • - {image( - 'Redesigned navigation', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'nav', - 'jpg' - )} -

    Redesigned navigation

    -

    - The top-navigation has been slightly redesigned. Click the party - name to copy its URL! -

    -
    • -
  • - {image( - 'Update toasts', - `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, - 'toasts', - 'jpg' - )} -

    Update toasts

    -

    - The site will now show an update in the bottom-right corner when - new features or content is added. -

    -
    • -
-
-
-

Bug fixes

-
    -
  • - Fixed a bug that caused users to be logged out whenever they - restarted their browser -
    • -
  • Fixed a bug that caused Dark Opus weapons to disappear
    • -
-
+
+
+

New features

+
    +
  • + {image( + 'Remix parties', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'remix', + 'jpg' + )} +

    Remix parties

    +

    + See a team you want to try but don't have Yatima? Now you + can remix teams from other users to showcase substitutes, swap + for items you have, or just give it your own flavor. +

    +
    • +
  • + {image( + 'Edit parties without an account', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'unauth', + 'jpg' + )} +

    No account editing

    +

    + Now you can edit parties you create later on, even if you + don't make an account. You still won't have a + profile, so make sure to bookmark them! +

    +
    • +
  • + {image( + 'Transcendence', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'transcendence', + 'jpg' + )} +

    Transcendence

    +

    + Now you can set the transcendence stage for Eternals and + select summons (namely, Bahamut). +

    +
    • +
  • + {image( + 'Shields and Manatura', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'accessories', + 'jpg' + )} +

    Shields and Manatura

    +

    + When using Paladin or Manadiver, you can set their respective + Shield or Manatura from the button next to the main character. +

    +
    • +
  • + {image( + 'Character Mastery', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'mastery', + 'jpg' + )} +

    Character Mastery

    +

    + You can now add individual values for your character's + rings, earrings, and awakenings. Make sure to set your + Perpetuity Rings! +

    +
    • +
  • + {image( + 'Updated team mechanics', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'mechanics', + 'jpg' + )} +

    Updated team mechanics

    +

    Sorry, each party is only big enough for one Beelzebub.

    +
    • +
  • + {image( + 'R Characters', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'rare', + 'jpg' + )} +

    R Characters

    +

    + R Characters have been added to the database for your + mem—Proving Grounds compositions. +

    +
    • +
  • + {image( + 'Unique URLs for team tabs', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'urls', + 'jpg' + )} +

    Unique URLs for team tabs

    +

    + You can now link to individual tabs directly. The site will do + it for you when you copy a URL, or you can append{' '} + /characters, /weapons or{' '} + /summons manually. +

    +
    • +
  • + {image( + 'Redesigned navigation', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'nav', + 'jpg' + )} +

    Redesigned navigation

    +

    + The top-navigation has been slightly redesigned. Click the + party name to copy its URL! +

    +
    • +
  • + {image( + 'Update toasts', + `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, + 'toasts', + 'jpg' + )} +

    Update toasts

    +

    + The site will now show an update in the bottom-right corner + when new features or content is added. +

    +
    • +
+
+
+

Bug fixes

+
    +
  • + Fixed a bug that caused users to be logged out whenever they + restarted their browser +
    • +
  • + Fixed a bug that caused Dark Opus weapons to permanently + disappear when adding them to a party that already had one +
    • +
+
+
-
-
+
+

2023-01 Flash Gala

-
+

New characters

@@ -205,12 +224,12 @@ const UpdatesPage: React.FC = (props: Props) => {
-
-
+
+

2023-01 Uncap

-
+

Updated characters

@@ -224,24 +243,24 @@ const UpdatesPage: React.FC = (props: Props) => {
-
-
+
+

1.0.1

-
    +
    • Extra party fields: Full Auto, Clear Time, and more
    • Support for Youtube short URLs
    • Responsive grids and lots of other mobile fixes
    • Many other bug fixes
-
-
+
+

2022-12 Legend Festival

-
+

New characters

@@ -278,12 +297,12 @@ const UpdatesPage: React.FC = (props: Props) => {
-
-
+
+

2022-12 Flash Gala

-
+

New characters

@@ -312,12 +331,12 @@ const UpdatesPage: React.FC = (props: Props) => {
-
-
+
+

1.0.0

-
    +
    • First release!
    • You can embed Youtube videos now
    • Better clicking - right-click and open in a new tab
      • diff --git a/styles/globals.scss b/styles/globals.scss index b4b59dfb..7913fe5c 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -138,15 +138,11 @@ select { margin-bottom: $unit * 3; } - p { - color: var(--text-secondary); - font-size: $font-regular; + p, + li { + color: var(--text-primary); + font-size: 14px; line-height: 1.3; - margin-bottom: $unit; - - &:last-of-type { - margin-bottom: 0; - } } .LinkItem {