Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Further redesign

Browse source
This commit is contained in:
Firq 2024-10-25 15:26:25 +02:00
parent 4eb390d0b1
commit b6ea7ea21c
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
10 changed files with 128 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "@firq/fgosite", "name": "@firq/fgosite",
"type": "module", "type": "module",
"version": "0.2.0-pre.34", "version": "0.2.0-pre.35",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",

14
src/components/cards/blogCard.astro
View file

@ -72,9 +72,14 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
padding: 10px; padding: 10px;
text-align: center; text-align: center;
min-height: 100%; min-height: 100%;
border: 2px solid var(--c-primary-background);
border-radius: 1.25rem; border-radius: 1.25rem;
} }
a:hover article {
border-color: var(--c-accent-1);
}
@media (min-width: 900px) { @media (min-width: 900px) {
.circle { .circle {
margin: 1rem 0.5rem 1rem 0.5rem; margin: 1rem 0.5rem 1rem 0.5rem;
@ -98,15 +103,8 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
margin-right: 4px; margin-right: 4px;
} }
a:hover article {
border-color: var(--c-accent-1);
transform: none;
}
article { article {
border-style: solid; border: 2px solid var(--c-primary-background);
border-width: 2px;
border-color: var(--c-primary-background);
align-items: flex-start; align-items: flex-start;
align-content: flex-start; align-content: flex-start;
margin-left: 0.5rem; margin-left: 0.5rem;

4
src/components/cards/favouriteCard.astro
View file

@ -41,7 +41,7 @@ const loadedImage = plsLoadImage(images, imagePath)
color: var(--c-primary-text); color: var(--c-primary-text);
max-width: 200px; max-width: 200px;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
font-weight: bold; font-weight: 500;
margin: 0px; margin: 0px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -88,7 +88,7 @@ const loadedImage = plsLoadImage(images, imagePath)
.subtext { .subtext {
color: var(--c-primary-text); color: var(--c-primary-text);
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 400;
margin: 0.5rem; margin: 0.5rem;
line-height: 20px; line-height: 20px;
} }

4
src/components/cards/taCard.astro
View file

@ -131,7 +131,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
color: var(--c-primary-text); color: var(--c-primary-text);
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
margin: 0.5rem 0px 0.25rem 0px; margin: 0.5rem 0px 0.625rem 0px;
} }
.expand-on-hover { .expand-on-hover {
@ -147,7 +147,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
transform: scaleY(0); transform: scaleY(0);
transform-origin: top; transform-origin: top;
position: absolute; position: absolute;
top: 90%; top: 87.5%;
padding-top: 0.5rem; padding-top: 0.5rem;
margin-top: 0.2rem; margin-top: 0.2rem;
color: var(--c-primary-text); color: var(--c-primary-text);

2
src/components/titles/title.astro
View file

@ -36,7 +36,7 @@
.sub { .sub {
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 400;
font-family: 'Work Sans Variable', sans-serif; font-family: 'Work Sans Variable', sans-serif;
} }

12
src/layouts/baseSection.astro
View file

@ -35,16 +35,24 @@ const { title } = Astro.props
line-height: 48px; line-height: 48px;
letter-spacing: -1px; letter-spacing: -1px;
color: var(--c-primary-text); color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0px; margin-bottom: 0px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0.25rem 1.5rem; padding: 0.25rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-primary-background);
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
h1:after {
content:' ';
display: block;
width: 62.5%;
margin: auto;
border: 2px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
@media (min-width: 512px) { @media (min-width: 512px) {
div { div {
row-gap: 1.5em; row-gap: 1.5em;

140
src/layouts/blogPost.astro
View file

@ -19,90 +19,12 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
<Layout title={title} currentpage="blog" descriptionOverride={description}> <Layout title={title} currentpage="blog" descriptionOverride={description}>
<SmallTitle maintext={frontmatter.title} subtext={subtext} fadeout={true} returnbutton={true} baseurl='blog'/> <SmallTitle maintext={frontmatter.title} subtext={subtext} fadeout={true} returnbutton={true} baseurl='blog'/>
<div>
<article> <article>
<slot /> <slot />
</article> </article>
</div>
</Layout> </Layout>
<style> <style>
a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
color: var(--c-primary-text);
background-color: var(--c-secondary-background);
padding: 0.5rem 0px;
margin-bottom: 2rem;
text-decoration: none;
}
h1 {
font-size: 34px;
line-height: 40px;
letter-spacing: -1px;
color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
p {
color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-secondary-background);
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h2) {
margin-right: 3rem;
word-wrap: normal;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h3) {
margin-bottom: 0.5rem;
margin-right: 3rem;
word-wrap: normal;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h4) {
margin-bottom: 0.5rem;
margin-right: 3rem;
word-wrap: normal;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(a) {
color: #dcb7ff;
text-decoration: none;
font-style: italic;
}
article { article {
color: var(--c-primary-text); color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem; margin: 0.5rem 3rem 0.5rem 3rem;
@ -110,10 +32,72 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
text-align: justify; text-align: justify;
padding-bottom: 5rem; padding-bottom: 5rem;
} }
article :global(h2) {
font-size: 32px;
word-wrap: normal;
color: var(--c-primary-text);
max-width: max-content;
padding-bottom: 0.5rem;
text-align: left;
line-height: 32px;
&:after {
content:' ';
display: block;
width: 75%;
margin-top: 2px;
border: 1px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
}
article :global(h3) {
font-size: 24px;
word-wrap: normal;
color: var(--c-primary-text);
max-width: max-content;
padding-bottom: 0.5rem;
text-align: left;
line-height: 32px;
&:after {
content:' ';
display: block;
width: 75%;
margin-top: 2px;
border: 1px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
}
article :global(h4) {
font-size: 18px;
word-wrap: normal;
color: var(--c-primary-text);
max-width: max-content;
margin-bottom: 0px;
text-align: left;
line-height: 32px;
&:after {
content:' ';
display: block;
width: 75%;
margin-top: 1px;
border: 1px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
}
article :global(a) {
color: #dcb7ff;
text-decoration: none;
font-style: italic;
}
article :global(.astro-code) { article :global(.astro-code) {
width: auto; width: auto;
padding: 1rem 1rem 1rem 2rem; padding: 1rem 1rem 1rem 2rem;
} }
article :global(code) { article :global(code) {
font-weight: bold; font-weight: bold;
color: orange; color: orange;

28
src/layouts/contactSection.astro
View file

@ -16,17 +16,23 @@ const { title } = Astro.props
<style> <style>
h1 { h1 {
color: var(--c-primary-text); color: var(--c-primary-text);
font-size: 26px; font-size: 24px;
font-weight: 700;
line-height: 32px; line-height: 32px;
letter-spacing: -1px; font-family: 'Work Sans Adaptive', sans-serif;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
padding-bottom: 0.5rem; margin: 0 auto 0.5rem auto;
&:after {
content:' ';
display: block;
width: 75%;
margin: -2px auto auto auto;
border: 1px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
} }
}
div { div {
row-gap: 1em; row-gap: 1em;
column-gap: 1em; column-gap: 1em;
@ -51,6 +57,14 @@ const { title } = Astro.props
margin-left: 3rem; margin-left: 3rem;
margin-right: 3rem; margin-right: 3rem;
} }
h1 {
margin-left: 0;
margin-right: 0;
&:after {
margin: -2px 0 0;
}
}
} }
@media (min-width: 1500px) { @media (min-width: 1500px) {
.base { .base {

11
src/layouts/servantSection.astro
View file

@ -37,17 +37,24 @@ const { title } = Astro.props
line-height: 48px; line-height: 48px;
letter-spacing: -1px; letter-spacing: -1px;
color: var(--c-primary-text); color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0px; margin-bottom: 0px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0.25rem 1.5rem; padding: 0.25rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-primary-background);
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
h1:after {
content:' ';
display: block;
width: 62.5%;
margin: auto;
border: 2px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
@media (min-width: 1000px) { @media (min-width: 1000px) {
.base div { .base div {
margin-left: 3rem; margin-left: 3rem;

16
src/layouts/taSection.astro
View file

@ -38,21 +38,27 @@ if (abovetext === undefined) {
line-height: 48px; line-height: 48px;
letter-spacing: -1px; letter-spacing: -1px;
color: var(--c-primary-text); color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0; margin-bottom: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-primary-background);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
h1:after {
content:' ';
display: block;
width: 62.5%;
margin: auto;
border: 2px solid var(--c-accent-1);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
h2 { h2 {
color: var(--c-primary-text); color: var(--c-primary-text);
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 400;
margin: 5; margin: 5;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;