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"> <module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager"> <component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$"> <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/composer" />
<excludeFolder url="file://$MODULE_DIR$/vendor/dealerdirect/phpcodesniffer-composer-installer" /> <excludeFolder url="file://$MODULE_DIR$/vendor/dealerdirect/phpcodesniffer-composer-installer" />
<excludeFolder url="file://$MODULE_DIR$/vendor/eftec/bladeone" /> <excludeFolder url="file://$MODULE_DIR$/vendor/eftec/bladeone" />

20
tailwind/custom/base.css
View File

@@ -13,5 +13,23 @@
*/ */
body { body {
@apply bg-background text-tertiary font-sans; @apply bg-background text-tertiary font-sans;
font-size: 18px; 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;
}
}
} }

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

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

2
theme/footer.php
View File

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

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

@@ -24,7 +24,7 @@
</a> </a>
</div> </div>
<div class="bg-primary text-black py-2 has-playfair-font-family"> <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') ?> <?= get_field('texto_legal', 'option') ?>
<?php <?php
wp_nav_menu( wp_nav_menu(

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

@@ -4,26 +4,47 @@
</div> </div>
<div class="header-cointainer"> <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">
<img src="<?= get_field('logo_home', 'option') ?>" alt="<?= get_bloginfo('name') ?>"> <div class="flex-1 flex justify-between items-center">
<nav id="site-navigation" aria-label="<?php esc_attr_e('Main Navigation', 'valier'); ?>" <a href="<?= get_home_url() ?>" class="flex text-lg font-semibold">
class="has-small-font-size uppercase has-cinzel-font-family flex items-center gap-6"> <img src="<?= get_field('logo_home', 'option') ?>" alt="<?= get_bloginfo('name') ?>">
<?php
wp_nav_menu(
array(
'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>',
)
);
?>
<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin">
</a> </a>
</nav> </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(
array(
'theme_location' => 'menu-primary',
'container' => false,
'menu_id' => 'menu-primary',
'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 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> <h1 class="self-start justify-self-center has-extreme-font-size has-white-color has-cinzel-font-family uppercase "><?= get_the_title() ?></h1>
</div> </div>
</header> </header>

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

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