stylesheet.css (1350B)
1 :root { 2 --primary-fg-color: #FAA64C; 3 --secondary-fg-color: #d8842a; 4 --primary-bg-color: #f7f3d5; 5 } 6 body { 7 color: var(--primary-fg-color); 8 background-color: var(--primary-bg-color); 9 } header { 10 padding-left: 30px; 11 padding-right: 30px; 12 } .nav { 13 margin: auto; 14 width: 80vw; 15 display: flex; 16 flex-direction: row; 17 } .nav-item { 18 padding: 10px; 19 width: 25vw; 20 text-align: center; 21 font-size: max(16px,2vw); 22 } .nav-item-active { 23 text-decoration: underline; 24 } .tabcontent { 25 display: grid; 26 justify-items: center; 27 padding: 20px; 28 animation: fadeEffect 1s; 29 } .profile-image { 30 object-fit: cover; 31 } .about { 32 color: var(--secondary-fg-color); 33 padding: 10px; 34 width: max(80vw, 100px); 35 } .art-grid { 36 text-align: center; 37 } .art-grid .view-small { 38 width: 400px; 39 height: 400px; 40 max-width: 75vw; 41 max-height: 75vw; 42 max-width: 75vw; 43 padding: 10px; 44 object-fit: cover; 45 46 transition: transform .2s; 47 transform: scale(1.0); 48 } .view-small:hover { 49 transform: scale(1.05); 50 } .view-full { 51 width: 100%; 52 object-fit: fill; 53 } .art-image, .nav-item { 54 cursor: pointer; 55 } .hidden { 56 display: none; 57 } footer { 58 padding: 5px; 59 background-color: var(--primary-bg-color); 60 border-top: 1px solid var(--primary-fg-color); 61 width: 100vw; 62 position: fixed; 63 overflow: hidden; 64 bottom: 0px; 65 left: 0px; 66 } 67 68 @keyframes fadeEffect { 69 from {opacity: 0;} 70 to {opacity: 1;} 71 }