Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases172 Packages1 Wiki Activity Actions

Major redesign and rewrite

Browse source
This commit is contained in:
Firq 2024-07-19 22:52:15 +02:00
parent 9cb6ff6ed7
commit 0dca43eb19
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
41 changed files with 3863 additions and 4889 deletions

22
src/layouts/Layout.astro
View file

@ -1,6 +1,6 @@
---
import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro'
import Navbar from '../components/navbar/navbar.astro'
import NavbarEntry from '../components/navbar/navbarEntry.astro'
import navdata from '../../static/data/_navdata.json'
import embed from '../assets/embed.png'
@ -77,12 +77,22 @@ const mapped_navdata = navdata.map((item) => ({
<Navbar>
{
mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
<NavbarEntry
currentPage={currentpage}
navtype="desktop"
{...item}
slot="desktop"
/>
))
}
{
mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
<NavbarEntry
currentPage={currentpage}
navtype="mobile"
{...item}
slot="mobile"
/>
))
}
</Navbar>
@ -98,10 +108,12 @@ const mapped_navdata = navdata.map((item) => ({
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
--c-lighter: #eee;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
--c-reddish: #ff0077;
}
body {
background: var(--c-lightgray);
@ -117,5 +129,5 @@ const mapped_navdata = navdata.map((item) => ({
padding: 0;
position: absolute;
width: 1px;
}
}
</style>

74
src/layouts/aboutSection.astro
View file

@ -1,74 +0,0 @@
---
export interface Props {
title: string
}
const { title } = Astro.props
---
<section class="base">
<h1>{title}</h1>
<div>
<slot />
</div>
</section>
<style>
h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
font-size: 2.25rem;
margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
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;
}
.base {
margin-left: 1rem;
margin-right: 1rem;
}
@media (min-width: 400px) {
.base {
margin-left: 3rem;
margin-right: 3rem;
}
}
@media (min-width: 1500px) {
.base {
margin-left: 10%;
margin-right: 10%;
}
}
@media (min-width: 512px) {
div {
justify-content: left;
}
}
@media (min-width: 520px) {
h1 {
margin: 0.5rem 0.75rem 0.5rem 0.75rem;
}
}
</style>

8
src/layouts/blogPost.astro
View file

@ -1,4 +1,5 @@
---
import SmallTitle from '../components/titles/smallTitle.astro'
import Layout from './Layout.astro'
const { frontmatter } = Astro.props
@ -13,15 +14,12 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
'en-GB',
options_date
)
const subtext = `Written by ${frontmatter.author} • Published on ${date}`
---
<Layout title={title} currentpage="blog" descriptionOverride={description}>
<a href="/blog"><i class="iconoir-fast-arrow-left"></i>Back to all posts</a>
<SmallTitle maintext={frontmatter.title} subtext={subtext} fadeout={true} returnbutton={true} baseurl='blog'/>
<div>
<h1>
{frontmatter.title}
</h1>
<p>by {frontmatter.author} • Published on {date}</p>
<article>
<slot />
</article>

78
src/layouts/blogSection.astro
View file

@ -1,36 +1,59 @@
---
export interface Props {
title: string
titlehidden?: boolean
displayLine?: boolean
}
const { title } = Astro.props
const { title, titlehidden, displayLine } = Astro.props
const display = titlehidden ? "display: none" : ""
const line = displayLine ? "flex" : "none"
---
<section>
<h1>{title}</h1>
<h1 style={display}>{title}</h1>
<div class="wrapper">
<div class="start hightlighter"></div>
<div class="line"></div>
<slot />
<div class="drop"></div>
<div class="drop hightlighter"></div>
</div>
</section>
<style>
.drop {
<style define:vars={{ line }}>
section {
padding-left: 0.25em;
padding-right: 0.25em;
padding-bottom: 5rem;
}
.hightlighter {
left: 0;
right: 0;
display: flex;
position: absolute;
visibility: visible;
left: 0;
right: 0;
bottom: -5rem;
margin-left: auto;
margin-right: auto;
height: 1.5rem;
width: 1.5rem;
}
.drop {
bottom: -5rem;
border-radius: 0% 50% 50% 50%;
transform: rotate(45deg);
background-color: var(--c-darkpurple);
}
.start {
top: -2rem;
border-radius: 40%;
border-style: solid;
border-width: 0.25rem;
border-color: var(--c-lightgray);
background-color: var(--c-darkpurple);
}
.line {
display: flex;
position: absolute;
@ -46,30 +69,31 @@ const { title } = Astro.props
z-index: -1;
}
h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
font-size: 2.25rem;
font-size: 1.6rem;
margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
justify-self: center;
text-align: center;
}
.wrapper {
margin: 2rem 3rem 0.5rem 3rem;
margin: 2rem 2rem 0.5rem 2rem;
display: flex;
flex-flow: column wrap;
row-gap: 1em;
column-gap: 1em;
align-self: center;
align-items: stretch;
align-content: center;
justify-content: space-around;
padding: 1em;
color: white;
@ -80,21 +104,41 @@ const { title } = Astro.props
.drop {
margin-left: 1.5rem;
}
.start {
margin-left: 1.25rem;
}
.line {
margin-left: 2.1rem;
}
h1 {
margin-left: 3rem;
font-size: 1.85rem;
}
}
@media (min-width: 1500px) {
.wrapper {
margin-left: 20rem;
margin-right: 20rem;
margin-left: 15rem;
margin-right: 15rem;
flex-direction: row;
}
section {
padding-bottom: unset;
}
.drop, .start, .line {
display: var(--line);
margin-left: 2rem;
}
.start {
margin-left: 1.75rem;
}
.line {
margin-left: 2.6rem;
height: calc(100% + 6rem);
translate: 0px -2rem;
}
h1 {
margin-left: 20rem;
margin-right: 20rem;
margin-left: 15rem;
margin-right: 15rem;
}
}
</style>