Merge branch 'main' of github.com:TYPO3incubator/surfcamp-team-jacuzzi

TYPO3incubator · Apr 12, 2024 · 2dfbd00 · 2dfbd00
2 parents 1bd1a58 + e3f5c9a
commit 2dfbd00
Show file tree

Hide file tree

Showing 15 changed files with 324 additions and 9 deletions.
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_functions.scss b/local_packages/psi/Resources/Private/Scss/Base/_functions.scss
@@ -24,4 +24,19 @@
 //! requires global set $rem-base => shall be included in html selector
 @function rem($value){
     @return calc($value / $rem-base) + rem;
-}
+}
+
+//! simple function to add values to different units
+@function toUnit($value, $unit){
+    // $value => 10/15 some number
+    // unit => rem,em,px,%,vmin,vmax etc
+    @return $value + unquote($unit);
+}
+// example
+// .toUnit-test{
+//     padding: toUnit(10, 'px');
+//     margin: toUnit(10, '%');
+//     width: toUnit(10, 'vmin');
+//     line-height: toUnit(10, 'vh');
+//     font-size: toUnit(10, 'rem');
+// }
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_globals.scss b/local_packages/psi/Resources/Private/Scss/Base/_globals.scss
@@ -23,6 +23,23 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.section,
+section {
+	margin-top: clamp(48px, 5vw, 76px);
+	margin-bottom: clamp(48px, 5vw, 76px);
+
+	&.no-margin {
+		margin-top: 0;
+		margin-bottom: 0;
+		&--top {
+			margin-top: 0;
+		}
+		&--bot {
+			margin-bottom: 0;
+		}
+	}
+}
+
 
 // headlines
 @each $selector, $size in $headlines{
@@ -36,4 +53,9 @@ body {
 	  font-weight: bold;
 	  word-wrap: break-word;
 	}
-  }
+  }
+
+
+a {
+	color: var(--link);
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_grid.scss b/local_packages/psi/Resources/Private/Scss/Base/_grid.scss
@@ -23,6 +23,8 @@
 // 	padding-left: $grid-gutter-width / 2;
 // }
 
+
+
 .container {
 	--columns: #{map-get($grid-config, columns)};
 	--gutter: #{map-get($grid-config, gutter)};
@@ -70,6 +72,15 @@
 			.col-#{$bp}-#{$i}{
 				flex-basis: calc((100% - #{map-get($grid-config, gutter)} * 2 ) / #{map-get($grid-config, columns)} * #{$i});
 			}
-		}		
+
+		}	
+		@for $i from 1 through map-get($grid-config, columns) {
+			.#{$bp}-offset-#{$i}-l {
+			    margin-right: calc(100% / (#{map-get($grid-config, columns)} / #{$i}));
+			}
+			.#{$bp}-offset-#{$i}-r {
+			    margin-right: calc(100% / (#{map-get($grid-config, columns)} / #{$i}));
+			}
+		}	
 	}
 }
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_mixins.scss b/local_packages/psi/Resources/Private/Scss/Base/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin hyphens {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    hyphens: auto;
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_variables.scss b/local_packages/psi/Resources/Private/Scss/Base/_variables.scss
@@ -61,22 +61,26 @@ $color-themes: (
         accent: $accent,
         light: $light,
         dark: $dark,
-        background: $light,
+        background: #fff,
         text: $dark,
-
+        text-light: #6F6F6F,
+        link: $primary,
+
         // utility  
         success: $success,
         error: $error,
         warn: $warn,
         hint: $hint,
-    ),
-
+        ),
+        
     contrastMode: (
         primary: $contrast-primary,
         secondary: $contrast-secondary,
         accent: $contrast-accent,
         background: $dark,
         text: $light,
+        text-light: $contrast-secondary,
+        link: var(--primary),
 
         // utility  
         success: $contrast-success,
@@ -136,4 +140,16 @@ $spacings: (
     // 16 steps
     96,
     112
-);
+);
+
+$section-spacings: clamp(64px, 5vw, 80px);
+
+$border-radius: (
+  small: toUnit(4, 'px'),
+  medium: toUnit(8, 'px'),
+  large: toUnit(12, 'px')
+);
+
+$box-shadow-shade: color-mix(in srgb, var(--dark), transparent 70%); 
+$box-shadow-small: 0 0 rem(4) 0 $box-shadow-shade;
+$box-shadow-medium: 0 0 rem(8) 0 $box-shadow-shade;
diff --git a/local_packages/psi/Resources/Private/Scss/Base/index.scss b/local_packages/psi/Resources/Private/Scss/Base/index.scss
@@ -2,6 +2,7 @@
 
 @import './functions';
 @import './variables';
+@import './mixins';
 
 @import './globals';
 @import './grid';
diff --git a/local_packages/psi/Resources/Private/Scss/Components/_headline.scss b/local_packages/psi/Resources/Private/Scss/Components/_headline.scss
@@ -12,7 +12,9 @@
     }
 }
 
