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

Colors and other stuff

Browse source
This commit is contained in:
Firq 2024-10-24 18:52:33 +02:00
parent aab26e63b2
commit 34e24346d1
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
25 changed files with 234 additions and 272 deletions

34
src/layouts/Layout.astro
View file

@ -107,22 +107,28 @@ const mapped_navdata = navdata.map((item) => ({
</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-lighter: #eee;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
--c-reddish: #ff0077;
/* Animations */
--a-time-default: 200ms;
--a-time-short: 100ms;
--a-time-slow: 1000ms;
--a-animation-1: ease-in-out;
/* Fonts */
--f-default: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--f-title: 'Work Sans Variable', sans-serif;
font-family: var(--f-default);
/* Colors */
--c-primary-background: #1b1b1b;
--c-secondary-background: #333;
--c-primary-text: #eee;
--c-accent-1: #b86cff;
--c-accent-1-alt: #c105ff;
--c-accent-2: #ff0077;
}
body {
background: var(--c-lightgray);
background: var(--c-secondary-background);
margin: 0px;
}

4
src/layouts/baseSection.astro
View file

@ -34,7 +34,7 @@ const { title } = Astro.props
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0px;
margin-left: auto;
@ -42,7 +42,7 @@ const { title } = Astro.props
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding-bottom: 0.5rem;
}
@media (min-width: 512px) {

54
src/layouts/blogPost.astro
View file

@ -33,8 +33,8 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
justify-content: center;
width: 100%;
text-align: center;
color: white;
background-color: var(--c-gray);
color: var(--c-primary-text);
background-color: var(--c-secondary-background);
padding: 0.5rem 0px;
margin-bottom: 2rem;
text-decoration: none;
@ -43,31 +43,31 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
font-size: 34px;
line-height: 40px;
letter-spacing: -1px;
color: white;
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-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
p {
color: white;
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-gray);
background-color: var(--c-secondary-background);
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h2) {
margin-right: 3rem;
word-wrap: normal;
color: white;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -77,10 +77,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
margin-bottom: 0.5rem;
margin-right: 3rem;
word-wrap: normal;
color: white;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -90,10 +90,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
margin-bottom: 0.5rem;
margin-right: 3rem;
word-wrap: normal;
color: white;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -104,9 +104,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
font-style: italic;
}
article {
color: white;
color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem;
font-size: 1.1em;
text-align: justify;
padding-bottom: 5rem;
}
article :global(.astro-code) {
@ -120,31 +121,16 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
@media (min-width: 1000px) {
article {
margin-left: 10rem;
margin-right: 10rem;
margin-left: 22.5%;
margin-right: 22.5%;
}
h1 {
margin-left: 10rem;
margin-right: 10rem;
margin-left: 20%;
margin-right: 20%;
}
p {
margin-left: 10rem;
margin-right: 10rem;
}
}
@media (min-width: 1500px) {
article {
margin-left: 20rem;
margin-right: 20rem;
}
h1 {
margin-left: 20rem;
margin-right: 20rem;
}
p {
margin-left: 20rem;
margin-right: 20rem;
margin-left: 20%;
margin-right: 20%;
}
}
</style>

20
src/layouts/blogSection.astro
View file

@ -42,7 +42,7 @@ const line = displayLine ? "flex" : "none"
bottom: -5rem;
border-radius: 0% 50% 50% 50%;
transform: rotate(45deg);
background-color: var(--c-darkpurple);
background-color: var(--c-accent-1);
}
.start {
@ -50,8 +50,8 @@ const line = displayLine ? "flex" : "none"
border-radius: 40%;
border-style: solid;
border-width: 0.25rem;
border-color: var(--c-lightgray);
background-color: var(--c-darkpurple);
border-color: var(--c-secondary-background);
background-color: var(--c-accent-1);
}
.line {
@ -62,7 +62,7 @@ const line = displayLine ? "flex" : "none"
right: 0;
margin-left: auto;
margin-right: auto;
background-color: var(--c-darkpurple);
background-color: var(--c-accent-1);
height: calc(100% + 5rem);
translate: 0% 2rem;
width: 0.25rem;
@ -71,14 +71,14 @@ const line = displayLine ? "flex" : "none"
h1 {
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
font-size: 1.6rem;
margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -96,7 +96,7 @@ const line = displayLine ? "flex" : "none"
align-content: center;
justify-content: space-around;
padding: 1em;
color: white;
color: var(--c-primary-text);
font-size: 1em;
position: relative;
}
@ -115,10 +115,10 @@ const line = displayLine ? "flex" : "none"
font-size: 1.85rem;
}
}
@media (min-width: 1500px) {
@media (min-width: 1100px) {
.wrapper {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 20%;
margin-right: 20%;
flex-direction: row;
}
section {

4
src/layouts/contactSection.astro
View file

@ -15,14 +15,14 @@ const { title } = Astro.props
<style>
h1 {
color: white;
color: var(--c-primary-text);
font-size: 26px;
line-height: 32px;
letter-spacing: -1px;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;

6
src/layouts/customFooter.astro
View file

@ -88,11 +88,11 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
<style>
footer {
color: white;
color: var(--c-primary-text);
bottom: 0;
}
footer > div > a {
color: white;
color: var(--c-primary-text);
}
.sticky-image-wrapper {
position: fixed;
@ -108,7 +108,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
bottom: -100px;
height: 64px;
width: 64px;
transition: transform 1s ease-in-out;
transition: transform var(--a-time-slow) var(--a-animation-1);
transform: translateX(-50%);
}
</style>

4
src/layouts/servantSection.astro
View file

@ -36,7 +36,7 @@ const { title } = Astro.props
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0px;
margin-left: auto;
@ -44,7 +44,7 @@ const { title } = Astro.props
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding-bottom: 0.5rem;
}

6
src/layouts/taSection.astro
View file

@ -37,20 +37,20 @@ if (abovetext === undefined) {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
h2 {
color: white;
color: var(--c-primary-text);
font-size: 16px;
font-weight: 600;
margin: 5;