Merge pull request #401 from 100Automations/development

Max width for screens is at 1700px
100Automations · Aug 1, 2021 · 51809e8 · 51809e8
2 parents 667964d + 735f5bc
commit 51809e8
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 34 deletions.
diff --git a/_includes/Press/press_action.html b/_includes/Press/press_action.html
@@ -1,6 +1,6 @@
 <div class="press_action flexbox_row">
     <div class="press_release flexbox_column">
-        <div class="press_release_title">
+        <div class="press_release_title flexbox_column">
             <span >
                 Press Releases
             </span>
@@ -48,7 +48,7 @@
     <div class="press_release_contact">
         <p>
             Are you a member of the media?
-            Please send us a note at <a href="mailto:[email protected]">[email protected]</a>
+            Please send us a note at <a href="mailto:[email protected]" target="_blank">[email protected]</a>
         </p>
     </div>
 </div>
diff --git a/_includes/Press/share_ato.html b/_includes/Press/share_ato.html
@@ -15,7 +15,7 @@
                 target="_blank"><button class="download_all" id="social_media" value="Facebook"><i
                         class="fa fa-download"></i> Download All</button></a>
         </div>
-        <div class="social_media_posts_img">
+        <div class="social_media_posts_img flexbox_column">
             <div class="social_media_posts_img_filter flexbox_row">
                 <ul>
 

diff --git a/_sass/components/buttons.scss b/_sass/components/buttons.scss
@@ -110,8 +110,6 @@ button.download_all{
  font-family: $poppins;
  font-size: 18px;
  line-height: 28px;
- position: absolute;
- top:9px;
  margin-left: 20px;
 }
 ;

diff --git a/_sass/includes/Press/press_action.scss b/_sass/includes/Press/press_action.scss
@@ -5,14 +5,9 @@ div.press_action {
 
     div.press_release {
         width: 50%;
-        position: relative;
-        justify-content: right;
 
         div.press_release_title {
-            position: absolute;
-            bottom: 48px;
-            right: 232px;
-
+
             span {
                 font-family: $poppins;
                 font-style: normal;
@@ -27,11 +22,8 @@ div.press_action {
         ;
 
         div.press_release_input {
-            display: block;
-            justify-content: right;
             width: 360px;
             height: 112px;
-            position: absolute;
             span {
                 font-family: $poppins;
             }
@@ -157,7 +149,7 @@ div.press_action {
         text-align: center;
         position: relative;
         align-items: center;
-        top: 120px;
+        top: 59px;
         width: 805px;
 
         p {

diff --git a/_sass/includes/Press/share_ato.scss b/_sass/includes/Press/share_ato.scss
@@ -40,12 +40,21 @@ line-height: 140%;;
     div.social_media_posts{
         div.social_media_posts_title{
             padding-left:5rem;
+            display: flex;
+            width: 26%;
+            flex-direction: column;
+        }
+        ;
+        div.social_media_posts_action{
+            display: flex;
+            width: 13%;
+            flex-direction: row;
+            justify-content: flex-start;
         }
+        ;
         div.social_media_posts_img {
         div.social_media_posts_img_filter {
             margin-top: 1.5rem;
-            position: absolute;
-            top: 36px;
 
             ul {
                 padding-inline-start:4rem;
@@ -90,6 +99,8 @@ line-height: 140%;;
         div.posts {
             margin-top: 5.5rem;
             padding-left: 4rem;
+            display: flex;
+            width: 100%;
             ul.social_media_posts_img_list {
                 display: none;
                 padding: 0;
@@ -157,7 +168,7 @@ line-height: 140%;;
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: $secondary;
+    background: $secondaryvariant;
     border-radius: 10px;
   }
         div.memes_img {
@@ -218,6 +229,7 @@ line-height: 140%;;
                 margin-top: 1.75rem;
                 margin-bottom: 1rem;
                 padding-left: 0rem;
+                width: 55%;
 
                 span{
                     font-size: 28px;
@@ -287,7 +299,7 @@ line-height: 140%;;
 
         div.social_media_posts>div.social_media_posts_action {
             position: absolute;
-            bottom: 0px;
+            bottom: -5rem;
             margin: auto;
             width: 50%;
             display: flex;
@@ -328,7 +340,7 @@ line-height: 140%;;
 
             div.memes_actions {
                 position: absolute;
-                bottom: 0px;
+                bottom: -5rem;
                 margin: auto;
                 width: 50%;
 

diff --git a/_sass/index.scss b/_sass/index.scss
@@ -5,12 +5,10 @@
 @import "press-kit/all_bios.scss";
 
 html,body {
-    width: 100%;
+    width:100%;
     height: 100%;
     margin: 0%;
     padding: 0%;
-    @media screen and (max-width: 480px){
-        overflow-x: hidden;
-    }
+    overflow-x: hidden;
 }
-;
+;
diff --git a/_sass/press-kit/all_bios.scss b/_sass/press-kit/all_bios.scss
@@ -1,10 +1,10 @@
 div.bios{
   overflow-x:hidden ;
   width: 100%;
-  background:  rgba(0, 0, 0, 0.06);
+  background:   #F4F6F9;
   padding-bottom: 1.5rem;
   margin: 1.75rem 0rem;
-box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
+box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.6);
 border-radius: 0px 0px 100px 100px;
 div.bios_header{
   div.bios_title{
@@ -28,12 +28,7 @@ color: #383843;
 }
 ;
   div.bios_grid{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  flex: 1;
-  width: 95%;
+  max-width: 1200px;
   margin: auto;
   div.bio_card{
     background: $white;
@@ -63,5 +58,14 @@ color: #383843;
   ;
   }
   ;
+
+  @media screen and (max-width: 480px) {
+    div.bios_grid{
+      justify-content: center;
+    }
+    ;
+
+  }
+  ;
 }
 ;
diff --git a/press-kit/all_bios.html b/press-kit/all_bios.html
@@ -7,7 +7,7 @@
             <span>Team</span>
         </div>
     </div>
-    <div class="bios_grid">
+    <div class="bios_grid flexbox_row">
         {% for bio in site.bios %}
         <div class="bio_card">
             <div class="bio_card_image">