diff options
| -rw-r--r-- | index.css | 129 | ||||
| -rw-r--r-- | src/lib/components/Main.svelte | 2 |
2 files changed, 1 insertions, 130 deletions
diff --git a/index.css b/index.css deleted file mode 100644 index 72f84cf..0000000 --- a/index.css +++ /dev/null | |||
| @@ -1,129 +0,0 @@ | |||
| 1 | * { box-sizing: border-box; } | ||
| 2 | body { | ||
| 3 | margin: 0; | ||
| 4 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, | ||
| 5 | Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | ||
| 6 | font-size: 1.125rem; /* 18px base */ | ||
| 7 | line-height: 1.8; | ||
| 8 | background: #fcfdfe; | ||
| 9 | color: #000c18; | ||
| 10 | display: flex; | ||
| 11 | flex-direction: column; | ||
| 12 | min-height: 100vh; | ||
| 13 | overflow-x: hidden; | ||
| 14 | } | ||
| 15 | |||
| 16 | header, footer { padding: 2em; } | ||
| 17 | |||
| 18 | main { | ||
| 19 | flex-grow: 1; | ||
| 20 | max-width: 900px; | ||
| 21 | margin: 0 auto; | ||
| 22 | padding: 2em; | ||
| 23 | } | ||
| 24 | |||
| 25 | footer { | ||
| 26 | border-top: 1px solid currentColor; | ||
| 27 | text-align: center; | ||
| 28 | font-size: 1.05rem; | ||
| 29 | } | ||
| 30 | |||
| 31 | h2 { | ||
| 32 | margin: 0 0 0.75em; | ||
| 33 | font-weight: 700; | ||
| 34 | line-height: 1.3; | ||
| 35 | } | ||
| 36 | |||
| 37 | h1 { font-size: 2.5rem; } | ||
| 38 | h2 { font-size: 2rem; } | ||
| 39 | |||
| 40 | header h1 { font-size: 2rem; } | ||
| 41 | section { margin-bottom: 3em; padding: 0 2%; } | ||
| 42 | a { | ||
| 43 | color: #22aa44; | ||
| 44 | font-weight: 700; | ||
| 45 | text-decoration: underline; | ||
| 46 | text-decoration-color: transparent; | ||
| 47 | text-underline-offset: 4px; | ||
| 48 | text-decoration-thickness: 2px; | ||
| 49 | transition: color .3s, text-decoration-color .3s; | ||
| 50 | } | ||
| 51 | a:hover, | ||
| 52 | a:focus { | ||
| 53 | color: #9966b8; | ||
| 54 | text-decoration-color: currentColor; | ||
| 55 | } | ||
| 56 | a:focus-visible { | ||
| 57 | outline: 3px solid #22aa44; | ||
| 58 | outline-offset: 4px; | ||
| 59 | border-radius: 3px; | ||
| 60 | } | ||
| 61 | header { text-align: center; } | ||
| 62 | |||
| 63 | .header-top { | ||
| 64 | display: flex; | ||
| 65 | justify-content: center; | ||
| 66 | align-items: center; | ||
| 67 | gap: 2rem; | ||
| 68 | } | ||
| 69 | |||
| 70 | nav ul { | ||
| 71 | list-style: none; | ||
| 72 | margin: 0; | ||
| 73 | padding: 0; | ||
| 74 | display: flex; | ||
| 75 | gap: 2rem; | ||
| 76 | justify-content: center; | ||
| 77 | flex-wrap: wrap; | ||
| 78 | } | ||
| 79 | nav a { | ||
| 80 | font-weight: 600; | ||
| 81 | font-size: 1.125rem; | ||
| 82 | } | ||
| 83 | .menu-toggle { | ||
| 84 | display: none; | ||
| 85 | background: none; | ||
| 86 | border: 0; | ||
| 87 | font-size: 1.75rem; | ||
| 88 | cursor: pointer; | ||
| 89 | color: inherit; | ||
| 90 | } | ||
| 91 | .sr-only { | ||
| 92 | position: absolute; | ||
| 93 | width: 1px; height: 1px; | ||
| 94 | margin: -1px; padding: 0; | ||
| 95 | overflow: hidden; | ||
| 96 | clip: rect(0 0 0 0); | ||
| 97 | border: 0; | ||
| 98 | } | ||
| 99 | @media (max-width: 768px) { | ||
| 100 | h1 { font-size: 2rem; } | ||
| 101 | h2 { font-size: 1.75rem; } | ||
| 102 | main { padding: 1.5em; } | ||
| 103 | |||
| 104 | .header-top { | ||
| 105 | justify-content: space-between; | ||
| 106 | text-align: left; | ||
| 107 | } | ||
| 108 | nav ul { | ||
| 109 | flex-direction: column; | ||
| 110 | align-items: center; | ||
| 111 | gap: 1.25rem; | ||
| 112 | display: none; | ||
| 113 | } | ||
| 114 | nav ul.open { display: flex; } | ||
| 115 | .menu-toggle { display: block; } | ||
| 116 | header { | ||
| 117 | position: sticky; | ||
| 118 | top: 0; | ||
| 119 | z-index: 1000; | ||
| 120 | background: inherit; | ||
| 121 | } | ||
| 122 | } | ||
| 123 | @media (prefers-color-scheme: dark) { | ||
| 124 | body { background: #000c18; color: #b7b8b9; } | ||
| 125 | footer { border-color: #fcfdfe; color: #fcfdfe; } | ||
| 126 | a { color: #22aa44; } | ||
| 127 | a:hover, a:focus { color: #9966b8; } | ||
| 128 | } | ||
| 129 | .highlight { background: #9966b8; color: #fcfdfe; } | ||
diff --git a/src/lib/components/Main.svelte b/src/lib/components/Main.svelte index 2456a03..d5c6269 100644 --- a/src/lib/components/Main.svelte +++ b/src/lib/components/Main.svelte | |||
| @@ -15,7 +15,7 @@ | |||
| 15 | <h2 id="projects-heading">👨💻 Projects</h2> | 15 | <h2 id="projects-heading">👨💻 Projects</h2> |
| 16 | <p> | 16 | <p> |
| 17 | Side projects are hosted on my <a | 17 | Side projects are hosted on my <a |
| 18 | href="https://www.git.philw.dev" | 18 | href="https://git.philw.dev" |
| 19 | target="_blank" | 19 | target="_blank" |
| 20 | rel="noopener noreferrer" | 20 | rel="noopener noreferrer" |
| 21 | aria-label="visit filip wandzio's git repository" | 21 | aria-label="visit filip wandzio's git repository" |
