Update styles.css
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42
GitHub
parent
236a67c00f
commit
0f5247417d
1 changed files with 111 additions and 106 deletions
|
|
@ -2,141 +2,146 @@
|
|||
--bg: #0b0b0b;
|
||||
--fg: #e6e3d7;
|
||||
--accent: #e0b84b;
|
||||
--topbar-h:52px;
|
||||
--topbar-h: 56px;
|
||||
--transition: .3s ease;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
height:100%;
|
||||
background:var(--bg);
|
||||
color:var(--fg);
|
||||
font-family:Inter,ui-sans-serif,system-ui;
|
||||
margin: 0; padding: 0; height: 100%;
|
||||
background: var(--bg); color: var(--fg);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position:fixed;
|
||||
top:0;left:0;right:0;
|
||||
height:var(--topbar-h);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background:#111;
|
||||
color:var(--accent);
|
||||
z-index:1000;
|
||||
border-bottom:1px solid #222;
|
||||
padding:0 1rem;
|
||||
position: fixed; top: 0; left: 0; right: 0;
|
||||
height: var(--topbar-h); display: flex; align-items: center;
|
||||
background: #111; border-bottom: 1px solid #222;
|
||||
padding: 0 1rem; z-index: 1000; gap: 1.5rem;
|
||||
}
|
||||
|
||||
#menuBtn {
|
||||
font-size:1.4rem;
|
||||
background:none;
|
||||
border:0;
|
||||
color:var(--accent);
|
||||
cursor:pointer;
|
||||
margin-right:1rem;
|
||||
background: none; border: 0; color: var(--accent);
|
||||
font-size: 1.4rem; cursor: pointer;
|
||||
}
|
||||
|
||||
.primary-nav {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
align-items:center;
|
||||
gap:24px;
|
||||
display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
|
||||
}
|
||||
|
||||
.primary-nav a {
|
||||
color:var(--accent);
|
||||
text-decoration:none;
|
||||
font-weight:600;
|
||||
transition: text-shadow var(--transition);
|
||||
color: var(--accent); text-decoration: none;
|
||||
font-weight: 600; font-size: 1.1rem;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.primary-nav a:hover{ text-shadow:0 0 5px var(--accent); }
|
||||
.primary-nav a:hover {
|
||||
text-shadow: 0 0 8px var(--accent);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position:fixed;
|
||||
top:var(--topbar-h);
|
||||
left:0;
|
||||
width:280px;
|
||||
bottom:0;
|
||||
overflow:auto;
|
||||
background:#111;
|
||||
border-right:1px solid #222;
|
||||
transform:translateX(-100%);
|
||||
transition:transform var(--transition);
|
||||
z-index:900;
|
||||
position: fixed; top: var(--topbar-h); left: 0;
|
||||
width: 300px; bottom: 0; overflow: auto;
|
||||
background: #111; border-right: 1px solid #222;
|
||||
transform: translateX(-100%); transition: transform var(--transition);
|
||||
z-index: 900; padding: 1rem;
|
||||
}
|
||||
|
||||
body.sidebar-open #sidebar { transform: translateX(0); }
|
||||
|
||||
.sidebar-controls{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:8px;
|
||||
padding:1rem;
|
||||
.sidebar-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.sidebar-controls label {
|
||||
font-size:0.8rem;
|
||||
color:var(--accent);
|
||||
margin-bottom:-4px;
|
||||
.sidebar-header h3 {
|
||||
margin: 0; font-size: 1.1rem; color: var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-controls select[multiple] {
|
||||
height:100px; /* Elegant fixed height for multi */
|
||||
.toggle-btn {
|
||||
background: none; border: 1px solid #333; color: var(--fg);
|
||||
padding: .25rem .5rem; border-radius: var(--radius);
|
||||
font-size: .8rem; cursor: pointer;
|
||||
}
|
||||
|
||||
#postListSection { margin-bottom: 1rem; }
|
||||
|
||||
#postList {
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0 1rem 2rem;
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
}
|
||||
|
||||
#postList li {
|
||||
margin:.5rem 0;
|
||||
margin: .75rem 0; padding: .5rem 0;
|
||||
border-bottom: 1px dashed #222;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
#postList a {
|
||||
color:var(--fg);
|
||||
text-decoration:none;
|
||||
color: var(--fg); text-decoration: none; font-weight: 500;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#postList a:hover { color: var(--accent); }
|
||||
|
||||
#postList small {
|
||||
display: block; font-size: .8rem; color: #888; margin-top: .25rem;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
background: #0a0a0a; border: 1px solid #222;
|
||||
border-radius: var(--radius); padding: .75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.filter-panel summary {
|
||||
cursor: pointer; font-weight: 600; color: var(--accent);
|
||||
margin-bottom: .5rem; user-select: none;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex; flex-direction: column; gap: .75rem;
|
||||
}
|
||||
|
||||
.filter-controls label {
|
||||
font-size: .85rem; color: var(--accent); margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.filter-controls select, .filter-controls input {
|
||||
background: #111; color: var(--fg); border: 1px solid #333;
|
||||
padding: .5rem; border-radius: var(--radius); font-size: .9rem;
|
||||
}
|
||||
|
||||
.filter-controls select[multiple] {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top:var(--topbar-h);
|
||||
margin-left:0;
|
||||
margin-top: var(--topbar-h); margin-left: 0;
|
||||
transition: margin-left var(--transition);
|
||||
min-height: calc(100vh - var(--topbar-h));
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#sidebar { transform: translateX(0); }
|
||||
.content{ margin-left:280px; }
|
||||
.content { margin-left: 300px; }
|
||||
}
|
||||
|
||||
.viewer > * {
|
||||
max-width:720px;
|
||||
margin:auto;
|
||||
padding:2rem 1rem;
|
||||
opacity:1;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.viewer.fade-in > * {
|
||||
opacity:0;
|
||||
animation: fadeIn var(--transition) forwards;
|
||||
max-width: 720px; margin: auto; padding: 2rem 1rem;
|
||||
animation: fadeIn .4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to { opacity:1; }
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* iframe resets */
|
||||
.viewer iframe {
|
||||
width:100%;
|
||||
border:0;
|
||||
margin:0;
|
||||
min-height:calc(100vh - var(--topbar-h) - 40px);
|
||||
border-radius:12px;
|
||||
background: #fff;
|
||||
width: 100%; height: calc(100vh - var(--topbar-h) - 80px);
|
||||
border: 0; border-radius: var(--radius); background: transparent;
|
||||
display: block;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue