1/** 2 * @file 3 * Text Content. 4 */ 5 6@import "../base/variables.pcss.css"; 7 8.text-content, 9.cke_editable { 10 color: var(--color--gray-10); 11 font-family: var(--font-serif); 12 line-height: var(--sp1-5); 13 14 /* 15 @todo 16 17 text-decoration-thickness is supported by FF & Safari 18 text-underline-offset is supported by Safari 19 20 text-decoration-color supported by Chrome, FF, & Safari 21 */ 22 23 & a { 24 color: var(--color--blue-20); 25 text-decoration-color: var(--color--blue-20); 26 text-decoration-thickness: 2px; 27 overflow-wrap: break-word; 28 29 @supports (box-shadow: none) { 30 transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99); 31 text-decoration: none; 32 box-shadow: inset 0 -2px 0 0 var(--color--blue-50); 33 34 &:hover { 35 text-decoration: underline; 36 color: var(--color--black); 37 38 /* @todo - #d9ecfa isn't currently a variable. */ 39 box-shadow: inset 0 -2em 0 0 #d9ecfa; 40 text-decoration-color: #d9ecfa; 41 } 42 } 43 } 44 45 & p { 46 margin-block-start: var(--sp); 47 margin-block-end: var(--sp); 48 49 &:first-child { 50 margin-block-start: 0; 51 } 52 53 &:last-child { 54 margin-block-end: 0; 55 } 56 57 @media (--md) { 58 margin-block-start: var(--sp2); 59 margin-block-end: var(--sp2); 60 } 61 } 62 63 & code { 64 background-color: var(--color--gray-95); 65 } 66 67 & pre code { 68 display: block; 69 overflow: auto; 70 padding-block: var(--sp); 71 padding-inline-start: var(--sp); 72 padding-inline-end: var(--sp); 73 color: var(--color--gray-20); 74 } 75 76 & blockquote { 77 position: relative; 78 margin-block: var(--sp2); 79 margin-inline-start: 0; 80 margin-inline-end: 0; 81 padding-inline-start: var(--sp2); 82 letter-spacing: -0.01em; 83 font-family: var(--font-serif); 84 font-size: 21px; 85 line-height: var(--sp2); 86 87 &:before { 88 position: absolute; 89 inset-block-start: 0; 90 inset-inline-start: 0; 91 content: "“"; 92 color: var(--color--blue-70); 93 font-size: 54px; 94 } 95 96 &:after { 97 position: absolute; 98 inset-block-end: 0; 99 inset-inline-start: 0; 100 width: var(--sp0-5); 101 height: calc(100% - 30px); 102 margin-inline-start: 4px; 103 content: ""; 104 background: var(--color--gray-95); 105 } 106 107 @media (--grid-md) { 108 font-size: 32px; 109 line-height: var(--sp3); 110 } 111 112 @media (--lg) { 113 font-size: 40px; 114 line-height: calc(3.5 * var(--sp)); 115 } 116 } 117 118 @media (--grid-md) { 119 font-size: 18px; 120 line-height: var(--sp2); 121 } 122} 123 124/** 125 * Special colors for footer that has a dark background. 126 */ 127.site-footer .text-content { 128 color: inherit; 129 130 & * { 131 color: inherit; 132 } 133 134 & a { 135 text-decoration: underline; 136 color: var(--color--white); 137 box-shadow: none; 138 139 &:hover { 140 text-decoration: none; 141 color: var(--color--white); 142 box-shadow: none; 143 } 144 } 145} 146 147/** 148 * Decrease font-size for blockquote placed in sidebar region. 149 */ 150.region--sidebar .text-content blockquote { 151 @media (--lg) { 152 font-size: 24px; 153 line-height: var(--sp2); 154 } 155} 156