Merge fix
This commit is contained in:
parent
9584987150
commit
a2ee3564bc
GPG key ID:
3ACC61C8CEC83C20
26 changed files with 1125 additions and 1039 deletions
|
|
@ -1,71 +1,71 @@
|
|||
---
|
||||
export interface Props {
|
||||
url: string | undefined;
|
||||
title: string;
|
||||
pubdate: string;
|
||||
description: string;
|
||||
url: string | undefined
|
||||
title: string
|
||||
pubdate: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const options_date: Intl.DateTimeFormatOptions = {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "2-digit",
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit',
|
||||
}
|
||||
const { description, pubdate, url, title } = Astro.props;
|
||||
const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
|
||||
const { description, pubdate, url, title } = Astro.props
|
||||
const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
|
||||
---
|
||||
|
||||
<a href={url} rel="noopener noreferrer">
|
||||
<article>
|
||||
<h2>{title}</h2>
|
||||
<h3>{date}</h3>
|
||||
<p>{description}</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>{title}</h2>
|
||||
<h3>{date}</h3>
|
||||
<p>{description}</p>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
height: auto;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
padding: 0em 0.5em;
|
||||
text-align: left;
|
||||
font-size: 1.1em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
article>h2 {
|
||||
margin: 0.3em 0px;
|
||||
color: var(--c-darkpurple);
|
||||
font-size: 1.3em;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
article>h3 {
|
||||
margin: 0.2em;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: baseline;
|
||||
background-color: var(--c-darkergray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
min-height: 100%;
|
||||
width: 11rem;
|
||||
}
|
||||
a:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
</style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
height: auto;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
padding: 0em 0.5em;
|
||||
text-align: left;
|
||||
font-size: 1.1em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
article > h2 {
|
||||
margin: 0.3em 0px;
|
||||
color: var(--c-darkpurple);
|
||||
font-size: 1.3em;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
article > h3 {
|
||||
margin: 0.2em;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: baseline;
|
||||
background-color: var(--c-darkergray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
min-height: 100%;
|
||||
width: 11rem;
|
||||
}
|
||||
a:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,115 +1,115 @@
|
|||
---
|
||||
export interface Props {
|
||||
name: string;
|
||||
link: string;
|
||||
mlb: string;
|
||||
name: string
|
||||
link: string
|
||||
mlb: string
|
||||
}
|
||||
|
||||
const {mlb, link, name } = Astro.props;
|
||||
const { mlb, link, name } = Astro.props
|
||||
|
||||
const ce_img: string = `/ce/${link}.webp`;
|
||||
const ce_img: string = `/ce/${link}.webp`
|
||||
const mlb_ce: string = `/ce/mlb.webp`
|
||||
let mlb_image: string = "mlbalign";
|
||||
let mlb_image: string = 'mlbalign'
|
||||
|
||||
if(mlb === "false") {
|
||||
mlb_image = "hidemlb";
|
||||
if (mlb === 'false') {
|
||||
mlb_image = 'hidemlb'
|
||||
}
|
||||
---
|
||||
|
||||
<article>
|
||||
<div class="heading-center">{name}</div>
|
||||
<div>
|
||||
<img class="ce-crop" src={ce_img} alt={name}>
|
||||
</div>
|
||||
<div class={mlb_image}>
|
||||
<img class="mlb" src={mlb_ce} alt="Max-limit broken"/>
|
||||
</div>
|
||||
<div class="heading-center">{name}</div>
|
||||
<div>
|
||||
<img class="ce-crop" src={ce_img} alt={name} />
|
||||
</div>
|
||||
<div class={mlb_image}>
|
||||
<img class="mlb" src={mlb_ce} alt="Max-limit broken" />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.hidemlb {
|
||||
display: none;
|
||||
height: 1em;
|
||||
}
|
||||
.hidemlb {
|
||||
display: none;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 20px;
|
||||
padding-top: 5px;
|
||||
width: 35%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
margin: 0px;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto 3em;
|
||||
gap: 0px 0px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"."
|
||||
"."
|
||||
".";
|
||||
}
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 20px;
|
||||
padding-top: 5px;
|
||||
width: 35%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
margin: 0px;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto 3em;
|
||||
gap: 0px 0px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
'.'
|
||||
'.'
|
||||
'.';
|
||||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
article div {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
img {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
img {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.heading-center {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.heading-center {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ce-crop {
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
object-fit: cover;
|
||||
object-position: 0% 0%;
|
||||
}
|
||||
|
||||
.mlb {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mlbalign {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 512px) {
|
||||
.ce-crop {
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
object-fit: cover;
|
||||
object-position: 0% 0%;
|
||||
width: 7.5em;
|
||||
height: 7.5em;
|
||||
}
|
||||
|
||||
.mlb {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
article {
|
||||
width: 10em;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto auto 3em;
|
||||
}
|
||||
|
||||
.mlbalign {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 7.5em;
|
||||
}
|
||||
|
||||
@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>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
---
|
||||
export interface Props {
|
||||
site: string;
|
||||
link: string;
|
||||
site: string
|
||||
link: string
|
||||
}
|
||||
|
||||
const { link, site } = Astro.props;
|
||||
const { link, site } = Astro.props
|
||||
---
|
||||
|
||||
<a href={link} target="_blank" rel="noopener noreferrer">
|
||||
<article class="contact do-hover">
|
||||
<h2>{site}</h2>
|
||||
</article>
|
||||
<article class="contact do-hover">
|
||||
<h2>{site}</h2>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
article>h2 {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: normal;
|
||||
}
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
line-height: 128px;
|
||||
}
|
||||
a:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
</style>
|
||||
article > h2 {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: normal;
|
||||
}
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
line-height: 128px;
|
||||
}
|
||||
a:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,90 +1,89 @@
|
|||
---
|
||||
export interface Props {
|
||||
name: string;
|
||||
origin: string;
|
||||
image: string;
|
||||
name: string
|
||||
origin: string
|
||||
image: string
|
||||
}
|
||||
|
||||
const {image, origin, name } = Astro.props;
|
||||
|
||||
const img: string = `/favourites/${image}.webp`;
|
||||
const { image, origin, name } = Astro.props
|
||||
|
||||
const img: string = `/favourites/${image}.webp`
|
||||
---
|
||||
|
||||
<article>
|
||||
<div class="heading">{name}</div>
|
||||
<img src={img} alt={name}>
|
||||
<h2 class="subtext">
|
||||
{origin}
|
||||
</h2>
|
||||
<div class="heading">{name}</div>
|
||||
<img src={img} alt={name} />
|
||||
<h2 class="subtext">
|
||||
{origin}
|
||||
</h2>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.heading {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
padding-bottom: 0.3rem;
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.heading {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
padding-bottom: 0.3rem;
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.servants-container {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
align-content: center;
|
||||
}
|
||||
.servants-container {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 0em 0.75em;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
}
|
||||
|
||||
article > img {
|
||||
padding: 0.25em;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 512px) {
|
||||
article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 0em 0.75em;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
padding: 10px 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article>img {
|
||||
padding: 0.25em;
|
||||
width:120px;
|
||||
height:auto;
|
||||
article > img {
|
||||
padding: 1.5em;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 512px) {
|
||||
article {
|
||||
padding: 10px 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article>img {
|
||||
padding: 1.5em;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.subtext {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
.subtext {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<div>
|
||||
This is still a work in progress and continuously expanded. Feel free to look around.
|
||||
<slot />
|
||||
This is still a work in progress and continuously expanded. Feel free to look
|
||||
around.
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 5em;
|
||||
background-color: var(--c-gray);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 5em;
|
||||
background-color: var(--c-gray);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,126 +2,126 @@
|
|||
---
|
||||
|
||||
<header>
|
||||
<a href="/" rel="noopener noreferrer" aria-label="Home">
|
||||
<img src="/logo.svg" alt="">
|
||||
</a>
|
||||
<ul class="desktop">
|
||||
<slot />
|
||||
<a href="/" rel="noopener noreferrer" aria-label="Home">
|
||||
<img src="/logo.svg" alt="" />
|
||||
</a>
|
||||
<ul class="desktop">
|
||||
<slot />
|
||||
</ul>
|
||||
<button class="mobile" aria-label="Navigation Button">
|
||||
<ul>
|
||||
<slot />
|
||||
</ul>
|
||||
<button class="mobile" aria-label="Navigation Button">
|
||||
<ul>
|
||||
<slot />
|
||||
</ul>
|
||||
<div class="placeholder"></div>
|
||||
<i class="iconoir-menu"></i>
|
||||
</button>
|
||||
<div class="placeholder"></div>
|
||||
<i class="iconoir-menu"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
background-color: var(--c-darkgray);
|
||||
display: flex;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
header > a {
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
display: block;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
a > img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
header {
|
||||
background-color: var(--c-darkgray);
|
||||
display: flex;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
header > a {
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
display: block;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
a > img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.desktop {
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 0.5ch;
|
||||
margin: 0px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.mobile > ul {
|
||||
background-color: var(--c-darkgray);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: flex;
|
||||
background-color: var(--c-darkgray);
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mobile > i {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
align-self: flex-start;
|
||||
padding-right: 1em;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.mobile > ul {
|
||||
display: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mobile:focus-within > ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mobile:focus-within > .placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile:focus-within {
|
||||
justify-content: top;
|
||||
height: auto;
|
||||
}
|
||||
header:focus-within > a {
|
||||
display: flex;
|
||||
justify-self: top;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
.desktop {
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 0.5ch;
|
||||
margin: 0px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.mobile > ul {
|
||||
background-color: var(--c-darkgray);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
line-height: 3em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
header {
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display:flex;
|
||||
background-color: var(--c-darkgray);
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
header > a {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.mobile > i {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
align-self: flex-start;
|
||||
padding-right: 1em;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.mobile > ul {
|
||||
display: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mobile:focus-within > ul{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mobile:focus-within > .placeholder{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile:focus-within {
|
||||
justify-content: top;
|
||||
height: auto;
|
||||
}
|
||||
header:focus-within > a {
|
||||
display: flex;
|
||||
justify-self: top;
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.mobile {
|
||||
display:none;
|
||||
}
|
||||
.desktop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header > a {
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,58 @@
|
|||
---
|
||||
export interface Props {
|
||||
currentPage?: string;
|
||||
link: string;
|
||||
text: string;
|
||||
icon: string;
|
||||
currentPage?: string
|
||||
link: string
|
||||
text: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const {icon, text, link, currentPage } = Astro.props;
|
||||
const { icon, text, link, currentPage } = Astro.props
|
||||
|
||||
let currPage = "";
|
||||
const slug = link.replace(new RegExp('/', 'g'), "")
|
||||
let currPage = ''
|
||||
const slug = link.replace(new RegExp('/', 'g'), '')
|
||||
|
||||
if (currentPage === slug) {
|
||||
currPage = "current"
|
||||
} else if (currentPage === "home" && link === "/") {
|
||||
currPage = "current"
|
||||
currPage = 'current'
|
||||
} else if (currentPage === 'home' && link === '/') {
|
||||
currPage = 'current'
|
||||
}
|
||||
|
||||
const fulllink = `/${slug}`;
|
||||
const fulllink = `/${slug}`
|
||||
---
|
||||
|
||||
<li>
|
||||
<a href={fulllink} rel="noopener noreferrer" aria-label={text} class={currPage}>
|
||||
<i class={icon}></i>
|
||||
{text}
|
||||
</a>
|
||||
<a
|
||||
href={fulllink}
|
||||
rel="noopener noreferrer"
|
||||
aria-label={text}
|
||||
class={currPage}
|
||||
>
|
||||
<i class={icon}></i>
|
||||
{text}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
li {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
li > a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.4em;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
li > a:hover{
|
||||
color: var(--c-purplepink);
|
||||
}
|
||||
.current {
|
||||
color: var(--c-darkpurple);
|
||||
}
|
||||
</style>
|
||||
li {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
li > a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.4em;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
li > a:hover {
|
||||
color: var(--c-purplepink);
|
||||
}
|
||||
.current {
|
||||
color: var(--c-darkpurple);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,128 +1,130 @@
|
|||
---
|
||||
export interface Props {
|
||||
name: string;
|
||||
level: string;
|
||||
skills: string;
|
||||
np: string;
|
||||
image_servant: string;
|
||||
image_bond: string;
|
||||
ml: string;
|
||||
bond10: string;
|
||||
name: string
|
||||
level: string
|
||||
skills: string
|
||||
np: string
|
||||
image_servant: string
|
||||
image_bond: string
|
||||
ml: string
|
||||
bond10: string
|
||||
}
|
||||
|
||||
const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
|
||||
const { bond10, ml, image_bond, image_servant, np, skills, level, name } =
|
||||
Astro.props
|
||||
|
||||
const servant_img: string = `/servant/${image_servant}.webp`;
|
||||
const servant_img: string = `/servant/${image_servant}.webp`
|
||||
const bondce_img: string = `/ce/bond-ce/${image_bond}.webp`
|
||||
let bondce_css: string = "bond-ce";
|
||||
let bondce_css: string = 'bond-ce'
|
||||
|
||||
if(bond10 === "false") {
|
||||
bondce_css += " unobtained"
|
||||
if (bond10 === 'false') {
|
||||
bondce_css += ' unobtained'
|
||||
}
|
||||
---
|
||||
|
||||
<article>
|
||||
<div class="heading">{name}</div>
|
||||
<img src={servant_img} alt={name}>
|
||||
<h2 class="subtext">
|
||||
Level {level}<br>
|
||||
{skills}<br>
|
||||
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>
|
||||
</div>
|
||||
<div class="heading">{name}</div>
|
||||
<img src={servant_img} alt={name} />
|
||||
<h2 class="subtext">
|
||||
Level {level}<br />
|
||||
{skills}<br />
|
||||
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>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.heading {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
padding-bottom: 0.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.heading {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
padding-bottom: 0.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.servants-container {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
.servants-container {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 0em 0.75em;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
}
|
||||
|
||||
article > img {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 512px) {
|
||||
article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 0em 0.75em;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
padding: 10px 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article>img {
|
||||
width:120px;
|
||||
height:auto;
|
||||
article > img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 512px) {
|
||||
article {
|
||||
padding: 10px 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.subtext {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
article>img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.expand-on-hover {
|
||||
z-index: 99;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
position: absolute;
|
||||
top: 95%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
}
|
||||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-duskgray);
|
||||
}
|
||||
|
||||
.expand-on-hover {
|
||||
z-index: 99;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
position: absolute;
|
||||
top: 95%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
.bond-ce {
|
||||
padding-top: 0.75rem;
|
||||
height: 3rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-duskgray);
|
||||
}
|
||||
|
||||
.bond-ce {
|
||||
padding-top: 0.75rem;
|
||||
height: 3rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.unobtained {
|
||||
filter: grayscale(1)
|
||||
}
|
||||
</style>
|
||||
.unobtained {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
link: string;
|
||||
image: string;
|
||||
title: string
|
||||
link: string
|
||||
image: string
|
||||
}
|
||||
|
||||
const { image, link, title } = Astro.props;
|
||||
const { image, link, title } = Astro.props
|
||||
|
||||
const icon: string = `background: url('/ta_icons/${image}.webp')`
|
||||
---
|
||||
|
||||
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||
<article>
|
||||
<div style={icon}>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div style={icon}>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
article {
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
|
|
@ -27,18 +28,18 @@ article {
|
|||
height: auto;
|
||||
width: auto;
|
||||
line-height: 128px;
|
||||
}
|
||||
article:hover {
|
||||
}
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
article > div {
|
||||
}
|
||||
article > div {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
object-fit: cover;
|
||||
object-position: 0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
article:hover h2 {
|
||||
article:hover h2 {
|
||||
color: white;
|
||||
background-color: var(--c-darkgray);
|
||||
font-size: 18px;
|
||||
|
|
@ -48,9 +49,9 @@ article:hover h2 {
|
|||
width: 90%;
|
||||
border-radius: 5px;
|
||||
opacity: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
article h2 {
|
||||
article h2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
link: string;
|
||||
image: string;
|
||||
title: string
|
||||
link: string
|
||||
image: string
|
||||
}
|
||||
|
||||
const { image, link, title } = Astro.props;
|
||||
const { image, link, title } = Astro.props
|
||||
|
||||
const icon: string = `background-image: url('/technologies/${image}.webp')`
|
||||
---
|
||||
|
||||
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||
<article>
|
||||
<div style={icon}>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div style={icon}>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
article {
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
|
|
@ -27,17 +28,17 @@ article {
|
|||
height: auto;
|
||||
width: auto;
|
||||
line-height: 100px;
|
||||
}
|
||||
article:hover {
|
||||
}
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
article > div {
|
||||
}
|
||||
article > div {
|
||||
background-size: contain;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
article:hover h2 {
|
||||
article:hover h2 {
|
||||
color: white;
|
||||
background-color: var(--c-darkgray);
|
||||
font-size: 18px;
|
||||
|
|
@ -47,9 +48,9 @@ article:hover h2 {
|
|||
width: 95%;
|
||||
border-radius: 5px;
|
||||
opacity: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
article h2 {
|
||||
article h2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue