Making WordPress.org

Changeset 11011


Ignore:
Timestamp:
06/06/2021 02:42:36 PM (3 years ago)
Author:
ocean90
Message:

Translate: Improve styles of various elements on smaller screens.

Props vladytimy, ocean90.
Fixes #5761.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

    r9618 r11011  
    6262.site-header.home .site-title {
    6363    display: inherit;
    64     font-size: 68px;
     64    font-size: 50px;
    6565    margin: 36px 0 18px;
     66}
     67
     68@media screen and (min-width: 750px) {
     69    .site-header.home .site-title {
     70        font-size: 68px;
     71    }
    6672}
    6773
     
    223229    top: 50px;
    224230    left: auto !important;
    225     right: 50px;
     231    right: 20px;
    226232    font-size: 100%;
    227233    padding: 1em 1.5em;
     
    232238#gp-js-message:empty {
    233239    display: none;
     240}
     241
     242@media screen and (max-width: 500px) {
     243    div#gp-js-message {
     244        top: 5px;
     245        right: 5px;
     246        left: 5px !important;
     247        max-width: 100%;
     248        z-index: 99999;
     249    }
     250}
     251
     252@media screen and (min-width: 1025px) {
     253    div#gp-js-message {
     254        right: 50px;
     255    }
    234256}
    235257
     
    772794    }
    773795
    774     @media (min-width: 500px) {
     796    @media screen and (min-width: 500px) {
    775797        .locales {
    776798            -ms-grid-columns: 1fr 30px 1fr;
     
    779801    }
    780802
    781     @media (min-width: 700px) {
     803    @media screen and (min-width: 700px) {
    782804        .locales {
    783805            -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
     
    790812.locale-header:before,
    791813.locale-header:after,
    792 .project-header:before,
    793 .project-header:after,
    794814.projects:before,
    795815.projects:after,
     
    805825
    806826.locale-header:after,
    807 .project-header:after,
    808827.projects:after,
    809828.project-box-header:after,
     
    10561075}
    10571076
    1058 @media (max-width: 500px) {
     1077@media screen and (max-width: 500px) {
    10591078    .projects .project-status > div {
    10601079        width: 50%;
     
    10911110.project-header {
    10921111    margin-bottom: 30px;
     1112    display: flex;
    10931113}
    10941114
    10951115.project-header .project-description {
    1096     float: left;
    1097     width: 100%;
    1098     max-width: 520px;
     1116    flex: 1;
    10991117    margin-top: 20px;
     1118    margin-left: 0;
     1119    max-width: 100%;
    11001120}
    11011121
    11021122.project-header .project-box {
    11031123    position: relative;
    1104     float: right;
    11051124    width: 350px;
     1125    margin-left: 20px;
    11061126    border: 1px solid #ccc;
    11071127    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     
    12741294}
    12751295
     1296/* Sub Projects table */
    12761297.locale-sub-projects .sub-project-status {
    12771298    font-size: 90%;
     
    12821303.locale-sub-projects .sub-project-status.percent-90 {
    12831304    color: #509040;
     1305}
     1306
     1307@media screen and (max-width: 500px) {
     1308    .locale-sub-projects th,
     1309    .locale-sub-projects td {
     1310        display: block;
     1311    }
     1312
     1313    .locale-sub-projects thead th {
     1314        display: none;
     1315    }
     1316
     1317    .locale-sub-projects thead th:nth-child(1) {
     1318        display: block;
     1319        width: 97%;
     1320    }
     1321
     1322    table.locale-sub-projects th:first-child,
     1323    table.locale-sub-projects td:first-child {
     1324        border-left: none;
     1325        border-right: none;
     1326    }
     1327
     1328    table.locale-sub-projects td.stats {
     1329        padding-left: 15px;
     1330        border-right :none;
     1331    }
     1332
     1333    .locale-sub-projects td.stats.translated:before {
     1334        content: "Translated:";
     1335    }
     1336
     1337    .locale-sub-projects td.stats.fuzzy:before {
     1338        content: "Fuzzy:";
     1339    }
     1340
     1341    .locale-sub-projects td.stats.untranslated:before {
     1342        content: "Untranslated:";
     1343    }
     1344
     1345    .locale-sub-projects td.stats.waiting:before {
     1346        content: "Waiting:";
     1347    }
    12841348}
    12851349
     
    13221386
    13231387/* Responsive styles */
    1324 @media (max-width: 700px) {
     1388@media screen and (max-width: 700px) {
    13251389    #hello {
    13261390        margin: 25px 10px 15px;
     
    13631427    }
    13641428
    1365     .project-header .project-description {
    1366         float: none;
     1429    .project-header {
     1430        display:  block;
    13671431    }
    13681432
    13691433    .project-header .project-box {
    1370         float: none;
     1434        margin-top: 20px;
     1435        margin-left: 0;
    13711436        width: 100%;
    1372         margin-top: 20px;
    13731437    }
    13741438    .stats-table table thead th {
     
    16391703}
    16401704
    1641 @media (min-width: 600px) {
     1705@media screen and (min-width: 600px) {
    16421706    .contributors-list {
    16431707        -webkit-column-count: 2;
     
    17151779}
    17161780
    1717 @media (max-width: 600px) {
     1781@media screen and (max-width: 600px) {
    17181782    .contributors-list-filter {
    17191783        text-align: center;
     
    17541818}
    17551819
    1756 @media (min-width: 600px) {
     1820@media screen and (min-width: 600px) {
    17571821    .locale-project-contributors-group {
    17581822        float: left;
     
    19131977}
    19141978
    1915 @media (max-width: 500px) {
     1979@media screen and (max-width: 500px) {
    19161980    .locale-project-contributors-table thead {
    19171981        display: none;
     
    19271991        width: 100%;
    19281992        border-bottom: 0;
     1993    }
     1994
     1995    .locale-project-contributors-table .contributor-name span {
     1996        float: none;
    19291997    }
    19301998
     
    27662834}
    27672835
    2768 @media (min-width: 600px) {
     2836@media screen and (min-width: 600px) {
    27692837    .wporg-translate-modal__frame {
    27702838        bottom: auto;
     
    28662934}
    28672935
    2868 @media (min-width: 600px) {
     2936@media screen and (min-width: 600px) {
    28692937    .wporg-translate-modal__content {
    28702938        display: flex;
Note: See TracChangeset for help on using the changeset viewer.