Changeset 43842 for branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

Timestamp:

10/30/2018 02:13:07 AM (6 years ago)

Author:

allancole

Message:

Importing Twenty Nineteen, our new default theme for 2019, set for 5.0.

Let Gutenberg shine with this simple, fast, and powerful theme. Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart.

File:

• branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss (modified) (11 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

@@ -10 +10 @@
 
     /* Add extra margin when the comments section is located immediately after the
-     * post itself (this happens on pages). 
+     * post itself (this happens on pages).
      */
-    .hentry + & {
+    .entry + & {
         margin-top: calc(3 * #{$size__spacing-unit});
     }
 
-    .comments-title-wrap,
     .comment-list,
+    .comment-navigation,
     > .comment-respond,
     .comment-form-flex,
     .no-comments {
-
         margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
 
@@ -32 +31 @@
     .comments-title-wrap {
 
-        align-items: baseline;
-        display: flex;
-        justify-content: space-between;
+        margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
+
+        @include media(tablet) {
+            align-items: baseline;
+            display: flex;
+            justify-content: space-between;
+            margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
+            max-width: calc(8 * (100vw / 12));
+        }
 
         .comments-title {
             @include post-section-dash;
             margin: 0;
+
+            @include media(tablet) {
+                flex: 1 0 calc(3 * (100vw / 12));
+            }
+        }
+
+        .discussion-meta {
+            @include media(tablet) {
+                flex: 0 0 calc(2 * (100vw / 12));
+                margin-left: #{$size__spacing-unit};
+            }
         }
     }
@@ -49 +65 @@
 
 #respond {
-
     position: relative;
 
     .comment-user-avatar {
-        display: none;
+        margin: $size__spacing-unit 0 -#{$size__spacing-unit};
     }
 
@@ -75 +90 @@
         display: none;
     }
-
-    > #respond {
-        @include media(desktop) {
-
-            .comment-user-avatar {
-                position: absolute;
-                display: block;
-                top: 0;
-                left: 0;
-
-                .avatar {
-                    display: block;
-                }
-            }
-        }
-    }
 }
 
 .comment-form-flex {
-
     display: flex;
     flex-direction: column;
@@ -105 +103 @@
 
     #respond {
-
         order: 2;
+
         + .comments-title {
             display: block;
@@ -114 +112 @@
 
 .comment-list {
-
     list-style: none;
     padding: 0;
@@ -126 +123 @@
         margin-top: 0;
     }
-
 }
 
 .comment-reply {
-
     left: calc(#{$size__spacing-unit} + 100%);
     bottom: 0;
@@ -145 +140 @@
 
 .comment {
-
     list-style: none;
     position: relative;
 
     @include media(tablet) {
-
         padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
 
@@ -218 +211 @@
             position: absolute;
             background: lighten( $color__link, 8% );
-            right: calc(100% + #{$size__spacing-unit * .25});
+            right: calc(100% - #{$size__spacing-unit * 2.5});
             top: -3px;
             width: 18px;
+
+            @include media(tablet) {
+                right: calc(100% + #{$size__spacing-unit * .75});
+            }
 
             svg {
@@ -283 +280 @@
 
         .comment-edit-link {
-
             position: relative;
             padding-left: $size__spacing-unit;
@@ -346 +342 @@
             width: calc(1.5 * #{$size__spacing-unit});
         }
-
-        @include media(tablet) {
-
-        }
     }
 }
 
 .discussion-meta {
-
-    .discussion-avatar-list {
-        display: inline-block;
-        margin-right: 8px;
-    }
 
     .discussion-meta-info {