Further redesign
All checks were successful
/ get-version (push) Successful in 3s
/ astro-check (push) Successful in 12s
/ checking (push) Successful in 14s
/ build-site (push) Successful in 1m20s
/ check-tag (push) Successful in 2s
/ run-unlighthouse (push) Successful in 0s
/ create-release (push) Successful in 7s
/ auto-deploy-dockge (push) Successful in 28s
All checks were successful
/ get-version (push) Successful in 3s
/ astro-check (push) Successful in 12s
/ checking (push) Successful in 14s
/ build-site (push) Successful in 1m20s
/ check-tag (push) Successful in 2s
/ run-unlighthouse (push) Successful in 0s
/ create-release (push) Successful in 7s
/ auto-deploy-dockge (push) Successful in 28s
This commit is contained in:
parent
4eb390d0b1
commit
afe18e37b6
10 changed files with 128 additions and 111 deletions
|
@ -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",
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue