Skip to content

Commit

Permalink
Init some base style: Heading, container, footer, header banner.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tannguyen04
tannguyen04 committed Nov 8, 2024
1 parent d6fdcef commit 6d9147e
Show file tree
Hide file tree
Showing 4 changed files with 300 additions and 2 deletions.
95 changes: 94 additions & 1 deletion web/themes/custom/fstheme/src/css/main.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,99 @@

@layer base {

/* @note Some typography can go into tailwind.config.js. */
h1 {
@apply text-[46px] leading-[46px];
}

h2 {
@apply text-[34px] leading-[41px];
}

h3 {
@apply text-[28px] leading-[39px];
}

h4 {
@apply text-[24px] leading-[37px];
}

h5 {
@apply text-[22px] leading-[33px];
}

@media screen(md) {
h1 {
@apply text-[56px] leading-[54px];
}

h2 {
@apply text-[38px] leading-[41px];
}

h3 {
@apply text-[30px] leading-[39px];
}

h4 {
@apply text-[24px] leading-[37px];
}

h5 {
@apply text-[22px] leading-[33px];
}
}

@media screen(lg) {
h1 {
@apply text-[90px] leading-[73px];
}

h2 {
@apply text-[60px] leading-[70px];
}

h3 {
@apply text-[46px] leading-[73px];
}

h4 {
@apply text-[36px] leading-[35px];
}

h5 {
@apply text-[22px] leading-[33px];
}
}

@media screen(xl) {
h1 {
@apply text-[100px] leading-[102px];
}

h2 {
@apply text-[60px] leading-[70px];
}

h3 {
@apply text-[46px] leading-[73px];
}

h4 {
@apply text-[36px] leading-[35px];
}

h5 {
@apply text-[22px] leading-[33px];
}
}

*+p {
@apply mt-[16px] lg:mt-[30px];
}
}

