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