breakpoints and backgrounds

HIRO-MicroDataCenters-BV · Jul 9, 2024 · c596c57 · c596c57
1 parent e5187a5
commit c596c57
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 1 deletion.
diff --git a/src/assets/backgrounds/background-mobile.svg b/src/assets/backgrounds/background-mobile.svg
diff --git a/src/assets/backgrounds/background-tablet.svg b/src/assets/backgrounds/background-tablet.svg
diff --git a/src/assets/background.svg → src/assets/backgrounds/background.svg b/src/assets/background.svg → src/assets/backgrounds/background.svg
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -36,7 +36,7 @@
 
 body {
   color: var(--color-text);
-  background: url('background.svg');
+  background: url('backgrounds/background-mobile.svg');
   background-size: cover;
   font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
     'Helvetica Neue', sans-serif;
@@ -45,4 +45,12 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   padding: 0 2rem;
+
+  @media only screen and (min-width: var(--breakpoint-tablet)) {
+    background: url('backgrounds/background-tablet.svg');
+  }
+
+  @media only screen and (min-width: var(--breakpoint-desktop)) {
+    background: url('backgrounds/background.svg');
+  }
 }
diff --git a/src/assets/breakpoints.css b/src/assets/breakpoints.css
@@ -0,0 +1,4 @@
+:root {
+  --breakpoint-tablet: 481px;
+  --breakpoint-desktop: 1025px;
+}
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,4 +1,5 @@
 @import './base.css';
+@import './breakpoints.css';
 
 #app {
   max-width: 1980px;