app.css (1479B)
1 /******** home-page component ********/ 2 .home { 3 min-height: 100vh; 4 display: flex; 5 flex-direction: column; 6 } 7 8 /* resume session banner */ 9 .home #resumeBanner { 10 text-align: center; 11 padding: 10px; 12 background-color: #cccccc; 13 } 14 .home #resumeBanner a { 15 color: var(--foreground-color); 16 text-decoration: none; 17 } 18 .home #resumeBanner button { 19 position: absolute; 20 right: 10px; 21 } 22 .home #resumeBanner button img { 23 height: 24px; 24 width: 24px; 25 } 26 .dark .home #resumeBanner { 27 background-color: #333333; 28 } 29 .dark .home #resumeBanner button { 30 filter: invert(90%); 31 } 32 33 /* main content */ 34 .home main { 35 flex-grow: 1; 36 margin: 10px; 37 display: flex; 38 flex-direction: column; 39 justify-content: center; 40 align-items: center; 41 } 42 .home h1 { 43 font-size: 40px; 44 max-width: 500px; 45 } 46 .home main div { 47 margin: 10px 0px; 48 width: 510px; 49 display: flex; 50 flex-direction: row; 51 } 52 .home main div button { 53 flex-grow: 1; 54 height: 50px; 55 line-height: 50px; 56 margin: 0px 5px; 57 } 58 59 /* mobile styles */ 60 @media only screen and (max-width: 550px) { 61 .home main { 62 justify-content: flex-start; 63 } 64 .home h1 { 65 width: 100%; 66 font-size: 30px; 67 text-align: center; 68 } 69 .home main div { 70 flex-direction: column; 71 align-items: stretch; 72 width: 100%; 73 } 74 .home main div button { 75 height: 60px; 76 line-height: 60px; 77 margin: 10px 0px; 78 } 79 }