diff --git a/index.html b/index.html index 93d130f..d4b3a77 100755 --- a/index.html +++ b/index.html @@ -1,77 +1,42 @@ + + + + + Peter the Baker - - - Peter the Baker - - - - - - - - + + + + + + - - - - - -
- - -
-

I'm Peter Baker

-

Photographer and Web Designer.

- Petrus Pistor +
+ Portrait of Peter Baker +

Peter Baker

-
- -
-

My Name

-
-

Some text about me. Some text about me. I am lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur - adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -

+ + +
+

Social

Links coming soon.

+

Projects

Stuff I’m building.

+

Contact

Email or DM.

+
+ + + + + + diff --git a/resources/css/index.css b/resources/css/index.css index 72cbe31..3921665 100755 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -1,83 +1,94 @@ -@import 'https://fonts.googleapis.com/css?family=Iceland|Cairo&display=swap' -/* W3.CSS 5.02 - Cleaned Version */ - -/* Base Reset */ -html, body { font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.5; margin: 0; overflow-x: hidden; box-sizing: border-box } -*, *:before, *:after { box-sizing: inherit } - -h1,h2,h3,h4,h5,h6 { - font-family: "Segoe UI", Arial, sans-serif; - font-weight: 400; - margin: 10px 0; +/* Basic reset & layout */ +* { box-sizing: border-box; } +html, body { margin: 0; padding: 0; } +body { + font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; + color: #efefef; + background: #2c2c2c; + line-height: 1.5; } -h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } -h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } -a { background: transparent; color: inherit; text-decoration: none } -img { max-width: 100%; height: auto; vertical-align: middle; border: 0 } - -/* Tables */ -.w3-table, .w3-table-all { border-collapse: collapse; width: 100% } -.w3-table-all { border: 1px solid #ccc } -.w3-table td, .w3-table th, -.w3-table-all td, .w3-table-all th { - padding: 8px; text-align: left; vertical-align: top +/* Accessibility: visible focus */ +:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; } +.skip-link { + position: absolute; left: -9999px; top: -9999px; } -.w3-bordered tr, .w3-table-all tr { border-bottom: 1px solid #ddd } -.w3-striped tbody tr:nth-child(even), -.w3-table-all tr:nth-child(even) { background: #f1f1f1 } +.skip-link:focus { left: 1rem; top: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius:.5rem; } -/* Buttons */ -.w3-button, .w3-btn { - display: inline-block; padding: 8px 16px; - border: none; cursor: pointer; background: inherit; color: inherit; - text-align: center; white-space: nowrap; - user-select: none; -webkit-user-select: none; +/* Header with centered image at the very top */ +.site-header { + display: grid; + place-items: center; + padding: 3rem 1rem 2rem; + gap: .5rem; + background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); } -.w3-button:hover { background: #ccc; color: #000 } - -/* Lists */ -.w3-ul { list-style: none; margin: 0; padding: 0 } -.w3-ul li { padding: 8px 16px; border-bottom: 1px solid #ddd } -.w3-ul li:last-child { border-bottom: none } - -/* Containers */ -.w3-container, .w3-panel { padding: 0.01em 16px } -.w3-panel { margin: 16px 0 } - -/* Grid */ -.w3-row:after, .w3-row-padding:after, .w3-clear:after { - content: ""; display: table; clear: both +.site-header .avatar { + display: block; + border-radius: 50%; + border: 4px solid rgba(255,255,255,.15); + max-width: 40vw; /* keeps it reasonable on mobile */ + height: auto; +} +.site-title { + margin: .25rem 0 0; + font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem); + letter-spacing: .5px; +} +.site-tagline { + margin: 0; + color: #cfcfcf; + font-size: clamp(.95rem, .5vw + .8rem, 1.1rem); } -.w3-col { float: left; width: 100% } -@media (min-width:601px) { .w3-col.m6 { width: 50% } } -@media (min-width:993px) { .w3-col.l4 { width: 33.33% } } -/* Cards */ -.w3-card { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12) } -.w3-card-4 { box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 4px 20px rgba(0,0,0,0.19) } +/* Horizontal nav under header */ +.site-nav { + position: sticky; /* optional: keeps it visible on scroll */ + top: 0; + backdrop-filter: blur(6px); + background: rgba(20,20,20,.7); + border-top: 1px solid rgba(255,255,255,.07); + border-bottom: 1px solid rgba(255,255,255,.07); +} +.site-nav ul { + margin: 0 auto; + padding: .5rem 1rem; + list-style: none; + display: flex; + gap: 1rem; + justify-content: center; + max-width: 900px; +} +.site-nav a { + display: inline-block; + padding: .5rem .75rem; + border-radius: .5rem; + color: #efefef; + text-decoration: none; +} +.site-nav a:hover, +.site-nav a:focus-visible { + background: rgba(255,255,255,.08); +} -/* Utilities */ -.w3-hide { display: none !important } -.w3-show { display: block !important } -.w3-center { text-align: center !important } -.w3-left { float: left !important } -.w3-right { float: right !important } -.w3-round { border-radius: 4px } -.w3-circle { border-radius: 50% } +/* Content */ +.content { + max-width: 900px; + margin: 2rem auto; + padding: 0 1rem 3rem; +} +.content h2 { margin-top: 2rem; font-size: 1.35rem; } -/* Colors (sample subset) */ -.w3-red { background: #f44336 !important; color: #fff !important } -.w3-green { background: #4CAF50 !important; color: #fff !important } -.w3-blue { background: #2196F3 !important; color: #fff !important } -.w3-yellow { background: #ffeb3b !important; color: #000 !important } -.w3-black { background: #000 !important; color: #fff !important } -.w3-white { background: #fff !important; color: #000 !important } -.w3-grey, .w3-gray { background: #9e9e9e !important; color: #000 !important } +/* Footer */ +.site-footer { + border-top: 1px solid rgba(255,255,255,.07); + color: #bdbdbd; + padding: 1.5rem 1rem 3rem; + text-align: center; +} -/* Text Colors */ -.w3-text-red { color: #f44336 !important } -.w3-text-green { color: #4CAF50 !important } -.w3-text-blue { color: #2196F3 !important } -.w3-text-black { color: #000 !important } -.w3-text-white { color: #fff !important } +/* Responsive tweaks */ +@media (min-width: 768px) { + .site-header { padding: 4rem 1rem 2.25rem; } + .site-nav ul { gap: 1.25rem; } +}