Skip to content

Commit

Permalink
[TASK] Add base folder and file structure and add base styling (#44)
Browse files Browse the repository at this point in the history 
* [TASK] Add base folder and file strcuture and add base styling

* [TASK] change path for build setup

---------

Co-authored-by: Vanessa Marcinczak <[email protected]>
Co-authored-by: David Bonhagen <[email protected]>
  • Loading branch information
@vaymarzi @david-bonhagen
3 people authored Apr 9, 2024
1 parent bfae534 commit 1f8d900
Show file tree
Hide file tree
Showing 22 changed files with 759 additions and 3 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/public/
/var/
/vendor/
/local_packages/portfolio/node_modules/
/typo3_core/
*.idea
*.project
Expand Down
161 changes: 161 additions & 0 deletions local_packages/portfolio/Resources/Private/Build/Stylesheet/abstracts/_mixin.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
@use "sass:map";
@use "sass:math";

/* ==== Mixins ==== */

// Media Queries
// min-width: @include breakpoint(md) {}
// max-width: @include breakpoint-down(md) {}
// min-width and max-width: @include breakpoint-between(sm, md) {}

// min-width
@mixin breakpoint-up($breakpoint) {
// If the breakpoint exists in the map.
@if map.has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map.get($breakpoints, $breakpoint);
// Write the media query.
@media only screen and (min-width: $breakpoint-value) {
@content;
}
// If the breakpoint doesn't exist in the map.
} @else {
// Log a warning.
@warn "Invalid breakpoint: #{$breakpoint}.";
}
}

// max-width
@mixin breakpoint-down($breakpoint) {
// If the breakpoint exists in the map.
@if map.has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map.get($breakpoints, $breakpoint);
// Write the media query.
@media only screen and (max-width: ($breakpoint-value - 1)) {
@content;
}
// If the breakpoint doesn't exist in the map.
} @else {
// Log a warning.
@warn "Invalid breakpoint: #{$breakpoint}.";
}
}

// min-width and max-width
@mixin breakpoint-between($lower, $upper) {
// If both the lower and upper breakpoints exist in the map.
@if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
// Get the lower and upper breakpoints.
$lower-breakpoint: map.get($breakpoints, $lower);
$upper-breakpoint: map.get($breakpoints, $upper);
// Write the media query.
@media only screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
@content;
}

// If one or both of the breakpoints don't exist.
} @else {
// If lower breakpoint is invalid.
@if (map.has-key($breakpoints, $lower) == false) {
// Log a warning.
@warn "Your lower breakpoint was invalid: #{$lower}.";
}
// If upper breakpoint is invalid.
@if (map.has-key($breakpoints, $upper) == false) {
// Log a warning.
@warn "Your upper breakpoint was invalid: #{$upper}.";
}
}
}

@mixin css-root-vars() {
:root {
@content;
}
}

@mixin default-bg-img($url: '', $width: 100%, $height: 100%) {
background-image: url("#{$url}");
background-size: $width $height;
background-repeat: no-repeat;
background-position: center center;
}

@mixin interaction {
&:hover,
&:focus,
&:active {
@content;
}
}

@mixin last-no-margin($pos: 'right') {
@if $pos == 'bottom' {
&:last-child {
margin-bottom: 0;
}
} @else if $pos == 'left' {
&:last-child {
margin-left: 0;
}
} @else if $pos == 'top' {
&:last-child {
margin-top: 0;
}
} @else {
&:last-child {
margin-right: 0;
}
}
}

@mixin first-no-margin($pos: 'left') {
@if $pos == 'bottom' {
&:first-child {
margin-bottom: 0;
}
} @else if $pos == 'right' {
&:first-child {
margin-right: 0;
}
} @else if $pos == 'top' {
&:first-child {
margin-top: 0;
}
} @else {
&:first-child {
margin-left: 0;
}
}
}

@mixin position-absolute($width: 100%, $height: 100%, $top: 0, $bottom: auto, $left: 0, $right: auto, $z: -1) {
position: absolute;
top: $top;
left: $left;
bottom: $bottom;
right: $right;
width: $width;
height: $height;
z-index: $z;
}

/*
* Dynamic Clamp function
* Example: font-size: clamped(16px, 18px);
*/

@function to-rems($px) {
$rems: math.div($px, 10px) * 1rem;
@return $rems;
}

