From e5b534c07c4f9fba7c5842290270a7b02e063c49 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Wed, 5 May 2021 10:47:56 +0300
Subject: [PATCH] created breakpoints

---
 src/sass/abstracts/_mixins.scss | 40 +++++++++++++++++++++++++++++++++
 src/sass/base/_base.scss        | 14 +++++++++++-
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss
index 700821d..d4f1fcc 100644
--- a/src/sass/abstracts/_mixins.scss
+++ b/src/sass/abstracts/_mixins.scss
@@ -12,3 +12,43 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+// MEDIA QUERIES
+
+/*
+$breakpoint arguments:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+*/
+
+@mixin respond($breakpoint) {
+  // 600px
+  @if $breakpoint == phone {
+    @media (max-width: 37.5em) {
+      @content;
+    }
+  }
+
+  // 900px
+  @if $breakpoint == tab-port {
+    @media (max-width: 56.25em) {
+      @content;
+    }
+  }
+
+  // 1200px
+  @if $breakpoint == tab-land {
+    @media (max-width: 75em) {
+      @content;
+    }
+  }
+
+  // 1800px
+  @if $breakpoint == big-desktop {
+    @media (min-width: 112.5em) {
+      @content;
+    }
+  }
+}
diff --git a/src/sass/base/_base.scss b/src/sass/base/_base.scss
index 808d5fa..c3b74ad 100644
--- a/src/sass/base/_base.scss
+++ b/src/sass/base/_base.scss
@@ -7,7 +7,19 @@
 }
 
 html {
-  font-size: 62.5%;
+  font-size: 62.5%; // 1 rem = 10px; 10px/16px = 62.5% (16 is default browser font size)
+
+  @include respond(tab-land) {
+    font-size: 56.25%; // 1 rem = 9px; 9/16 = 50%
+  }
+
+  @include respond(tab-port) {
+    font-size: 50%; // 1 rem = 8px; 8/16 = 50%
+  }
+
+  @include respond(big-desktop) {
+    font-size: 75%; // 1 rem = 12px; 12/16 = 75%
+  }
 }
 
 body {