maggioni.xyz/_site/css/main.css

391 lines
7.4 KiB
CSS
Raw Normal View History

2018-10-23 14:38:45 +00:00
/* Reset some basic elements */
2016-07-07 19:05:01 +00:00
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0; }
2018-10-23 14:38:45 +00:00
/* Basic styling */
2016-07-07 19:05:01 +00:00
body {
2018-10-23 14:38:45 +00:00
font-weight: 200;
font-size: 18px;
line-height: 1.5;
font-family: "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif;
2016-07-07 19:05:01 +00:00
color: #888;
2018-10-23 14:38:45 +00:00
background-color: #090909; }
2016-07-07 19:05:01 +00:00
2018-10-23 14:38:45 +00:00
/* Images */
2016-07-07 19:05:01 +00:00
img {
max-width: 100%;
vertical-align: middle; }
2018-10-23 14:38:45 +00:00
/* Lists */
2016-07-07 19:05:01 +00:00
ul, ol {
margin-left: 30px; }
2018-10-23 14:38:45 +00:00
/* Disable margin for lists */
li > ul, li > ol {
2016-07-07 19:05:01 +00:00
margin-bottom: 0; }
2018-10-23 14:38:45 +00:00
/* Headings */
2016-07-07 19:05:01 +00:00
h1, h2, h3, h4, h5, h6 {
font-weight: 200; }
2018-10-23 14:38:45 +00:00
/* Links */
2016-07-07 19:05:01 +00:00
a {
2016-09-13 19:40:45 +00:00
color: #e82;
2016-07-07 19:05:01 +00:00
text-decoration: none; }
a:visited {
2016-09-13 19:40:45 +00:00
color: #b6620e; }
2016-07-07 19:05:01 +00:00
a:hover {
color: #888;
text-decoration: underline; }
/**
* Blockquotes
*/
blockquote {
color: #828282;
border-left: 4px solid #e8e8e8;
font-size: 18px;
letter-spacing: -1px;
2018-10-24 11:53:55 +00:00
font-style: italic;
margin: 1rem 0;
padding: 1em; }
2016-07-07 19:05:01 +00:00
blockquote > :last-child {
margin-bottom: 0; }
2018-10-24 11:53:55 +00:00
/* do not put padding around the table with line numbers and the code */
2018-10-23 14:38:45 +00:00
code table {
margin: -8px -12px; }
pre table.rouge-table td {
padding: 0; }
2016-07-07 19:05:01 +00:00
pre {
padding: 8px 12px;
overflow-x: auto; }
pre > code {
border: 0;
padding-right: 0;
padding-left: 0; }
2018-10-24 11:53:55 +00:00
/* pull a nice monospace font from the internets, plus set font and
* background */
pre, code {
font-size: 0.95rem;
background: #424242;
font-family: "Source Code Pro", monospace; }
/* Disable borders between line numbers and code when
* line numbers are shown */
code .rouge-table, code .rouge-table td {
border: 0;
border-radius: 0; }
code .rouge-table {
border-spacing: 0;
border-collapse: collapse; }
2018-10-23 14:38:45 +00:00
/**
* Basic layout rules
*/
/* Padding for the main content in the page */
.container {
2018-10-24 19:57:19 +00:00
padding: 0 4em;
max-width: 1000px;
margin: auto; }
2018-10-23 14:38:45 +00:00
/* Header sizes */
h1 {
font-size: 3rem;
margin-bottom: 1rem; }
h2 {
font-size: 2.75rem; }
h3 {
font-size: 2.4rem; }
h4 {
font-size: 1.8rem; }
h5 {
font-size: 1rem; }
h6 {
font-size: 0.8rem; }
/**
* General style for the content inside main
*/
2018-10-24 11:53:55 +00:00
/* separate article metadata to the article itself with some space */
2018-10-23 14:38:45 +00:00
article .post-header {
margin-bottom: 3rem; }
2018-10-24 11:53:55 +00:00
/* put some space at the end of each article and at the end of each section */
main article, main section {
margin-bottom: 2rem; }
2018-10-23 14:38:45 +00:00
2018-10-24 11:53:55 +00:00
/* justify text */
2018-10-23 14:38:45 +00:00
p {
text-align: justify; }
2018-10-24 11:53:55 +00:00
/* put a space between paragraphs and images */
2018-10-23 14:38:45 +00:00
p, figure {
margin-top: 1.2rem; }
2018-10-24 11:53:55 +00:00
/* the first paragraph has no space at the top (since that is provided
* by either main or h? */
2018-10-23 14:38:45 +00:00
p:first-child {
margin-top: 0; }
2018-10-24 11:53:55 +00:00
/* make strongly emphasized elements REALLY STRONG */
2018-10-23 14:48:50 +00:00
strong {
background: #aa2222; }
2016-09-13 19:40:45 +00:00
body {
background-color: #333;
font-family: 'Hammersmith One', sans-serif;
color: white;
display: flex;
min-height: 100vh;
flex-direction: column; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
main {
flex: 1 0 auto; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
.navbar-list .navbar-item {
text-transform: uppercase;
font-weight: 400;
display: inline-block;
margin: 1em; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
ul.navbar-list {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-bottom: 2rem; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
.header {
2018-10-23 14:38:45 +00:00
padding: 4rem 0 .5rem 0;
2016-09-13 19:40:45 +00:00
text-align: center; }
2018-10-23 14:38:45 +00:00
.head {
margin-bottom: 2.66rem; }
2016-09-13 19:40:45 +00:00
@media (min-width: 700px) {
.header {
2018-10-23 14:38:45 +00:00
padding-top: 6rem; }
2016-09-13 19:40:45 +00:00
2018-10-23 14:38:45 +00:00
.head {
margin-bottom: 4rem; } }
2016-09-13 19:40:45 +00:00
@media (max-width: 700px) {
.navbar-list .navbar-item {
2016-09-26 20:09:25 +00:00
width: calc(100% - 2em); } }
2016-09-13 19:40:45 +00:00
.navbar-item a {
color: #e82; }
ul.post-list, ul.navbar-list {
list-style-type: none;
margin-left: 0;
margin-right: 0; }
2016-07-07 19:05:01 +00:00
2018-10-23 14:38:45 +00:00
ul.post-list li {
padding-top: 2rem; }
ul.post-list li:first-child {
padding-top: 0; }
2016-09-13 19:40:45 +00:00
.header, footer {
background-color: rgba(0, 0, 0, 0.25); }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
footer {
padding-top: 1rem; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
footer .author {
text-align: center;
text-transform: uppercase; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
.container {
padding-top: 1rem;
padding-bottom: 1rem; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
.icons {
text-align: center; }
2016-07-07 19:05:01 +00:00
2016-09-13 19:40:45 +00:00
a.icon {
display: inline-table;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 1.75em;
width: 3.5em;
height: 3.5em;
text-align: center;
line-height: 3.5em;
margin: .5em;
color: white;
cursor: pointer; }
2018-10-23 14:38:45 +00:00
/* Disable underlining in icon links inside the footer */
a.icon:link, a.icon:hover, a.icon:visited, a.icon:active {
text-decoration: none; }
/* Light up footer icon links when hovering */
a.icon:hover {
background-color: #bbbbbb; }
2016-09-13 19:40:45 +00:00
a.icon i.fa {
font-size: 2em;
display: table-cell;
vertical-align: middle; }
2016-07-07 19:05:01 +00:00
2018-10-23 15:17:23 +00:00
/* Utility class for centering block elements */
.block-center {
display: block;
margin: auto; }
2016-07-07 19:05:01 +00:00
/**
* Syntax highlighting styles
*/
.highlight {
background: #fff; }
.highlighter-rouge .highlight {
background: #eef; }
.highlight td.code > pre {
2018-10-23 14:38:45 +00:00
background: #424242; }
2016-07-07 19:05:01 +00:00
.highlight pre.lineno {
2018-10-23 14:38:45 +00:00
background: #212121;
text-align: right; }
2016-07-07 19:05:01 +00:00
.highlight .c {
2018-10-23 14:38:45 +00:00
color: #aaa;
2016-07-07 19:05:01 +00:00
font-style: italic; }
.highlight .err {
color: #a61717;
background-color: #e3d2d2; }
.highlight .k {
font-weight: bold; }
.highlight .o {
font-weight: bold; }
.highlight .cm {
color: #998;
font-style: italic; }
.highlight .cp {
color: #999;
font-weight: bold; }
.highlight .c1 {
color: #998;
font-style: italic; }
.highlight .cs {
color: #999;
font-weight: bold;
font-style: italic; }
.highlight .gd {
color: #000;
background-color: #fdd; }
.highlight .gd .x {
color: #000;
background-color: #faa; }
.highlight .ge {
font-style: italic; }
.highlight .gr {
color: #a00; }
.highlight .gh {
color: #999; }
.highlight .gi {
color: #000;
background-color: #dfd; }
.highlight .gi .x {
color: #000;
background-color: #afa; }
.highlight .go {
color: #888; }
.highlight .gp {
color: #555; }
.highlight .gs {
font-weight: bold; }
.highlight .gu {
color: #aaa; }
.highlight .gt {
color: #a00; }
.highlight .kc {
font-weight: bold; }
.highlight .kd {
font-weight: bold; }
.highlight .kp {
font-weight: bold; }
.highlight .kr {
font-weight: bold; }
.highlight .kt {
color: #458;
font-weight: bold; }
.highlight .m {
color: #099; }
.highlight .s {
color: #d14; }
.highlight .na {
color: #008080; }
.highlight .nb {
2018-10-23 14:38:45 +00:00
color: #00a6d3; }
2016-07-07 19:05:01 +00:00
.highlight .nc {
color: #458;
font-weight: bold; }
.highlight .no {
color: #008080; }
.highlight .ni {
color: #800080; }
.highlight .ne {
color: #900;
font-weight: bold; }
.highlight .nf {
color: #900;
font-weight: bold; }
.highlight .nn {
color: #555; }
.highlight .nt {
2018-10-23 14:38:45 +00:00
color: #0000d0; }
2016-07-07 19:05:01 +00:00
.highlight .nv {
2018-10-23 14:38:45 +00:00
color: #00d0d0; }
2016-07-07 19:05:01 +00:00
.highlight .ow {
font-weight: bold; }
.highlight .w {
color: #bbb; }
.highlight .mf {
color: #099; }
.highlight .mh {
color: #099; }
.highlight .mi {
color: #099; }
.highlight .mo {
color: #099; }
.highlight .sb {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .sc {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .sd {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .s2 {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .se {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .sh {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .si {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .sx {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .sr {
color: #009926; }
.highlight .s1 {
2018-10-23 14:38:45 +00:00
color: #f54; }
2016-07-07 19:05:01 +00:00
.highlight .ss {
color: #990073; }
.highlight .bp {
color: #999; }
.highlight .vc {
color: #008080; }
.highlight .vg {
color: #008080; }
.highlight .vi {
color: #008080; }
.highlight .il {
color: #099; }