-.subheadline {
+.topline {
     width: 100%;
     display: block;
+    margin-bottom: rem(4);
+    text-transform: uppercase;
 }
diff --git a/local_packages/psi/Resources/Private/Scss/Layout/_breadcumb.scss b/local_packages/psi/Resources/Private/Scss/Layout/_breadcumb.scss
@@ -0,0 +1,22 @@
+.breadcrumb-container {
+	align-items: center;
+	display: flex;
+	gap: rem(4);
+	p, a {
+		font-size: rem(14);
+	}
+}
+#breadcrumb-menu {
+	display: flex;
+	gap: rem(4);
+	margin: 0;
+	padding: 0;
+	li {
+		display: block;
+		a {
+			color: var(--text);
+			text-decoration: none;
+			font-weight: 700;
+		}
+	}
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Layout/_fe-users.scss b/local_packages/psi/Resources/Private/Scss/Layout/_fe-users.scss
@@ -0,0 +1,29 @@
+#main-content {
+	padding: rem(30);
+	width: calc(100% - #{rem(240)});
+}
+.user-info-container {
+	align-items: center;
+	display: flex;
+	gap: rem(4);
+	padding: rem(4);
+}
+.user-info-avatar {
+	img {
+		border: 1px solid var(--primary);
+		border-radius: 50%;
+	}
+}
+.user-info-name {
+	align-items: center;
+	display: flex;
+	gap: rem(4);
+	p {
+		margin: 0;
+	}
+}
+.fe-user-title {
+	font-size: rem(12);
+	margin: 0;
+	margin-bottom: rem(4);
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Layout/_footer.scss b/local_packages/psi/Resources/Private/Scss/Layout/_footer.scss
@@ -0,0 +1,37 @@
+#site-footer {
+	display: flex;
+	height: rem(50);
+}
+.footer-container {
+	background-color: var(--accent, #D9D9D9);
+	display: flex;
+	justify-content: space-between;
+	height: 100%;
+	width: 100%;
+}
+.footer-logout {
+	background-color:  #c7c7c7;
+	display: flex;
+	width: rem(240);
+	a {
+		display: block;
+		font-size: rem(20);
+		font-weight: 600;
+		margin: auto 0;
+		padding-left: rem(32);
+		text-decoration: none;
+	}
+}
+.footermenu-container {
+	display: flex;
+	justify-content: center;
+	padding-right: rem(32);
+}
+#footer-nav {
+	display: flex;
+	margin: auto;
+	padding: 0;
+	li {
+		display: block;
+	}
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Layout/_header-menu.scss b/local_packages/psi/Resources/Private/Scss/Layout/_header-menu.scss
@@ -0,0 +1,55 @@
+#page-header {
+	display: flex;
+	height: rem(80);
+}
+.header-inner {
+	background-color: var(--light);
+	display: flex;
+	justify-content: space-between;
+	padding: 0 rem(30);
+	padding-left: 0;
+	width: 100%;
+}
+.header-left-container {
+	align-items: center;
+	display: flex;
+	gap: rem(24);
+	justify-content: center;
+}
+.header-menu-toggle {
+	background: var(--light);
+	border: none;
+	display: flex;
+	flex-direction: column;
+	gap: rem(8);
+	height: 100%;
+	justify-content: center;
+	width: rem(64);
+	&:hover {
+		cursor: pointer;
+	}
+}
+.header-logo {
+	height: rem(60);
+	img {
+		height: auto;
+		max-height: 100%;
+		object-fit: contain;
+		width: 100%;
+	}
+}
+.menu-toggle-stripe {
+	background-color: var(--primary);
+	height: rem(4);
+	margin: 0 auto;
+	width: rem(40);
+}
+.header-avatar {
+	img {
+		height: auto;
+		max-width: rem(80);
+	}
+}
+.header-search-container {
+	margin: 0 auto;
+}
diff --git a/local_packages/psi/Resources/Private/Scss/Layout/_language-menu.scss b/local_packages/psi/Resources/Private/Scss/Layout/_language-menu.scss
@@ -0,0 +1,22 @@
+.language-menu {
+	display: flex;
+	justify-content: center;
+}
+#language-navigation {
+	display: flex;
+	gap: rem(4);
+	margin: auto;
+	padding: 0;
+	li {
+		border-right: 1px solid var(--text);
+		display: block;
+		padding-right: rem(4);
+		&:last-child {
+			border-right: none;
+		}
+		a {
+			color: var(--text);
+			text-decoration: none;
+		}
+	}
+}