From 0a341c08423151cf2bc3d2ce8cb7192026cf4935 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Sat, 11 Feb 2023 19:55:41 +0100 Subject: Responsive design --- sass/abstracts/_animations.scss | 12 ++++++++++++ sass/abstracts/_mixins.scss | 12 ++++++++++++ 2 files changed, 24 insertions(+) (limited to 'sass/abstracts') diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss index 819b356..48c0ce6 100644 --- a/sass/abstracts/_animations.scss +++ b/sass/abstracts/_animations.scss @@ -30,3 +30,15 @@ transform: translate(0) skewX(-12deg); } } + +// without skew effect for smaller screens +@keyframes moveInRightMobile { + 0% { + opacity: 0; + transform: translateX(10rem); + } + 100% { + opacity: 1; + transform: translate(0); + } +} diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss index 98351c4..5a05ec3 100644 --- a/sass/abstracts/_mixins.scss +++ b/sass/abstracts/_mixins.scss @@ -11,6 +11,13 @@ justify-content: space-around; } +@mixin flex-column-center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + @mixin standard-grid { display: grid; grid-template-columns: 1fr 1fr; @@ -30,3 +37,8 @@ margin-bottom: 5rem; } } + +@mixin mobile-container { + margin: 8rem auto; + width: 80%; +} -- cgit v1.2.3