first commit
This commit is contained in:
Bryan Van Deusen
commit
3f2cec5cb9
27 changed files with 1159 additions and 0 deletions
231
_sass/main.scss
Normal file
231
_sass/main.scss
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
/* ===============================
|
||||
0) Design Tokens (CSS vars)
|
||||
=============================== */
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: rgb(199, 0, 0);
|
||||
--color-secondary: rgb(145, 145, 145);
|
||||
--color-accent: rgb(201, 107, 0);
|
||||
--color-background: rgb(153, 153, 153);
|
||||
|
||||
/* Commonly reused values from your styles */
|
||||
--color-text: rgb(190, 190, 190);
|
||||
--panel-bg: rgba(0, 0, 0, 0.5);
|
||||
--panel-hover-bg: rgb(100, 100, 100);
|
||||
|
||||
/* Layout */
|
||||
--width-max: 1400px;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
1) Base / Global
|
||||
=============================== */
|
||||
body {
|
||||
background-image: url('/assets/images/fabled_background.jpg');
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2 { margin: 0; }
|
||||
|
||||
main h1 {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
2) Shell / Main View
|
||||
=============================== */
|
||||
.main-view {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
width: 90%;
|
||||
max-width: var(--width-max);
|
||||
height: 93vh;
|
||||
background-color: rgba(255, 255, 255, 0.452);
|
||||
padding: 1em;
|
||||
border-radius: 0 0 1em 1em;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
3) Navigation
|
||||
=============================== */
|
||||
.nav-div {
|
||||
width: 100%;
|
||||
background-color: rgba(17, 0, 0, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 90vw;
|
||||
max-width: var(--width-max);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
padding: 0.7em 1em;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover { background-color: rgba(250, 250, 250, 0.3); }
|
||||
}
|
||||
}
|
||||
|
||||
.nav-current { color: var(--color-primary); }
|
||||
|
||||
/* ===============================
|
||||
4) Sidebar
|
||||
=============================== */
|
||||
.sidebar {
|
||||
width: 22vw;
|
||||
max-width: 260px;
|
||||
flex: 0 0 22vw;
|
||||
background: var(--panel-bg);
|
||||
padding: 1em;
|
||||
border-radius: 0.5em 0 0 0.5em;
|
||||
color: var(--color-text);
|
||||
|
||||
h2 { text-align: center; }
|
||||
|
||||
.sidebar-item {
|
||||
background-color: var(--panel-bg);
|
||||
padding: 1em;
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:hover { background-color: var(--panel-hover-bg); }
|
||||
}
|
||||
|
||||
.news-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0 0;
|
||||
|
||||
li { margin: 0.4rem 0; }
|
||||
|
||||
small {
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
5) Main Content Area
|
||||
=============================== */
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
background-color: var(--panel-bg);
|
||||
color: var(--color-text);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 2.5em;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
6) Posts (lists, items, tags)
|
||||
=============================== */
|
||||
.post-list {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.post-item {
|
||||
background-color: var(--panel-bg);
|
||||
padding: 2em;
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:hover { background-color: rgba(100, 100, 100, 1); }
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.25rem 0 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
li {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 1rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
7) Page-level meta / tags
|
||||
=============================== */
|
||||
.page-meta { text-align: center; }
|
||||
|
||||
.page-tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.25rem 0 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 1rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
8) Staff Page
|
||||
=============================== */
|
||||
.staff-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.staff-card {
|
||||
background-color: var(--panel-bg);
|
||||
color: var(--color-text);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--panel-hover-bg);
|
||||
}
|
||||
|
||||
.staff-name {
|
||||
margin: 0;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.staff-position {
|
||||
margin: 0.25rem 0 1rem;
|
||||
font-weight: 400;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.staff-bio {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue