Add robust themes, drag-drop layout, and manual screenshot controls
This commit is contained in:
Nate Emmert
+301
-7
@@ -9,11 +9,12 @@
|
||||
|
||||
.hero {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
border-radius: var(--radius-panel);
|
||||
padding: 2rem;
|
||||
background:
|
||||
radial-gradient(circle at 90% 0%, var(--hero-glow) 0%, rgba(247, 216, 166, 0) 46%),
|
||||
linear-gradient(135deg, var(--surface-soft) 0%, var(--bg-bottom) 100%);
|
||||
box-shadow: var(--shadow-elevated);
|
||||
animation: reveal 480ms ease-out both;
|
||||
}
|
||||
|
||||
@@ -86,9 +87,10 @@ h1 {
|
||||
|
||||
.stats article {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
border-radius: var(--radius-tile);
|
||||
padding: 0.9rem 1rem;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.stats p {
|
||||
@@ -105,6 +107,29 @@ h1 {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.home-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.home-main,
|
||||
.home-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.home-block {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-sidebar .grid,
|
||||
.home-sidebar .stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -113,12 +138,29 @@ h1 {
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--radius-card);
|
||||
padding: 1rem;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
transition: box-shadow 220ms ease, transform 220ms ease;
|
||||
animation: reveal 500ms ease-out both;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-elevated);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.project-thumbnail {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-note);
|
||||
background: var(--surface-soft);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0.65rem 0 0.4rem;
|
||||
font-family: var(--display);
|
||||
@@ -209,7 +251,7 @@ h1 {
|
||||
.stack li {
|
||||
padding: 0.28rem 0.5rem;
|
||||
background: var(--chip-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-chip);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -242,7 +284,7 @@ h1 {
|
||||
|
||||
.notes {
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-note);
|
||||
padding: 1rem;
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
@@ -257,6 +299,40 @@ h1 {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.downloads-grid {
|
||||
margin-top: 0.9rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-note);
|
||||
padding: 0.9rem;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.download-card h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display);
|
||||
}
|
||||
|
||||
.download-card a {
|
||||
width: fit-content;
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.download-card a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.readme-panel a {
|
||||
margin-top: 0.7rem;
|
||||
display: inline-block;
|
||||
@@ -323,9 +399,10 @@ h1 {
|
||||
|
||||
.detail-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
border-radius: var(--radius-tile);
|
||||
background: var(--surface);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.detail-card h3 {
|
||||
@@ -343,6 +420,52 @@ h1 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.admin-notice {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-tile);
|
||||
padding: 0.9rem 1rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.admin-notice p {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-notice.success {
|
||||
border-color: #9fd0ae;
|
||||
background: #edf8f0;
|
||||
color: #145a32;
|
||||
}
|
||||
|
||||
.admin-notice.error {
|
||||
border-color: #d9a69a;
|
||||
background: #fff1ec;
|
||||
color: #8c2c13;
|
||||
}
|
||||
|
||||
.admin-tabs {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-tab {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 0.55rem 0.95rem;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-tab.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.admin-panel {
|
||||
background: var(--surface);
|
||||
}
|
||||
@@ -363,7 +486,7 @@ h1 {
|
||||
.admin-input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-input);
|
||||
padding: 0.55rem 0.7rem;
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
@@ -375,6 +498,87 @@ h1 {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.admin-checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.layout-manager {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.layout-manager h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display);
|
||||
}
|
||||
|
||||
.layout-manager p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.85rem;
|
||||
background: var(--surface-soft);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.layout-row:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.layout-row strong {
|
||||
display: block;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.layout-row p {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.layout-select {
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.layout-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.drag-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.65rem;
|
||||
background: var(--surface);
|
||||
color: var(--ink-muted);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scan-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -430,6 +634,84 @@ h1 {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.downloads-editor {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.downloads-editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.downloads-editor-header h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display);
|
||||
}
|
||||
|
||||
.download-editor-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.9rem;
|
||||
background: var(--surface-soft);
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-secondary-button {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 0.8rem;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.admin-secondary-button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.thumbnail-actions {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumbnail-file-input {
|
||||
width: min(100%, 320px);
|
||||
}
|
||||
|
||||
.admin-thumbnail-preview {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-note);
|
||||
padding: 0.6rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.admin-thumbnail-preview img {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-note);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.thumbnail-mode-note {
|
||||
margin-top: 0.45rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
background: #f0ece6;
|
||||
@@ -471,6 +753,18 @@ code {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.layout-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.stats article:last-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user