feat: many design changes
This commit is contained in:
65
packages/base/Resources/Public/Scss/abstracts/_fonts.scss
Normal file
65
packages/base/Resources/Public/Scss/abstracts/_fonts.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
// The fonts available are OTF and TTF. Modern browsers prefer WOFF/WOFF2,
|
||||
// but we'll use TTF/OTF here.
|
||||
// We assume main.css is compiled into Resources/Public/Css, so to reach Fonts: ../Fonts/
|
||||
// Make sure filenames match exactly (case-sensitive) and spaces are escaped or handled properly.
|
||||
|
||||
// Hajime Sans (no weight variations provided other than normal)
|
||||
@font-face {
|
||||
font-family: 'Hajime Sans';
|
||||
src: url('../Fonts/Hajime Sans.ttf') format('truetype'),
|
||||
url('../Fonts/Hajime Sans.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Inter as a variable font:
|
||||
// The Inter variable fonts likely contain multiple weights.
|
||||
// We'll define one face for normal and one for italic using the variable font files.
|
||||
// Define the weight range if needed (e.g., font-weight: 100 900 for variable range).
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../Fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
|
||||
font-weight: 100 900; // Adjust as needed for variable font range
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../Fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Use Inter for body text
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Use Hajime Sans for headlines
|
||||
h1, h2, h3 {
|
||||
font-family: 'Hajime Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--cl-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
// Use Hajime Sans for buttons as well
|
||||
button, .btn {
|
||||
font-family: 'Hajime Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
62
packages/base/Resources/Public/Scss/abstracts/_icons.scss
Normal file
62
packages/base/Resources/Public/Scss/abstracts/_icons.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.ci {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ci::before {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
display: inline-block;
|
||||
content: ' ';
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: 1em;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.ci-instagram::before {
|
||||
mask-image: url(../Icons/instagram.svg);
|
||||
}
|
||||
.ci-tiktok::before {
|
||||
mask-image: url(../Icons/tiktok.svg);
|
||||
}
|
||||
.ci-linkedin::before {
|
||||
mask-image: url(../Icons/linkedin.svg);
|
||||
}
|
||||
.ci-x::before {
|
||||
mask-image: url(../Icons/x.svg);
|
||||
}
|
||||
.ci-email::before {
|
||||
mask-image: url(../Icons/email.svg);
|
||||
}
|
||||
.ci-phone::before {
|
||||
mask-image: url(../Icons/phone.svg);
|
||||
}
|
||||
|
||||
|
||||
a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
display: inline-block;
|
||||
content: ' ';
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: 1em;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
a[href*="instagram.com*"]::before {
|
||||
mask-image: url(../Icons/instagram.svg);
|
||||
}
|
||||
a[href*="tiktok.com"]::before {
|
||||
mask-image: url(../Icons/tiktok.svg);
|
||||
}
|
||||
a[href*="linkedin.com"]::before {
|
||||
mask-image: url(../Icons/linkedin.svg);
|
||||
}
|
||||
a[href*="x.com"]::before {
|
||||
mask-image: url(../Icons/x.svg);
|
||||
}
|
||||
@@ -22,6 +22,10 @@ $xl: 1200px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 992px;
|
||||
--breakpoint-xl: 1200px;
|
||||
|
||||
--bs-primary: #233600;
|
||||
--bs-yellow: #F5AE07;
|
||||
--cl-primary: #233600;
|
||||
}
|
||||
|
||||
// Additional global variables can be added here
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
body {
|
||||
font-family: $font-stack;
|
||||
color: $primary-color;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -63,19 +63,3 @@
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Social links styling based on href */
|
||||
a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #4b4b4b;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a[href*="instagram.com"]:hover,
|
||||
a[href*="tiktok.com"]:hover,
|
||||
a[href*="linkedin.com"]:hover,
|
||||
a[href*="twitter.com"]:hover,
|
||||
a[href*="x.com"]:hover {
|
||||
color: #6B8E23;
|
||||
}
|
||||
|
||||
@@ -2,11 +2,15 @@
|
||||
// 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/...
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: $nav-height;
|
||||
line-height: $nav-height;
|
||||
background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
|
||||
background: url('../Images/background.jpg') repeat;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
@@ -17,7 +21,6 @@ header {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
@@ -86,22 +89,30 @@ header {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
.nav-item {
|
||||
margin: 0 1rem;
|
||||
font-family: 'Hajime Sans', sans-serif;
|
||||
font-size: 1.75rem;
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: $primary-color;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 1rem;
|
||||
@include transition(color);
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $brand-color;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -117,7 +128,6 @@ header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@include transition(max-height, 0.4s);
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.news-list-item {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
// @media (min-width: $breakpoint-md) {
|
||||
// .news-list-item {
|
||||
// grid-column: span 2;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
@media (min-width: $breakpoint-lg) {
|
||||
.news-list-item {
|
||||
grid-column: span 2;
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/mixins';
|
||||
@import 'abstracts/fonts';
|
||||
@import 'abstracts/icons';
|
||||
@import 'base/base';
|
||||
@import 'components/navigation';
|
||||
@import 'components/contentElements';
|
||||
|
||||
Reference in New Issue
Block a user