/** * 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; }