main.css (14686B)
1 html, body { margin: 0; 2 padding: 0; } 3 body { font-family: monospace; 4 font-size: 10pt; 5 color: #ddd; 6 background-color: #111; 7 line-height: 1.4em; 8 display: flex; 9 flex-direction: column; 10 min-height: 100vh; } 11 12 a { color: yellow; 13 text-decoration: none; } 14 a:hover { text-decoration: underline; } 15 16 h1, h2, h3 { font-weight: 700; 17 color: #fff; } 18 19 body > header { width: 50rem; 20 max-width: 96%; 21 margin: 0 auto; 22 padding: 1rem 0; 23 color: #fff; 24 border-bottom: 1px solid #333; } 25 body > header h1 { font-size: 1.5em; 26 margin: 0 0 0.5rem 0; } 27 body > header p { opacity: 0.8; 28 color: #ccc; 29 margin: 0 0 1rem 0; } 30 31 #main-nav { display: flex; 32 justify-content: center; 33 flex-wrap: wrap; 34 gap: 0.75em; 35 line-height: 1.2; } 36 #main-nav a { color: #ccc; 37 text-decoration: none; 38 font-size: 1.2em; 39 padding: 0.1em 0.2em; 40 transition: color 0.2s ease; 41 position: relative; 42 display: inline-flex; 43 align-items: baseline; } 44 #main-nav a.active-nav-item, 45 #main-nav a.active-nav-item::before, 46 #main-nav a.active-nav-item::after { color: #fff; } 47 #main-nav a::before, 48 #main-nav a::after { color: #666; 49 transition: color 0.2s ease; 50 font-weight: normal; } 51 #main-nav a::before { content: "["; 52 margin-right: 0.4em; } 53 #main-nav a::after { content: "]"; 54 margin-left: 0.4em } 55 #main-nav a:hover, 56 #main-nav a:focus { color: yellow; } 57 #main-nav a:hover::before, 58 #main-nav a:hover::after, 59 #main-nav a:focus::before, 60 #main-nav a:focus::after { color: yellow; } 61 62 .content-wrapper { display: flex; 63 width: 50rem; 64 max-width: 96%; 65 margin: 2rem auto; 66 gap: 2rem; 67 flex: 1; } 68 69 .profile-info { flex: 0 0 180px; 70 text-align: left; } 71 #profile-pic { width: 120px; 72 height: 120px; 73 border-radius: 50%; 74 border: 3px solid #444; 75 margin-bottom: 1rem; 76 display: block; } 77 .profile-info h3 { margin-top: 0; 78 margin-bottom: 0.5rem; 79 font-size: 1.2em; } 80 .profile-info h4 { font-size: 1em; 81 color: #bbb; 82 margin-top: 1.5rem; 83 margin-bottom: 0.75rem; 84 font-weight: normal; 85 border-bottom: 1px solid #333; 86 padding-bottom: 0.25rem; } 87 .profile-info p { font-size: 0.9em; 88 color: #aaa; 89 margin-bottom: 0.75rem; 90 line-height: 1.3; } 91 .profile-info p em { color: #ccc; } 92 .profile-info a { } 93 .profile-info details.contacts summary { font-size: 1em; 94 color: #bbb; 95 font-weight: bold; 96 padding: 0.6em 0.2em 0.6em 0; 97 cursor: pointer; 98 list-style: none; 99 transition: color 0.2s ease, border-color 0.2s ease; 100 border-bottom: 1px solid #333; 101 display: block; } 102 103 .profile-info details.contacts summary::-webkit-details-marker, 104 .profile-info details.contacts summary::marker { display: none } 105 .profile-info details.contacts summary:focus { outline: none; } 106 .profile-info details.contacts summary:focus-visible { box-shadow: 0 0 0 2px #111, 0 0 0 4px yellow; 107 border-bottom-color: transparent; } 108 109 .profile-info details.contacts summary::before { content: "[+] "; 110 color: #888; 111 font-weight: normal; 112 display: inline; 113 margin-left: 0.2em; 114 transition: color 0.2s ease; } 115 .profile-info details.contacts summary:hover, 116 .profile-info details.contacts summary:hover::before { color: #fff; } 117 .profile-info details.contacts[open] > summary { color: yellow; 118 border-bottom-color: yellow; } 119 .profile-info details.contacts[open] > summary:focus-visible { border-bottom-color: transparent; } 120 .profile-info details.contacts[open] > summary::before { content: "[-] "; 121 color: yellow; } 122 .profile-info details.contacts[open] .contact-details { margin: 0; 123 padding: 0.75em 0.5em 0.5em calc(0.2em + 3ch + 0.2em); 124 font-size: 0.9em; 125 background-color: #161616; 126 border-bottom-left-radius: 3px; 127 border-bottom-right-radius: 3px; } 128 129 .contact-details { margin: 0; 130 padding: 0; 131 font-size: 0.9em; } 132 .contact-details dt { color: #aaa; 133 font-weight: bold; 134 margin-bottom: 0.1em; 135 margin-top: 0.5em; } 136 .contact-details dt:first-of-type { margin-top: 0; } 137 .contact-details dd { margin-left: 0; 138 margin-bottom: 0.5em; 139 color: #ddd; } 140 .contact-details dd a { color: yellow; } 141 .contact-details dd a:hover { text-decoration: underline; } 142 143 .main-content { flex: 1; 144 min-width: 0; } 145 146 .main-content section { margin-bottom: 2.5rem; 147 padding: 1.5rem; 148 background-color: #161616; 149 border: 1px solid #282828; 150 border-radius: 4px; } 151 .main-content section:last-child { margin-bottom: 0; } 152 .main-content h2 { font-size: 1.3em; 153 margin-top: 0; 154 margin-bottom: 1rem; 155 padding-bottom: 0.5rem; 156 border-bottom: 1px solid #444; } 157 158 .prompt { color: #8AE234; 159 margin-right: 0.5em; 160 user-select: none; } 161 .main-content p, .main-content ul { margin-bottom: 1em; } 162 .main-content ul { list-style-type: none; 163 padding-left: 0; } 164 .main-content ul li { padding-left: 1.75em; 165 position: relative; 166 margin-bottom: 0.5em; } 167 .main-content ul li::before { content: 'ยป'; 168 color: yellow; 169 position: absolute; 170 left: 0.5em; 171 font-weight: bold; } 172 173 .project-item { margin-bottom: 1.5rem; 174 padding-bottom: 1.5rem; 175 border-bottom: 1px dashed #333; } 176 .project-item:last-child { border-bottom: none; 177 margin-bottom: 0; 178 padding-bottom: 0; } 179 .project-item h3 { font-size: 1.1em; 180 color: #eee; 181 margin-top: 0; 182 margin-bottom: 0.5rem; } 183 .project-item p { margin-bottom: 0.5rem; 184 color: #ccc; } 185 .project-item a { font-weight: bold; } 186 187 188 body > footer { width: 50rem; 189 max-width: 96%; 190 margin: 0 auto; 191 padding: 1.5rem 0; 192 color: #aaa; 193 text-align: center; 194 border-top: 1px solid #333; 195 margin-top: auto; } 196 body > footer img { margin: 0 5px; 197 vertical-align: middle; 198 border-radius: 4px; } 199 body > footer p { margin-top: 0.75rem; 200 font-size: 0.9em; } 201 202 @media (max-width: 768px) { 203 body > header, 204 .content-wrapper, 205 body > footer { width: 90%; } 206 207 .content-wrapper { flex-direction: column; 208 align-items: center; 209 margin-top: 1.5rem; 210 margin-bottom: 1.5rem; 211 gap: 1.5rem; } 212 213 .profile-info { flex: 0 0 auto; 214 width: 100%; 215 max-width: 350px; 216 text-align: center; 217 margin-bottom: 1rem; } 218 #profile-pic { margin-left: auto; 219 margin-right: auto; } 220 .profile-info p { text-align: center; } 221 .profile-info a { display: inline-block; 222 padding: 0.2em 0; } 223 224 225 .main-content section { padding: 1rem; } 226 .main-content h2 { font-size: 1.2em; } 227 228 body > header h1 { font-size: 1.3em; } 229 } 230 231 @media (max-width: 480px) { 232 body { font-size: 9.5pt; } 233 234 body > header, 235 .content-wrapper, 236 body > footer { width: 95%; } 237 238 .main-content section { padding: 0.8rem; } 239 240 #profile-pic { width: 100px; 241 height: 100px; } 242 .main-content ul li { padding-left: 1.5em; } 243 .main-content ul li::before { left: 0.2em; } 244 } 245 246