/* kanit-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Kanit'; font-style: normal; font-weight: 400; src: url('../fonts/kanit-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* kanit-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Kanit'; font-style: italic; font-weight: 400; src: url('../fonts/kanit-v13-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* kanit-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Kanit'; font-style: normal; font-weight: 700; src: url('../fonts/kanit-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* mukta-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Mukta'; font-style: normal; font-weight: 400; src: url('../fonts/mukta-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } body { font-family: Mukta; background: #eee; } .navigation a, .navigation span, b, strong, h1, h2, h3, h4, h5, h6{ font-family: Kanit; } .navigation-link{ text-transform: uppercase; } .projects-list { text-align: left; } .list ul.projects-list>li { display: inline; } .projects-list>li>img { float: left; } .list ul.tags, .page ul.tags { text-align: right; } .list ul.tags>li { display: inline; color: #ddd; font-size: 80%; padding: 5px; background: rgb(16, 104, 192); border-radius: 6px; } .list ul.projects-list li .title { font-size: 1.5em; line-height: 1.3em; margin-bottom: 0.5em; } .list ul.projects-list li .date { width: auto; margin: 0; position: absolute; bottom: 15px; right: -5px; color: #fff; padding: 0em .5em; background: rgb(16, 104, 192); font-size: 70%; } .list ul.projects-list li .new { width: auto; text-align: center; margin: 0; position: absolute; top: -10px; left: -10px; color: #fff; padding: 0em .5em; background: rgb(207, 9, 105); } .list ul.projects-list li .wip { width: auto; text-align: center; margin: 0; position: absolute; top: -10px; left: -10px; color: #fff; padding: 0em .5em; background: rgb(210, 119, 50); } .list ul.projects-list li .completed { width: auto; text-align: center; margin: 0; position: absolute; top: -10px; left: -10px; color: #fff; padding: 0em .5em; background: rgb(16, 134, 28); } .project-image { display: inline; float: left; position: relative; margin-right: 1em; margin-bottom: 1em; } .page ul.tags>li { display: inline; color: #999; } /** NEWS **/ .news-image { display: inline; float: left; position: relative; margin-right: 1em; margin-bottom: 1em; width: 40%; } .list ul.news-list li .date { width: auto; } .list ul.news-list li .reading-time { margin-left: 1em; } .list ul.news-list li a.title { font-size: 1.3em; } .list ul.news-list .tag { display: inline-block; padding: 0.3rem 0.6rem; background-color: #e0e0e0; border-radius: 0.6rem; line-height: 1.4em; font-size: 0.8em; margin-bottom: 2px; } .list ul.news-list .tag a { color: #212121; } .list ul.news-list:not(.pagination) li { display: block; } hr.light { border: 1px solid #eee; } blockquote { padding: 10px; border-left: 4px solid #e0e0e0; line-height: 3.2rem; } blockquote p { font-size: 1.2em; margin: 2rem 0 2rem 1em; } .donations>div { position: relative; width: 49%; padding: 4%; float: left; min-height: 350px; } .donations>div>a.btn { position: absolute; bottom: 10px; right: 10px; } .donations>div:first-of-type { margin-right: 2%; } .gradient-border { --border-width: 3px; position: relative; justify-content: center; background: #fff; border-radius: var(--border-width); } .gradient-border::after { position: absolute; content: ""; top: calc(-1 * var(--border-width)); left: calc(-1 * var(--border-width)); z-index: -1; width: calc(100% + var(--border-width) * 2); height: calc(100% + var(--border-width) * 2); background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0); background-size: 300% 300%; background-position: 0 50%; border-radius: calc(2 * var(--border-width)); animation: moveGradient 4s alternate infinite; } @keyframes moveGradient { 50% { background-position: 100% 50%; } } .stripe-btn { background: #635bff; color: #fff; padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.9em; } .social-share { position: relative; top: -0.5em; } .social-share ul { margin: 0; } .social-share ul li p { display: none; } .social-share .share-icons li { padding: 0 !important; padding-bottom: 10px !important; } .social-share .share-btn { padding: 0.25em; width: 3em; } .social-share-nav .share-btn h3 { color: #ffffff; } ul.share-icons { cursor: default; list-style: none; padding-left: 0; margin-top: 1em; } ul.share-icons li { display: inline-block; padding: 0 1em 0 0; } ul.share-icons li:last-child { padding-right: 0; } ul.share-icons li>* { text-decoration: none; border: 0; } ul.share-icons li>*:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } ul.share-icons li>* .label { display: none; } .share-btn { display: inline-block; color: #ffffff; border: none; border-radius: 4px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); outline: none; text-align: center; text-decoration: none; } .share-btn:hover { color: #ffffff !important; } .share-btn:active { position: relative; top: 2px; box-shadow: none; color: #e2e2e2; outline: none; } .share-btn .widget-social__link-icon { margin: 0; } .share-btn.mastodon { background: #3088d4; } .share-btn.twitter { background: #55acee; } .share-btn.google-plus { background: #dd4b39; } .share-btn.facebook { background: #3B5998; } .share-btn.linkedin { background: #4875B4; } .share-btn.stumbleupon { background: #EB4823; } .share-btn.pinterest { background: #BD081C; } .share-btn.reddit { background: #ff5700; } .share-btn.email { background: #444444; } .share-btn.whatsapp { background: #25d366; } .share-btn.mastodon:hover { background: #3583c7; } .share-btn.twitter:hover { background: #4c9ad6; } .share-btn.google-plus:hover { background: #c64333; } .share-btn.facebook:hover { background: #2f4779; } .share-btn.linkedin:hover { background: #4069a2; } .share-btn.stumbleupon:hover { background: #d3401f; } .share-btn.pinterest:hover { background: #AD0000; } .share-btn.reddit:hover { background: #e54e00; } .share-btn.email:hover { background: #363636; } p { margin: 0.5em 0; line-height: 1.4em; } @media (max-width: 768px) { .donations>div { width: 100%; margin: 2%; min-height: auto; } .content header h1{ font-size: 3rem; } h2{ font-size: 2rem; } } .quick-div { color: #fff; display: inline-block; line-height: 1em; border: none; } .quick-div>.url { text-decoration: none; color: #fff; line-height: 1.8em; padding: 8px; transition: all ease 0.5s; background: #23b571; margin-left: -4px; } .quick-div>.url:hover { background: #076137; color: #fff; margin-left: 0; } .quick-div>.icon { padding: 8px; background: #fff; border: 1px solid #ddd; } .big-button { margin: 6px 0; display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #f7f7f7; border-left: solid 6px #0d71ae; color: #0d71ae; font-weight: bold; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); } .big-button:active { box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); transform: translateY(2px); } .big-button.green { border-color: #007306; color: #007306; } hr { border: 2px dashed #bbb; margin: 30px 0; } .quick-summary { background: #ddd; border-left: 8px solid #ccc; padding: 1em; color: #555; } .quick-summary h4 { margin: 0 0 0.5em 0; color: #444; } .text-center { text-align: center; }