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,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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue