├── .gitignore ├── LICENSE ├── css └── main.css ├── gulpfile.js ├── img ├── arrow-white.svg ├── arrow.svg ├── closeicon.svg ├── github.svg ├── hamburger.svg ├── header-bg.png ├── instagram.svg ├── joe-portfolio.png ├── portfolio-01.jpg ├── portfolio-02.jpg ├── portfolio-03.jpg ├── portfolio-04.jpg ├── portfolio-05.jpg ├── twitter.svg ├── welcome-01.png └── welcome-02.png ├── index.html ├── js ├── modal.js └── nav.js ├── package.json └── scss ├── main.scss ├── modules ├── _all.scss ├── _colors.scss ├── _mixins.scss └── _typography.scss ├── partials ├── _about-me.scss ├── _all.scss ├── _base.scss ├── _contact.scss ├── _footer.scss ├── _intro.scss ├── _nav.scss ├── _portfolio.scss └── _welcome.scss └── vendor └── _normalize.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | 61 | ### macOS ### 62 | *.DS_Store 63 | .AppleDouble 64 | .LSOverride 65 | 66 | # Icon must end with two \r 67 | Icon 68 | 69 | # Thumbnails 70 | ._* 71 | 72 | # Files that might appear in the root of a volume 73 | .DocumentRevisions-V100 74 | .fseventsd 75 | .Spotlight-V100 76 | .TemporaryItems 77 | .Trashes 78 | .VolumeIcon.icns 79 | .com.apple.timemachine.donotpresent 80 | 81 | # Directories potentially created on remote AFP share 82 | .AppleDB 83 | .AppleDesktop 84 | Network Trash Folder 85 | Temporary Items 86 | .apdisk 87 | 88 | ### Prepros ### 89 | # Config Prepros files to ignore 90 | prepros.cfg 91 | prepros-6.config 92 | 93 | # End of https://www.gitignore.io/api/macos,prepros 94 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Kevin Powell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Merriweather:400,900|Six+Caps"); 2 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 3 | /* Document 4 | ========================================================================== */ 5 | /** 6 | * 1. Correct the line height in all browsers. 7 | * 2. Prevent adjustments of font size after orientation changes in 8 | * IE on Windows Phone and in iOS. 9 | */ 10 | html { 11 | line-height: 1.15; 12 | /* 1 */ 13 | -ms-text-size-adjust: 100%; 14 | /* 2 */ 15 | -webkit-text-size-adjust: 100%; 16 | /* 2 */ } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | /** 21 | * Remove the margin in all browsers (opinionated). 22 | */ 23 | body { 24 | margin: 0; } 25 | 26 | /** 27 | * Add the correct display in IE 9-. 28 | */ 29 | article, 30 | aside, 31 | footer, 32 | header, 33 | nav, 34 | section { 35 | display: block; } 36 | 37 | /** 38 | * Correct the font size and margin on `h1` elements within `section` and 39 | * `article` contexts in Chrome, Firefox, and Safari. 40 | */ 41 | h1 { 42 | font-size: 2em; 43 | margin: 0.67em 0; } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | /** 48 | * Add the correct display in IE 9-. 49 | * 1. Add the correct display in IE. 50 | */ 51 | figcaption, 52 | figure, 53 | main { 54 | /* 1 */ 55 | display: block; } 56 | 57 | /** 58 | * Add the correct margin in IE 8. 59 | */ 60 | figure { 61 | margin: 0; } 62 | 63 | /** 64 | * 1. Add the correct box sizing in Firefox. 65 | * 2. Show the overflow in Edge and IE. 66 | */ 67 | hr { 68 | -webkit-box-sizing: content-box; 69 | box-sizing: content-box; 70 | /* 1 */ 71 | height: 0; 72 | /* 1 */ 73 | overflow: visible; 74 | /* 2 */ } 75 | 76 | /* Text-level semantics 77 | ========================================================================== */ 78 | /** 79 | * 1. Remove the gray background on active links in IE 10. 80 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 81 | */ 82 | a { 83 | background-color: transparent; 84 | /* 1 */ 85 | -webkit-text-decoration-skip: objects; 86 | /* 2 */ } 87 | 88 | /** 89 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 90 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 91 | */ 92 | abbr[title] { 93 | border-bottom: none; 94 | /* 1 */ 95 | text-decoration: underline; 96 | /* 2 */ 97 | -webkit-text-decoration: underline dotted; 98 | text-decoration: underline dotted; 99 | /* 2 */ } 100 | 101 | /** 102 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 103 | */ 104 | b, 105 | strong { 106 | font-weight: inherit; } 107 | 108 | /** 109 | * Add the correct font weight in Chrome, Edge, and Safari. 110 | */ 111 | b, 112 | strong { 113 | font-weight: bolder; } 114 | 115 | /** 116 | * Add the correct font size in all browsers. 117 | */ 118 | small { 119 | font-size: 80%; } 120 | 121 | /* Embedded content 122 | ========================================================================== */ 123 | /** 124 | * Add the correct display in IE 9-. 125 | */ 126 | audio, 127 | video { 128 | display: inline-block; } 129 | 130 | /** 131 | * Add the correct display in iOS 4-7. 132 | */ 133 | audio:not([controls]) { 134 | display: none; 135 | height: 0; } 136 | 137 | /** 138 | * Remove the border on images inside links in IE 10-. 139 | */ 140 | img { 141 | border-style: none; } 142 | 143 | /** 144 | * Hide the overflow in IE. 145 | */ 146 | svg:not(:root) { 147 | overflow: hidden; } 148 | 149 | /* Forms 150 | ========================================================================== */ 151 | /** 152 | * 1. Change the font styles in all browsers (opinionated). 153 | * 2. Remove the margin in Firefox and Safari. 154 | */ 155 | button, 156 | input, 157 | optgroup, 158 | select, 159 | textarea { 160 | font-family: sans-serif; 161 | /* 1 */ 162 | font-size: 100%; 163 | /* 1 */ 164 | line-height: 1.15; 165 | /* 1 */ 166 | margin: 0; 167 | /* 2 */ } 168 | 169 | /** 170 | * Show the overflow in IE. 171 | * 1. Show the overflow in Edge. 172 | */ 173 | button, 174 | input { 175 | /* 1 */ 176 | overflow: visible; } 177 | 178 | /** 179 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 180 | * 1. Remove the inheritance of text transform in Firefox. 181 | */ 182 | button, 183 | select { 184 | /* 1 */ 185 | text-transform: none; } 186 | 187 | /** 188 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 189 | * controls in Android 4. 190 | * 2. Correct the inability to style clickable types in iOS and Safari. 191 | */ 192 | button, 193 | html [type="button"], 194 | [type="reset"], 195 | [type="submit"] { 196 | -webkit-appearance: button; 197 | /* 2 */ } 198 | 199 | /** 200 | * Remove the inner border and padding in Firefox. 201 | */ 202 | button::-moz-focus-inner, 203 | [type="button"]::-moz-focus-inner, 204 | [type="reset"]::-moz-focus-inner, 205 | [type="submit"]::-moz-focus-inner { 206 | border-style: none; 207 | padding: 0; } 208 | 209 | /** 210 | * Restore the focus styles unset by the previous rule. 211 | */ 212 | button:-moz-focusring, 213 | [type="button"]:-moz-focusring, 214 | [type="reset"]:-moz-focusring, 215 | [type="submit"]:-moz-focusring { 216 | outline: 1px dotted ButtonText; } 217 | 218 | /** 219 | * Correct the padding in Firefox. 220 | */ 221 | fieldset { 222 | padding: 0.35em 0.75em 0.625em; } 223 | 224 | /** 225 | * 1. Correct the text wrapping in Edge and IE. 226 | * 2. Correct the color inheritance from `fieldset` elements in IE. 227 | * 3. Remove the padding so developers are not caught out when they zero out 228 | * `fieldset` elements in all browsers. 229 | */ 230 | legend { 231 | -webkit-box-sizing: border-box; 232 | box-sizing: border-box; 233 | /* 1 */ 234 | color: inherit; 235 | /* 2 */ 236 | display: table; 237 | /* 1 */ 238 | max-width: 100%; 239 | /* 1 */ 240 | padding: 0; 241 | /* 3 */ 242 | white-space: normal; 243 | /* 1 */ } 244 | 245 | /** 246 | * 1. Add the correct display in IE 9-. 247 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 248 | */ 249 | progress { 250 | display: inline-block; 251 | /* 1 */ 252 | vertical-align: baseline; 253 | /* 2 */ } 254 | 255 | /** 256 | * Remove the default vertical scrollbar in IE. 257 | */ 258 | textarea { 259 | overflow: auto; } 260 | 261 | /** 262 | * 1. Add the correct box sizing in IE 10-. 263 | * 2. Remove the padding in IE 10-. 264 | */ 265 | [type="checkbox"], 266 | [type="radio"] { 267 | -webkit-box-sizing: border-box; 268 | box-sizing: border-box; 269 | /* 1 */ 270 | padding: 0; 271 | /* 2 */ } 272 | 273 | /** 274 | * Correct the cursor style of increment and decrement buttons in Chrome. 275 | */ 276 | [type="number"]::-webkit-inner-spin-button, 277 | [type="number"]::-webkit-outer-spin-button { 278 | height: auto; } 279 | 280 | /** 281 | * 1. Correct the odd appearance in Chrome and Safari. 282 | * 2. Correct the outline style in Safari. 283 | */ 284 | [type="search"] { 285 | -webkit-appearance: textfield; 286 | /* 1 */ 287 | outline-offset: -2px; 288 | /* 2 */ } 289 | 290 | /** 291 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 292 | */ 293 | [type="search"]::-webkit-search-cancel-button, 294 | [type="search"]::-webkit-search-decoration { 295 | -webkit-appearance: none; } 296 | 297 | /** 298 | * 1. Correct the inability to style clickable types in iOS and Safari. 299 | * 2. Change font properties to `inherit` in Safari. 300 | */ 301 | ::-webkit-file-upload-button { 302 | -webkit-appearance: button; 303 | /* 1 */ 304 | font: inherit; 305 | /* 2 */ } 306 | 307 | /* Interactive 308 | ========================================================================== */ 309 | /* 310 | * Add the correct display in IE 9-. 311 | * 1. Add the correct display in Edge, IE, and Firefox. 312 | */ 313 | details, 314 | menu { 315 | display: block; } 316 | 317 | /* 318 | * Add the correct display in all browsers. 319 | */ 320 | summary { 321 | display: list-item; } 322 | 323 | /* Scripting 324 | ========================================================================== */ 325 | /** 326 | * Add the correct display in IE 9-. 327 | */ 328 | canvas { 329 | display: inline-block; } 330 | 331 | /** 332 | * Add the correct display in IE. 333 | */ 334 | template { 335 | display: none; } 336 | 337 | /* Hidden 338 | ========================================================================== */ 339 | /** 340 | * Add the correct display in IE 10-. 341 | */ 342 | [hidden] { 343 | display: none; } 344 | 345 | body { 346 | color: #A7A7A7; 347 | font-family: "Merriweather", serif; 348 | line-height: 1.6; 349 | background: #FFFFFF; 350 | font-size: .875rem; 351 | overflow-x: hidden; } 352 | @media (min-width: 50em) { 353 | body { 354 | font-size: 1.125rem; } } 355 | 356 | img { 357 | max-width: 100%; } 358 | 359 | h1, h2, p { 360 | margin-top: 0; 361 | margin-bottom: 1em; } 362 | 363 | h1 { 364 | color: #03AFC2; 365 | line-height: 1; 366 | font-size: 3.125rem; } 367 | @media (min-width: 50em) { 368 | h1 { 369 | font-size: 4.25rem; } } 370 | 371 | h2 { 372 | font-size: 2rem; 373 | letter-spacing: 0.15em; 374 | color: #606060; 375 | text-transform: uppercase; 376 | line-height: 1; 377 | font-family: "Six Caps", sans-serif; 378 | font-weight: 400; } 379 | @media (min-width: 50em) { 380 | h2 { 381 | font-size: 3rem; } } 382 | 383 | .menu-button { 384 | position: absolute; 385 | top: 3em; 386 | left: 3em; 387 | background: transparent; 388 | border: 0; 389 | -webkit-transition: -webkit-transform ease-in-out 250ms; 390 | transition: -webkit-transform ease-in-out 250ms; 391 | -o-transition: transform ease-in-out 250ms; 392 | transition: transform ease-in-out 250ms; 393 | transition: transform ease-in-out 250ms, -webkit-transform ease-in-out 250ms; 394 | cursor: pointer; 395 | outline: none; } 396 | 397 | nav { 398 | position: absolute; 399 | top: 0; 400 | bottom: 0; 401 | left: 0; 402 | right: 20%; 403 | z-index: 10; 404 | -webkit-transform: translateX(-100%); 405 | -ms-transform: translateX(-100%); 406 | transform: translateX(-100%); 407 | -webkit-transition: -webkit-transform ease-out 250ms; 408 | transition: -webkit-transform ease-out 250ms; 409 | -o-transition: transform ease-out 250ms; 410 | transition: transform ease-out 250ms; 411 | transition: transform ease-out 250ms, -webkit-transform ease-out 250ms; } 412 | 413 | nav li, nav a { 414 | display: -webkit-box; 415 | display: -webkit-flex; 416 | display: -ms-flexbox; 417 | display: flex; 418 | -webkit-box-align: center; 419 | -webkit-align-items: center; 420 | -ms-flex-align: center; 421 | align-items: center; 422 | -webkit-box-pack: center; 423 | -webkit-justify-content: center; 424 | -ms-flex-pack: center; 425 | justify-content: center; 426 | height: 100%; 427 | width: 100%; } 428 | 429 | nav ul { 430 | margin: 0; 431 | padding: 0; 432 | list-style: none; 433 | display: -webkit-box; 434 | display: -webkit-flex; 435 | display: -ms-flexbox; 436 | display: flex; 437 | -webkit-box-orient: vertical; 438 | -webkit-box-direction: normal; 439 | -webkit-flex-direction: column; 440 | -ms-flex-direction: column; 441 | flex-direction: column; 442 | height: 100vh; 443 | -webkit-justify-content: space-around; 444 | -ms-flex-pack: distribute; 445 | justify-content: space-around; 446 | -webkit-box-align: stretch; 447 | -webkit-align-items: stretch; 448 | -ms-flex-align: stretch; 449 | align-items: stretch; 450 | background: #03AFC2; } 451 | 452 | nav li { 453 | text-align: center; } 454 | nav li:not(:last-of-type) { 455 | border-bottom: 1px solid #223843; } 456 | 457 | nav li:hover { 458 | background: rgba(0, 0, 0, 0.2); } 459 | 460 | nav a { 461 | font-size: 4rem; 462 | letter-spacing: 0.15em; 463 | color: #223843; 464 | text-transform: uppercase; 465 | line-height: 1; 466 | font-family: "Six Caps", sans-serif; 467 | font-weight: 400; 468 | text-decoration: none; } 469 | 470 | .close-icon { 471 | display: none; } 472 | 473 | .nav-is-open nav { 474 | -webkit-transform: translateX(0); 475 | -ms-transform: translateX(0); 476 | transform: translateX(0); } 477 | 478 | .nav-is-open .container-all { 479 | -webkit-transform: translateX(80%); 480 | -ms-transform: translateX(80%); 481 | transform: translateX(80%); } 482 | 483 | .nav-is-open .hamburger { 484 | display: none; } 485 | 486 | .nav-is-open .close-icon { 487 | display: block; } 488 | 489 | .nav-is-open .menu-button { 490 | -webkit-transform: translateX(-70%); 491 | -ms-transform: translateX(-70%); 492 | transform: translateX(-70%); } 493 | 494 | .container-all { 495 | -webkit-transition: -webkit-transform ease-out 250ms; 496 | transition: -webkit-transform ease-out 250ms; 497 | -o-transition: transform ease-out 250ms; 498 | transition: transform ease-out 250ms; 499 | transition: transform ease-out 250ms, -webkit-transform ease-out 250ms; } 500 | 501 | 502 | 503 | .welcome { 504 | background-image: url(../img/header-bg.png); 505 | background-size: cover; 506 | background-position: center; 507 | height: 100vh; 508 | display: -webkit-box; 509 | display: -webkit-flex; 510 | display: -ms-flexbox; 511 | display: flex; 512 | -webkit-box-align: center; 513 | -webkit-align-items: center; 514 | -ms-flex-align: center; 515 | align-items: center; 516 | -webkit-box-pack: center; 517 | -webkit-justify-content: center; 518 | -ms-flex-pack: center; 519 | justify-content: center; 520 | position: relative; } 521 | .welcome h1 { 522 | font-size: 1.5rem; 523 | font-weight: 400; 524 | color: #223843; 525 | line-height: 2; 526 | text-align: center; } 527 | @media (min-width: 50em) { 528 | .welcome h1 { 529 | font-size: 3vw; } } 530 | .welcome h1 span { 531 | font-size: 5.5rem; 532 | letter-spacing: 0.15em; 533 | color: #03AFC2; 534 | text-transform: uppercase; 535 | line-height: 1; 536 | font-family: "Six Caps", sans-serif; 537 | font-weight: 400; 538 | display: block; } 539 | @media (min-width: 50em) { 540 | .welcome h1 span { 541 | font-size: 10vw; } } 542 | .welcome h1::before, .welcome h1::after { 543 | content: ''; 544 | display: block; 545 | width: 60%; 546 | height: 1px; 547 | background: #223843; } 548 | .welcome h1::before { 549 | margin: 0 auto 2em; } 550 | .welcome h1::after { 551 | margin: 2em auto 0; } 552 | 553 | .intro { 554 | display: -webkit-box; 555 | display: -webkit-flex; 556 | display: -ms-flexbox; 557 | display: flex; 558 | color: rgba(255, 255, 255, 0.7); } 559 | .intro h2 { 560 | color: #FFFFFF; } 561 | .intro h2::after { 562 | content: ''; 563 | width: 20%; 564 | height: 1px; 565 | background: rgba(255, 255, 255, 0.5); 566 | display: block; 567 | margin: 1em auto 0; } 568 | @supports (display: grid) { 569 | .intro { 570 | display: grid; 571 | grid-template-columns: minmax(4em, 1fr) minmax(auto, 30em) minmax(4em, 1fr); } } 572 | 573 | .intro-middle { 574 | background: #223843; 575 | padding: 2.5em 5vw; 576 | text-align: center; 577 | display: -webkit-box; 578 | display: -webkit-flex; 579 | display: -ms-flexbox; 580 | display: flex; 581 | -webkit-box-orient: vertical; 582 | -webkit-box-direction: normal; 583 | -webkit-flex-direction: column; 584 | -ms-flex-direction: column; 585 | flex-direction: column; 586 | -webkit-box-pack: center; 587 | -webkit-justify-content: center; 588 | -ms-flex-pack: center; 589 | justify-content: center; } 590 | 591 | .intro-left img, 592 | .intro-right img { 593 | -o-object-fit: cover; 594 | object-fit: cover; 595 | min-height: 100%; 596 | min-width: 100%; 597 | display: block; } 598 | 599 | .about-me { 600 | width: 90%; 601 | margin: 0 auto; 602 | max-width: 50em; 603 | margin-top: 5em; 604 | margin-bottom: 5em; } 605 | .about-me::after { 606 | content: ''; 607 | display: block; 608 | clear: both; } 609 | 610 | .about-img { 611 | max-height: 25em; } 612 | @media (min-width: 42em) { 613 | .about-img { 614 | float: left; 615 | margin-right: 1em; } } 616 | 617 | .about-title { 618 | margin-bottom: .25em; } 619 | 620 | .about-subtitle { 621 | margin: .5em 0; } 622 | 623 | @supports (display: grid) { 624 | .about-me { 625 | display: grid; 626 | grid-template-columns: [port-start] minmax(6em, 1fr) [name-start] minmax(6em, 1fr) [img-end] 2fr [port-end]; 627 | grid-column-gap: .5em; } 628 | .about-img { 629 | grid-column: port / img; 630 | grid-row: 1 / 2; } 631 | @media (min-width: 50em) { 632 | .about-img { 633 | grid-row: 1 / 4; } } 634 | .about-title { 635 | grid-column: name / port; 636 | grid-row: 1 / 2; 637 | -webkit-align-self: end; 638 | -ms-flex-item-align: end; 639 | align-self: end; } 640 | .about-subtitle, 641 | .about-text { 642 | grid-column: port / port; } 643 | @media (min-width: 50em) { 644 | .about-subtitle, 645 | .about-text { 646 | grid-column: image-end / port-end; } } 647 | .about-subtitle { 648 | grid-row: 2 / 3; } 649 | .about-text { 650 | grid-row: 3 / 4; } } 651 | 652 | .portfolio { 653 | text-align: center; 654 | background: #E8E9EB; 655 | padding: 5em 0; } 656 | 657 | .portfolio-items { 658 | display: -webkit-box; 659 | display: -webkit-flex; 660 | display: -ms-flexbox; 661 | display: flex; 662 | -webkit-flex-wrap: wrap; 663 | -ms-flex-wrap: wrap; 664 | flex-wrap: wrap; 665 | width: 90%; 666 | margin: 0 auto; 667 | max-width: 75em; } 668 | 669 | .portfolio-item { 670 | position: relative; 671 | overflow: hidden; 672 | -webkit-box-flex: 1; 673 | -webkit-flex: 1 1 20rem; 674 | -ms-flex: 1 1 20rem; 675 | flex: 1 1 20rem; } 676 | .portfolio-item .portfolio-image { 677 | display: block; 678 | width: 100%; } 679 | .portfolio-item figcaption { 680 | position: absolute; 681 | top: 100%; 682 | bottom: 0; 683 | right: 0; 684 | left: 0; 685 | padding: 1em; 686 | background: rgba(3, 175, 194, 0.75); 687 | color: #FFFFFF; 688 | text-align: left; 689 | display: -webkit-box; 690 | display: -webkit-flex; 691 | display: -ms-flexbox; 692 | display: flex; 693 | -webkit-box-orient: vertical; 694 | -webkit-box-direction: normal; 695 | -webkit-flex-direction: column; 696 | -ms-flex-direction: column; 697 | flex-direction: column; 698 | -webkit-transition: top ease-in-out 250ms; 699 | -o-transition: top ease-in-out 250ms; 700 | transition: top ease-in-out 250ms; } 701 | .portfolio-item:hover figcaption, 702 | .portfolio-item:focus figcaption { 703 | top: 0; } 704 | 705 | .portfolio-title { 706 | color: #FFFFFF; 707 | font-size: 2.5rem; 708 | margin-bottom: auto; } 709 | 710 | .portfolio-desc { 711 | display: none; } 712 | 713 | .portfolio-link { 714 | color: white; 715 | font-weight: 900; 716 | font-size: 1.1rem; 717 | text-decoration: none; 718 | border-bottom: 3px solid #FFFFFF; 719 | -webkit-align-self: flex-start; 720 | -ms-flex-item-align: start; 721 | align-self: flex-start; } 722 | .portfolio-link::after { 723 | content: url(../img/arrow-white.svg); 724 | display: inline-block; 725 | height: .8em; 726 | width: .8em; 727 | margin-left: .5em; } 728 | 729 | @supports (display: grid) { 730 | .portfolio-items { 731 | display: grid; 732 | grid-template-columns: repeat(2, 1fr); } 733 | @media (min-width: 50em) { 734 | .portfolio-items { 735 | grid-template-columns: repeat(4, 1fr); } } 736 | .portfolio-item.featured { 737 | grid-column: 1 / span 2; 738 | grid-row: 1 / span 2; } 739 | .featured .portfolio-title { 740 | font-size: 5rem; } 741 | .featured .portfolio-desc { 742 | display: block; } } 743 | 744 | .portfolio-modal { 745 | position: fixed; 746 | z-index: 10; 747 | top: 2em; 748 | bottom: 2em; 749 | left: 2em; 750 | right: 2em; 751 | background: white; 752 | box-shadow: 0 0 0 3em rgba(0, 0, 0, 0.5); 753 | overflow-y: scroll; 754 | overflow-x: hidden; 755 | display: none; } 756 | .portfolio-modal.is-open { 757 | display: block; } 758 | 759 | .modal-close { 760 | background: white; 761 | position: fixed; 762 | left: 1em; 763 | top: 1em; 764 | border: 0; 765 | width: 2em; 766 | height: 2em; 767 | padding: 4px 0 0; 768 | border-radius: 50%; 769 | cursor: pointer; 770 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } 771 | 772 | .portfolio-header { 773 | text-align: left; 774 | padding: 5em 0; 775 | margin-bottom: 2em; 776 | background-size: cover; 777 | background-position: center; } 778 | 779 | .header-one { 780 | background-image: url(../img/portfolio-01.jpg); } 781 | 782 | .header-two { 783 | background-image: url(../img/portfolio-02.jpg); } 784 | 785 | .portfolio-title-box { 786 | background: rgba(3, 175, 194, 0.75); 787 | padding: 3em 0 3em 3em; 788 | color: white; 789 | width: 70%; } 790 | .portfolio-title-box .portfolio-title { 791 | font-size: 3.5rem; 792 | display: inline-block; } 793 | .portfolio-title-box .portfolio-title::after { 794 | content: ''; 795 | display: block; 796 | height: 1px; 797 | margin: .5em 0; 798 | background: white; 799 | width: 100%; } 800 | 801 | .portfolio-subtitle { 802 | font-size: 1rem; } 803 | 804 | .portfolio-content { 805 | text-align: left; 806 | width: 85%; 807 | margin: 0 auto; 808 | padding-bottom: 2em; } 809 | 810 | .portfolio-full-width { 811 | width: 100vw; 812 | max-width: initial; 813 | margin: 2em calc(50% - 50vw); 814 | height: 20vh; 815 | object-fit: cover; } 816 | 817 | @media (min-width: 50em) { 818 | .portfolio-pull-left { 819 | width: 65%; 820 | float: left; 821 | margin-right: 2em; } 822 | .portfolio-pull-right { 823 | width: 65%; 824 | float: right; 825 | margin-left: 2em; } } 826 | 827 | @keyframes modalIn { 828 | 0% { 829 | opacity: 0; } 830 | 100% { 831 | opacity: 1; } } 832 | 833 | @keyframes modalOut { 834 | 0% { 835 | opacity: 1; } 836 | 100% { 837 | opacity: 0; } } 838 | 839 | .contact { 840 | width: 90%; 841 | margin: 0 auto; 842 | max-width: 50em; 843 | padding: 5em 0; } 844 | .contact h1 { 845 | text-align: center; } 846 | 847 | form { 848 | display: -webkit-box; 849 | display: -webkit-flex; 850 | display: -ms-flexbox; 851 | display: flex; 852 | -webkit-box-orient: vertical; 853 | -webkit-box-direction: normal; 854 | -webkit-flex-direction: column; 855 | -ms-flex-direction: column; 856 | flex-direction: column; } 857 | @supports (display: grid) { 858 | @media (min-width: 50em) { 859 | form { 860 | display: grid; 861 | grid-template-columns: 50% 50%; 862 | grid-column-gap: 1em; 863 | 864 | grid-template-areas: "name email" "message message" " . button"; } 865 | 866 | form .name { 867 | grid-area: name; } 868 | form .email { 869 | grid-area: email; } 870 | form .message { 871 | grid-area: message; } 872 | form .message textarea { 873 | height: 10em; } 874 | form .button { 875 | grid-area: button; } } } 876 | 877 | label { 878 | display: block; 879 | margin-top: 1em; 880 | color: #606060; } 881 | 882 | input, 883 | textarea { 884 | -webkit-box-sizing: border-box; 885 | box-sizing: border-box; 886 | display: block; 887 | padding: .75em; 888 | width: 100%; 889 | min-width: 15em; 890 | background: #fbfbfc; 891 | border: 1px solid #E8E9EB; 892 | font-size: 1.2rem; } 893 | 894 | textarea { 895 | resize: vertical; 896 | outline: none; } 897 | 898 | .button { 899 | display: inline-block; 900 | width: auto; 901 | min-width: auto; 902 | margin-top: 1em; 903 | margin-left: auto; 904 | background: #03AFC2; 905 | border: none; 906 | font-size: 2.5rem; 907 | letter-spacing: 0.15em; 908 | color: #FFFFFF; 909 | text-transform: uppercase; 910 | line-height: 1; 911 | font-family: "Six Caps", sans-serif; 912 | font-weight: 400; 913 | padding: .5em 1.5em; } 914 | 915 | footer { 916 | background: #223843; 917 | padding: 5em 0; 918 | text-align: center; } 919 | 920 | .social-icons { 921 | width: 90%; 922 | margin: 0 auto; 923 | max-width: 15em; 924 | display: -webkit-box; 925 | display: -webkit-flex; 926 | display: -ms-flexbox; 927 | display: flex; 928 | -webkit-box-pack: justify; 929 | -webkit-justify-content: space-between; 930 | -ms-flex-pack: justify; 931 | justify-content: space-between; 932 | margin: 1.75em auto 4em; } 933 | 934 | .social-icon { 935 | width: 25%; 936 | height: 25%; } 937 | 938 | .copyright::before { 939 | content: ''; 940 | display: block; 941 | height: 1px; 942 | background: rgba(255, 255, 255, 0.15); 943 | margin: 4em auto; 944 | width: 25%; } 945 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'), 2 | browserSync = require('browser-sync').create(), 3 | sass = require('gulp-sass'); 4 | 5 | 6 | // Static server & watch scss + html files 7 | gulp.task('watch', ['sass'], function() { 8 | 9 | browserSync.init({ 10 | server: '.' 11 | }); 12 | 13 | gulp.watch('./scss/**/*.scss', ['sass'], browserSync.reload); 14 | gulp.watch('./*.html').on('change', browserSync.reload); 15 | gulp.watch('./js/**/*.js', browserSync.reload); 16 | 17 | }); 18 | 19 | // Compile Sass into CSS & inject into browsers 20 | gulp.task('sass', function() { 21 | return gulp.src('./scss/**/*.scss') 22 | .pipe(sass().on('error', sass.logError)) 23 | .pipe(gulp.dest('./css')) 24 | .pipe(browserSync.stream()); 25 | }); 26 | 27 | 28 | // default will also watch 29 | gulp.task('default', ['watch']); 30 | 31 | -------------------------------------------------------------------------------- /img/arrow-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /img/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/closeicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /img/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /img/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/header-bg.png -------------------------------------------------------------------------------- /img/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 14 | 15 | -------------------------------------------------------------------------------- /img/joe-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/joe-portfolio.png -------------------------------------------------------------------------------- /img/portfolio-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/portfolio-01.jpg -------------------------------------------------------------------------------- /img/portfolio-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/portfolio-02.jpg -------------------------------------------------------------------------------- /img/portfolio-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/portfolio-03.jpg -------------------------------------------------------------------------------- /img/portfolio-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/portfolio-04.jpg -------------------------------------------------------------------------------- /img/portfolio-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/portfolio-05.jpg -------------------------------------------------------------------------------- /img/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /img/welcome-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/welcome-01.png -------------------------------------------------------------------------------- /img/welcome-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevin-powell/portfolio-with-css-grid/a357202dd9c4698b4dbadfc64e973c1c4f586e08/img/welcome-02.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Joe Portfolio 8 | 9 | 10 | 11 | 12 | 20 | 21 |
22 |
23 | 44 | 45 |

Welcome to myPortfolio

46 |
47 | 48 |
49 |
50 | a laptop on a wood table 51 |
52 |
53 |

Making it happen

54 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet eleifend justo. Quisque non magna vel justo eleifend imperdiet

55 |
56 |
57 | two computers and a laptop on a table 58 |
59 |
60 | 61 |
62 | A picture of Joe Portfolio 63 |

Joe Portfolio

64 |

Designer & Developer

65 |
66 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

67 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

68 |
69 |
70 | 71 |
72 |

My Work

73 |
74 | 75 | 76 |
77 | portfolio item 78 |
79 |

Project Name

80 |

A short description could go right here

81 | More info 82 |
83 | 84 | 85 |
86 | 95 |
96 |
97 |

Project Name

98 |

Subtitle goes here

99 |
100 |
101 |
102 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

103 | an image 104 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

105 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

106 | an image 107 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

108 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

109 | an image 110 |
111 |
112 | 113 |
114 | 115 | 116 |
117 | portfolio item 118 |
119 |

Project Name

120 |

A short description could go right here

121 | More info 122 |
123 |
124 | 133 |
134 |
135 |

Project Name 2

136 |

Subtitle goes here

137 |
138 |
139 |
140 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

141 | an image 142 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

143 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

144 | an image 145 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