@function clamped($min-px, $max-px, $min-bp: 360px, $max-bp: 1772px) {
$slope: math.div($max-px - $min-px, $max-bp - $min-bp);
$slope-vw: $slope * 100;
$intercept-rems: to-rems($min-px - $slope * $min-bp);
$min-rems: to-rems($min-px);
$max-rems: to-rems($max-px);
@return clamp(#{$min-rems}, #{$slope-vw}vw + #{$intercept-rems}, #{$max-rems});
}
163 changes: 163 additions & 0 deletions local_packages/portfolio/Resources/Private/Build/Stylesheet/abstracts/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
/* ==== Variables ==== */

// Colors

// * CSS variables semantics
@include css-root-vars() {
--color-primary: #fa5e16;
--color-secondary: #fac516;
--color-base-background: #232323;
--color-base-text: #e5e5e5;
--color-button-text: #e5e5e5;
--font-copytext-name: 'Roboto';
--font-headline-name: 'Roboto Slab';
}

$body-bg-color: var(--color-background);

$colors: (
'primary': var(--color-primary),
'secondary': var(--color-secondary),
'base-background': var(--color-base-background),
'base-text': var(--color-base-text),
);

// Typography
// * base
$font-size-root: 10px;
$line-height-base: 1.25;

// Breakpoint Sizes
$breakpoints: (
xs: 0px,
sm: 375px,
md: 768px,
lg: 1024px,
xl: 1440px,
);

// * font families
$font-family: var(--font-copytext-name), sans-serif;
$font-family-heading: var(--font-copytext-name), $font-family;

// * font-weights
$font-light: 300;
$font-regular: 400;
$font-medium: 500;
$font-semiBold: 600;
$font-bold: 700;

// * font sizes
$font-40: 4rem;
$font-32: 3.2rem;
$font-28: 2.8rem;
$font-24: 2.4rem;
$font-20: 2rem;
$font-18: 1.8rem;
$font-16: 1.6rem;
$font-14: 1.4rem;

// * fix headline sizes
$font-size-h1: $font-24;
$font-size-h2: $font-20;
$font-size-h3: $font-18;
$font-size-h4: $font-18;
$font-size-h5: $font-18;
$font-size-h6: $font-18;

$font-size-h1-lg: $font-28;
$font-size-h2-lg: $font-24;
$font-size-h3-lg: $font-20;
$font-size-h4-lg: $font-20;
$font-size-h5-lg: $font-20;
$font-size-h6-lg: $font-20;

@include css-root-vars() {
--font-size-h1: #{$font-size-h1};
--font-size-h2: #{$font-size-h2-lg};
--font-size-h3: #{$font-size-h3-lg};
--font-size-h4: #{$font-size-h4-lg};
--font-size-h5: #{$font-size-h5-lg};
--font-size-h6: #{$font-size-h6-lg};

@include breakpoint-up(md) {
--font-size-h1: #{$font-size-h1-lg};
}
}

@include css-root-vars {
--text-sm: #{$font-14};
--text-md: #{$font-18};
--text-lg: #{$font-24};
--text-xl: #{$font-32};

@include breakpoint-up(md) {
--text-lg: #{$font-32};
--text-xl: #{$font-40};
}
}

// * semantics
$base-text-color: var(--color-base-text);
$base-text-size: $font-18;
$selection-text-color: rgba(var(--color-primary), .8);
$selection-background-color: rgba(white, .3);

// Spaces
// * primitives
$size-0: 0;
$size-1: .1rem;
$size-2: .2rem;
$size-4: .4rem;
$size-8: .8rem;
$size-12: 1.2rem;
$size-16: 1.6rem;
$size-24: 2.4rem;
$size-32: 3.2rem;
$size-48: 4.8rem;
$size-64: 6.4rem;
$size-96: 9.6rem;
$size-128: 12.8rem;

// Layout
// * semantic spacer for sections
$scroll-padding-top: $size-64;

@include css-root-vars() {
--spacer-sm: #{$size-12};
--spacer-md: #{$size-32};
--spacer-lg: #{$size-64};

@include breakpoint-up(md) {
--spacer-sm: #{$size-24};
--spacer-md: #{$size-64};
--spacer-lg: #{$size-128};
}
}

// Grid
// * container
$container-max-width: 177.2rem;
$container-padding: $size-12;
$container-padding-md: $size-32;
$container-padding-lg: $size-48;

// * rows
$row-padding: 0rem;

// * columns
$gridsize: 12;
$col-padding: $size-16;

// Transitions
$transition-timing-fast: 150ms;
$transition-timing-base: 300ms;
$transition-timing-slow: 500ms;

// Image Ratios
$ratios: (
'16-9': 53.33%,
'3-2': 66%,
'4-3': 75%,
'1-1': 100%,
);
2 changes: 2 additions & 0 deletions local_packages/portfolio/Resources/Private/Build/Stylesheet/abstracts/index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import "mixin";
@import "variables";
Loading

0 comments on commit 1f8d900

Please sign in to comment.