/* DanielScully.co.uk Main site stylesheet */ /* DanielScully.co.uk SASS Rules */ /* CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -moz-box-sizing: inherit; box-sizing: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* DanielScully.co.uk My Reset */ ul { list-style-type: disc; } ul ul { list-style-type: circle; } ol { list-style-type: decimal; } ol ol { list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-roman; } html { font-size: 20px; } body { background-color: #464646; background-repeat: repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 20px; } a { color: #009600; text-decoration: underline; transition-duration: 0.3s; transition-property: color, text-shadow; } a:hover { color: #00c800; } a:active { text-shadow: 0 0 3px #009600; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h2 { font-family: "Quattrocento", serif; font-size: 2em; margin-bottom: 1em; } h3 { font-family: "Quattrocento", serif; font-size: 1.5em; margin-top: 1.5em; margin-bottom: 1em; } h4 { font-family: "PT Sans", sans-serif; font-size: 1.5em; margin-top: 2em; } h5 { font-family: "PT Sans", sans-serif; font-size: 1.0em; margin-top: 2em; } h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } p { line-height: 1.5; margin: 1.5em auto; } ol, ul { padding-left: 2.5em; margin-top: 1.5em; margin-bottom: 1.5em; } ul { list-style-type: disc !important; } li { margin: 0.5em 0; line-height: 1.3 !important; } code { background-color: rgba(0, 0, 0, 0.05); -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; display: block; font-family: monospace; line-height: 1.3; margin: 0.5em; padding: 1em 0.5em; white-space: pre-wrap; } table { border: solid black 1px; border-collapse: separate; border-spacing: 0.5em 0.1em; empty-cells: show; margin: 1em 0; width: 100%; } thead { border-bottom: solid black 1px; } th { font-weight: bold; } th[scope=col] { text-align: center; } th[scope=row] { text-align: right; } td { text-align: left; } body { background-color: #E6E6E6; background-image: url("../images/background_3.svg"); } /* Header Bar */ header { color: white; font-family: "Quattrocento", serif; font-variant: small-caps; font-size: 0.75em; font-weight: normal; /*margin:0 0 1em 3.5em;*/ margin: 0 0 1em 2.8em; padding: 0; } @media all and (min-width: 30em) { header { font-size: 1.5em; } } header > * { background-color: rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); } header > a { -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; height: 2.5em; position: absolute; top: 0; left: 0; transition-duration: 0.3s; transition-property: box-shadow; width: 2.5em; } header > a img { max-height: 100%; max-width: 100%; } h1 { -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; line-height: 2.5; padding-right: 2.8em; text-align: center; } header > a:hover { -moz-box-shadow: 0 0 15px black; -webkit-box-shadow: 0 0 15px black; box-shadow: 0 0 15px black; } header > a:active { -moz-box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); -webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); } /* Footer Bar */ footer { background-color: rgba(0, 0, 0, 0.7); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: white; font-family: "Quattrocento", serif; margin: 1rem; padding: 1rem; text-align: center; } /* Central Sections */ .dis-central { -moz-box-shadow: 0 0 10px rgba(20, 20, 20, 0.7); -webkit-box-shadow: 0 0 10px rgba(20, 20, 20, 0.7); box-shadow: 0 0 10px rgba(20, 20, 20, 0.7); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; max-width: 40em; margin: 3em auto; } .dis-primary { background-color: white; color: black; } .dis-secondary { background-color: rgba(120, 120, 120, 0.7); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; color: white; padding-bottom: 5px; } .dis-tertiary { background-color: rgba(0, 0, 0, 0.7); color: white; padding: 1px 0; } .dis-content { padding: 1rem 0.5em 1rem 0.5em; } @media screen and (min-width: 30em) { .dis-content { padding: 1rem 2em 1rem 2em; } } .dis-top-image { border-bottom: 1px black solid; -moz-border-radius-top-right: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; height: auto; width: 100%; } .dis-secondary a { color: #00c800; } time, .top-right { display: block; font-family: "PT Sans", sans-serif; line-height: 2; text-align: right; margin-top: -1rem; } footer.dis-central { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; font-family: "PT Sans", sans-serif; margin-bottom: 0; } /* Box Sections */ /* Container of a box section */ .dis-boxes { margin: 1rem; overflow: auto; text-align: center; } .dis-box > * { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(20, 20, 20, 0.7); -webkit-box-shadow: 0 0 10px rgba(20, 20, 20, 0.7); box-shadow: 0 0 10px rgba(20, 20, 20, 0.7); color: white; display: block; } .dis-box > * > *:first-child { -moz-border-radius-top-right: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .dis-box > * > *:last-child { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .dis-box h3 { background-color: rgba(20, 20, 20, 0.7); color: white; display: block; font-family: "Quattrocento", serif; font-size: 1.2rem; font-weight: normal; line-height: 1.3; margin: 0 0 0 0; padding: 0.65em 0.5em; } .dis-box a { font-weight: normal; text-decoration: none; transition-property: text-shadow, box-shadow; transition-duration: 0.3s; } .dis-box a:hover { -moz-box-shadow: 0 0 15px black; -webkit-box-shadow: 0 0 15px black; box-shadow: 0 0 15px black; text-shadow: 0 0 2px white; } .dis-box a:active { -moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); text-shadow: 0 0 7px white; } .dis-box img { display: block; width: 100%; } .dis-box { clear: none; float: left; padding: 1rem 1rem; vertical-align: top; width: 100%; } @media screen and (min-width: 47em) { .dis-boxes .dis-box:nth-child(2n+1) { clear: left; } .dis-box { width: 50%; } } @media screen and (min-width: 70em) { .dis-boxes .dis-box:nth-child(2n+1) { clear: none; } .dis-boxes .dis-box:nth-child(3n+1) { clear: left; } .dis-box { width: 33.3333%; } } @media screen and (min-width: 93em) { .dis-boxes .dis-box:nth-child(3n+1) { clear: none; } .dis-boxes .dis-box:nth-child(4n+1) { clear: left; } .dis-box { width: 25%; } } @media screen and (min-width: 116em) { .dis-boxes .dis-box:nth-child(4n+1) { clear: none; } .dis-boxes .dis-box:nth-child(5n+1) { clear: left; } .dis-box { width: 20%; } } @media screen and (min-width: 139em) { .dis-boxes .dis-box:nth-child(5n+1) { clear: none; } .dis-boxes .dis-box:nth-child(6n+1) { clear: none; } .dis-box { width: 16.6666%; } } @media screen and (min-width: 162em) { .dis-boxes { margin: 1rem auto; } .dis-boxes .dis-box:nth-child(6n+1) { clear: none; } .dis-box { max-width: 20rem; } } /* Social Networks */ .online img { background-color: rgba(0, 0, 0, 0.3); } /* YouTube Videos */ .youtube { text-align: center; width: 100%; } .youtube a { color: white !important; display: block; }