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