1 $panel-margin-right: 1.5em; 2 3 .pillar-content { 4 h1 { 5 font-size: $h1-font-size; 6 } 7 > .g-section { 8 padding: 3em 0; 9 10 &:not(:last-of-type) { 11 border-bottom: $default-border; 12 } 13 > h2 { 14 font-size: $h2-font-size; 15 margin-bottom: 1.5em !important; 16 } 17 } 18 .article-list { 19 article { 20 position: relative; 21 overflow: hidden; 22 width: 100%; 23 padding: 1.9em; 24 background-color: $gray-light; 25 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15); 26 line-height: 1.5em; 27 margin-bottom: $panel-margin-right; 28 &.new::after { 29 content: 'new'; 30 background: #2e82c9; 31 position: absolute; 32 @include transform(rotate(45deg)); 33 top: -4px; 34 right: -20px; 35 color: white; 36 font-size: 0.9em; 37 width: 60px; 38 text-align: center; 39 padding-top: 8px; 40 } 41 p { 42 font-weight: 300; 43 } 44 } 45 } 46 47 #further-resources .g-content { 48 h2 { 49 &::before { 50 display: inline-block; 51 content: ''; 52 background: url("../../images/further-resources-icons.svg") 0 50% no-repeat; 53 width: 50px; 54 height: 43px; 55 background-size: cover; 56 margin: auto; 57 margin-bottom: 5px; 58 vertical-align: middle; 59 } 60 &.school { 61 &::before { 62 background-position: 0 50%; 63 } 64 } 65 &.chat { 66 &::before { 67 background-position: -54px 50%; 68 } 69 } 70 &.puzzle { 71 &::before { 72 background-position: -108px 50%; 73 } 74 } 75 } 76 } 77 78 // Phone 79 @media only screen and (max-width: $break-small) { 80 > .g-section { 81 padding: 2em 0; 82 } 83 } 84 85 @media only screen and (min-width: $break-small) { 86 .article-list { 87 @include display-flex(); 88 @include flex-wrap(wrap); 89 @include justify-content(space-between); 90 @include align-items(stretch); 91 article { 92 @include flex(auto); 93 margin-right: $panel-margin-right; 94 width: 45%; 95 &:nth-child(2n), 96 &:last-of-type { 97 margin-right: 0; 98 //max-width: 45%; 99 } 100 } 101 } 102 } 103 @media only screen and (min-width: $break-large) { 104 .article-list { 105 article { 106 width: 30%; 107 &:nth-child(2n) { 108 margin-right: $panel-margin-right; 109 } 110 &:nth-child(3n), 111 &:last-of-type { 112 margin-right: 0; 113 } 114 } 115 } 116 } 117 } 118 119 // Layout overrides for browsers who don't support Flexbox flex wrap, namely, Firefox 25 to 28. 120 // Flexbox flex wrap might get support in Firefox 29. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 121 @supports (not (flex-wrap: wrap)) { 122 .pillar-content { 123 .article-list { 124 display: block; 125 article { 126 @media only screen and (min-width: $break-small) { 127 flex: none; 128 float: left; 129 width: 48%; 130 } 131 @media only screen and (min-width: $break-large) { 132 width: 31.8058%; 133 } 134 } 135 } 136 } 137 } 138 139 // The following CSS (and matching HTML) was modified from what's on chrome.com: https://www.google.com/intl/en/chrome/devices/features/ 140 .load-more-articles { 141 @include clearfix; 142 margin: 2em auto 0.3em; 143 text-align: center; 144 width: 100%; 145 a, 146 a:hover { 147 color: $black; 148 transition: opacity 0.3s ease 0s; 149 } 150 } 151 .nav-arrow { 152 background-size: 48px 48px; 153 background: top center no-repeat; 154 display: inline-block; 155 opacity: 0.5; 156 transition: opacity 0.3s ease 0s; 157 padding-top: 50px; 158 } 159 .nav-arrow:hover { 160 opacity: 1; 161 } 162 .down-arrow { 163 background-image: url("../../images/down-arrow.png"); 164 } 165 166