@layer utilities {
.container {
@apply px-[30px] md:px-[40px] lg:px-[110px] lg:max-w-[1440px] xl:px-[200px] xl:max-w-[1940px];
}
}
81 changes: 81 additions & 0 deletions web/themes/custom/fstheme/templates/content/node--page.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
{#
/**
* @file
* Theme override to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: (optional) The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: (optional) Themed creation date field.
* - author_name: (optional) Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
*
* @see template_preprocess_node()
*
*/
#}
<article{{ attributes }}>

{{ title_prefix }}
{% if label and not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}

<div{{ content_attributes }}>
<div class="container">
<div class="md:px-[90px] lg:px-[208px] lg:px-[258px] font-sans">
{{ content }}
</div>
</div>
</div>
</article>
2 changes: 1 addition & 1 deletion web/themes/custom/fstheme/templates/layout/html.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes.addClass('font-sans font-normal') }}>
<div class="site-layout-frame pt-2 md:pt-4 lg:pt-8">
<div class="text-base font-mono">
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
Expand Down
124 changes: 124 additions & 0 deletions web/themes/custom/fstheme/templates/layout/page.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
{#
/**
* @file
* Theme override to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - messages: Status and error messages. Should be displayed prominently.
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer: Items for the footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}
<div class="layout-container">

<header role="banner">
<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="relative h-full">
<div class="flex justify-between items-center">
<div><img src="/themes/custom/fstheme/logo.png" width="68px" height="68px" /></div>
<div>Menu Humbeger</div>
</div>
<h1 class="absolute bottom-0 left-0">About us</h1>
</div>
</div>
</div>
</header>

{{ page.primary_menu }}
{{ page.secondary_menu }}

{{ page.breadcrumb }}

{{ page.highlighted }}

{{ page.help }}

<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

<div class="py-[80px] lg:py-[140px]">
{{ page.content }}
</div>

{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}

{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}

</main>

<footer role="contentinfo" class="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>
<div class="font-sans lg:w-1/3">
<div class="mb-[55px]">
<h5 class="mb-[15px] font-bold">Get in touch</h5>
<ul>
<li class="pb-[5px]"><a href="#" target="_blank" class="flex items-center"><svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.0851 2.92079C18.8663 2.09787 18.224 1.45204 17.408 1.23329C15.9288 0.833984 9.99826 0.833984 9.99826 0.833984C9.99826 0.833984 4.06771 0.833984 2.58854 1.23329C1.77257 1.45204 1.13021 2.09787 0.911458 2.92079C0.515625 4.41037 0.515625 7.51454 0.515625 7.51454C0.515625 7.51454 0.515625 10.6187 0.911458 12.1083C1.13021 12.9312 1.77257 13.5493 2.58854 13.768C4.06771 14.1673 9.99826 14.1673 9.99826 14.1673C9.99826 14.1673 15.9288 14.1673 17.408 13.768C18.224 13.5493 18.8663 12.9277 19.0851 12.1083C19.4809 10.6187 19.4809 7.51454 19.4809 7.51454C19.4809 7.51454 19.4809 4.41037 19.0851 2.92079ZM8.06076 10.334V4.6951L13.0156 7.51454L8.06076 10.334Z" fill="white"/>
</svg>
<span class="pl-[15px]">Youtube</span></a></li>
<li class="pb-[5px]"><a href="#" target="_blank" class="flex items-center"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.68952 16.1987C6.68952 16.2793 6.59677 16.3438 6.47984 16.3438C6.34677 16.3559 6.25403 16.2914 6.25403 16.1987C6.25403 16.1181 6.34677 16.0536 6.46371 16.0536C6.58468 16.0415 6.68952 16.106 6.68952 16.1987ZM5.43548 16.0173C5.40726 16.0979 5.4879 16.1906 5.60887 16.2148C5.71371 16.2551 5.83468 16.2148 5.85887 16.1342C5.88306 16.0536 5.80645 15.9609 5.68548 15.9246C5.58065 15.8964 5.46371 15.9367 5.43548 16.0173ZM7.21774 15.9488C7.10081 15.977 7.02016 16.0536 7.03226 16.1463C7.04435 16.2269 7.14919 16.2793 7.27016 16.2511C7.3871 16.2229 7.46774 16.1463 7.45564 16.0657C7.44355 15.9891 7.33468 15.9367 7.21774 15.9488ZM9.87097 0.504883C4.27823 0.504883 0 4.74874 0 10.3387C0 14.8083 2.81452 18.633 6.83468 19.9791C7.35081 20.0718 7.53226 19.7534 7.53226 19.4914C7.53226 19.2416 7.52016 17.8632 7.52016 17.0168C7.52016 17.0168 4.69758 17.6214 4.10484 15.8158C4.10484 15.8158 3.64516 14.643 2.98387 14.3408C2.98387 14.3408 2.06048 13.708 3.04839 13.7201C3.04839 13.7201 4.05242 13.8007 4.60484 14.7599C5.4879 16.3156 6.96774 15.8682 7.54435 15.6022C7.6371 14.9574 7.89919 14.51 8.18952 14.244C5.93548 13.9942 3.66129 13.6677 3.66129 9.7906C3.66129 8.68228 3.96774 8.1261 4.6129 7.41678C4.50806 7.15481 4.16532 6.0747 4.71774 4.68023C5.56048 4.41826 7.5 5.7684 7.5 5.7684C8.30645 5.54271 9.17339 5.42583 10.0323 5.42583C10.8911 5.42583 11.7581 5.54271 12.5645 5.7684C12.5645 5.7684 14.504 4.41423 15.3468 4.68023C15.8992 6.07873 15.5565 7.15481 15.4516 7.41678C16.0968 8.13013 16.4919 8.68631 16.4919 9.7906C16.4919 13.6798 14.1169 13.9901 11.8629 14.244C12.2339 14.5624 12.5484 15.167 12.5484 16.1141C12.5484 17.4723 12.5363 19.1529 12.5363 19.4834C12.5363 19.7453 12.7218 20.0637 13.2339 19.971C17.2661 18.633 20 14.8083 20 10.3387C20 4.74874 15.4637 0.504883 9.87097 0.504883ZM3.91935 14.4052C3.86694 14.4455 3.87903 14.5382 3.94758 14.6148C4.0121 14.6793 4.10484 14.7075 4.15726 14.6551C4.20968 14.6148 4.19758 14.5221 4.12903 14.4455C4.06452 14.3811 3.97177 14.3528 3.91935 14.4052ZM3.48387 14.0788C3.45565 14.1312 3.49597 14.1957 3.57661 14.236C3.64113 14.2763 3.72177 14.2642 3.75 14.2078C3.77823 14.1554 3.7379 14.0909 3.65726 14.0506C3.57661 14.0264 3.5121 14.0385 3.48387 14.0788ZM4.79032 15.5136C4.72581 15.566 4.75 15.6869 4.84274 15.7634C4.93548 15.8561 5.05242 15.8682 5.10484 15.8037C5.15726 15.7513 5.13306 15.6304 5.05242 15.5539C4.96371 15.4612 4.84274 15.4491 4.79032 15.5136ZM4.33065 14.9211C4.26613 14.9614 4.26613 15.0662 4.33065 15.1589C4.39516 15.2516 4.50403 15.2919 4.55645 15.2516C4.62097 15.1992 4.62097 15.0944 4.55645 15.0017C4.5 14.909 4.39516 14.8687 4.33065 14.9211Z" fill="white"/>
</svg>
<span class="pl-[15px]">Github</span></a></li>
<li class="pb-[5px]"><a href="#" target="_blank" class="flex items-center"><svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5714 0.572266H1.42411C0.638393 0.572266 0 1.21492 0 2.00383V18.9965C0 19.7854 0.638393 20.428 1.42411 20.428H18.5714C19.3571 20.428 20 19.7854 20 18.9965V2.00383C20 1.21492 19.3571 0.572266 18.5714 0.572266ZM6.04464 17.5915H3.08036V8.11568H6.04911V17.5915H6.04464ZM4.5625 6.82151C3.61161 6.82151 2.84375 6.05476 2.84375 5.11516C2.84375 4.17556 3.61161 3.4088 4.5625 3.4088C5.50893 3.4088 6.28125 4.17556 6.28125 5.11516C6.28125 6.0592 5.51339 6.82151 4.5625 6.82151ZM17.1562 17.5915H14.192V12.9821C14.192 11.883 14.1696 10.4691 12.6518 10.4691C11.1071 10.4691 10.8705 11.6658 10.8705 12.9023V17.5915H7.90625V8.11568H10.75V9.40986H10.7902C11.1875 8.66526 12.1563 7.88078 13.5982 7.88078C16.5982 7.88078 17.1562 9.8442 17.1562 12.3971V17.5915Z" fill="white"/>
</svg>
<span class="pl-[15px]">Linkedin</span></a></li>
</ul>
</div>
<div>
<p>We have purpose driven agency, free as in source, which is a heavy handed metaphor.</p>
</div>
</div>
</div>
<div class="border-solid border-t mt-[30px] md:mt-[69px] lg:mt-77px xl:mt-89px pt-[30px] xl:pt-[25px] text-center font-sans">
<p>Copyright Freesauce ABN XX XXXX XXXXX</p>
</div>
</div>
</footer>
</div>{# /.layout-container #}

0 comments on commit 6d9147e

Please sign in to comment.