granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust hero position, fix typos, add styles

Browse source
This commit is contained in:
Justin Edmund 2023-01-31 17:47:39 -08:00
parent 607a10bfae
commit a2c81de751
5 changed files with 88 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
components/AboutPage/index.scss
View file

@ -7,27 +7,62 @@
flex-direction: column;
position: relative;
gap: $unit-2x;
z-index: 5;
.Hero {
position: absolute;
width: 40vw;
height: 80vh;
right: $unit-8x * -1;
right: -18vw;
top: $unit-4x * -1;
z-index: 1;
background-image: linear-gradient(
90deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 50%,
rgba(245, 245, 245, 0) 70%,
rgba(245, 245, 245, 1) 100%
rgba(245, 245, 245, 1) 5%,
rgba(245, 245, 245, 0.2) 50%,
rgba(245, 245, 245, 0.2) 70%,
rgba(245, 245, 245, 1) 95%
),
linear-gradient(
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 40%,
rgba(245, 245, 245, 0) 78%,
rgba(245, 245, 245, 1) 100%
rgba(245, 245, 245, 1) 5%,
rgba(245, 245, 245, 0.4) 40%,
rgba(245, 245, 245, 0.4) 78%,
rgba(245, 245, 245, 1) 95%
),
url('https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/top/bg/bg_23.jpg');
@include breakpoint(tablet) {
right: -14vw;
width: 60vw;
}
@include breakpoint(phone) {
right: $unit-2x * -1;
width: 80vw;
&::before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 50%,
rgba(245, 245, 245, 0) 70%,
rgba(245, 245, 245, 1) 95%
),
linear-gradient(
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 40%,
rgba(245, 245, 245, 0) 78%,
rgba(245, 245, 245, 1) 95%
);
z-index: 3;
}
}
}
p {
@ -56,7 +91,6 @@
}
.LinkItem {
background: var(--dialog-bg);
max-width: calc($width / 3 * 2);
}
}

15
components/AboutPage/index.tsx
View file

@ -50,7 +50,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
enjoying the tool and want to say thanks, come hang out in Discord.
</p>
<p>Feedback and suggestions are greatly appreciated!</p>
<div className="LinkItem">
<div className="Discord LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<a
href="https://discord.gg/qyZ5hGdPC8"
@ -109,7 +109,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
Fireplace
</a>{' '}
and the granblue-tools Discord for all of their help with with bug
testing, feature requests, and more support. (P.S. We&apos;re
testing, feature requests, and moral support. (P.S. We&apos;re
recruiting!)
</p>
</section>
@ -117,8 +117,13 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<section>
<h2>Contributing</h2>
<p>
If you know how to program, this app is completely open-source.
There&apos;s an abundance of features to build and bugs to fix, so
help is always greatly appreciated!
</p>
<ul className="Links">
<li className="LinkItem">
<li className="Github LinkItem">
<Link href="https://github.com/jedmund/hensei-api">
<a
href="https://github.com/jedmund/hensei-api"
@ -133,7 +138,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
</a>
</Link>
</li>
<li className="LinkItem">
<li className="Github LinkItem">
<Link href="https://github.com/jedmund/hensei-web">
<a
href="https://github.com/jedmund/hensei-web"
@ -153,7 +158,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<section>
<h2>License</h2>
<p>
This app is open source and licensed under{' '}
This app is licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"

9
components/RoadmapPage/index.scss
View file

@ -29,10 +29,12 @@
p {
margin-bottom: $unit;
font-size: $font-medium;
}
.LinkItem {
$diameter: $unit-6x;
background: var(--dialog-bg);
border: 1px solid var(--link-item-bg);
border-radius: $card-corner;
@ -78,13 +80,6 @@
}
}
p {
color: var(--text-secondary);
font-size: $font-regular;
line-height: 1.3;
}
ul {
color: var(--text-primary);
list-style-type: none;

2
components/UpdatesPage/index.tsx
View file

@ -62,7 +62,7 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
'unauth',
'jpg'
)}
<h3>No account editing</h3>
<h3>Accountless team editing</h3>
<p>
Now you can edit parties you create later on, even if you
don&apos;t make an account. You still won&apos;t have a

34
styles/globals.scss
View file

@ -147,20 +147,47 @@ select {
.LinkItem {
$diameter: $unit-6x;
align-items: center;
background: var(--dialog-bg);
border: 1px solid var(--link-item-bg);
border-radius: $card-corner;
display: flex;
min-height: 82px;
transition: background $duration-zoom ease-in,
transform $duration-zoom ease-in;
&:hover {
background-color: var(--link-item-bg);
background: var(--link-item-bg);
color: var(--text-primary);
svg {
fill: var(--link-item-image-color-hover);
.ShareIcon {
fill: var(--text-primary);
transform: translate($unit-half, calc(($unit * -1) / 2));
}
}
&.Github {
.Left svg {
background: white;
border-radius: calc($diameter / 2);
}
&:hover {
.Left svg {
fill: #6e5494;
}
}
}
&.Discord:hover .Left svg {
fill: #5865f2;
}
a {
display: flex;
justify-content: space-between;
padding: $unit-2x;
width: 100%;
&:hover {
text-decoration: none;
@ -183,6 +210,7 @@ select {
fill: var(--link-item-image-color);
width: $diameter;
height: auto;
transition: fill $duration-zoom ease-in;
&.ShareIcon {
width: $unit-4x;