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>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,76 @@
|
|||
---
|
||||
import Navbar from '../components/navbar.astro';
|
||||
import NavbarEntry from '../components/navbarEntry.astro';
|
||||
import Navbar from '../components/navbar.astro'
|
||||
import NavbarEntry from '../components/navbarEntry.astro'
|
||||
import navdata from '../../static/_navdata.json'
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
currentpage: string;
|
||||
descriptionOverride?: string;
|
||||
title: string
|
||||
currentpage: string
|
||||
descriptionOverride?: string
|
||||
}
|
||||
|
||||
const { descriptionOverride, currentpage, title } = Astro.props;
|
||||
let description;
|
||||
const { descriptionOverride, currentpage, title } = Astro.props
|
||||
let description
|
||||
|
||||
if(descriptionOverride === undefined) {
|
||||
description = "Firqs own site!";
|
||||
if (descriptionOverride === undefined) {
|
||||
description = 'Firqs own site!'
|
||||
} else {
|
||||
description = descriptionOverride;
|
||||
description = descriptionOverride
|
||||
}
|
||||
|
||||
let currPage = "https://firq.dev/"
|
||||
if (currentpage !== "home") {
|
||||
currPage += currentpage;
|
||||
let currPage = 'https://firq.dev/'
|
||||
if (currentpage !== 'home') {
|
||||
currPage += currentpage
|
||||
}
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/ico" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:url" content={currPage} />
|
||||
<meta name="description" content={description}/>
|
||||
<meta property="og:description" content={description}/>
|
||||
<meta property="og:image" content="https://firq.dev/embed.png" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<title>{title}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css">
|
||||
</head>
|
||||
<body>
|
||||
<Navbar>
|
||||
{navdata.map((item) => (<NavbarEntry currentPage={currentpage} {...item}/>))}
|
||||
</Navbar>
|
||||
<slot />
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/ico" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:url" content={currPage} />
|
||||
<meta name="description" content={description} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content="https://firq.dev/embed.png" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<title>{title}</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<Navbar>
|
||||
{
|
||||
navdata.map((item) => (
|
||||
<NavbarEntry currentPage={currentpage} {...item} />
|
||||
))
|
||||
}
|
||||
</Navbar>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--hover-scale: 1.05;
|
||||
--speed: 50%;
|
||||
--ease: 50%;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
--c-darkgray: #1e1e1e;
|
||||
--c-duskgray: #242424;
|
||||
--c-gray: #2e2e2e;
|
||||
--c-lightgray: #3e3e3e;
|
||||
--c-darkpurple: #b86cff;
|
||||
--c-purplepink: #c105ff;
|
||||
--c-darkergray: #1b1b1b;
|
||||
}
|
||||
body {
|
||||
background: var(--c-lightgray);
|
||||
margin: 0px;
|
||||
}
|
||||
:root {
|
||||
--hover-scale: 1.05;
|
||||
--speed: 50%;
|
||||
--ease: 50%;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
--c-darkgray: #1e1e1e;
|
||||
--c-duskgray: #242424;
|
||||
--c-gray: #2e2e2e;
|
||||
--c-lightgray: #3e3e3e;
|
||||
--c-darkpurple: #b86cff;
|
||||
--c-purplepink: #c105ff;
|
||||
--c-darkergray: #1b1b1b;
|
||||
}
|
||||
body {
|
||||
background: var(--c-lightgray);
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
div > div {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
}
|
||||
div > h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
div > div {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
}
|
||||
div > h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
row-gap: 1.5em;
|
||||
column-gap: 1.5em;
|
||||
}
|
||||
@media(min-width: 512px) {
|
||||
div {
|
||||
row-gap: 1.5em;
|
||||
column-gap: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,40 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<section>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
div {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
justify-content: left;
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,86 @@
|
|||
---
|
||||
import Layout from "./Layout.astro";
|
||||
const { frontmatter } = Astro.props;
|
||||
import Layout from './Layout.astro'
|
||||
const { frontmatter } = Astro.props
|
||||
|
||||
const title = `${frontmatter.title} - Firq FGO Site`;
|
||||
const description = frontmatter.description;
|
||||
const title = `${frontmatter.title} - Firq FGO Site`
|
||||
const description = frontmatter.description
|
||||
const options_date: Intl.DateTimeFormatOptions = {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "2-digit",
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit',
|
||||
}
|
||||
const date = new Date(frontmatter.pubDate).toLocaleDateString('en-GB', options_date);
|
||||
const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||
'en-GB',
|
||||
options_date
|
||||
)
|
||||
---
|
||||
|
||||
<Layout title={title} currentpage="blog" descriptionOverride={description}>
|
||||
<div>
|
||||
<h1>
|
||||
{frontmatter.title}
|
||||
</h1>
|
||||
<p>by {frontmatter.author} • Published on {date}</p>
|
||||
<article>
|
||||
<slot />
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<h1>
|
||||
{frontmatter.title}
|
||||
</h1>
|
||||
<p>by {frontmatter.author} • Published on {date}</p>
|
||||
<article>
|
||||
<slot />
|
||||
</article>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
max-width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-gray);
|
||||
}
|
||||
article :global(h2) {
|
||||
margin-right: 3rem;
|
||||
word-wrap: normal;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
max-width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
article :global(a) {
|
||||
color: var(--c-darkpurple);
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
color: white;
|
||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||
font-size: 1.1em;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
article :global(.astro-code) {
|
||||
width: auto;
|
||||
padding: 1rem 1rem 1rem 2rem;
|
||||
}
|
||||
article :global(code) {
|
||||
font-weight: bold;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
article {
|
||||
margin-left: 15rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
max-width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
margin-left: 15rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-gray);
|
||||
}
|
||||
article :global(h2) {
|
||||
margin-right: 3rem;
|
||||
word-wrap: normal;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
max-width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
article :global(a) {
|
||||
color: var(--c-darkpurple);
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
color: white;
|
||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||
font-size: 1.1em;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
article :global(.astro-code) {
|
||||
padding-left: 2em;
|
||||
width: auto;
|
||||
}
|
||||
article :global(code) {
|
||||
font-weight: bold;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
article {
|
||||
margin-left: 15rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
h1 {
|
||||
margin-left: 15rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
p {
|
||||
margin-left: 15rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
margin-left: 15rem;
|
||||
margin-right: 15rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,41 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<section>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
align-self: center;
|
||||
align-items: stretch;
|
||||
justify-content: space-around;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
align-self: center;
|
||||
align-items: stretch;
|
||||
justify-content: space-around;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
justify-content: left;
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<section>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
div {
|
||||
}
|
||||
div {
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
|
|
@ -28,10 +29,10 @@ div {
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
justify-content: left;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,92 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
“Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
|
||||
use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the
|
||||
official website</a> for more information.<br>
|
||||
I am in no way affiliated with Fate/Grand Order, Aniplex, Type Moon or Lasengle. I claim no ownership of any of the assets used that are
|
||||
created by any of the mentioned companies.<br>
|
||||
All of the opinions expressed are my own and may not reflect those of the asset providers.
|
||||
<div>
|
||||
“Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex
|
||||
Inc. used under fair use. | View <a
|
||||
class="linker"
|
||||
href="https://fate-go.us"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">the official website</a
|
||||
> for more information.<br />
|
||||
I am in no way affiliated with Fate/Grand Order, Aniplex, Type Moon or Lasengle.
|
||||
I claim no ownership of any of the assets used that are created by any of the
|
||||
mentioned companies.<br />
|
||||
All of the opinions expressed are my own and may not reflect those of the asset
|
||||
providers.
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
Thanks to <a
|
||||
href=" https://atlasacademy.io/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Atlas Academy</a
|
||||
> for providing the servant and ce images.
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
Thanks to <a
|
||||
href="https://mitsunee.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Mitsunee</a
|
||||
> for the support when building this site. I could not have done it without you
|
||||
🧡 Check out <a
|
||||
href="https://fgo.mitsunee.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">FGO Timers here</a
|
||||
>
|
||||
<div class="sticky-image-wrapper">
|
||||
<img src="/lurker.png" alt="" />
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
Thanks to <a href=" https://atlasacademy.io/" target="_blank" rel="noopener noreferrer">Atlas Academy</a> for
|
||||
providing the servant and ce images.
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
Thanks to <a href="https://mitsunee.com" target="_blank" rel="noopener noreferrer">Mitsunee</a> for the support when building this site. I could not have done it without you 🧡
|
||||
Check out <a href="https://fgo.mitsunee.com" target="_blank" rel="noopener noreferrer">FGO Timers here</a>
|
||||
<div class="sticky-image-wrapper">
|
||||
<img src="/lurker.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
Thanks to <a href="https://mastodon.neshweb.net/@neshura" target="_blank" rel="noopener noreferrer">Neshura</a> for providing me with a place to develop, store and host this site.
|
||||
Check out <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer">his site here</a>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
Thanks to <a href="https://twitter.com/its_Anthony_J" target="_blank" rel="noopener noreferrer">AnthonyJ</a> for providing me with the custom Shishou favicon.
|
||||
<div class="sticky-image-wrapper">
|
||||
<img src="/padoru.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
Thanks to <a
|
||||
href="https://mastodon.neshweb.net/@neshura"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Neshura</a
|
||||
> for providing me with a place to develop, store and host this site. Check out
|
||||
<a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer"
|
||||
>his site here</a
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
Thanks to <a
|
||||
href="https://twitter.com/its_Anthony_J"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">AnthonyJ</a
|
||||
> for providing me with the custom Shishou favicon.
|
||||
<div class="sticky-image-wrapper">
|
||||
<img src="/padoru.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
color: white;
|
||||
bottom:0;
|
||||
}
|
||||
footer > div > a {
|
||||
color: white
|
||||
}
|
||||
.sticky-image-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
}
|
||||
:hover>.sticky-image-wrapper>img {
|
||||
transform: translate(-50%, -100px);
|
||||
}
|
||||
.sticky-image-wrapper>img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
transition: transform 1s ease-in-out;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
footer {
|
||||
color: white;
|
||||
bottom: 0;
|
||||
}
|
||||
footer > div > a {
|
||||
color: white;
|
||||
}
|
||||
.sticky-image-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
}
|
||||
:hover > .sticky-image-wrapper > img {
|
||||
transform: translate(-50%, -100px);
|
||||
}
|
||||
.sticky-image-wrapper > img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
transition: transform 1s ease-in-out;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<div class="wrap">
|
||||
<div>
|
||||
<span>FIRQ FGO SITE</span>
|
||||
<slot />
|
||||
</div>
|
||||
<div>
|
||||
<span>FIRQ FGO SITE</span>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrap {
|
||||
display: block;
|
||||
}
|
||||
.wrap > div {
|
||||
display: flex;
|
||||
padding: 15% 20%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.1em;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 5em;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
</style>
|
||||
.wrap {
|
||||
display: block;
|
||||
}
|
||||
.wrap > div {
|
||||
display: flex;
|
||||
padding: 15% 20%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.1em;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 5em;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,50 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
abovetext?: string;
|
||||
title: string
|
||||
abovetext?: string
|
||||
}
|
||||
|
||||
const { abovetext, title } = Astro.props;
|
||||
let h2text;
|
||||
const { abovetext, title } = Astro.props
|
||||
let h2text
|
||||
if (abovetext === undefined) {
|
||||
h2text = "The full list of my completed TAs can be found on my Youtube channel."
|
||||
h2text =
|
||||
'The full list of my completed TAs can be found on my Youtube channel.'
|
||||
} else {
|
||||
h2text = ""
|
||||
h2text = ''
|
||||
}
|
||||
---
|
||||
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<h2>{h2text}</h2>
|
||||
<div class="container ta-container">
|
||||
<slot />
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<h2>{h2text}</h2>
|
||||
<div class="container ta-container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div > div {
|
||||
row-gap: 1.5em;
|
||||
column-gap: 1.5em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
h2 {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
div > div {
|
||||
row-gap: 1.5em;
|
||||
column-gap: 1.5em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: max-content;
|
||||
background-color: var(--c-darkgray);
|
||||
}
|
||||
h2 {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,54 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import BasicSection from '../layouts/basicSection.astro';
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import BasicSection from '../layouts/basicSection.astro'
|
||||
|
||||
import ContactSection from '../layouts/contactSection.astro';
|
||||
import ContactCard from '../components/contactCard.astro';
|
||||
import ContactSection from '../layouts/contactSection.astro'
|
||||
import ContactCard from '../components/contactCard.astro'
|
||||
import contactdata from '../../static/_contactdata.json'
|
||||
|
||||
import CustomFooter from '../layouts/customFooter.astro';
|
||||
import TechnologyCard from '../components/technologyCard.astro';
|
||||
import CustomFooter from '../layouts/customFooter.astro'
|
||||
import TechnologyCard from '../components/technologyCard.astro'
|
||||
|
||||
const techologydata = [{
|
||||
"title": "Astro",
|
||||
"link": "https://astro.build",
|
||||
"image": "astro"
|
||||
},
|
||||
{
|
||||
"title": "GitLab",
|
||||
"link": "https://gitlab.io",
|
||||
"image": "gitlab"
|
||||
},
|
||||
{
|
||||
"title": "Typescript",
|
||||
"link": "https://www.typescriptlang.org/",
|
||||
"image": "typescript"
|
||||
},]
|
||||
const techologydata = [
|
||||
{
|
||||
title: 'Astro',
|
||||
link: 'https://astro.build',
|
||||
image: 'astro',
|
||||
},
|
||||
{
|
||||
title: 'GitLab',
|
||||
link: 'https://gitlab.io',
|
||||
image: 'gitlab',
|
||||
},
|
||||
{
|
||||
title: 'Typescript',
|
||||
link: 'https://www.typescriptlang.org/',
|
||||
image: 'typescript',
|
||||
},
|
||||
]
|
||||
|
||||
const description = "A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me.";
|
||||
const description =
|
||||
"A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me."
|
||||
---
|
||||
|
||||
<Layout title="About - Firq FGO Site" currentpage="about" descriptionOverride={description}>
|
||||
<BasicSection title="About">
|
||||
This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript.
|
||||
</BasicSection>
|
||||
<BasicSection title="Technologies used">
|
||||
{techologydata.map((item) => (<TechnologyCard {...item}/>))}
|
||||
</BasicSection>
|
||||
<ContactSection title="Contact me">
|
||||
{contactdata.map((item) => (<ContactCard {...item}/>))}
|
||||
</ContactSection>
|
||||
<BasicSection title="Disclaimers">
|
||||
<CustomFooter />
|
||||
</BasicSection>
|
||||
<Layout
|
||||
title="About - Firq FGO Site"
|
||||
currentpage="about"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<BasicSection title="About">
|
||||
This is a small sideproject that I'm creating. First time doing webdev in
|
||||
general, and first project using Typescript.
|
||||
</BasicSection>
|
||||
<BasicSection title="Technologies used">
|
||||
{techologydata.map((item) => <TechnologyCard {...item} />)}
|
||||
</BasicSection>
|
||||
<ContactSection title="Contact me">
|
||||
{contactdata.map((item) => <ContactCard {...item} />)}
|
||||
</ContactSection>
|
||||
<BasicSection title="Disclaimers">
|
||||
<CustomFooter />
|
||||
</BasicSection>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,34 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import BlogCard from '../components/blogCard.astro';
|
||||
import BlogSection from '../layouts/blogSection.astro';
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import BlogCard from '../components/blogCard.astro'
|
||||
import BlogSection from '../layouts/blogSection.astro'
|
||||
|
||||
const description = "My own small blog. Topics include FGO, TA, Programming, web technologies and more!"
|
||||
const allPosts = await Astro.glob("../pages/blog/*.md");
|
||||
allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
|
||||
const description =
|
||||
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
|
||||
const allPosts = await Astro.glob('../pages/blog/*.md')
|
||||
allPosts.sort(
|
||||
(a, b) =>
|
||||
Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
|
||||
)
|
||||
---
|
||||
|
||||
<Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
|
||||
<BlogSection title="Blog Articles">
|
||||
{allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
|
||||
</BlogSection>
|
||||
<Layout
|
||||
title="Blog - Firq FGO Site"
|
||||
currentpage="blog"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<BlogSection title="Blog Articles">
|
||||
{
|
||||
allPosts.map((post) => (
|
||||
<BlogCard
|
||||
url={post.url}
|
||||
title={post.frontmatter.title}
|
||||
pubdate={post.frontmatter.pubDate}
|
||||
description={post.frontmatter.description}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</BlogSection>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
layout: ../../layouts/blogPost.astro
|
||||
title: 'How Astro powers this site'
|
||||
pubDate: 2023-03-09
|
||||
description: "Blog post talking about how Astro provides the basis for this website"
|
||||
author: "Firq"
|
||||
tags: ["astro", "coding"]
|
||||
description: 'Blog post talking about how Astro provides the basis for this website'
|
||||
author: 'Firq'
|
||||
tags: ['astro', 'coding']
|
||||
---
|
||||
|
||||
## What is Astro
|
||||
|
|
@ -17,36 +17,48 @@ For a fast overview of Astro, look no further than [Astro in 100 Seconds](https:
|
|||
|
||||
To be honest, the best way is to just show a bit of code:
|
||||
|
||||
With the following lines, I create the homepage of my website (I am omitting any imports)
|
||||
With the following lines, I create the homepage of my website (I am omitting any imports)
|
||||
|
||||
```astro
|
||||
|
||||
<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
|
||||
<Hero></Hero>
|
||||
<BaseSection title="Favourites">
|
||||
{favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
|
||||
</BaseSection>
|
||||
<Layout
|
||||
title="Home - Firq FGO Site"
|
||||
currentpage="home"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<Hero />
|
||||
<BaseSection title="Favourites">
|
||||
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
|
||||
</BaseSection>
|
||||
</Layout>
|
||||
|
||||
|
||||
```
|
||||
|
||||
Instead of having a huge amount of HTML, I instead have only a layout and some components to put the page together. What's also amazing is the fact that instead of declaring each of the favourites cards seperately, I can just use a JSON file with all needed parameters and map it to the component.
|
||||
Instead of having a huge amount of HTML, I instead have only a layout and some components to put the page together. What's also amazing is the fact that instead of declaring each of the favourites cards separately, I can just use a JSON file with all needed parameters and map it to the component.
|
||||
|
||||
In addition, managing blogposts is really convenient: instead of creating a page for each component, I can just use the following:
|
||||
|
||||
```astro
|
||||
---
|
||||
const allPosts = await Astro.glob("../pages/blog/*.md");
|
||||
const allPosts = await Astro.glob('../pages/blog/*.md')
|
||||
---
|
||||
|
||||
<Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
|
||||
<BlogSection title="Blog Articles">
|
||||
{allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
|
||||
</BlogSection>
|
||||
<Layout
|
||||
title="Blog - Firq FGO Site"
|
||||
currentpage="blog"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<BlogSection title="Blog Articles">
|
||||
{
|
||||
allPosts.map((post) => (
|
||||
<BlogCard
|
||||
url={post.url}
|
||||
title={post.frontmatter.title}
|
||||
pubdate={post.frontmatter.pubDate}
|
||||
description={post.frontmatter.description}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</BlogSection>
|
||||
</Layout>
|
||||
|
||||
|
||||
```
|
||||
|
||||
This imports all the markdown files from the `pages/blog` directory and then maps them to individual link cards. In the background, astro is formatting the markdown and creating a route under the `/blog` endpoint.
|
||||
|
|
@ -54,17 +66,16 @@ This imports all the markdown files from the `pages/blog` directory and then map
|
|||
Also, since I want to have my blogposts sorted by date, the following line rearranged the post order before continuing:
|
||||
|
||||
```typescript
|
||||
|
||||
allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
|
||||
|
||||
|
||||
allPosts.sort(
|
||||
(a, b) =>
|
||||
Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
|
||||
)
|
||||
```
|
||||
|
||||
The `frontmatter` interface is a kind of header for the markdown files which provides astro with metadata like title, author and such.
|
||||
It is structured like this:
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
layout: ../../layouts/blogPost.astro
|
||||
title: 'How Astro powers this site'
|
||||
|
|
@ -73,8 +84,6 @@ description: "Blog post talking about how Astro provides the basis for this webs
|
|||
author: "Firq"
|
||||
tags: ["astro", "coding"]
|
||||
---
|
||||
|
||||
|
||||
```
|
||||
|
||||
This would for example be the `frontmatter` of this very post. The layout defines how the post will be rendered, which is also just an Astro layout.
|
||||
|
|
@ -84,17 +93,14 @@ And for styling the markdown itself, you would use the `:global()` css property
|
|||
For example, the code blocks are styled like this:
|
||||
|
||||
```css
|
||||
|
||||
article :global(.astro-code) {
|
||||
padding-left: 2em;
|
||||
width: auto;
|
||||
width: auto;
|
||||
padding: 1rem 1rem 1rem 2rem;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
But that's enough of me talking about how awesome I find Astro. I'm really looking forward what kind of developements I can achieve with this in the future.
|
||||
But that's enough of me talking about how awesome I find Astro. I'm really looking forward what kind of developments I can achieve with this in the future.
|
||||
|
||||
**~ Firq**
|
||||
|
||||
*next blog-post will probably be FGO-related*
|
||||
_next blog-post will probably be FGO-related_
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
layout: ../../layouts/blogPost.astro
|
||||
title: 'Hello World!'
|
||||
pubDate: 2023-03-08
|
||||
description: "First blog post, talking a bit about the site, the technologies behind it and the future ideas"
|
||||
author: "Firq"
|
||||
tags: ["astro", "hello"]
|
||||
description: 'First blog post, talking a bit about the site, the technologies behind it and the future ideas'
|
||||
author: 'Firq'
|
||||
tags: ['astro', 'hello']
|
||||
---
|
||||
|
||||
Well ... that took some time to get up and running. But nonetheless, here we are, and my site is starting to work!
|
||||
|
|
@ -18,24 +18,24 @@ the servants as markdown files (kinda ironic, this is a markdown file as well).
|
|||
said to me: "Why don't you just create a small site with GitLab Pages? You can host that on my instance". And so, I started writing HTML and CSS by hand, getting the
|
||||
first version of this site done after 1-2 days. It was challenging, as my experience with CSS was limited, but in the end, it was ready (special thanks again to [Mitsunee](https://www.mitsunee.com/) for helping me so much with the CSS).
|
||||
|
||||
But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while.
|
||||
But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while.
|
||||
|
||||
But then came [Astro](https://astro.build). When Mitsunee recommended it to me, I was instantly amazed by how easy this was ... I just needed to migrate the existing site to Astro (which took me a bit) and adapt the `gitlab-ci.yml`, and it was done! It felt amazing, having reusable components and simple creation of those.
|
||||
But then came [Astro](https://astro.build). When Mitsunee recommended it to me, I was instantly amazed by how easy this was ... I just needed to migrate the existing site to Astro (which took me a bit) and adapt the `gitlab-ci.yml`, and it was done! It felt amazing, having reusable components and simple creation of those.
|
||||
Shout outs to one of my favourite lines which creates the servant cards on the Servants page:
|
||||
|
||||
```typescript
|
||||
|
||||
<BaseSection title="Servants">
|
||||
{servantdata.map((item) => (<ServantCard {...item}/>))}
|
||||
{servantdata.map((item) => (
|
||||
<ServantCard {...item} />
|
||||
))}
|
||||
</BaseSection>
|
||||
|
||||
|
||||
```
|
||||
|
||||
But still, the whole site felt odd. It was a single page, with everything just cramped in there. So around 2 weeks ago, I started to rewrite the whole thing as a multi-page website. GitLab made it sometimes pretty hard (because having a baseurl of `/fgosite` was forced), but it worked and felt a lot cooler.
|
||||
|
||||
Still, I was a bit annoyed that I had this long-ish URL for the site (`firq.pages.neshweb.net/fgosite`), but the GitLab instance didn't offer to set a custom domain (because of how the server where it runs is set up).
|
||||
Still, I was a bit annoyed that I had this long-ish URL for the site (`firq.pages.neshweb.net/fgosite`), but the GitLab instance didn't offer to set a custom domain (because of how the server where it runs is set up).
|
||||
|
||||
So in the end, Neshura and I started a journey on how to best do this, and, in the end, found a solution.
|
||||
So in the end, Neshura and I started a journey on how to best do this, and, in the end, found a solution.
|
||||
|
||||
## But ... how does it work?
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Hero from '../components/hero.astro';
|
||||
import BaseSection from '../layouts/baseSection.astro';
|
||||
import FavouriteCard from '../components/favouriteCard.astro';
|
||||
import favouritesdata from '../../static/_favouritesdata.json';
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Hero from '../components/hero.astro'
|
||||
import BaseSection from '../layouts/baseSection.astro'
|
||||
import FavouriteCard from '../components/favouriteCard.astro'
|
||||
import favouritesdata from '../../static/_favouritesdata.json'
|
||||
|
||||
const description = "The very own page of Firq for providing informating about TA servants, listing past TA achievements and (in the future) hosting a blog for talking about FGO, Programming and other stuff"
|
||||
const description =
|
||||
'The very own page of Firq for providing informating about TA servants, listing past TA achievements and (in the future) hosting a blog for talking about FGO, Programming and other stuff'
|
||||
---
|
||||
|
||||
<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
|
||||
<Hero>
|
||||
<!--<a rel="me" href="https://mastodon.neshweb.net/@Firq">a</a> TODO Future me-->
|
||||
</Hero>
|
||||
<BaseSection title="Favourites">
|
||||
{favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
|
||||
</BaseSection>
|
||||
<Layout
|
||||
title="Home - Firq FGO Site"
|
||||
currentpage="home"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<Hero>
|
||||
<!--<a rel="me" href="https://mastodon.neshweb.net/@Firq">a</a> TODO Future me-->
|
||||
</Hero>
|
||||
<BaseSection title="Favourites">
|
||||
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
|
||||
</BaseSection>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import BaseSection from '../layouts/baseSection.astro';
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import BaseSection from '../layouts/baseSection.astro'
|
||||
|
||||
import ServantCard from '../components/servantCard.astro';
|
||||
import ServantCard from '../components/servantCard.astro'
|
||||
import servantdata from '../../static/_servantdata.json'
|
||||
|
||||
import CeCard from '../components/ceCard.astro';
|
||||
import CeCard from '../components/ceCard.astro'
|
||||
import cedata from '../../static/_cedata.json'
|
||||
|
||||
const description = "A list of all the servants and ces that Firq can offer up on support for TA."
|
||||
const description =
|
||||
'A list of all the servants and ces that Firq can offer up on support for TA.'
|
||||
---
|
||||
|
||||
<Layout title="Servants - Firq FGO Site" currentpage="servants" descriptionOverride={description}>
|
||||
<BaseSection title="Servants">
|
||||
{servantdata.map((item) => (<ServantCard {...item}/>))}
|
||||
</BaseSection>
|
||||
<BaseSection title="CEs">
|
||||
{cedata.map((item) => (<CeCard {...item}/>))}
|
||||
</BaseSection>
|
||||
<Layout
|
||||
title="Servants - Firq FGO Site"
|
||||
currentpage="servants"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<BaseSection title="Servants">
|
||||
{servantdata.map((item) => <ServantCard {...item} />)}
|
||||
</BaseSection>
|
||||
<BaseSection title="CEs">
|
||||
{cedata.map((item) => <CeCard {...item} />)}
|
||||
</BaseSection>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
---
|
||||
//TODO:
|
||||
//TODO:
|
||||
// - Add highlighted TAs above the rest
|
||||
// > I think you should have all of them on the site.
|
||||
// > You could have the notable ones like you do now, but at the bottom, there could be a drop-down or "expand" or "more" or
|
||||
// > You could have the notable ones like you do now, but at the bottom, there could be a drop-down or "expand" or "more" or
|
||||
// > some other section like that which you could click and show the rest
|
||||
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
|
||||
import TaSection from '../layouts/taSection.astro';
|
||||
import TaCard from '../components/taCard.astro';
|
||||
import TaSection from '../layouts/taSection.astro'
|
||||
import TaCard from '../components/taCard.astro'
|
||||
import tadata from '../../static/_tadata.json'
|
||||
|
||||
const important_data = tadata.filter(function (el) {
|
||||
return ["Ibuki 3T (Lostbelt 5.5)", "DB 7T (No Duplicates)", "Kingprotea 1T"].includes(el.title);
|
||||
});
|
||||
return [
|
||||
'Ibuki 3T (Lostbelt 5.5)',
|
||||
'DB 7T (No Duplicates)',
|
||||
'Kingprotea 1T',
|
||||
].includes(el.title)
|
||||
})
|
||||
|
||||
|
||||
const description = "A collection of TAs previously completed be Firq."
|
||||
const description = 'A collection of TAs previously completed be Firq.'
|
||||
---
|
||||
|
||||
<Layout title="TA Collection - Firq FGO Site" currentpage="ta-collection" descriptionOverride={description}>
|
||||
<TaSection title="Notable TAs" abovetext="">
|
||||
{important_data.map((item) => (<TaCard {...item}/>))}
|
||||
</TaSection>
|
||||
<TaSection title="Completed TAs">
|
||||
{tadata.map((item) => (<TaCard {...item}/>))}
|
||||
</TaSection>
|
||||
<Layout
|
||||
title="TA Collection - Firq FGO Site"
|
||||
currentpage="ta-collection"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<TaSection title="Notable TAs" abovetext="">
|
||||
{important_data.map((item) => <TaCard {...item} />)}
|
||||
</TaSection>
|
||||
<TaSection title="Completed TAs">
|
||||
{tadata.map((item) => <TaCard {...item} />)}
|
||||
</TaSection>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue