josevi/valier-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive version

Browse Source
This commit is contained in:
Josevi Canet
2024-09-21 15:42:53 +02:00
parent 19403eb4c8
commit f86e484b9d
7 changed files with 121 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.idea/valier.iml generated
View File

@@ -2,6 +2,8 @@
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/spec" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" />
<excludeFolder url="file://$MODULE_DIR$/vendor/composer" />
<excludeFolder url="file://$MODULE_DIR$/vendor/dealerdirect/phpcodesniffer-composer-installer" />
<excludeFolder url="file://$MODULE_DIR$/vendor/eftec/bladeone" />

18
tailwind/custom/base.css
View File

@@ -13,5 +13,23 @@
*/
body {
@apply bg-background text-tertiary font-sans;
font-size: 14px;
@media screen(lg) {
font-size: 18px;
}
}
#menu-toggle:checked + #menu {
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
footer {
.legal, .wp-block-group {
flex-direction: column;
margin-left: 1rem;
margin-right: 1rem;
}
}
}

23
tailwind/custom/components/components.css
View File

@@ -62,10 +62,10 @@ header {
background-size: cover;
background-position: center;
#site-navigation {
img.linkedin {
height: 1rem;
}
margin-left: 1rem;
margin-top: -0.5rem;
}
.header-cointainer {
@@ -84,6 +84,8 @@ header {
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@@ -116,7 +118,13 @@ footer {
top: 15%;
z-index: 1000;
width: 40vw;
min-width: 500px;
margin-left: 15vw;
@media (max-width: 500px) {
width: 90vw;
min-width: 0;
margin: 5vw;
}
}
}
@@ -128,13 +136,16 @@ footer {
@apply absolute;
left: -10vw;
top: 10vw;
@media (max-width: 500px) {
left: 10vw;
}
}
}
.overlay-icons {
@apply absolute drop-shadow-xl p-5;
@apply p-5;
width: 40vw;
min-width: 645px;
img {
width: 100px;
}
@@ -142,4 +153,8 @@ footer {
p {
width: 250px;
}
@media (min-width: 782px) {
@apply drop-shadow-xl absolute;
}
}

2
theme/footer.php
View File

@@ -18,6 +18,6 @@
</div><!-- #page -->
<?php wp_footer(); ?>
<div class="m-2 hidden"></div>
</body>
</html>

2
theme/template-parts/layout/footer-content.php
View File

@@ -24,7 +24,7 @@
</a>
</div>
<div class="bg-primary text-black py-2 has-playfair-font-family">
<div class="container mx-auto has-mini-font-size flex justify-center gap-3 italic">
<div class="container legal mx-auto has-mini-font-size flex justify-center gap-3 italic">
<?= get_field('texto_legal', 'option') ?>
<?php
wp_nav_menu(

31
theme/template-parts/layout/header-home.php
View File

@@ -4,9 +4,28 @@
</div>
<div class="header-cointainer">
<div class="container mx-auto flex justify-between self-start justify-self-start ">
<nav class="container p-4 2xl:mx-auto flex flex-wrap items-center self-start">
<div class="flex-1 flex justify-between items-center">
<a href="<?= get_home_url() ?>" class="flex text-lg font-semibold">
<img src="<?= get_field('logo_home', 'option') ?>" alt="<?= get_bloginfo('name') ?>">
<nav id="site-navigation" aria-label="<?php esc_attr_e('Main Navigation', 'valier'); ?>"
</a>
</div>
<label for="menu-toggle" class="cursor-pointer lg:hidden block">
<svg
class="fill-current text-white"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
>
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input class="hidden" type="checkbox" id="menu-toggle"/>
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
<nav id="site-navigation" aria-label="
<?php esc_attr_e('Main Navigation', 'valier'); ?>"
class="has-small-font-size uppercase has-cinzel-font-family flex items-center gap-6">
<?php
wp_nav_menu(
@@ -14,16 +33,18 @@
'theme_location' => 'menu-primary',
'container' => false,
'menu_id' => 'menu-primary',
'items_wrap' => '<ul id="%1$s" class="%2$s flex justify-center gap-6 text-white " aria-label="submenu">%3$s</ul>',
'items_wrap' => '<ul id="%1$s" class="%2$s text-xl text-center items-center pt-4 md:gap-x-4 lg:text-lg lg:flex lg:pt-0 gap-6 text-white" aria-label="submenu">%3$s</ul>',
)
);
?>
</nav>
</div>
<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin hidden lg:block ">
</a>
</nav>
</div>
<h1 class="self-start justify-self-center has-extreme-font-size has-white-color has-cinzel-font-family uppercase "><?= get_the_title() ?></h1>
</div>
</header>

31
theme/template-parts/layout/header-page.php
View File

@@ -1,8 +1,25 @@
<header id="masthead">
<div class="bg-white py-6">
<div class="container mx-auto flex justify-between self-start justify-self-start ">
<nav class="container p-4 2xl:mx-auto flex flex-wrap items-center self-start">
<div class="flex-1 flex justify-between items-center">
<?= get_custom_logo() ?>
<nav id="site-navigation" aria-label="<?php esc_attr_e('Main Navigation', 'valier'); ?>"
</div>
<label for="menu-toggle" class="cursor-pointer lg:hidden block">
<svg
class="fill-current"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
>
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input class="hidden" type="checkbox" id="menu-toggle"/>
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
<nav id="site-navigation" aria-label="
<?php esc_attr_e('Main Navigation', 'valier'); ?>"
class="has-small-font-size uppercase has-cinzel-font-family flex items-center gap-6">
<?php
wp_nav_menu(
@@ -10,15 +27,17 @@
'theme_location' => 'menu-primary',
'container' => false,
'menu_id' => 'menu-primary',
'items_wrap' => '<ul id="%1$s" class="%2$s flex justify-center gap-6 " aria-label="submenu">%3$s</ul>',
'items_wrap' => '<ul id="%1$s" class="%2$s md:gap-x-4 lg:flex lg:pt-0 gap-6 " aria-label="submenu">%3$s</ul>',
)
);
?>
<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin">
</a>
</nav>
</div>
<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin hidden lg:block ">
</a>
</nav>
</div>
<h1 class="self-start justify-self-center has-extreme-font-size has-white-color has-cinzel-font-family uppercase text-center py-10"
style="background-image: url(<?= get_the_post_thumbnail_url() ?>)"><?= get_the_title() ?></h1>