feat: many changes
This commit is contained in:
@@ -45,13 +45,13 @@
|
||||
<div class="flex space-x-4">
|
||||
<!-- Social buttons -->
|
||||
|
||||
<a href="#" aria-label="LinkedIn" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
|
||||
<a href="#" aria-label="LinkedIn" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center">
|
||||
<i class="ci ci-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" aria-label="Instagram" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
|
||||
<a href="#" aria-label="Instagram" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center">
|
||||
<i class="ci ci-instagram"></i>
|
||||
</a>
|
||||
<a href="#" aria-label="Facebook" class="text-2xl bg-white text-primary p-3 rounded-full inline-flex items-center justify-center">
|
||||
<a href="#" aria-label="Facebook" class="w-10 h-10 text-2xl bg-white text-primary rounded-full inline-flex items-center justify-center">
|
||||
<i class="ci ci-facebook"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.container {
|
||||
margin: auto;
|
||||
/* padding: 3rem 1rem; */
|
||||
@apply px-4 py-6 md:py-12;
|
||||
|
||||
@include respond($breakpoint-sm) {
|
||||
max-width: 540px;
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
.card-container {
|
||||
// Container styles if needed
|
||||
}
|
||||
|
||||
.perspective {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.preserve-3d {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.rotate-y-180 {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.backface-hidden {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden; /* Safari */
|
||||
}
|
||||
|
||||
// Ensure the back is initially hidden and rotated
|
||||
.card-back {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
// Flip on hover/focus-within the group
|
||||
.group:hover .card-flip-inner,
|
||||
.group:focus-within .card-flip-inner {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
// Style the front overlay and title
|
||||
.card-front {
|
||||
.absolute { // The overlay div
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
h3 {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Fade out overlay slightly on hover to reveal image more
|
||||
.group:hover .card-front .absolute {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// Optional: Hide front title on hover if desired
|
||||
// .group:hover .card-front h3 {
|
||||
// opacity: 0;
|
||||
// }
|
||||
@@ -1,153 +1,5 @@
|
||||
// Define a fixed height for the navigation and apply that as padding-top on the body
|
||||
// so that when it becomes sticky, the content doesn't jump.
|
||||
$nav-height: 60px; // Adjust as needed
|
||||
|
||||
// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process.
|
||||
// Ensure this path is correct for your TYPO3 installation.
|
||||
// Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
|
||||
|
||||
body > header {
|
||||
width: 100%;
|
||||
line-height: $nav-height;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
img {
|
||||
display: block;
|
||||
max-height: 50px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: none; // hidden by default on desktop
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.nav-toggle-icon {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $primary-color;
|
||||
display: block;
|
||||
position: relative;
|
||||
@include transition(all, 0.3s);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $primary-color;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@include transition(all, 0.3s);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .nav-toggle-icon {
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg) translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
font-family: 'Hajime Sans', sans-serif;
|
||||
font-size: 1.75rem;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 1rem;
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: $primary-color;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 1rem;
|
||||
@include transition(color);
|
||||
|
||||
&:hover {
|
||||
color: $brand-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.nav-toggle {
|
||||
display: block;
|
||||
margin-left: auto; // move toggle to the right on mobile
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
background: #fff; // Add white background for mobile dropdown
|
||||
@include transition(max-height, 0.4s);
|
||||
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(0,0,0,0.1);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open .nav-links {
|
||||
max-height: 500px; // Adjust to fit all items
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.frame-type-form_formframework {
|
||||
@apply py-16;
|
||||
@apply py-6 md:py-12;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@import 'abstracts/icons';
|
||||
@import 'abstracts/fade-in';
|
||||
@import 'base/base';
|
||||
/* @import 'components/navigation'; */
|
||||
@import 'components/navigation';
|
||||
/* @import 'components/images'; */
|
||||
/* @import 'components/news'; */
|
||||
/* @import "components/news_detail"; */
|
||||
@@ -17,5 +17,6 @@
|
||||
@import 'components/text';
|
||||
@import 'components/buttons';
|
||||
@import 'components/form';
|
||||
@import 'components/card-container';
|
||||
@import 'layouts/home-page';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user