kythe.io@v0.0.68-0.20240422202219-7225dbc01741/kythe/web/site/_sass/_layout.scss (about) 1 /** Site header */ 2 .site-header { 3 border-top: 5px solid $grey-color-dark; 4 border-bottom: 1px solid $grey-color-light; 5 min-height: 56px; 6 7 // Positioning context for the mobile navigation icon 8 position: relative; 9 } 10 11 .site-title { 12 font-size: 26px; 13 line-height: 56px; 14 letter-spacing: -1px; 15 margin-bottom: 0; 16 float: left; 17 color: $brand-color; 18 } 19 20 .site-nav { 21 float: right; 22 line-height: 56px; 23 24 .menu-icon { 25 display: none; 26 } 27 28 .page-link { 29 color: $text-color; 30 line-height: $base-line-height; 31 32 // Gaps between nav items, but not on the first one 33 &:not(:first-child) { 34 margin-left: 20px; 35 } 36 } 37 38 @include media-query($on-palm) { 39 position: absolute; 40 top: 9px; 41 right: 30px; 42 background-color: $background-color; 43 border: 1px solid $grey-color-light; 44 border-radius: 5px; 45 text-align: right; 46 47 .menu-icon { 48 display: block; 49 float: right; 50 width: 36px; 51 height: 26px; 52 line-height: 0; 53 padding-top: 10px; 54 text-align: center; 55 56 > svg { 57 width: 18px; 58 height: 15px; 59 60 path { 61 fill: $grey-color-dark; 62 } 63 } 64 } 65 66 .trigger { 67 clear: both; 68 display: none; 69 } 70 71 &:hover .trigger { 72 display: block; 73 padding-bottom: 5px; 74 } 75 76 .page-link { 77 display: block; 78 padding: 5px 10px; 79 } 80 } 81 } 82 83 /** 84 * Site footer 85 */ 86 .site-footer { 87 border-top: 1px solid $grey-color-light; 88 padding: $spacing-unit 0; 89 } 90 91 .footer-heading { 92 font-size: 18px; 93 margin-bottom: $spacing-unit / 2; 94 } 95 96 .contact-list, 97 .social-media-list { 98 list-style: none; 99 margin-left: 0; 100 } 101 102 .footer-col-wrapper { 103 font-size: 15px; 104 color: $grey-color; 105 margin-left: -$spacing-unit / 2; 106 @extend %clearfix; 107 } 108 109 .footer-col { 110 float: left; 111 margin-bottom: $spacing-unit / 2; 112 padding-left: $spacing-unit / 2; 113 } 114 115 .footer-col-1 { 116 width: -webkit-calc(35% - (#{$spacing-unit} / 2)); 117 width: calc(35% - (#{$spacing-unit} / 2)); 118 } 119 120 .footer-col-2 { 121 width: -webkit-calc(20% - (#{$spacing-unit} / 2)); 122 width: calc(20% - (#{$spacing-unit} / 2)); 123 } 124 125 .footer-col-3 { 126 width: -webkit-calc(45% - (#{$spacing-unit} / 2)); 127 width: calc(45% - (#{$spacing-unit} / 2)); 128 } 129 130 @include media-query($on-laptop) { 131 .footer-col-1, 132 .footer-col-2 { 133 width: -webkit-calc(50% - (#{$spacing-unit} / 2)); 134 width: calc(50% - (#{$spacing-unit} / 2)); 135 } 136 137 .footer-col-3 { 138 width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 139 width: calc(100% - (#{$spacing-unit} / 2)); 140 } 141 } 142 143 @include media-query($on-palm) { 144 .footer-col { 145 float: none; 146 width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 147 width: calc(100% - (#{$spacing-unit} / 2)); 148 } 149 } 150 151 /** 152 * Page content 153 */ 154 .page-content { 155 padding: $spacing-unit 0; 156 } 157 158 .page-heading { 159 font-size: 20px; 160 } 161 162 .post-list { 163 margin-left: 0; 164 list-style: none; 165 166 > li { 167 margin-bottom: $spacing-unit; 168 } 169 } 170 171 .post-meta { 172 font-size: $small-font-size; 173 color: $grey-color; 174 } 175 176 .page-header { 177 margin-top: 0; 178 } 179 180 .post-title { 181 margin-top: 0; 182 font-size: 42px; 183 letter-spacing: -1px; 184 line-height: 1; 185 186 @include media-query($on-laptop) { 187 font-size: 36px; 188 } 189 } 190 191 .post-content { 192 margin-bottom: $spacing-unit; 193 194 h2 { 195 font-size: 32px; 196 197 @include media-query($on-laptop) { 198 font-size: 28px; 199 } 200 } 201 202 h3 { 203 font-size: 26px; 204 205 @include media-query($on-laptop) { 206 font-size: 22px; 207 } 208 } 209 210 h4 { 211 font-size: 20px; 212 213 @include media-query($on-laptop) { 214 font-size: 18px; 215 } 216 } 217 }