aboutsummaryrefslogtreecommitdiff
path: root/templates/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'templates/main.css')
-rw-r--r--templates/main.css263
1 files changed, 263 insertions, 0 deletions
diff --git a/templates/main.css b/templates/main.css
new file mode 100644
index 0000000..f056a50
--- /dev/null
+++ b/templates/main.css
@@ -0,0 +1,263 @@
+* {
+ box-sizing: border-box;
+ font-family: dejavu sans;
+}
+body {
+ margin: 0;
+}
+h1,
+h2,
+h3,
+h4 {
+ font-weight: 400;
+}
+code[class*="language-"],
+nav,
+.blog-list {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 1.025rem;
+}
+code {
+ font-family: dejavu sans mono;
+}
+tags {
+ font-family: dejavu sans mono;
+}
+.list-item {
+ font-family: dejavu sans mono;
+}
+html {
+ font-size: 16px;
+}
+body {
+ line-height: 1.8em;
+ color: #333;
+ background: #fefefe;
+}
+.post-title,
+.date-label {
+ letter-spacing: 0.025rem;
+}
+p,
+sub,
+nav {
+ letter-spacing: 0.05rem;
+}
+.title-wrapper,
+.title {
+ letter-spacing: 0.075rem;
+}
+a {
+ text-decoration: none;
+}
+.brand-icon {
+ color: #f93a3a;
+ display: inline-flex;
+ border-bottom: 1px solid;
+}
+.brand-icon:hover {
+ border-bottom: none;
+}
+.layout {
+ max-width: 48rem;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 2.625rem 1.3125rem;
+}
+.layout .title-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 0.5rem;
+}
+.layout .title {
+ color: #333;
+ text-align: left;
+ display: block;
+ font-size: 1.875rem;
+ margin: 0;
+}
+nav {
+ font-size: 1.025rem;
+ text-align: center;
+}
+nav ul {
+ display: block;
+ padding: 0;
+}
+nav ul li {
+ display: inline;
+ list-style-type: none;
+}
+nav ul li a {
+ color: #333;
+ display: inline-block;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid #fefefe;
+}
+nav ul li a:hover {
+ color: #f93a3a;
+}
+nav ul li:not(:last-child) {
+ padding: 0 1rem 0 0;
+}
+.slim-description {
+ margin-bottom: calc(16px * 2);
+ color: #666;
+}
+.blog-post-content a {
+ color: #f93a3a;
+ text-decoration: none;
+ border-bottom: 1px solid;
+}
+.blog-post-content a:hover {
+ border-bottom: none;
+}
+.blog-list .list-item {
+ display: flex;
+ flex-direction: column-reverse;
+ align-items: baseline;
+ padding: 0.5rem 0.5rem 0.5rem 0;
+}
+.blog-list .post-title a {
+ text-decoration: none;
+ color: #333;
+ border-bottom: none;
+}
+.blog-list .post-title a:hover {
+ border-bottom: 1px solid;
+}
+.blog-list .date-label {
+ font-size: 80%;
+ margin-right: 1rem;
+}
+.content .title {
+ font-size: 1.275rem;
+}
+.blog-post-content a {
+ color: #f93a3a;
+ text-decoration: none;
+ border-bottom: 1px solid;
+}
+.blog-post-content a:hover {
+ border-bottom: none;
+}
+.blog-post-content img {
+ width: 100%;
+}
+.post-image {
+ margin-left: calc(-1.3125rem);
+ margin-right: calc(-1.3125rem);
+}
+.post-image img {
+ width: 100%;
+}
+.tags {
+ font-size: 0.9em;
+ text-align: left;
+}
+.tags ul {
+ display: block;
+ padding: 0;
+}
+.tags ul li {
+ display: inline;
+ list-style-type: none;
+ text-align: center;
+}
+.tags ul li a {
+ border: 1px solid #f93a3a;
+ border-radius: 3px;
+ background: #f93a3a;
+ padding: 0.2em;
+ color: #fff;
+ margin: 10px 2px 10px 0;
+ line-height: 1em;
+}
+.tags ul li a:hover {
+ background: #fefefe;
+ color: #f93a3a;
+}
+.tags ul li:not(:last-child) {
+ padding: 0 0.1rem 0 0;
+}
+.highlight {
+ margin-left: calc(-1.3125rem);
+ margin-right: calc(-1.3125rem);
+}
+.highlight pre {
+ line-height: 1.2rem;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ overflow: auto;
+ padding: 1.3125rem;
+ margin: 0;
+}
+.highlight pre code[class*="language-"] {
+ font-size: 0.9em;
+}
+.highlight pre .token.comment {
+ font-style: italic;
+}
+blockquote {
+ background: #f9f9f9;
+ border-left: 5px solid #333;
+ margin: 1.5em 10px;
+ padding: 0.5em 10px;
+ quotes: "“" "”" "‘" "’";
+}
+blockquote:before {
+ color: #333;
+ content: open-quote;
+ font-size: 4em;
+ line-height: 0.1em;
+ margin-right: 0.25em;
+ vertical-align: -0.4em;
+}
+blockquote p {
+ display: inline;
+}
+time {
+ font-size: 80%;
+ margin-right: 1rem;
+}
+@media only screen and (min-width: 600px) {
+ .layout .title-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row;
+ }
+ .layout .title {
+ margin-block-start: 0.83em;
+ margin-block-end: 0.83em;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ }
+ .blog-list .list-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: unset;
+ padding: 0;
+ margin-bottom: 0.5rem;
+ }
+ .blog-list .date-label {
+ font-size: 100%;
+ margin-right: 0;
+ }
+ .project-board {
+ grid-template-columns: 1fr 1fr;
+ }
+ .highlight {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .post-image {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+