Update to pico css 2, update theme colours

This commit is contained in:
Michael Pivato
2024-03-03 19:50:33 +10:30
parent fda8ae3d8e
commit 64fffe58d4
5 changed files with 42 additions and 25 deletions

3
.gitignore vendored
View File

@@ -1,2 +1,3 @@
node_modules node_modules
.DS_Store .DS_Store
.vscode

View File

@@ -12,7 +12,16 @@
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" /> <meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#13171f"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="#2a3140"
/>
</head> </head>
<body> <body>
<main class="container"> <main class="container">

11
package-lock.json generated
View File

@@ -9,13 +9,16 @@
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@picocss/pico": "^1.5.10" "@picocss/pico": "^2.0.0"
} }
}, },
"node_modules/@picocss/pico": { "node_modules/@picocss/pico": {
"version": "1.5.10", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.10.tgz", "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-2.0.4.tgz",
"integrity": "sha512-+LafMsrwPxXQMk6sI///TmSInCwwZmq+K7SikyL3N/4GhhwzyPC+TQLUEqmrLyjluR+uIpFFcqjty30Rtr6GxQ==" "integrity": "sha512-KGx1hNnG1eeM9/lZ2VvAZNDLytCZtdR3i55pMgAt2+EVgx0rMFOnHLp+TKUqpKBWaheQVEyjbq+1ZGNNcBEATA==",
"engines": {
"node": ">=18.19.0"
}
} }
} }
} }

View File

@@ -10,6 +10,6 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@picocss/pico": "^1.5.10" "@picocss/pico": "^2.0.0"
} }
} }

View File

@@ -1,24 +1,28 @@
.closed-on-mobile { .closed-on-mobile {
display: none; display: none;
}
h1 {
padding-top: 20px;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
main { main {
--block-spacing-horizontal: calc(var(--spacing) * 1.75); --block-spacing-horizontal: calc(var(--spacing) * 1.75);
grid-column-gap: calc(var(--block-spacing-horizontal) * 3); grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
display: grid; display: grid;
grid-template-columns: 200px auto; grid-template-columns: 200px auto;
} }
.closed-on-mobile { .closed-on-mobile {
display: block; display: block;
} }
main > aside nav { main > aside nav {
position: fixed; position: fixed;
width: 200px; width: 200px;
max-height: calc(100vh - 5.5rem); max-height: calc(100vh - 5.5rem);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
} }