From 39b01264da73afc7e51db7b30990bda7e9dded19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Fri, 10 Jul 2020 11:40:59 +0200 Subject: [PATCH] finished cookie popup design --- index.html | 6 +- styles/common-style.css | 212 +++++++++++++++++++++++++++++++++++++++- styles/home-style.css | 1 + styles/pages-style.css | 24 ----- 4 files changed, 212 insertions(+), 31 deletions(-) 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.

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; }