diff --git a/assets/css/community/members.scss b/assets/css/community/members.scss index 692ebcf5d..b5dc84ee7 100644 --- a/assets/css/community/members.scss +++ b/assets/css/community/members.scss @@ -47,16 +47,27 @@ margin-bottom: 6px; height: 70px; font-family: "Sofia Pro",Arial,Helvetica,sans-serif; + @media only screen and (max-width: 768px) { + height: auto; + } .stat { float: left; width: 25% ; text-align: center; + @media only screen and (max-width: 768px) { + width: 100%; + float: none; + margin-bottom: 10px; + } } .statVal { color: #3d3d3d; font-size: 32px; + @media only screen and (max-width: 768px) { + font-size: 16px; + } margin-bottom: 7px; position: relative; } @@ -66,7 +77,7 @@ font-size: 12px; font-weight: 400; @media only screen and (max-width: 768px) { - font-size: 5vw; + font-size: 12px; } } } @@ -236,9 +247,15 @@ overflow-x: scroll; flex-direction: row; display: flex; - @media screen and (min-device-width: 992px) { + padding-bottom: 0; + @media screen and (max-width: 768px) { + overflow-x: none; + flex-wrap: wrap; + justify-content: space-around; + } + @media screen and (min-width: 769px) { overflow-x: auto; - justify-content: center; + justify-content: flex-start; } @media only screen and (min-width: 1070px) { padding-bottom: 33px; @@ -268,6 +285,14 @@ margin-left: 33px; } } + @media screen and (max-width: 768px) { + margin-bottom: 10px; + width: 43%; + margin-right: 0; + &:first-child { + margin-left: 0; + } + } } .avatar-wrapper, .avatar-wrapper img { @@ -334,35 +359,67 @@ overflow-x: scroll; flex-direction: row; display: flex; - @media screen and (min-device-width: 992px) { - overflow-x: auto; - justify-content: center; + @media screen and (max-width: 768px) { + overflow-x: none; flex-wrap: wrap; + justify-content: space-around; + } + @media screen and (min-width: 769px) { + overflow-x: auto; + justify-content: flex-start; } .user-tile { - min-width: 246px; - margin-right: 15px; - padding: 39px 20px 40px; + min-width: 150px; + width: 180px; + max-width: 365px; + margin-right: 14px; + padding: 20px 0 44.5px; &:first-child { - margin-left: 15px; + margin-left: 14px; } - @media only screen and (min-device-width: 992px) { - width: 272px; - margin: 0 6px 14px; - padding: 31px 20px 49px; + @media only screen and (min-width: 992px) { + width: 280px; + } + @media only screen and (min-width: 1070px) { + padding: 20px 30px 28px; + } + @media only screen and (min-width: 1290px) { + width: 365px; + padding: 20px 30px 28px; + } + @media only screen and (min-width: 1367px) { + margin-right: 33px; &:first-child { - margin-left: 6px; + margin-left: 33px; + } + } + @media screen and (max-width: 768px) { + margin-bottom: 10px; + width: 43%; + margin-right: 0; + &:first-child { + margin-left: 0; } } } .avatar-wrapper, .avatar-wrapper img { - height: 80px; - width: 80px; + height: 62px; + width: 62px; + display: block; + margin: 0 auto; + @media only screen and (min-width: 1070px) { + height: 90px; + width: 90px; + } } .user-name { - font-size: 20px; - padding-top: 19px; + font-size: 15px; + padding-top: 11px; + @media only screen and (min-width: 1070px) { + font-size: 15px; + padding-top: 10px; + } } .user-country { font-size: 11px; @@ -640,6 +697,9 @@ .user-name { font-size: 15px; + @media screen and (max-device-width: 320px) { + font-size: 12px; + } } } } diff --git a/assets/css/layout/header.scss b/assets/css/layout/header.scss index 23311dd6f..508cb42d7 100644 --- a/assets/css/layout/header.scss +++ b/assets/css/layout/header.scss @@ -478,6 +478,7 @@ margin: 0; background-repeat: no-repeat; background-position: 50% 50%; + background-size: contain; float: left; position: static; } diff --git a/assets/images/tc-logo-dad.png b/assets/images/tc-logo-dad.png new file mode 100644 index 000000000..fc3441018 Binary files /dev/null and b/assets/images/tc-logo-dad.png differ diff --git a/assets/images/topcoder-logo-dads.png b/assets/images/topcoder-logo-dads.png new file mode 100644 index 000000000..b4018b3e9 Binary files /dev/null and b/assets/images/topcoder-logo-dads.png differ