Skip to content

Commit

Permalink
Update style
Browse files Browse the repository at this point in the history
  • Loading branch information
tannguyen04 committed Nov 15, 2024
1 parent 723e499 commit 81cde8f
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 33 deletions.
8 changes: 0 additions & 8 deletions web/themes/custom/fstheme/components/base/main.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,4 @@
.container-content {
@apply md:px-[90px] lg:px-[208px] xl:px-[258px] mx-auto;
}

.main-menu {
@apply flex;
}

.main-menu li a {
@apply p-[25px] text-[46px] leading-[46px] md:text-[56px] md:leading-[54px] lg:text-[22px] lg:leading-[45px] xl:text-[24px];
}
}
50 changes: 36 additions & 14 deletions web/themes/custom/fstheme/components/base/main.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,38 @@
// import { StrictMode } from 'react';
// import { createRoot } from 'react-dom/client';
import './main.pcss';
// import ArticleList from '../../src/js/components/ArticleList';

// const elements = document.querySelectorAll('.article-list');
// elements.forEach((element) => {
// const root = createRoot(element);
// root.render(
// <StrictMode>
// <>
// <ArticleList />
// </>
// </StrictMode>
// );
// })
class PrimaryMenu {

primary_menu_wrapper_element: HTMLElement;
primary_menu_element: HTMLElement;
primary_menu_container: HTMLElement;
open_menu_element: HTMLElement | null;
close_menu_element: HTMLElement | null;


constructor(element: HTMLElement) {
this.primary_menu_wrapper_element = element;
this.primary_menu_element = element.querySelector('.primary-menu') as HTMLElement;
this.primary_menu_container = element.querySelector('.primary-menu-container') as HTMLElement;
this.open_menu_element = element.querySelector('.js-open-menu');
this.close_menu_element = element.querySelector('.js-close-menu');

if (!this.close_menu_element || !this.primary_menu_element || !this.open_menu_element || !this.primary_menu_container) {
return;
}

this.close_menu_element.addEventListener('click', () => {
this.primary_menu_element.classList.add('hidden');
this.primary_menu_container.classList.remove('container');
});

this.open_menu_element.addEventListener('click', () => {
this.primary_menu_element.classList.remove('hidden');
this.primary_menu_container.classList.add('container');
});
}
}

const primary_menu_element = document.querySelector<HTMLElement>('.primary-menu-wrapper');
if (primary_menu_element) {
new PrimaryMenu(primary_menu_element);
}
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
{{ title_suffix }}
<div{{ content_attributes }}>
<div class="container">
<div class="container-content font-sans">
<div class="container-content">
<div class="text-[24px] leading-[33px] mb-[30px]">
{{ content.lead }}
</div>
Expand Down
4 changes: 2 additions & 2 deletions web/themes/custom/fstheme/templates/layout/html.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> <css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes.addClass('font-sans font-normal') }}>
<div class="text-base font-mono">
<body{{ attributes.addClass(' font-normal') }}>
<div class="text-base font-sans">
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
Expand Down
40 changes: 34 additions & 6 deletions web/themes/custom/fstheme/templates/layout/page.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,44 @@
#}
<div class="layout-container">

<header role="banner">
<header role="banner" class="font-mono">
<div style="background-image: url('{{ node.hero_banner ? node.hero_banner : '' }}'); box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.8);" class="text-white bg-center bg-cover">
<div class="container">
<div class="py-[47px] md:py-[50px] lg:py-[62px] xl:py-[50px] h-[400px] md:h-[500px] lg:h-[600px] xl:h-[700px]">
<div class="h-full flex flex-col justify-between">
<div class="py-[47px] md:py-[50px] lg:py-[62px] xl:py-[50px] min-h-[400px] md:min-h-[500px] lg:min-h-[600px] xl:min-h-[700px]">
<div class="min-h-[inherit] flex flex-col justify-between">
<div class="flex justify-between items-center">
<div><a href="/"><img src="/themes/custom/fstheme/logo.png" width="68px" height="68px" /></a></div>
<div>{{ page.primary_menu }}</div>
<div class="primary-menu-wrapper">
<div class="lg:hidden js-open-menu">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.25 19.5V17.3333H22.75V19.5H3.25ZM3.25 14.0833V11.9167H22.75V14.0833H3.25ZM3.25 8.66667V6.5H22.75V8.66667H3.25Z" fill="white"/>
</svg>
</div>
<div class="primary-menu hidden lg:block absolute lg:static h-screen lg:h-auto py-[47px] md:py-[50px] lg:py-0 top-0 left-0 w-full z-[9999] bg-black lg:bg-transparent">
<div class="primary-menu-container flex flex-col justify-between h-full">
<div class="primary-menu__header flex lg:hidden justify-between items-center">
<div><a href="/"><img src="/themes/custom/fstheme/logo.png" width="68px" height="68px" /></a></div>
<div class="js-close-menu">
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_31_232)">
<path d="M21.0227 3.20325L12.5 11.6815L3.97728 3.20325L2.08365 5.087L10.6064 13.5653L2.08365 22.0435L3.97728 23.9273L12.5 15.449L21.0227 23.9273L22.9164 22.0435L14.3936 13.5653L22.9164 5.087L21.0227 3.20325Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_31_232">
<rect width="25" height="26" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
</div>
<div class="primary-menu__content text-right">
{{ page.primary_menu }}
</div>
</div>
</div>
</div>
</div>
<div>
<div class="mt-[30px]">
{{ page.title }}
</div>
</div>
Expand Down Expand Up @@ -96,7 +124,7 @@

</main>

<footer role="contentinfo" class="bg-fs-red-tint text-white pt-[80px] pb-[30px] md:pb-[35px] lg:pt[90px] lg:pb-[45px]">
<footer role="contentinfo" class="font-mono bg-fs-red-tint text-white pt-[80px] pb-[30px] md:pb-[35px] lg:pt[90px] lg:pb-[45px]">
<div class="container">
<div class="lg:flex md:px-[90px] lg:px-0">
<div class="text-[30px] leading-[39px] lg:text-[36px] leading-[48px] lg:w-2/3 lg:pr-[10%] mb-[60px] lg:mb-0"><p>Freesauce acknowledges the Traditional Custodians of the land on which we work and live and we pay our respects to their Elders, past and present.</p></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@
*/
#}

<ul class="main-menu">
<ul class="lg:flex">
{% for item in items %}
<li>
{{ link(item.title, item.url) }}
<a href="{{ item.url }}" class="inline-block py-[25px] lg:p-[25px] text-[46px] leading-[54px] md:text-[56px] md:leading-[54px] lg:text-[22px] lg:leading-[45px] xl:text-[24px]">{{ item.title }}</a>
</li>
{% endfor %}
</ul>

0 comments on commit 81cde8f

Please sign in to comment.