adjust studio icon size and placement
This commit is contained in:
@@ -51,11 +51,14 @@
|
|||||||
height: var(--size-icon-large);
|
height: var(--size-icon-large);
|
||||||
background: var(--color-goldenBeige);
|
background: var(--color-goldenBeige);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img, svg {
|
img, svg {
|
||||||
width: 100%;
|
width: var(--page-section-icon-scale, 100%);
|
||||||
|
height: var(--page-section-icon-scale, 100%);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
import { Blocks } from "@/components/blocks/Blocks";
|
import { Blocks } from "@/components/blocks/Blocks";
|
||||||
import styles from './pageContent.module.scss';
|
import styles from './pageContent.module.scss';
|
||||||
|
|
||||||
export const PageContent = ({ blocks }: any) => {
|
export const PageContent = ({ blocks, className }: { blocks: any; className?: string }) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.pageContent}>
|
<div className={`${styles.pageContent}${className ? ` ${className}` : ''}`}>
|
||||||
<Blocks blocks={blocks} pageContent />
|
<Blocks blocks={blocks} pageContent />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
|
|||||||
import { PageContent } from "@/components/general/PageContent";
|
import { PageContent } from "@/components/general/PageContent";
|
||||||
import { BgPig } from "@/components/general/BgPig";
|
import { BgPig } from "@/components/general/BgPig";
|
||||||
import { StudioHeader } from "@/components/studio/StudioHeader";
|
import { StudioHeader } from "@/components/studio/StudioHeader";
|
||||||
|
import styles from "@/components/studio/studioPageContent.module.scss";
|
||||||
|
|
||||||
const StudioFragmentDefinition = graphql(`
|
const StudioFragmentDefinition = graphql(`
|
||||||
fragment Studio on StudioPage {
|
fragment Studio on StudioPage {
|
||||||
@@ -56,7 +57,7 @@ export function StudioPageView({ page }: StudioPageViewProps) {
|
|||||||
<>
|
<>
|
||||||
<main className="site-main" id="main">
|
<main className="site-main" id="main">
|
||||||
<StudioHeader title={page.title} lead={page.lead} />
|
<StudioHeader title={page.title} lead={page.lead} />
|
||||||
{page.body && <PageContent blocks={page.body} />}
|
{page.body && <PageContent blocks={page.body} className={styles.studioBody} />}
|
||||||
</main>
|
</main>
|
||||||
{page.pig && <BgPig type={page.pig} color="white" />}
|
{page.pig && <BgPig type={page.pig} color="white" />}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.studioBody {
|
||||||
|
--page-section-icon-scale: 120%;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user