small design change

This commit is contained in:
Firq 2023-03-16 23:29:16 +01:00
parent c7017bfd24
commit 784d66bebc
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 76 additions and 8 deletions

View file

@ -6,7 +6,7 @@ export interface Props {
const { title } = Astro.props const { title } = Astro.props
--- ---
<section> <section class="base">
<h1>{title}</h1> <h1>{title}</h1>
<div> <div>
<slot /> <slot />
@ -32,6 +32,24 @@ const { title } = Astro.props
color: white; color: white;
font-size: 1em; 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) { @media (min-width: 512px) {
div { div {
justify-content: left; justify-content: left;

View file

@ -6,7 +6,7 @@ export interface Props {
const { title } = Astro.props const { title } = Astro.props
--- ---
<div> <div class="base">
<h1>{title}</h1> <h1>{title}</h1>
<div> <div>
<slot /> <slot />
@ -30,9 +30,12 @@ const { title } = Astro.props
padding: 1em; padding: 1em;
position: relative; position: relative;
} }
div > h1 { div h1 {
color: white; color: white;
margin: 0.5rem 0px 0.5rem 0.5em; margin-top: 2rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
@ -43,4 +46,16 @@ const { title } = Astro.props
column-gap: 1.5em; column-gap: 1.5em;
} }
} }
.base {
margin-left: 3rem;
margin-right: 3rem;
}
@media (min-width: 1500px) {
.base {
margin-left: 10%;
margin-right: 10%;
}
}
</style> </style>

View file

@ -48,7 +48,10 @@ const { title } = Astro.props
h1 { h1 {
color: white; color: white;
font-size: 2.25rem; font-size: 2.25rem;
margin: 0.5rem 0px 0.5rem 0.5em; margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);

View file

@ -6,7 +6,7 @@ export interface Props {
const { title } = Astro.props const { title } = Astro.props
--- ---
<section> <section class="base">
<h1>{title}</h1> <h1>{title}</h1>
<div> <div>
<slot /> <slot />
@ -35,4 +35,17 @@ const { title } = Astro.props
justify-content: left; justify-content: left;
} }
} }
@media (min-width: 400px) {
.base {
margin-left: 3rem;
margin-right: 3rem;
}
}
@media (min-width: 1500px) {
.base {
margin-left: 10%;
margin-right: 10%;
}
}
</style> </style>

View file

@ -23,6 +23,9 @@
target="_blank" target="_blank"
rel="noopener noreferrer">Atlas Academy</a rel="noopener noreferrer">Atlas Academy</a
> for providing the servant and ce images. > for providing the servant and ce images.
<div class="sticky-image-wrapper">
<img src="/assets/atlas.png" alt="" />
</div>
</div> </div>
<br /> <br />
<div> <div>

View file

@ -14,7 +14,7 @@ if (abovetext === undefined) {
} }
--- ---
<div> <div class="base">
<h1>{title}</h1> <h1>{title}</h1>
<h2>{h2text}</h2> <h2>{h2text}</h2>
<div class="container ta-container"> <div class="container ta-container">
@ -34,7 +34,10 @@ if (abovetext === undefined) {
} }
h1 { h1 {
color: white; color: white;
margin: 0.5rem 0.5rem 0.5rem 0.75rem; margin-top: 2rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
@ -47,4 +50,16 @@ if (abovetext === undefined) {
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
.base {
margin-left: 3rem;
margin-right: 3rem;
}
@media (min-width: 1500px) {
.base {
margin-left: 10%;
margin-right: 10%;
}
}
</style> </style>

View file

@ -24,6 +24,7 @@ const description =
<BaseSection title="CEs"> <BaseSection title="CEs">
{cedata.map((item) => <CeCard {...item} />)} {cedata.map((item) => <CeCard {...item} />)}
</BaseSection> </BaseSection>
<div class="placeholder"></div>
</Layout> </Layout>
<style> <style>

BIN
static/assets/atlas.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 16 KiB