-
Brand Logo
+
+
+
diff --git a/packages/base/Resources/Public/Fonts/Hajime Sans.otf b/packages/base/Resources/Public/Fonts/Hajime Sans.otf
new file mode 100644
index 0000000..253d897
Binary files /dev/null and b/packages/base/Resources/Public/Fonts/Hajime Sans.otf differ
diff --git a/packages/base/Resources/Public/Fonts/Hajime Sans.ttf b/packages/base/Resources/Public/Fonts/Hajime Sans.ttf
new file mode 100644
index 0000000..f15a6e1
Binary files /dev/null and b/packages/base/Resources/Public/Fonts/Hajime Sans.ttf differ
diff --git a/packages/base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf b/packages/base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..43ed4f5
Binary files /dev/null and b/packages/base/Resources/Public/Fonts/Inter-Italic-VariableFont_opsz,wght.ttf differ
diff --git a/packages/base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf b/packages/base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..e31b51e
Binary files /dev/null and b/packages/base/Resources/Public/Fonts/Inter-VariableFont_opsz,wght.ttf differ
diff --git a/packages/base/Resources/Public/Icons/email.svg b/packages/base/Resources/Public/Icons/email.svg
new file mode 100644
index 0000000..0f8aafc
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/email.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/instagram.svg b/packages/base/Resources/Public/Icons/instagram.svg
new file mode 100644
index 0000000..3a5f02b
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/instagram.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/linkedin.svg b/packages/base/Resources/Public/Icons/linkedin.svg
new file mode 100644
index 0000000..41dc387
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/linkedin.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/phone.svg b/packages/base/Resources/Public/Icons/phone.svg
new file mode 100644
index 0000000..06b9376
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/phone.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/tiktok.svg b/packages/base/Resources/Public/Icons/tiktok.svg
new file mode 100644
index 0000000..d0230ba
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/tiktok.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/x.svg b/packages/base/Resources/Public/Icons/x.svg
new file mode 100644
index 0000000..97f47cc
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/x.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Images/background.jpg b/packages/base/Resources/Public/Images/background.jpg
new file mode 100644
index 0000000..4268ff9
Binary files /dev/null and b/packages/base/Resources/Public/Images/background.jpg differ
diff --git a/packages/base/Resources/Public/Images/background.png b/packages/base/Resources/Public/Images/background.png
new file mode 100644
index 0000000..742be56
Binary files /dev/null and b/packages/base/Resources/Public/Images/background.png differ
diff --git a/packages/base/Resources/Public/Images/logo.png b/packages/base/Resources/Public/Images/logo.png
new file mode 100644
index 0000000..15b3012
Binary files /dev/null and b/packages/base/Resources/Public/Images/logo.png differ
diff --git a/packages/base/Resources/Public/Scss/abstracts/_fonts.scss b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
new file mode 100644
index 0000000..2955816
--- /dev/null
+++ b/packages/base/Resources/Public/Scss/abstracts/_fonts.scss
@@ -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;
+}
diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
new file mode 100644
index 0000000..b5d12ce
--- /dev/null
+++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
@@ -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);
+}
diff --git a/packages/base/Resources/Public/Scss/abstracts/_variables.scss b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
index 129217d..fea4340 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_variables.scss
+++ b/packages/base/Resources/Public/Scss/abstracts/_variables.scss
@@ -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
diff --git a/packages/base/Resources/Public/Scss/base/_global.scss b/packages/base/Resources/Public/Scss/base/_global.scss
index 2888d7a..9b09102 100644
--- a/packages/base/Resources/Public/Scss/base/_global.scss
+++ b/packages/base/Resources/Public/Scss/base/_global.scss
@@ -1,5 +1,3 @@
body {
- font-family: $font-stack;
- color: $primary-color;
line-height: 1.5;
}
diff --git a/packages/base/Resources/Public/Scss/components/_footer.scss b/packages/base/Resources/Public/Scss/components/_footer.scss
index 7990c57..8dd89a4 100644
--- a/packages/base/Resources/Public/Scss/components/_footer.scss
+++ b/packages/base/Resources/Public/Scss/components/_footer.scss
@@ -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;
-}
diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss
index 57e86a8..a45c3ff 100644
--- a/packages/base/Resources/Public/Scss/components/_navigation.scss
+++ b/packages/base/Resources/Public/Scss/components/_navigation.scss
@@ -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/
/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);
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index b029c80..1823ad1 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/packages/base/Resources/Public/Scss/components/_news.scss
@@ -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;
diff --git a/packages/base/Resources/Public/Scss/main.scss b/packages/base/Resources/Public/Scss/main.scss
index e84ac23..2f1e9b1 100644
--- a/packages/base/Resources/Public/Scss/main.scss
+++ b/packages/base/Resources/Public/Scss/main.scss
@@ -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';
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..61cf427
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,28 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+ mode: 'production',
+ entry: './packages/base/Resources/Public/Scss/main.scss',
+ output: {
+ path: path.resolve(__dirname, 'packages/base/Resources/Public/Css'),
+ filename: 'main.js' // JS not needed, but required by Webpack. The CSS will be extracted.
+ },
+ module: {
+ rules: [
+ {
+ test: /\.scss$/,
+ use: [
+ MiniCssExtractPlugin.loader,
+ 'css-loader',
+ 'sass-loader'
+ ]
+ }
+ ]
+ },
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: 'main.css'
+ })
+ ]
+};