Making WordPress.org


Ignore:
Timestamp:
04/04/2024 02:50:01 AM (3 months ago)
Author:
adamwood
Message:

wporg-support-2024: Update topic layout

Use color palette for badge colors
Update styles of lead topics and replies to match design as close as possible without markup changes

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/elements/_badges.scss

    r13426 r13450  
    99.author-badge {
    1010    position: absolute;
    11     top: 15px;
    12     left: 0;
     11    top: var(--wp--preset--spacing--20);
     12    left: var(--wp--preset--spacing--20);
    1313    padding: 2px 6px;
    1414    color: #fff;
     
    1616    border-radius: var(--wp--custom--button--border--radius);
    1717
    18     .bbp-topic-author & {
    19         top: 2px;
     18    .topic-indicator + .bbp-topic-author & {
     19        top: 40px;
    2020    }
    21 
    22     @media screen and ( max-width: 568px ) {
    23 
    24         .topic-indicator + .bbp-topic-author & {
    25             top: 12px;
    26         }
    27     }
    28 }
    29 
    30 .reply.author-has-badge,
    31 .reply.topic-author,
    32 .reply.by-moderator {
    33     padding-top: 40px !important;
    3421}
    3522
     
    4027.author-badge-thread-starter {
    4128    background-color: var(--wp--custom--color--thread-starter);
     29    color: var(--wp--preset--color--charcoal-1);
    4230}
    4331
     
    5240.author-badge-reporter {
    5341    background-color: var(--wp--custom--color--thread-reporter);
     42    color: var(--wp--preset--color--charcoal-1);
    5443    right: -2px;
    5544    left: initial;
     
    6251.bbp-user-reports-submitted {
    6352
    64     div.author-has-badge {
    65         box-shadow: none;
    66         border-left-style: solid;
    67         border-left-width: 3px;
    68     }
    69 
    70     // .by-moderator {
    71     //  border-left-color: var(--wp--custom--color--moderator);
    72     // }
    73 
    74     // .by-plugin-author,
    75     // .by-plugin-contributor,
    76     // .by-plugin-support-rep {
    77     //  border-left-color: var(--wp--custom--color--plugin-author);
    78     // }
    79 
    80     // .by-theme-author,
    81     // .by-theme-contributor,
    82     // .by-theme-support-rep {
    83     //  border-left-color: var(--wp--custom--color--theme-author);
    84     // }
    85 
    86     .author-badge {
    87         left: 0;
    88     }
    89 
    9053    .author-badge-reporter {
    9154        left: initial;
     
    9356    }
    9457}
    95 
    96 @media screen and ( max-width: 480px ) {
    97 
    98     .author-badge,
    99     .author-badge-reporter {
    100         top: -28px;
    101         left: -18px;
    102 
    103         .bbp-topic-author & {
    104             top: -38px;
    105         }
    106 
    107         .topic-indicator + .bbp-topic-author & {
    108             top: -28px;
    109         }
    110     }
    111 }
Note: See TracChangeset for help on using the changeset viewer.