Updated README, hopefully fixed mobile design, refactored and refined desktop design
This commit is contained in:
parent
f5543cfae2
commit
1b42ad35cf
GPG key ID:
4DE1059A4666E89F
3 changed files with 62 additions and 63 deletions
40
README.md
40
README.md
|
|
@ -1,38 +1,45 @@
|
|||
# Welcome to [Astro](https://astro.build)
|
||||
# Welcome to Firqs FGO Site
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
This is build using [Astro](https://astro.build)
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── static/
|
||||
│ ├── favicon.svg
|
||||
│ └── other files ...
|
||||
│
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ │ ├── servantCard.astro
|
||||
│ │ ├── ceCard.astro
|
||||
│ │ ├── contactCard.astro
|
||||
│ │ └── taCard.astro
|
||||
│ │
|
||||
│ ├── layouts/
|
||||
│ │ ├── customFooter.astro
|
||||
│ │ ├── baseSection.astro
|
||||
│ │ ├── taSection.astro
|
||||
│ │ ├── contactSection.astro
|
||||
│ │ └── Layout.astro
|
||||
│ │
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
│
|
||||
├── .gitlab-ci.yml
|
||||
├── astro.config.mjs
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
More routes will follow soon
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
Any static assets, like images, can be placed in the `static/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
## 🧞 Astro-Specific Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
|
|
@ -45,6 +52,3 @@ All commands are run from the root of the project, from a terminal:
|
|||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
|
||||
| `npm run astro --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
|
|||
|
|
@ -16,11 +16,9 @@ if(mlb === "false") {
|
|||
---
|
||||
|
||||
<article>
|
||||
<div class="heading-center">
|
||||
<h1>{name}</h1>
|
||||
</div>
|
||||
<div class="heading-center">{name}</div>
|
||||
<div>
|
||||
<img class="ce-crop" src={ce_img} alt="A Fragment of 2030">
|
||||
<img class="ce-crop" src={ce_img} alt={name}>
|
||||
</div>
|
||||
<div class={mlb_image}>
|
||||
<img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/>
|
||||
|
|
@ -38,16 +36,15 @@ if(mlb === "false") {
|
|||
border-color: #1e1e1e;
|
||||
padding: 20px;
|
||||
padding-top: 5px;
|
||||
width: 7em;
|
||||
width: 35%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto 11em 3em;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto 3em;
|
||||
gap: 0px 0px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
|
|
@ -65,22 +62,20 @@ if(mlb === "false") {
|
|||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.heading-center {
|
||||
display: table;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.heading-center > h1 {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25em;
|
||||
color: white;
|
||||
width: 12rem;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ce-crop {
|
||||
|
|
@ -90,26 +85,30 @@ if(mlb === "false") {
|
|||
object-position: 0% 0%;
|
||||
}
|
||||
|
||||
@media (min-width: 512px) {
|
||||
.ce-crop {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
}
|
||||
article {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mlb {
|
||||
width: 60%;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mlbalign {
|
||||
width: 10em;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 512px) {
|
||||
.ce-crop {
|
||||
width: 7.5em;
|
||||
height: 7.5em;
|
||||
}
|
||||
article {
|
||||
width: 10em;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto 3em;
|
||||
}
|
||||
.mlbalign {
|
||||
width: 7.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,9 +22,7 @@ if(bond10 === "false") {
|
|||
---
|
||||
|
||||
<article>
|
||||
<div class="heading-center">
|
||||
<h1 class="servantname">{name}</h1>
|
||||
</div>
|
||||
<div class="heading">{name}</div>
|
||||
<img src={servant_img} alt={name}>
|
||||
<h2 class="subtext">
|
||||
Level {level}<br>
|
||||
|
|
@ -32,15 +30,22 @@ if(bond10 === "false") {
|
|||
NP {np}</h2>
|
||||
<div class="expand-on-hover">
|
||||
<img class={bondce_css} src={bondce_img} alt="">
|
||||
<h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br>}{ml}</h2>
|
||||
<h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.heading-center {
|
||||
display: table;
|
||||
.heading {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
height: 4.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
padding-bottom: 0.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.servants-container {
|
||||
|
|
@ -58,7 +63,7 @@ if(bond10 === "false") {
|
|||
background-color: rgb(27, 27, 27);
|
||||
border-color: #1e1e1e;
|
||||
padding: 0em 0.75em;
|
||||
width: auto;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
|
@ -91,15 +96,6 @@ if(bond10 === "false") {
|
|||
line-height: 20px;
|
||||
}
|
||||
|
||||
.servantname {
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
padding-bottom: 0.3rem;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.expand-on-hover {
|
||||
z-index: 99;
|
||||
transform: scaleY(0);
|
||||
|
|
|
|||
Loading…
Reference in a new issue