72 lines
1.4 KiB
SCSS
72 lines
1.4 KiB
SCSS
// normal text color
|
|
$normal_color: black;
|
|
// the nice orange
|
|
$action_color: hsl(32, 100%, 50%);
|
|
// the blue
|
|
$alternate_color: hsl(204, 35%, 35%);
|
|
|
|
// standard size to size everything from that
|
|
$standard-width: 1em;
|
|
|
|
html {
|
|
text-size: 99%;
|
|
/* original picture from http://subtlepatterns.com/iron-grip/ */
|
|
background-image: url('/images/irongrip-zero.png');
|
|
min-width: 300px;
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin: auto;
|
|
}
|
|
|
|
code {
|
|
font-family: "PT mono", monospace;
|
|
font-size: $standard-width * 0.95;
|
|
font-weigth: bold;
|
|
}
|
|
pre {
|
|
border: $standard-width solid hsla(0, 0%, 0%, 0);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
header h1, header h2 {
|
|
display: inline-block;
|
|
margin: $standard-width / 2;
|
|
padding: 0;
|
|
}
|
|
|
|
article, pre {
|
|
background-color: fade-out($alternate-color, 0.7);
|
|
}
|
|
|
|
article {
|
|
color: hsl(0, 0%, 90%);
|
|
padding: $standard-width;
|
|
a {
|
|
text-decoration: none;
|
|
color: $action-color;
|
|
}
|
|
header {
|
|
padding: $standard-width / 4;
|
|
display: inline-block;
|
|
h1 { margin: 0; }
|
|
}
|
|
footer {
|
|
padding: $standard-width / 4;
|
|
display: inline-block;
|
|
font-size: $standard-width * 0.9;
|
|
div {
|
|
display: inline-block;
|
|
margin: $standard-width / 5;
|
|
font-weight: bold;
|
|
color: hsl(0, 0%, 60%);
|
|
}
|
|
.author:before { content: 'by '; }
|
|
.date:before { content: ' on '; }
|
|
.time { display: none; }
|
|
}
|
|
section {
|
|
border-top: $standard-width/5 solid $alternate-color;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|