146 |

Aenean mattis tristique elementum. Duis massa tellus, tempus non fermentum at, venenatis et augue. Phasellus tristique purus sed sagittis interdum. Duis luctus sapien justo, vel viverra ex convallis et. Maecenas suscipit lacus ut lectus mattis ornare. Vestibulum faucibus purus sit amet erat lobortis, tristique fringilla leo sodales. Interdum et malesuada fames ac ante.

147 | an image 148 |
149 |
150 |
151 | 152 | 153 |
154 | portfolio item 155 |
156 |

Project Name

157 |

A short description could go right here

158 | More info 159 |
160 |
161 | 162 | 163 |
164 | portfolio item 165 |
166 |

Project Name

167 |

A short description could go right here

168 | More info 169 |
170 |
171 | 172 | 173 |
174 | portfolio item 175 |
176 |

Project Name

177 |

A short description could go right here

178 | More info 179 |
180 |
181 | 182 |
183 | 184 |
185 | 186 |
187 |

Contact me

188 |
189 | 192 | 193 | 196 | 197 | 200 | 201 | 202 | 203 |
204 |
205 | 206 | 216 |
217 | 218 | 219 | 220 | 221 | -------------------------------------------------------------------------------- /js/modal.js: -------------------------------------------------------------------------------- 1 | const portfolioContainer = document.querySelector('.portfolio-items') 2 | 3 | portfolioContainer.addEventListener('click', e => { 4 | // console.log(e) 5 | e.preventDefault() 6 | 7 | const modalToggle = e.target.closest('.portfolio-link') 8 | // console.log(modalToggle) 9 | if (! modalToggle) return 10 | 11 | const modal = modalToggle.parentNode.nextElementSibling 12 | const closeButton = modal.querySelector('.modal-close') 13 | 14 | const modalOpen = _ => { 15 | modal.classList.add('is-open') 16 | modal.style.animation = 'modalIn 500ms forwards' 17 | //document.body.style.overflowY = 'hidden' 18 | } 19 | 20 | const modalClose = _ => { 21 | modal.classList.remove('is-open') 22 | modal.removeEventListener('animationend', modalClose) 23 | } 24 | 25 | closeButton.addEventListener('click', _ => { 26 | modal.style.animation = 'modalOut 500ms forwards' 27 | modal.addEventListener('animationend', modalClose) 28 | //document.body.style.overflowY = 'scroll' 29 | }) 30 | 31 | document.addEventListener('keydown', e => { 32 | if ( e.keyCode === 27 ) { 33 | modal.style.animation = 'modalOut 500ms forwards' 34 | modal.addEventListener('animationend', modalClose) 35 | document.body.style.overflowY = 'scroll' 36 | } 37 | }) 38 | 39 | modalOpen() 40 | 41 | }) 42 | -------------------------------------------------------------------------------- /js/nav.js: -------------------------------------------------------------------------------- 1 | const navToggle = document.querySelector('.menu-button') 2 | const nav = document.querySelector('nav') 3 | const containerAll = document.querySelector('.container-all') 4 | 5 | const containerAllStyle = containerAll.style 6 | const bodyClassList = document.body.classList 7 | 8 | navToggle.addEventListener('click', _ => { 9 | containerAllStyle.transition = 'transform 250ms ease-in-out' 10 | bodyClassList.toggle('nav-is-open') 11 | }) 12 | 13 | nav.addEventListener('click', _ => { 14 | containerAllStyle.transition = '0ms' 15 | bodyClassList.remove('nav-is-open') 16 | }) 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio-with-css-grid", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/kevin-powell/portfolio-with-css-grid.git" 12 | }, 13 | "author": "Kevin Powell", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/kevin-powell/portfolio-with-css-grid/issues" 17 | }, 18 | "homepage": "https://github.com/kevin-powell/portfolio-with-css-grid#readme", 19 | "devDependencies": { 20 | "browser-sync": "^2.18.13", 21 | "gulp": "^3.9.1", 22 | "gulp-sass": "^3.1.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | @import 'modules/all'; 2 | @import 'vendor/normalize'; 3 | @import 'partials/all' -------------------------------------------------------------------------------- /scss/modules/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'typography'; 2 | @import 'colors'; 3 | @import 'mixins'; -------------------------------------------------------------------------------- /scss/modules/_colors.scss: -------------------------------------------------------------------------------- 1 | $white: #FFFFFF; 2 | $light-gray: #E8E9EB; 3 | $gray: #A7A7A7; 4 | $dark-gray: #606060; 5 | $accent: #03AFC2; 6 | $dark-blue: #223843; -------------------------------------------------------------------------------- /scss/modules/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | @mixin container($width: 90%, $max-width: 50em) { 4 | width: $width; 5 | margin: 0 auto; 6 | max-width: $max-width; 7 | } 8 | 9 | @mixin clearfix { 10 | &::after { 11 | content: ''; 12 | display: block; 13 | clear: both; 14 | } 15 | } 16 | 17 | @mixin mq($width: 50em) { 18 | @media (min-width: $width) { 19 | @content; 20 | } 21 | } -------------------------------------------------------------------------------- /scss/modules/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Merriweather:400,900|Six+Caps'); 2 | 3 | $ff-s: 'Merriweather', serif; 4 | $ff-ss: 'Six Caps', sans-serif; 5 | 6 | $fw-n: 400; 7 | $fw-b: 900; 8 | 9 | @mixin sans-serif($fs, $ls: .15em, $color: $dark-gray, $tt: uppercase, $lh: 1) { 10 | font-size: $fs; 11 | letter-spacing: $ls; 12 | color: $color; 13 | text-transform: $tt; 14 | line-height: $lh; 15 | font-family: $ff-ss; 16 | font-weight: $fw-n; 17 | } -------------------------------------------------------------------------------- /scss/partials/_about-me.scss: -------------------------------------------------------------------------------- 1 | 2 | .about-me { 3 | @include container; 4 | @include clearfix; 5 | 6 | margin-top: 5em; 7 | margin-bottom: 5em; 8 | } 9 | 10 | .about-img { 11 | max-height: 25em; 12 | border-radius: 50%; 13 | 14 | @media (min-width: 42em) { 15 | float: left; 16 | margin-right: 1em; 17 | } 18 | } 19 | 20 | .about-title { 21 | margin-bottom: .25em; 22 | } 23 | 24 | .about-subtitle { 25 | margin: .5em 0; 26 | } 27 | 28 | @supports (display: grid) { 29 | .about-me { 30 | display: grid; 31 | grid-template-columns: [port-start] minmax(6em, 1fr) [name-start] minmax(6em, 1fr) [img-end] 2fr [port-end]; 32 | grid-column-gap: .5em; 33 | } 34 | 35 | .about-img { 36 | grid-column: port / img; 37 | grid-row: 1 / 2; 38 | 39 | @include mq { 40 | grid-row: 1 / 4; 41 | } 42 | } 43 | 44 | .about-title { 45 | grid-column: name / port; 46 | grid-row: 1 / 2; 47 | align-self: end; 48 | } 49 | 50 | .about-subtitle, 51 | .about-text { 52 | grid-column: port / port; 53 | 54 | @include mq { 55 | grid-column: img-end / port-end; 56 | } 57 | } 58 | 59 | 60 | .about-subtitle { 61 | grid-row: 2 / 3; 62 | } 63 | 64 | .about-text { 65 | grid-row: 3 / 4; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /scss/partials/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'base'; 2 | @import 'nav'; 3 | @import 'welcome'; 4 | @import 'intro'; 5 | @import 'about-me'; 6 | @import 'portfolio'; 7 | @import 'contact'; 8 | @import 'footer'; 9 | 10 | -------------------------------------------------------------------------------- /scss/partials/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | color: $gray; 3 | font-family: $ff-s; 4 | line-height: 1.6; 5 | background: $white; 6 | font-size: .875rem; 7 | overflow-x: hidden; 8 | 9 | @include mq { 10 | font-size: 1.125rem; 11 | } 12 | } 13 | 14 | 15 | img { 16 | max-width: 100%; 17 | } 18 | 19 | h1, h2, p { 20 | margin-top: 0; 21 | margin-bottom: 1em; 22 | } 23 | 24 | h1 { 25 | color: $accent; 26 | line-height: 1; 27 | font-size: 3.125rem; 28 | 29 | @include mq { 30 | font-size: 4.25rem; 31 | } 32 | } 33 | 34 | h2 { 35 | @include sans-serif($fs: 2rem); 36 | 37 | @include mq { 38 | font-size: 3rem; 39 | } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /scss/partials/_contact.scss: -------------------------------------------------------------------------------- 1 | .contact { 2 | @include container; 3 | padding: 5em 0; 4 | 5 | h1 { 6 | text-align: center; 7 | } 8 | } 9 | 10 | form { 11 | display: flex; 12 | flex-direction: column; 13 | 14 | @supports (display: grid) { 15 | @include mq { 16 | display: grid; 17 | 18 | grid-template-columns: 50% 50%; 19 | 20 | grid-column-gap: 1em; 21 | grid-template-areas: 22 | "name email" 23 | "message message" 24 | ". button"; 25 | 26 | .name { 27 | grid-area: name; 28 | } 29 | 30 | .email { 31 | grid-area: email; 32 | } 33 | 34 | .message { 35 | grid-area: message; 36 | textarea { 37 | height: 10em; 38 | } 39 | } 40 | 41 | .button { 42 | grid-area: button; 43 | } 44 | } 45 | } 46 | } 47 | 48 | label { 49 | display: block; 50 | margin-top: 1em; 51 | color: $dark-gray; 52 | } 53 | 54 | input, 55 | textarea { 56 | box-sizing: border-box; 57 | display: block; 58 | padding: .75em; 59 | width: 100%; 60 | min-width: 15em; 61 | background: lighten($light-gray, 7%); 62 | border: 1px solid $light-gray; 63 | font-size: 1.2rem; 64 | } 65 | 66 | textarea { 67 | resize: vertical; 68 | outline: none; 69 | } 70 | 71 | .button { 72 | display: inline-block; 73 | width: auto; 74 | min-width: auto; 75 | margin-top: 1em; 76 | margin-left: auto; 77 | background: $accent; 78 | border: none; 79 | @include sans-serif($fs: 2.5rem, $color: $white); 80 | padding: .5em 1.5em; 81 | } 82 | -------------------------------------------------------------------------------- /scss/partials/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | background: $dark-blue; 3 | padding: 5em 0; 4 | text-align: center; 5 | } 6 | 7 | .social-icons { 8 | @include container($max-width: 15em); 9 | display: flex; 10 | justify-content: space-between; 11 | margin: 1.75em auto 4em; 12 | } 13 | 14 | .social-icon { 15 | width: 25%; 16 | height: 25%; 17 | } 18 | 19 | .copyright { 20 | &::before { 21 | content: ''; 22 | display: block; 23 | height: 1px; 24 | background: rgba($white, .15); 25 | margin: 4em auto; 26 | width: 25%; 27 | } 28 | } -------------------------------------------------------------------------------- /scss/partials/_intro.scss: -------------------------------------------------------------------------------- 1 | .intro { 2 | display: flex; 3 | color: rgba($white, .7); 4 | 5 | h2 { 6 | color: $white; 7 | 8 | &::after { 9 | content: ''; 10 | width: 20%; 11 | height: 1px; 12 | background: rgba($white, .5); 13 | display: block; 14 | margin: 1em auto 0 15 | } 16 | } 17 | 18 | @supports (display: grid) { 19 | display: grid; 20 | grid-template-columns: minmax(4em, 1fr) minmax(auto, 30em) minmax(4em, 1fr); 21 | } 22 | } 23 | 24 | .intro-middle { 25 | background: $dark-blue; 26 | padding: 2.5em 5vw; 27 | text-align: center; 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | } 32 | 33 | .intro-left img, 34 | .intro-right img { 35 | object-fit: cover; 36 | min-height: 100%; 37 | min-width: 100%; 38 | display: block; 39 | } -------------------------------------------------------------------------------- /scss/partials/_nav.scss: -------------------------------------------------------------------------------- 1 | .menu-button { 2 | position: absolute; 3 | top: 3em; 4 | left: 3em; 5 | background: transparent; 6 | border: 0; 7 | transition: transform ease-in-out 250ms; 8 | cursor: pointer; 9 | outline: none; 10 | } 11 | 12 | nav { 13 | position: absolute; 14 | top: 0; 15 | bottom: 0; 16 | left: 0; 17 | right: 20%; 18 | z-index: 10; 19 | 20 | transform: translateX(-100%); 21 | transition: transform ease-out 250ms; 22 | } 23 | 24 | nav { 25 | li, a { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | height: 100%; 30 | width: 100%; 31 | } 32 | } 33 | 34 | nav ul { 35 | margin: 0; 36 | padding: 0; 37 | list-style: none; 38 | display: flex; 39 | flex-direction: column; 40 | height: 100vh; 41 | justify-content: space-around; 42 | align-items: stretch; 43 | background: $accent; 44 | } 45 | 46 | nav li { 47 | text-align: center; 48 | 49 | &:not(:last-of-type) { 50 | border-bottom: 1px solid $dark-blue; 51 | } 52 | } 53 | 54 | nav li:hover { 55 | background: rgba(black, .2); 56 | } 57 | 58 | nav a { 59 | @include sans-serif($fs: 4rem, $color: $dark-blue); 60 | text-decoration: none; 61 | } 62 | 63 | .close-icon { 64 | display: none; 65 | } 66 | 67 | .nav-is-open { 68 | height: 100vh; 69 | overflow-y: hidden; 70 | 71 | nav { 72 | transform: translateX(0); 73 | } 74 | 75 | .container-all { 76 | transform: translateX(80%); 77 | } 78 | 79 | .hamburger { 80 | display: none; 81 | } 82 | 83 | .close-icon { 84 | display: block; 85 | } 86 | 87 | .menu-button { 88 | transform: translateX(-70%); 89 | } 90 | } 91 | 92 | .container-all { 93 | transition: transform ease-out 250ms; 94 | } 95 | 96 | -------------------------------------------------------------------------------- /scss/partials/_portfolio.scss: -------------------------------------------------------------------------------- 1 | .portfolio { 2 | text-align: center; 3 | background: $light-gray; 4 | padding: 5em 0; 5 | } 6 | 7 | .portfolio-items { 8 | display: flex; 9 | flex-wrap: wrap; 10 | @include container($max-width: 75em); 11 | } 12 | 13 | .portfolio-item { 14 | position: relative; 15 | overflow: hidden; 16 | flex: 1 1 20rem; 17 | 18 | .portfolio-image { 19 | display: block; 20 | width: 100%; 21 | } 22 | 23 | figcaption { 24 | position: absolute; 25 | top: 100%; 26 | bottom: 0; 27 | right: 0; 28 | left: 0; 29 | padding: 1em; 30 | background: rgba($accent, .75); 31 | color: $white; 32 | text-align: left; 33 | display: flex; 34 | flex-direction: column; 35 | transition: top ease-in-out 250ms; 36 | } 37 | 38 | &:hover figcaption, 39 | &:focus figcaption { 40 | top: 0; 41 | } 42 | } 43 | 44 | .portfolio-title { 45 | color: $white; 46 | font-size: 2.5rem; 47 | margin-bottom: auto; 48 | } 49 | 50 | .portfolio-desc { 51 | display: none; 52 | } 53 | 54 | .portfolio-link { 55 | color: white; 56 | font-weight: $fw-b; 57 | font-size: 1.1rem; 58 | text-decoration: none; 59 | border-bottom: 3px solid $white; 60 | align-self: flex-start; 61 | 62 | &::after { 63 | content: url(../img/arrow-white.svg); 64 | display: inline-block; 65 | height: .8em; 66 | width: .8em; 67 | margin-left: .5em; 68 | } 69 | } 70 | 71 | @supports (display: grid) { 72 | .portfolio-items { 73 | display: grid; 74 | grid-template-columns: repeat(2, 1fr); 75 | 76 | @include mq { 77 | grid-template-columns: repeat(4, 1fr); 78 | } 79 | } 80 | 81 | .portfolio-item.featured { 82 | grid-column: 1 / span 2; 83 | grid-row: 1 / span 2; 84 | } 85 | 86 | .featured{ 87 | .portfolio-title { 88 | font-size: 5rem; 89 | } 90 | 91 | 92 | .portfolio-desc { 93 | display: block; 94 | } 95 | } 96 | } 97 | 98 | .portfolio-modal { 99 | position: fixed; 100 | z-index: 10; 101 | top: 2em; 102 | bottom: 2em; 103 | left: 2em; 104 | right: 2em; 105 | background: white; 106 | box-shadow: 0 0 0 3em rgba(black, .5); 107 | overflow-y: scroll; 108 | overflow-x: hidden; 109 | 110 | display: none; 111 | 112 | &.is-open { 113 | display: block; 114 | } 115 | } 116 | 117 | .modal-close { 118 | background: white; 119 | position: fixed; 120 | left: 1em; 121 | top: 1em; 122 | border: 0; 123 | width: 2em; 124 | height: 2em; 125 | padding: 4px 0 0; 126 | border-radius: 50%; 127 | cursor: pointer; 128 | box-shadow: 0 0 5px rgba(black, .5); 129 | } 130 | 131 | .portfolio-header { 132 | text-align: left; 133 | padding: 5em 0; 134 | margin-bottom: 2em; 135 | background-size: cover; 136 | background-position: center; 137 | } 138 | 139 | .header-one { 140 | background-image: url(../img/portfolio-01.jpg); 141 | } 142 | 143 | .header-two { 144 | background-image: url(../img/portfolio-02.jpg); 145 | } 146 | 147 | .portfolio-title-box { 148 | background: rgba($accent, .75); 149 | padding: 3em 0 3em 3em; 150 | color: white; 151 | width: 70%; 152 | 153 | .portfolio-title { 154 | font-size: 3.5rem; 155 | display: inline-block; 156 | 157 | &::after { 158 | content: ''; 159 | display: block; 160 | height: 1px; 161 | margin: .5em 0; 162 | background: white; 163 | width: 100%; 164 | } 165 | } 166 | } 167 | 168 | .portfolio-subtitle { 169 | font-size: 1rem; 170 | } 171 | 172 | .portfolio-content { 173 | text-align: left; 174 | width: 85%; 175 | margin: 0 auto; 176 | padding-bottom: 2em; 177 | } 178 | 179 | .portfolio-full-width { 180 | width: 100vw; 181 | max-width: initial; 182 | margin: 2em calc(50% - 50vw); 183 | height: 20vh; 184 | object-fit: cover; 185 | } 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | @include mq { 202 | .portfolio-pull-left { 203 | width: 65%; 204 | float: left; 205 | margin-right: 2em; 206 | } 207 | 208 | .portfolio-pull-right { 209 | width: 65%; 210 | float: right; 211 | margin-left: 2em; 212 | } 213 | } 214 | 215 | @keyframes modalIn { 216 | 0% { opacity: 0; } 217 | 100% { opacity: 1; } 218 | } 219 | 220 | @keyframes modalOut { 221 | 0% { opacity: 1; } 222 | 100% { opacity: 0; } 223 | } -------------------------------------------------------------------------------- /scss/partials/_welcome.scss: -------------------------------------------------------------------------------- 1 | .welcome { 2 | background-image: url(../img/header-bg.png); 3 | background-size: cover; 4 | background-position: center; 5 | height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | position: relative; 10 | 11 | h1 { 12 | font-size: 1.5rem; 13 | font-weight: $fw-n; 14 | color: $dark-blue; 15 | line-height: 2; 16 | text-align: center; 17 | @include mq { 18 | font-size: 3vw; 19 | } 20 | 21 | span { 22 | @include sans-serif($fs: 5.5rem, $color: $accent); 23 | display: block; 24 | 25 | @include mq { 26 | font-size: 10vw; 27 | } 28 | } 29 | 30 | &::before, 31 | &::after { 32 | content: ''; 33 | display: block; 34 | width: 60%; 35 | height: 1px; 36 | background: $dark-blue; 37 | } 38 | 39 | &::before { 40 | margin: 0 auto 2em; 41 | } 42 | 43 | &::after { 44 | margin: 2em auto 0; 45 | } 46 | 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/vendor/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display: block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin: 0; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing: content-box; /* 1 */ 81 | height: 0; /* 1 */ 82 | overflow: visible; /* 2 */ 83 | } 84 | 85 | 86 | 87 | /* Text-level semantics 88 | ========================================================================== */ 89 | 90 | /** 91 | * 1. Remove the gray background on active links in IE 10. 92 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 93 | */ 94 | 95 | a { 96 | background-color: transparent; /* 1 */ 97 | -webkit-text-decoration-skip: objects; /* 2 */ 98 | } 99 | 100 | /** 101 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 102 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 103 | */ 104 | 105 | abbr[title] { 106 | border-bottom: none; /* 1 */ 107 | text-decoration: underline; /* 2 */ 108 | text-decoration: underline dotted; /* 2 */ 109 | } 110 | 111 | /** 112 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: inherit; 118 | } 119 | 120 | /** 121 | * Add the correct font weight in Chrome, Edge, and Safari. 122 | */ 123 | 124 | b, 125 | strong { 126 | font-weight: bolder; 127 | } 128 | 129 | /** 130 | * Add the correct font size in all browsers. 131 | */ 132 | 133 | small { 134 | font-size: 80%; 135 | } 136 | 137 | 138 | /* Embedded content 139 | ========================================================================== */ 140 | 141 | /** 142 | * Add the correct display in IE 9-. 143 | */ 144 | 145 | audio, 146 | video { 147 | display: inline-block; 148 | } 149 | 150 | /** 151 | * Add the correct display in iOS 4-7. 152 | */ 153 | 154 | audio:not([controls]) { 155 | display: none; 156 | height: 0; 157 | } 158 | 159 | /** 160 | * Remove the border on images inside links in IE 10-. 161 | */ 162 | 163 | img { 164 | border-style: none; 165 | } 166 | 167 | /** 168 | * Hide the overflow in IE. 169 | */ 170 | 171 | svg:not(:root) { 172 | overflow: hidden; 173 | } 174 | 175 | /* Forms 176 | ========================================================================== */ 177 | 178 | /** 179 | * 1. Change the font styles in all browsers (opinionated). 180 | * 2. Remove the margin in Firefox and Safari. 181 | */ 182 | 183 | button, 184 | input, 185 | optgroup, 186 | select, 187 | textarea { 188 | font-family: sans-serif; /* 1 */ 189 | font-size: 100%; /* 1 */ 190 | line-height: 1.15; /* 1 */ 191 | margin: 0; /* 2 */ 192 | } 193 | 194 | /** 195 | * Show the overflow in IE. 196 | * 1. Show the overflow in Edge. 197 | */ 198 | 199 | button, 200 | input { /* 1 */ 201 | overflow: visible; 202 | } 203 | 204 | /** 205 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 206 | * 1. Remove the inheritance of text transform in Firefox. 207 | */ 208 | 209 | button, 210 | select { /* 1 */ 211 | text-transform: none; 212 | } 213 | 214 | /** 215 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 216 | * controls in Android 4. 217 | * 2. Correct the inability to style clickable types in iOS and Safari. 218 | */ 219 | 220 | button, 221 | html [type="button"], /* 1 */ 222 | [type="reset"], 223 | [type="submit"] { 224 | -webkit-appearance: button; /* 2 */ 225 | } 226 | 227 | /** 228 | * Remove the inner border and padding in Firefox. 229 | */ 230 | 231 | button::-moz-focus-inner, 232 | [type="button"]::-moz-focus-inner, 233 | [type="reset"]::-moz-focus-inner, 234 | [type="submit"]::-moz-focus-inner { 235 | border-style: none; 236 | padding: 0; 237 | } 238 | 239 | /** 240 | * Restore the focus styles unset by the previous rule. 241 | */ 242 | 243 | button:-moz-focusring, 244 | [type="button"]:-moz-focusring, 245 | [type="reset"]:-moz-focusring, 246 | [type="submit"]:-moz-focusring { 247 | outline: 1px dotted ButtonText; 248 | } 249 | 250 | /** 251 | * Correct the padding in Firefox. 252 | */ 253 | 254 | fieldset { 255 | padding: 0.35em 0.75em 0.625em; 256 | } 257 | 258 | /** 259 | * 1. Correct the text wrapping in Edge and IE. 260 | * 2. Correct the color inheritance from `fieldset` elements in IE. 261 | * 3. Remove the padding so developers are not caught out when they zero out 262 | * `fieldset` elements in all browsers. 263 | */ 264 | 265 | legend { 266 | box-sizing: border-box; /* 1 */ 267 | color: inherit; /* 2 */ 268 | display: table; /* 1 */ 269 | max-width: 100%; /* 1 */ 270 | padding: 0; /* 3 */ 271 | white-space: normal; /* 1 */ 272 | } 273 | 274 | /** 275 | * 1. Add the correct display in IE 9-. 276 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 277 | */ 278 | 279 | progress { 280 | display: inline-block; /* 1 */ 281 | vertical-align: baseline; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the default vertical scrollbar in IE. 286 | */ 287 | 288 | textarea { 289 | overflow: auto; 290 | } 291 | 292 | /** 293 | * 1. Add the correct box sizing in IE 10-. 294 | * 2. Remove the padding in IE 10-. 295 | */ 296 | 297 | [type="checkbox"], 298 | [type="radio"] { 299 | box-sizing: border-box; /* 1 */ 300 | padding: 0; /* 2 */ 301 | } 302 | 303 | /** 304 | * Correct the cursor style of increment and decrement buttons in Chrome. 305 | */ 306 | 307 | [type="number"]::-webkit-inner-spin-button, 308 | [type="number"]::-webkit-outer-spin-button { 309 | height: auto; 310 | } 311 | 312 | /** 313 | * 1. Correct the odd appearance in Chrome and Safari. 314 | * 2. Correct the outline style in Safari. 315 | */ 316 | 317 | [type="search"] { 318 | -webkit-appearance: textfield; /* 1 */ 319 | outline-offset: -2px; /* 2 */ 320 | } 321 | 322 | /** 323 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 324 | */ 325 | 326 | [type="search"]::-webkit-search-cancel-button, 327 | [type="search"]::-webkit-search-decoration { 328 | -webkit-appearance: none; 329 | } 330 | 331 | /** 332 | * 1. Correct the inability to style clickable types in iOS and Safari. 333 | * 2. Change font properties to `inherit` in Safari. 334 | */ 335 | 336 | ::-webkit-file-upload-button { 337 | -webkit-appearance: button; /* 1 */ 338 | font: inherit; /* 2 */ 339 | } 340 | 341 | /* Interactive 342 | ========================================================================== */ 343 | 344 | /* 345 | * Add the correct display in IE 9-. 346 | * 1. Add the correct display in Edge, IE, and Firefox. 347 | */ 348 | 349 | details, /* 1 */ 350 | menu { 351 | display: block; 352 | } 353 | 354 | /* 355 | * Add the correct display in all browsers. 356 | */ 357 | 358 | summary { 359 | display: list-item; 360 | } 361 | 362 | /* Scripting 363 | ========================================================================== */ 364 | 365 | /** 366 | * Add the correct display in IE 9-. 367 | */ 368 | 369 | canvas { 370 | display: inline-block; 371 | } 372 | 373 | /** 374 | * Add the correct display in IE. 375 | */ 376 | 377 | template { 378 | display: none; 379 | } 380 | 381 | /* Hidden 382 | ========================================================================== */ 383 | 384 | /** 385 | * Add the correct display in IE 10-. 386 | */ 387 | 388 | [hidden] { 389 | display: none; 390 | } --------------------------------------------------------------------------------