Michael Fabian 'Xaymar' Dirks
109 lines
5.7 KiB
CSS
109 lines
5.7 KiB
CSS
* { box-sizing: border-box; }
|
|
|
|
html { font-size: 1.05rem; }
|
|
|
|
body { margin: 0; padding: 0; background: #223044; font-family: "Roboto", sans-serif; text-rendering: optimizelegibility; color: #e6e6e6; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
|
|
|
|
a, a.visited, a.focus, a.active { color: inherit; text-decoration: inherit; }
|
|
|
|
@keyframes menu_show { from { display: none;
|
|
opacity: 0.0; }
|
|
0% { display: block; }
|
|
to { display: block;
|
|
opacity: 1.0; } }
|
|
|
|
@keyframes menu_hide { from { display: none;
|
|
opacity: 0.0; }
|
|
0% { display: block; }
|
|
to { display: block;
|
|
opacity: 1.0; } }
|
|
|
|
body > .header { padding: 5px; background: #131313; color: #fafcff; }
|
|
|
|
body > .header > .content { display: grid; grid-template-columns: auto 1fr; max-width: 1000px; margin-left: auto; margin-right: auto; }
|
|
|
|
body > .header > .content .logo { display: grid; grid-template-columns: auto 1fr; margin: 0 2em 0 0; padding: 0; }
|
|
|
|
body > .header > .content .logo > .icon { justify-self: stretch; align-self: stretch; height: 90px; margin: 0 10px 0 0; padding: 0; }
|
|
|
|
body > .header > .content .logo > figcaption { justify-self: left; align-self: center; margin: 0; padding: 0; font-family: "Oswald"; font-size: 1.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: .25ch; }
|
|
|
|
body > .header > .content .navigation { justify-self: left; align-self: center; font-size: 0.9rem; color: #d9d9d9; }
|
|
|
|
body > .header > .content .navigation > .menu { list-style: none inside; text-transform: uppercase; padding: 0px; margin: 0; }
|
|
|
|
body > .header > .content .navigation > .menu > li { display: inline-block; padding: 0px .5em 0px 0px; margin: 0; }
|
|
|
|
body > .header > .content .navigation > .menu > li > .menu { display: block; position: absolute; padding: 0px .5em; margin: 0; cursor: auto; list-style: none inside; background: #131313; box-shadow: 2px 2px 5px 0px black; }
|
|
|
|
body > .header > .content .navigation > .menu > li > .menu > li { display: block; padding: 0 .5em; margin: 0; }
|
|
|
|
body > .header > .content .navigation .menu > li > a { display: block; padding: .5em 0; }
|
|
|
|
body > .header > .content .navigation .menu li { color: #bfbfbf; }
|
|
|
|
body > .header > .content .navigation .menu li.has-menu { cursor: pointer; }
|
|
|
|
body > .header > .content .navigation .menu li.has-menu > .menu { position: absolute; display: none; animation-name: menu_hide; animation-duration: 100ms; animation-fill-mode: both; animation-direction: reverse; }
|
|
|
|
body > .header > .content .navigation .menu li.has-menu:hover > .menu, body > .header > .content .navigation .menu li.has-menu > .menu:hover, body > .header > .content .navigation .menu li.has-menu:focus > .menu, body > .header > .content .navigation .menu li.has-menu > .menu:focus, body > .header > .content .navigation .menu li.has-menu:active > .menu, body > .header > .content .navigation .menu li.has-menu > .menu:active { display: block; animation-name: menu_show; animation-duration: 100ms; animation-fill-mode: both; animation-direction: normal; }
|
|
|
|
body > .header > .content .navigation .menu li:hover, body > .header > .content .navigation .menu li:active, body > .header > .content .navigation .menu li:focus { color: white; }
|
|
|
|
body > .content { max-width: 1000px; margin-left: auto; margin-right: auto; padding: 0 1rem; width: calc(100% - 1rem * 2); }
|
|
|
|
.breadcrumbs { margin: 1rem 0; padding: .25rem 1rem; background: #1a2433; color: white; }
|
|
|
|
.breadcrumbs > .crumb { text-transform: uppercase; }
|
|
|
|
.breadcrumbs > .crumb > a, .breadcrumbs > .crumb > a:visited { color: #80b5ff; }
|
|
|
|
.breadcrumbs > .crumb > a:focus, .breadcrumbs > .crumb > a:active { color: #b3d2ff; }
|
|
|
|
article { margin: 0px; padding: 0px; background: #0d1726; box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.75); color: #e6e6e6; }
|
|
|
|
article ~ article { margin-top: 1.5rem; }
|
|
|
|
article > .title { padding: .25rem 1rem; margin: 0; font-size: 1.667em; font-variant: small-caps; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.05ch; background: #3373cc; color: white; }
|
|
|
|
article > .content { margin: 0px; padding: 1rem .75rem; }
|
|
|
|
article > .content a, article > .content a:visited { color: #9fbadf; }
|
|
|
|
article > .content a:focus, article > .content a:hover { color: #b3d2ff; }
|
|
|
|
article > .readmore { margin: 0; margin-top: -1.0rem; padding: .25rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.667) 90%); z-index: 100000; }
|
|
|
|
article > .readmore > a { display: block; margin: 0; padding: .25rem; text-align: center; font-variant: small-caps; font-weight: bold; }
|
|
|
|
article > .readmore > a, article > .readmore > a:visited { color: #9fbadf; }
|
|
|
|
article > .readmore > a:focus, article > .readmore > a:active { color: #b3d2ff; }
|
|
|
|
article > .meta { padding: .25rem .5rem; border-radius: .5rem; font-size: 0.8rem; background: #0a121d; color: #b3b3b3; }
|
|
|
|
article > .meta a, article > .meta a:visited { color: #66a6ff; }
|
|
|
|
article > .meta a:focus, article > .meta a:hover { color: #cce1ff; }
|
|
|
|
article > .meta > .permalink { display: inline; padding: 0 .5rem; font-variant: small-caps; }
|
|
|
|
article > .meta > .tags { display: inline; padding: 0 .5rem; }
|
|
|
|
article > .meta > .tags > span:first-child { font-weight: bold; font-variant: small-caps; }
|
|
|
|
article > .meta > .tags > .tag:not(:last-child):after { content: ", "; }
|
|
|
|
.block { padding: 0; margin: 0; }
|
|
|
|
.block ~ .block { margin-top: 1.25em; }
|
|
|
|
.block > .content { padding: 0; margin: 0; }
|
|
|
|
.comments { margin: 0; margin-top: 1rem; padding: 0; background: #0d1726; box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.75); color: #e6e6e6; }
|
|
|
|
.comments > .title { padding: .25rem 1rem; margin: 0; font-size: 1.333rem; font-variant: small-caps; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.05ch; background: #36537d; color: white; }
|
|
|
|
.comments > .content { margin: 0px; padding: 1rem 1rem; }
|
|
|
|
/*# sourceMappingURL=site.css.map */ |