body { margin: 0; padding: 0; background: #2a2543; line-height: 133%; font-size: 0.98em; font-family: "Open Sans", "Droid Sans", "Calibri", sans-serif; } /*Miscellanous custom styling for various elements.*/ h1, h2, h3 { font-family: "Calibri"; } a { color: #4d4385; } a:hover, a:focus { color: #2a2543; transition: ease-in 0.1s, ease-out 0.1s; } blockquote { border-left: #4d4385 3px solid; background: #d8d4ec; padding: 0.1px 0.75rem; margin: 0 1.5rem; } hr { width: 75%; margin-top: 1.5rem; margin-bottom: 1.5rem; } /*Sticky navigation links at the top of the page.*/ .quick-nav { position:fixed; z-index: 999; width: 100%; background: #0a000a; background: rgba(10,0,10,1); text-align: right; color: #fff; font-size: 0.875em; } .navbar { padding: 1px 25px; } .navbar a { display: inline-block; text-decoration: none; color: #fff; padding: 5px 4px; margin: 0 2px; } .navbar a:hover, .footer a:hover, .navbar a:focus, .footer a:focus { color: #edeef3; transition: ease-in 0.1s, ease-out 0.1s; } /*Header image.*/ .header { height: 350px; background: linear-gradient(rgba(10,0,10,0.5), rgba(10,0,10,0.4)), url(/img/pexels-4254548-crop2.jpg); } /*Title bar with icon and title/tagline.*/ .title { background: #52587c; min-height: 60px; margin-bottom: -25px; text-align: right; } .title-text, .title-pic { padding:0; margin: 0; display: inline-block; vertical-align: top; } /*Contains the text tagline.*/ .title-text { padding-right: 1em; width: calc(85vw - 110px); line-height: 167%; margin-top: -3px; padding-bottom: 15px; } .title-text h1 { padding:0; font-size: 32px; } /*Contains the profile pic. This can be left out and should still look okay.*/ .title-pic { height: 100px; margin-right: 100px; margin-top: -25px; border: 5px solid #52587c; border-radius: 10px; } .title-pic img { height: 100%; overflow: hidden; } /*Contains the main content and sidebar.*/ .page-wrapper { padding: 0 100px; margin: 0 auto; background: #ddd; background: linear-gradient(rgba(52,37,77,1), rgba(42,30,67,0.25)), url(/img/fancy1.png); /*Gradient makes tiles "fade in".*/ } /*Contains the sidebar boxes.*/ .sidebar { width: 320px; margin: 50px 0; position: absolute; } .sidebar h1 { font-size: 1.2rem; background: #696f92; color: #fff; padding: 12px 10px 10px 10px; margin: auto; } .sidebar a { display: block; border-left: 3px solid #52587c; background: #bcb9d6; padding: 5px; margin: 10px 0; color: #0e0718; text-decoration: none; } .sidebar a:hover, .sidebar a:focus { background: #99a1c7; transition: ease-in 0.1s, ease-out 0.1s; } .sidebar, .main { display: inline-block; } /*Contains main content boxes.*/ .main { margin: 50px 100px 50px 350px; width: auto; width: calc(100vw - 550px); } /*Basic container type for subsections of main and sidebar divs*/ .box { margin-bottom: 15px; } /*Inner content div for boxes. Padding goes here so sidebar headers etc can keep their no-margin look.*/ .inner { background: #edeef3; padding: 10px 25px; } .inner img { max-width: 100%; /*Prevent image overflow.*/ height: auto; border-radius: 5px; /*Give images in content rounded corners.*/ } .box, .title-pic img { border-radius: 5px; overflow: hidden; /*Force inner divs to conform to rounded corners.*/ } /*Footer section.*/ .footer { background: #050005; color: #fff; padding: 5px 20px; font-size: 0.75em; padding-bottom: 10px; } .footer a { color: #fff; } /*Individual column of the footer. You can have 3 of these at the current given width.*/ .footer-column { width: 25%; margin: 5px 10px; display: inline-block; vertical-align: top; } /*Adapt to narrower screens.*/ @media(max-width: 900px) { .page-wrapper { padding: 0 50px; } .sidebar { width: 25vw; } .main { margin: 50px 0 50px calc(25vw + 30px); width: calc(75vw - 150px); } .title-pic { margin-right: 7vw; } .title-text { padding-left: 1vw; padding-right: 2vw; } } /*Mobile layout.*/ @media(orientation: portrait) { .page-wrapper { padding-top: 0.1px; padding-bottom: 0.1px; } .sidebar, .main { display: block; margin: 0 auto; position: static; width: 100%; } .sidebar { margin-top: 50px; } .main { margin-top: 30px; margin-bottom: 30px; } }