You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

306 lines
5.6 KiB
CSS

* {
box-sizing:border-box;
}
html, body {
margin: 0;
padding: 0;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
/*
On modern smartphones with high dpi screens, we have to enlarge the font in portrait mode
*/
@media only screen and (-moz-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 2/1) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 2) and (orientation: portrait) {
html {
font-size: 2.5rem;
}
}
body {
text-size-adjust:100%;
background-attachment: fixed;
background-color: #000000;
color: rgba(255, 255, 255, 0.75);
display: flex;
flex-direction: column;
min-height:100vh
}
main {
display: block
}
a {
color: #c11012;
text-decoration:none
}
a:hover, a:focus {
text-decoration:underline
}
a strong {
color:inherit
}
h1, h2, h3, h4, h5, h6, .site-title {
color: #313131;
font-weight: 600;
line-height: 1.25;
margin-bottom: .5rem;
text-rendering:optimizeLegibility
}
.site-title, .site-subtitle {
text-align: center;
}
h1 {
font-size:2rem
}
h2 {
font-size: 1.5rem;
margin-top:1rem
}
hr {
border: 1px solid #c11012;
border-radius: 2px;
}
#sidebar {
flex: 0 0 auto;
padding:2rem
}
#sidebar .site-title {
font-family: 'Abril Fatface', serif;
font-size: 1.25rem;
font-weight: normal;
margin-bottom: .5rem;
margin-top:0
}
#sidebar nav {
display: flex;
}
#sidebar-nav-links {
flex-flow: column nowrap;
}
.content {
background: #fff;
color: #515151;
padding:2rem
}
.container {
display: flex;
flex: 1 1 auto;
flex-direction:column
}
.container > .content {
flex-grow: 1;
padding-bottom:4rem
}
.container > header {
background: transparent;
color: #fff;
margin:-1.5rem 2rem 2rem
}
.container > header h1, .container > header h2 {
color:inherit
}
.home #sidebar {
text-align:center
}
.home #sidebar .site-title {
font-size:3.25rem
}
.home #sidebar header ~ nav {
display:flex
}
.home #sidebar > * :last-child {
margin-bottom:0.5rem
}
/*
Styling for images meant to be embedded within blog post. Use it
by append #illustration to image url in markdown like:
![Kitten](static/img/kitten.jpg#illustration)
*/
img[src $= "#illustration"] {
display: block;
margin-top: 8px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
width: 60%;
}
/*
Display an external icon after each link that leads away from our site.
*/
.content a[href^="http://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):not([href*="#hideextern"]):after,
.content a[href^="https://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):not([href*="#hideextern"]):after {
font-family: 'Font Awesome 5 Free';
content: "\f35d";
display: inline-block;
font: normal 16px/1 'Font Awesome 5 Free';
margin-left: 4px;
}
/*
Display an Youtube icon left of every youtube link.
*/
.content a[href^="http://youtu.be"]:before,
.content a[href^="https://youtu.be"]:before,
.content a[href^="http://youtube.com"]:before,
.content a[href^="https://youtube.com"]:before {
font-family: "Font Awesome 5 Brands";
content: "\f167";
display: inline-block;
font: normal 16px/1 'Font Awesome 5 Brands';
margin-right: 4px;
}
/*
Landscape mode: Navbar to the left.
*/
@media (min-width: 49rem) and (orientation: landscape) {
body {
flex-direction: row;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
overflow-y:auto
}
body > * {
-webkit-overflow-scrolling: touch;
overflow-y:auto
}
#sidebar, .home #sidebar {
text-align: left;
width:18rem
}
#sidebar > * :last-child, .home #sidebar > * :last-child {
margin-bottom:0
}
#sidebar {
position: fixed;
left:0
}
#sidebar .site-title {
font-size:3.25rem;
}
#sidebar .site-title .back-arrow {
display:none
}
#sidebar p.lead, #sidebar header ~ * {
display:block
}
#sidebar header ~ nav {
display:flex
}
.index #sidebar {
margin-bottom:0
}
.container {
background: #fff;
color: #515151;
min-height: 100vh;
padding: 4rem 4rem 0;
margin-left:18rem
}
.container > header {
color: #313131;
margin:0
}
.container > header h1, .container > header h2 {
color:inherit
}
.container > header h1:last-child, .container > header h2:last-child {
margin-bottom:.5rem
}
.container > * {
max-width: 38rem;
padding:0
}
}
#sidebar a {
color:#fff
}
#sidebar a:hover, #sidebar a:focus {
text-decoration:underline
}
/*
Portrait with navigation on top. Mostly for smartphones.
*/
@media screen and (max-width: 783px), (orientation: portrait) {
.container > .content {
padding:1.5rem
}
#sidebar #sidebar-nav-links {
flex-direction: row;
justify-content:space-evenly;
flex-wrap: wrap;
}
#sidebar #sidebar-nav-links a {
display: inline-block;
margin:0 .5em
}
.home.index #sidebar {
padding: 1rem
}
}
.btn {
background-color: #c11012;
color: white;
padding: 2px 8px;
font-size: 48px;
border: none;
}