diff --git a/index.html b/index.html
index c83d720..340158a 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,8 @@
-
-
Mind Overflow : Home
@@ -39,7 +39,7 @@
This website uses cookies.
We use cookies to ensure you the best experience.
- By using our website, you agree with our Privacy Policy .
+ By visiting our website, you agree with our Privacy Policy .
Ok, understood
diff --git a/styles/common-style.css b/styles/common-style.css
index 39b5df4..da769f8 100644
--- a/styles/common-style.css
+++ b/styles/common-style.css
@@ -66,22 +66,24 @@ a {
padding: 10px;
font-size: 25px;
box-sizing: border-box;
+ box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
/* Size */
width: 600px;
+ overflow: hidden;
/* Positioning */
position: absolute;
left: 50px;
- bottom: 50px;
- z-index: 1;
+ bottom: 75px;
+ z-index: 2;
}
.policy-popup p {
font-family: 'Montserrat', sans-serif;
font-weight: 200;
color: white;
- font-size: 15px;
+ font-size: 13px;
padding: 0 20px;
}
@@ -89,7 +91,7 @@ a {
.policy-popup button {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
- font-size: 15px;
+ font-size: 13px;
transition-duration: 0.4s;
border-radius: 3px;
@@ -109,6 +111,208 @@ a {
/* End policy popup */
+/* Begin media queries for elements size */
+@media (min-width: 0px) and (max-width:200px) {
+
+ h4 {
+ font-size: 8px;
+ }
+
+ .policy-popup {
+ /* centered */
+ left: 5px;
+ width: 100px;
+ bottom: 50px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size: 7px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ font-size:7px;
+ margin: 10px;
+ padding: 5px 8px;
+ }
+}
+
+@media (min-width: 200px) and (max-width: 300px) {
+
+ h4 {
+ font-size: 10px;
+ }
+
+ .policy-popup {
+ /* centered */
+ left: 50%;
+ margin-left: -100px; /* this has to be half the width */
+ width: 200px;
+ bottom: 50px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size: 8px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ font-size: 8px;
+ margin: 10px;
+ padding: 10px 15px;
+ }
+}
+
+@media (min-width: 300px) and (max-width: 400px) {
+ h4 {
+ font-size: 13px;
+ }
+
+ .policy-popup {
+ /* centered */
+ left: 50%;
+ margin-left: -140px; /* this has to be half the width */
+ width: 280px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size: 8px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ font-size: 8px;
+ margin: 10px;
+ padding: 10px 15px;
+ }
+}
+
+@media (min-width: 400px) and (max-width: 500px) {
+ h4 {
+ font-size: 15px;
+ }
+
+ .policy-popup {
+ /* centered */
+ left: 50%;
+ margin-left: -175px; /* this has to be half the width */
+ width: 350px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size:10px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ font-size: 10px;
+ margin: 10px;
+ padding: 10px 15px;
+ }
+}
+
+@media (min-width: 500px) and (max-width: 600px) {
+ h4 {
+ font-size: 18px;
+ }
+
+ .policy-popup {
+ width: 400px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size: 11px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ font-size: 11px;
+ margin: 10px;
+ }
+}
+
+@media (min-width: 600px) and (max-width: 700px) {
+ h4 {
+ font-size: 21px;
+ }
+
+ .policy-popup {
+ width: 500px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size: 11px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ font-size: 11px;
+ margin: 10px;
+ }
+}
+
+@media (min-width: 700px) and (max-width: 1000px) {
+ h4 {
+ font-size: 23px;
+ }
+
+ .policy-popup h4 {
+ padding: 15px 15px;
+ }
+
+ .policy-popup p {
+ font-size: 13px;
+ padding: 0 15px;
+ margin: 0;
+ }
+
+ .policy-popup button {
+ margin: 10px;
+ }
+}
+
+/* 4K MONITORS */
+@media (min-width: 2100px) {
+ .policy-popup p {
+ font-size: 15px;
+ }
+
+ .policy-popup button {
+ font-size: 15px;
+ }
+}
+/* End media queries */
+
/* Begin fonts */
@font-face {
font-family: 'Oswald';
diff --git a/styles/home-style.css b/styles/home-style.css
index 97851a3..6af26c5 100644
--- a/styles/home-style.css
+++ b/styles/home-style.css
@@ -35,6 +35,7 @@ h1 {
margin-top: auto;
padding-bottom: 20px;
text-transform: uppercase;
+ overflow: hidden;
}
.bottomnav a {
diff --git a/styles/pages-style.css b/styles/pages-style.css
index b6e53af..fbfdb9e 100644
--- a/styles/pages-style.css
+++ b/styles/pages-style.css
@@ -139,10 +139,6 @@ li {
font-size: 15px;
padding-top: 20px;
}
- h4
- {
- font-size: 8px;
- }
.content {
font-size: 10px;
}
@@ -168,10 +164,6 @@ li {
font-size: 16px;
padding-top: 25px;
}
- h4
- {
- font-size: 10px;
- }
.content {
font-size: 13px;
}
@@ -197,10 +189,6 @@ li {
font-size: 19px;
padding-top: 28px;
}
- h4
- {
- font-size: 13px;
- }
.content {
font-size: 16px;
}
@@ -226,10 +214,6 @@ li {
font-size: 22px;
padding-top: 31px;
}
- h4
- {
- font-size: 15px;
- }
.content {
font-size: 18px;
}
@@ -252,10 +236,6 @@ li {
h3 {
font-size: 25px;
}
- h4
- {
- font-size: 18px;
- }
.content {
font-size: 20px;
}
@@ -278,10 +258,6 @@ li {
h3 {
font-size: 30px;
}
- h4
- {
- font-size: 20px;
- }
.content {
font-size: 23px;
}