aboutsummaryrefslogtreecommitdiffstats
path: root/_site/css/main.css
diff options
context:
space:
mode:
Diffstat (limited to '_site/css/main.css')
-rw-r--r--_site/css/main.css827
1 files changed, 827 insertions, 0 deletions
diff --git a/_site/css/main.css b/_site/css/main.css
new file mode 100644
index 0000000..5a0ad99
--- /dev/null
+++ b/_site/css/main.css
@@ -0,0 +1,827 @@
+@import url(https://fonts.googleapis.com/css?family=Sintony:400,700);
+.wappu-link, .wappu-link:hover, .wappu-link:visited {
+ text-decoration: none !important;
+ color: #111; }
+
+.auto-content {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 0 15px;
+ box-sizing: border-box; }
+ .auto-content.auto-wide {
+ max-width: 1440px; }
+ .auto-content.auto-slim {
+ max-width: 720px; }
+
+@media screen and (min-width: 400px) {
+ .auto-content {
+ width: 80%;
+ padding: 0; } }
+@media all and (min-width: 768px) {
+ .auto-col-1 {
+ width: 8.16667%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-2 {
+ width: 16.33333%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-3 {
+ width: 24.5%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-4 {
+ width: 32.66667%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-5 {
+ width: 40.83333%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-6 {
+ width: 49%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-7 {
+ width: 57.16667%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-8 {
+ width: 65.33333%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-9 {
+ width: 73.5%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-10 {
+ width: 81.66667%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-11 {
+ width: 89.83333%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; }
+
+ .auto-col-12 {
+ width: 98%;
+ float: left;
+ box-sizing: border-box;
+ padding: 0 5px; } }
+/* Reset after element containers */
+.auto-content
+.auto-row:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+ margin: 0;
+ padding: 0; }
+
+/**
+ * Proper box-sizing
+ */
+html {
+ box-sizing: border-box; }
+
+*, *:before, *:after {
+ box-sizing: inherit; }
+
+/**
+ * Basic styling
+ */
+body {
+ font: 400 16px/1.5 "Sintony", sans-serif;
+ color: #111;
+ background-color: #fdfdfd;
+ -webkit-text-size-adjust: 100%;
+ -webkit-font-feature-settings: "kern" 1;
+ -moz-font-feature-settings: "kern" 1;
+ -o-font-feature-settings: "kern" 1;
+ font-feature-settings: "kern" 1;
+ font-kerning: normal; }
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+.highlight {
+ margin-bottom: 15px; }
+
+/**
+ * Images
+ */
+img {
+ max-width: 100%;
+ vertical-align: middle; }
+
+/**
+ * Figures
+ */
+figure > img {
+ display: block; }
+
+figcaption {
+ font-size: 14px; }
+
+/**
+ * Lists
+ */
+ul, ol {
+ margin-left: 30px; }
+
+li > ul,
+li > ol {
+ margin-bottom: 0; }
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 400;
+ color: #5c3c7c; }
+
+/**
+ * Links
+ */
+a {
+ color: #b31aff;
+ text-decoration: none; }
+ a:visited {
+ color: #8800cc; }
+ a:hover {
+ color: #111;
+ text-decoration: underline; }
+
+/**
+ * Blockquotes
+ */
+blockquote {
+ color: #828282;
+ border-left: 4px solid #f0f0f0;
+ padding-left: 15px;
+ font-size: 18px;
+ letter-spacing: -1px;
+ font-style: italic; }
+ blockquote > :last-child {
+ margin-bottom: 0; }
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+ font-size: 15px;
+ border: 1px solid #f0f0f0;
+ border-radius: 3px;
+ background-color: #eef; }
+
+code {
+ padding: 1px 5px; }
+
+pre {
+ padding: 8px 12px;
+ overflow-x: auto; }
+ pre > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0; }
+
+/**
+ * Wrapper
+ */
+.wrapper {
+ max-width: 960px;
+ margin-right: auto;
+ margin-left: auto;
+ overflow: hidden; }
+
+/**
+ * Clearfix
+ */
+.wrapper:after, .footer-col-wrapper:after, .fourfold:after, .fourfold__row:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+/**
+ * Icons
+ */
+.icon > svg {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ vertical-align: middle; }
+ .icon > svg path {
+ fill: #828282; }
+
+/**
+ * Site header
+ */
+.site-title, .site-title:visited, .site-title:hover {
+ color: white;
+ text-decoration: none; }
+
+.site-nav {
+ line-height: 56px; }
+ .site-nav .menu-icon {
+ display: none; }
+ .site-nav .page-link {
+ color: #111;
+ line-height: 1.5; }
+ .site-nav .page-link:not(:last-child) {
+ margin-right: 20px; }
+ @media all and (min-width: 480px) {
+ .site-nav {
+ position: absolute;
+ top: 9px;
+ right: 15px;
+ background-color: #fdfdfd;
+ border: 1px solid #f0f0f0;
+ border-radius: 5px;
+ text-align: right; }
+ .site-nav .menu-icon {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 26px;
+ line-height: 0;
+ padding-top: 10px;
+ text-align: center; }
+ .site-nav .menu-icon > svg {
+ width: 18px;
+ height: 15px; }
+ .site-nav .menu-icon > svg path {
+ fill: #424242; }
+ .site-nav .trigger {
+ clear: both;
+ display: none; }
+ .site-nav:hover .trigger {
+ display: block;
+ padding-bottom: 5px; }
+ .site-nav .page-link {
+ display: block;
+ padding: 5px 10px;
+ margin-left: 20px; }
+ .site-nav .page-link:not(:last-child) {
+ margin-right: 0; } }
+
+/**
+ * Site footer
+ */
+.site-footer {
+ border-top: 1px solid #f0f0f0;
+ padding: 30px 0; }
+
+.footer-heading {
+ font-size: 18px;
+ margin-bottom: 15px; }
+
+.contact-list,
+.social-media-list {
+ list-style: none;
+ margin-left: 0; }
+
+.footer-col-wrapper {
+ font-size: 15px;
+ color: #828282;
+ margin-left: -15px; }
+
+.footer-col {
+ float: left;
+ margin-bottom: 15px;
+ padding-left: 15px; }
+
+.footer-col-1 {
+ width: -webkit-calc(35% - (30px / 2));
+ width: calc(35% - (30px / 2)); }
+
+.footer-col-2 {
+ width: -webkit-calc(20% - (30px / 2));
+ width: calc(20% - (30px / 2)); }
+
+.footer-col-3 {
+ width: -webkit-calc(45% - (30px / 2));
+ width: calc(45% - (30px / 2)); }
+
+@media all and (min-width: 992px) {
+ .footer-col-1,
+ .footer-col-2 {
+ width: -webkit-calc(50% - (30px / 2));
+ width: calc(50% - (30px / 2)); }
+
+ .footer-col-3 {
+ width: -webkit-calc(100% - (30px / 2));
+ width: calc(100% - (30px / 2)); } }
+@media all and (min-width: 480px) {
+ .footer-col {
+ float: none;
+ width: -webkit-calc(100% - (30px / 2));
+ width: calc(100% - (30px / 2)); } }
+/**
+ * Page content
+ */
+.page-content {
+ padding: 15px 0; }
+
+.page-heading {
+ font-size: 20px; }
+
+.post-list {
+ margin-left: 0;
+ list-style: none; }
+ .post-list > li {
+ margin-bottom: 30px; }
+
+.post-meta {
+ font-size: 14px;
+ color: #828282; }
+
+.post-link {
+ display: block;
+ font-size: 24px; }
+
+/**
+ * Posts
+ */
+.post-header {
+ margin-bottom: 30px; }
+
+.post-title {
+ font-size: 42px;
+ letter-spacing: -1px;
+ line-height: 1; }
+ @media all and (min-width: 992px) {
+ .post-title {
+ font-size: 36px; } }
+
+.post-content {
+ margin-bottom: 30px; }
+ .post-content h2 {
+ font-size: 32px; }
+ @media all and (min-width: 992px) {
+ .post-content h2 {
+ font-size: 28px; } }
+ .post-content h3 {
+ font-size: 26px; }
+ @media all and (min-width: 992px) {
+ .post-content h3 {
+ font-size: 22px; } }
+ .post-content h4 {
+ font-size: 20px; }
+ @media all and (min-width: 992px) {
+ .post-content h4 {
+ font-size: 18px; } }
+
+body {
+ font-family: "Sintony", sans-serif;
+ background-color: #fff; }
+
+.teaser {
+ background-color: #fff; }
+ .teaser:not(:first-of-type) {
+ margin: 15px 0; }
+ .teaser__image {
+ display: inline-block; }
+ @media all and (min-width: 768px) {
+ .teaser__image {
+ max-width: 200px; } }
+
+ .teaser__text {
+ display: inline-block;
+ vertical-align: middle;
+ padding: 15px; }
+
+@media all and (min-width: 768px) {
+ .teaser--with-image .teaser__text {
+ max-width: 60%; } }
+@media all and (min-width: 992px) {
+ .teaser--with-image .teaser__text {
+ max-width: 70%; } }
+
+.header__title {
+ background-color: #fff; }
+
+.site-footer {
+ background: #f0f0f0;
+ padding: 30px;
+ color: black; }
+ .site-footer .footer-col {
+ color: black; }
+ .site-footer h2 {
+ font-family: 'Sintony', sans-serif;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 1.3em; }
+
+.header__navigation {
+ margin-top: 7.5px;
+ overflow: hidden;
+ text-align: center; }
+ .header__navigation ul {
+ overflow: hidden;
+ background: #f0f0f0;
+ margin: 0;
+ padding: 15px 0; }
+ .header__navigation .navigation__item {
+ display: inline-block;
+ padding: 0 10px;
+ font-size: 1.0em; }
+ .header__navigation a, .header__navigation a:visited, .header__navigation a:hover {
+ text-decoration: none;
+ color: #111; }
+ .header__navigation a:hover {
+ color: #5c3c7c; }
+
+.header__title {
+ padding-top: 7.5px;
+ padding-bottom: 7.5px;
+ background-color: #5c3c7c; }
+ .header__title h1 {
+ text-align: center; }
+
+.site-title {
+ font-family: 'Sintony', sans-serif;
+ letter-spacing: 1px;
+ font-size: 1.0em; }
+
+.header__logo {
+ display: block;
+ margin: auto; }
+
+.post-content {
+ font-family: "Sintony", sans-serif; }
+
+.post__ingress {
+ font-size: 1.15em;
+ font-family: "Sintony", sans-serif; }
+ @media all and (min-width: 992px) {
+ .post__ingress {
+ width: 95%; } }
+
+.post__category {
+ color: #b31aff;
+ text-transform: uppercase;
+ font-weight: 600;
+ margin-right: 5px; }
+
+.post {
+ overflow: auto;
+ padding: 15px;
+ background-color: #fff; }
+ @media all and (min-width: 480px) {
+ .post {
+ padding: 30px; } }
+
+h2 a, h2 a:visited,
+h3 a,
+h3 a:visited,
+h4 a,
+h4 a:visited {
+ color: #111; }
+
+@media all and (min-width: 480px) {
+ .section-main {
+ float: left;
+ width: 68%; }
+ .section-main.article-list {
+ width: 73%; } }
+
+@media all and (min-width: 480px) {
+ .sidebar {
+ float: right;
+ width: 25%; } }
+
+.teaser--magazine {
+ margin: 0;
+ padding: 10px 20px; }
+
+.magazine__number {
+ text-align: center;
+ margin: 5px; }
+
+@media all and (min-width: 0) and (max-width: 767px) {
+ .fourfold__row {
+ border-top: 1px solid #ddd; } }
+
+.fourfold__cell {
+ width: 33%;
+ float: left;
+ min-height: 100px;
+ border-top: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ padding: 10px;
+ box-sizing: border-box;
+ word-wrap: break-word; }
+ @media all and (min-width: 0) and (max-width: 767px) {
+ .fourfold__cell {
+ border: none; } }
+
+.author {
+ margin: 30px; }
+ .author__image {
+ object-fit: cover;
+ width: 150px;
+ height: 150px;
+ padding: 10px;
+ display: inline-block; }
+
+ .author__text {
+ display: inline-block; }
+
+ .author__job {
+ font-weight: bold; }
+
+.authors {
+ width: 50%;
+ float: left; }
+
+@media all and (min-width: 480px) {
+ .page--magazine .teaser--magazine {
+ float: left;
+ width: 30%; } }
+
+@media all and (min-width: 480px) {
+ .article-list--magazine {
+ width: 68%;
+ float: right; }
+ .article-list--magazine .teaser:first-of-type {
+ margin-top: 0; } }
+.article-list--magazine .teaser {
+ margin-top: 15px; }
+.article-list--magazine h2 {
+ margin: 0; }
+.article-list--magazine .post-link {
+ font-size: 0.8em; }
+
+.sidebar__related {
+ padding-top: 30px;
+ margin-top: 30px;
+ border-top: 1px solid #ddd; }
+
+.teaser--heading {
+ padding: 15px 7.5px 0; }
+
+.page--calendar.page--calendar {
+ width: 100%;
+ padding-top: 10px;
+ margin-left: 10px; }
+
+.calendar-item {
+ height: 120px;
+ background-color: rgba(250, 250, 250, 0.9);
+ margin: 5px;
+ text-align: center; }
+ @media all and (min-width: 0) and (max-width: 767px) {
+ .calendar-item {
+ width: 46%;
+ float: left; }
+ .calendar-item h2 {
+ font-size: 1.1em; } }
+ .calendar-item .calendar-item__cover {
+ padding-top: 40px; }
+ .calendar-item .calendar-item__inside {
+ padding-top: 40px;
+ display: none; }
+
+a.released:nth-of-type(3n) .calendar-item {
+ background-color: #CAFFD0; }
+a.released:nth-of-type(3n+1) .calendar-item {
+ background-color: #FFF07C; }
+a.released:nth-of-type(3n+2) .calendar-item {
+ background-color: #48A9A6;
+ color: #fff; }
+a.released .calendar-item:hover {
+ border: 2px solid #b31aff; }
+ a.released .calendar-item:hover .calendar-item__cover {
+ display: none; }
+ a.released .calendar-item:hover .calendar-item__inside {
+ display: block; }
+
+.teaser--wappu {
+ background: url("/static/2017-wappu/korkkihommia.png") repeat-x;
+ background-color: #fff;
+ text-align: center;
+ padding-top: 180px;
+ margin-bottom: 15px;
+ border-top: 5px solid;
+ border-bottom: 5px solid;
+ animation: border-color 5s infinite;
+ -webkit-animation: border-color 5s infinite; }
+
+@keyframes bg-color {
+ 0% {
+ background-color: red; }
+ 25% {
+ background-color: yellow; }
+ 50% {
+ background-color: blue; }
+ 75% {
+ background-color: green; }
+ 100% {
+ background-color: red; } }
+@-webkit-keyframes bg-color {
+ 0% {
+ background-color: red; }
+ 25% {
+ background-color: yellow; }
+ 50% {
+ background-color: blue; }
+ 75% {
+ background-color: green; }
+ 100% {
+ background-color: red; } }
+@keyframes border-color {
+ 0% {
+ border-color: red; }
+ 25% {
+ border-color: yellow; }
+ 50% {
+ border-color: blue; }
+ 75% {
+ border-color: green; }
+ 100% {
+ border-color: red; } }
+@-webkit-keyframes border-color {
+ 0% {
+ border-color: red; }
+ 25% {
+ border-color: yellow; }
+ 50% {
+ border-color: blue; }
+ 75% {
+ border-color: green; }
+ 100% {
+ border-color: red; } }
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+ background: #fff; }
+ .highlighter-rouge .highlight {
+ background: #eef; }
+ .highlight .c {
+ color: #998;
+ 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 {
+ color: #0086B3; }
+ .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 {
+ color: #000080; }
+ .highlight .nv {
+ color: #008080; }
+ .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 {
+ color: #d14; }
+ .highlight .sc {
+ color: #d14; }
+ .highlight .sd {
+ color: #d14; }
+ .highlight .s2 {
+ color: #d14; }
+ .highlight .se {
+ color: #d14; }
+ .highlight .sh {
+ color: #d14; }
+ .highlight .si {
+ color: #d14; }
+ .highlight .sx {
+ color: #d14; }
+ .highlight .sr {
+ color: #009926; }
+ .highlight .s1 {
+ color: #d14; }
+ .highlight .ss {
+ color: #990073; }
+ .highlight .bp {
+ color: #999; }
+ .highlight .vc {
+ color: #008080; }
+ .highlight .vg {
+ color: #008080; }
+ .highlight .vi {
+ color: #008080; }
+ .highlight .il {
+ color: #099; }

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit