167 lines
3.1 KiB
CSS
167 lines
3.1 KiB
CSS
/**
|
|
* TABLE OF CONTENTS
|
|
*
|
|
* layout ................. site layout
|
|
* text ................... global text styles
|
|
* menu ................... left sidebar nav menu
|
|
* sidebar-text ........... text sections on sidebars
|
|
* missing ................ box for missing assets
|
|
*/
|
|
|
|
/* -------------------------------------------------------------------------- *\
|
|
&layout
|
|
\* -------------------------------------------------------------------------- */
|
|
|
|
body:not(#links) {
|
|
--background-color: #fff;
|
|
|
|
display: grid;
|
|
grid-template:
|
|
"header header header" 90px
|
|
"nav main aside" auto
|
|
"spacer spacer spacer" 10px
|
|
"footer footer footer" auto /
|
|
230px auto 200px;
|
|
}
|
|
|
|
body > * {
|
|
padding: 0 10px 10px;
|
|
}
|
|
|
|
header {
|
|
grid-area: header;
|
|
background-color: #7ac5cd;
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
grid-area: main;
|
|
background-color: #ffd700;
|
|
text-align: center;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
nav {
|
|
grid-area: nav;
|
|
background-color: #cd8c95;
|
|
}
|
|
|
|
aside {
|
|
grid-area: aside;
|
|
background-color: #cd8c95;
|
|
}
|
|
|
|
.spacer {
|
|
grid-area: spacer;
|
|
background-color: #cd8c95;
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
background-color: #66cd00;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- *\
|
|
&text
|
|
\* -------------------------------------------------------------------------- */
|
|
|
|
body:not(#links) {
|
|
--color: #000;
|
|
|
|
font-family: Tahoma, sans-serif;
|
|
color: var(--color);
|
|
font-weight: 100;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
a,
|
|
a:visited,
|
|
a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline overline;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.defunct {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- *\
|
|
&menu
|
|
\* -------------------------------------------------------------------------- */
|
|
|
|
.menu {
|
|
margin-top: 47px;
|
|
width: 190px;
|
|
}
|
|
|
|
.menu + .menu {
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.menu-title {
|
|
font: bold 13px Verdana;
|
|
color: white;
|
|
background: #8b5f65 url(img/a-link.gif) no-repeat 8px 6px;
|
|
text-transform: uppercase;
|
|
padding: 7px 0 7px 31px;
|
|
}
|
|
|
|
.menu-item {
|
|
margin-bottom: 2px;
|
|
font-size: 13px;
|
|
background-color: #ffb6c1;
|
|
display: block;
|
|
padding: 5px 0 5px 8px;
|
|
line-height: 17px;
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
|
|
.menu-item:visited,
|
|
.menu-item:active {
|
|
color: #000;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
background-color: #ffd700;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- *\
|
|
&sidebar-text
|
|
\* -------------------------------------------------------------------------- */
|
|
|
|
.sidebar-text {
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.sidebar-text + .sidebar-text {
|
|
margin-top: 17px;
|
|
}
|
|
|
|
.sidebar-text-title::before {
|
|
content: url(img/a-link.gif);
|
|
}
|
|
|
|
.sidebar-text-title {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- *\
|
|
&missing
|
|
\* -------------------------------------------------------------------------- */
|
|
|
|
.missing {
|
|
border: 1px solid;
|
|
padding: 3px 7px;
|
|
font-style: italic;
|
|
display: inline-block;
|
|
}
|