131 lines
2.6 KiB
SCSS
131 lines
2.6 KiB
SCSS
// normal text color
|
|
$normal_color: hsl(0,0, 90%);
|
|
// the nice orange
|
|
$action_color: hsl(32, 100%, 50%);
|
|
// the blue
|
|
$alternate_color: hsl(204, 35%, 35%);
|
|
// box color for quotes and code
|
|
$box_color: hsla(0, 0%, 0%, 0);
|
|
|
|
// standard size to size everything from that
|
|
$standard-width: 1em;
|
|
|
|
// other variables
|
|
$box_border: $standard-width solid $box_color;
|
|
|
|
html {
|
|
font-size: 99%;
|
|
font-family: sans-serif;
|
|
/* 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;
|
|
color: $normal_color;
|
|
}
|
|
|
|
code {
|
|
font-family: "PT mono", monospace;
|
|
}
|
|
pre {
|
|
border: $box_border;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
blockquote {
|
|
border: $box_border;
|
|
margin: 0;
|
|
font-style: italic;
|
|
|
|
p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
#header {
|
|
h1, h2 {
|
|
display: none;
|
|
margin: $standard-width / 2;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
padding-left: $standard-width;
|
|
padding-right: $standard-width;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: $action-color;
|
|
}
|
|
|
|
.page {
|
|
display: block;
|
|
text-align: center;
|
|
padding: $standard-width;
|
|
font-size: $standard-width * 0.9;
|
|
font-weight: bold;
|
|
&.up {
|
|
border-top: $standard-width / 4 solid $alternate-color;
|
|
&:hover, &:focus, &:active {
|
|
border-top: $standard-width / 4 solid $action-color;
|
|
}
|
|
}
|
|
&.down {
|
|
border-bottom: $standard-width / 4 solid $alternate-color;
|
|
&:hover, &:focus, &:active {
|
|
border-bottom: $standard-width / 4 solid $action-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.error {
|
|
padding: $standard-width;
|
|
}
|
|
|
|
#content, pre, blockquote {
|
|
background-color: fade-out($alternate-color, 0.7);
|
|
}
|
|
|
|
article {
|
|
padding-top: $standard-width;
|
|
padding-bottom: $standard-width;
|
|
header {
|
|
padding: $standard-width / 4;
|
|
display: inline-block;
|
|
h1 { margin: 0;}
|
|
h1, h2 { display: inline-block; }
|
|
}
|
|
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;
|
|
h1 { font-size: $standard-width * 1.3 }
|
|
h2 { font-size: $standard-width * 1.2 }
|
|
h3 { font-size: $standard-width * 1.1; font-weight: normal; }
|
|
h1, h2, h3 {
|
|
border-bottom: $standard-width / 10 solid $normal-color;
|
|
margin-right: 25%;
|
|
}
|
|
code, pre { word-wrap: initial; }
|
|
}
|
|
}
|