378 lines
8.9 KiB
CSS
378 lines
8.9 KiB
CSS
@charset "UTF-8";
|
|
/* Dracula theme */
|
|
/*
|
|
:root {
|
|
--background: #282A36 ;
|
|
--comment: #6272A4 ;
|
|
--selection: #44475A ;
|
|
--foreground: #F8F8F2 ;
|
|
--cyan: #8BE9FD ;
|
|
--orange: #FFB86C;
|
|
--green: #50FA7B ;
|
|
--pink: #FF79C6 ;
|
|
--purple: #BD93F9 ;
|
|
--red: #FF5555 ;
|
|
--yellow: #F1FA8C;
|
|
}
|
|
*/
|
|
/* Gruvbox theme */
|
|
@import url("https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
|
:root {
|
|
--background: #282828 ;
|
|
--comment: #458588 ;
|
|
--selection: #665c54 ;
|
|
--foreground: #ebdbb2 ;
|
|
--cyan: #83a598 ;
|
|
--orange: #fe8019;
|
|
--green: #98971a ;
|
|
--pink: #d3869b ;
|
|
--purple: #b16286 ;
|
|
--red: #cc241d ;
|
|
--yellow: #F1FA8C; }
|
|
|
|
@font-face {
|
|
font-family: 'Mononoki';
|
|
src: url("../fonts/mononoki-Regular.eot");
|
|
src: url("../fonts/mononoki-Regular.eot") format("embedded-opentype"), url("../fonts/mononoki-Regular.ttf") format("truetype"), url("../fonts/mononoki-Regular.woff2") format("woff2"), url("../fonts/mononoki-Regular.woff") format("woff"); }
|
|
|
|
@font-face {
|
|
font-family: 'Mononoki Bold';
|
|
src: url("../fonts/mononoki-Bold.eot");
|
|
src: url("../fonts/mononoki-Bold.eot") format("embedded-opentype"), url("../fonts/mononoki-Bold.ttf") format("truetype"), url("../fonts/mononoki-Bold.woff2") format("woff2"), url("../fonts/mononoki-Bold.woff") format("woff"); }
|
|
|
|
@font-face {
|
|
font-family: 'Mononoki';
|
|
src: url("../fonts/mononoki-Regular.eot");
|
|
src: url("../fonts/mononoki-Regular.eot") format("embedded-opentype"), url("../fonts/mononoki-Regular.ttf") format("truetype"), url("../fonts/mononoki-Regular.woff2") format("woff2"), url("../fonts/mononoki-Regular.woff") format("woff"); }
|
|
|
|
@font-face {
|
|
font-family: 'Twemoji';
|
|
src: url("../fonts/Twemoji.ttf") format("truetype"); }
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: 'Mononoki', 'Ubuntu', 'Twemoji' sans-serif;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
box-shadow: 0px -30px 20px rgba(0, 0, 0, 0.5);
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
padding: 10px 0; }
|
|
|
|
a, .link {
|
|
transition: 0.3s;
|
|
color: var(--cyan);
|
|
text-decoration: none; }
|
|
a:hover, a:focus, .link:hover, .link:focus {
|
|
color: var(--pink); }
|
|
|
|
@media (min-width: 1000px) {
|
|
box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34); }
|
|
|
|
.h1 {
|
|
font-family: 'Mononoki Bold', 'Fira Code SemiBold', 'Twemoji';
|
|
font-size: 2em; }
|
|
|
|
p code, quote code, q code {
|
|
font-family: "Mononoki", "Twemoji", monospace;
|
|
background: var(--selection);
|
|
color: var(--cyan);
|
|
border-radius: 3px;
|
|
padding: 0 6px; }
|
|
|
|
img {
|
|
width: 100%; }
|
|
|
|
.logo--wrapper {
|
|
display: grid;
|
|
font-family: Mononoki, 'Fira Code',monospace, Ubuntu; }
|
|
|
|
.logo-quote {
|
|
text-align: center;
|
|
color: var(--foreground);
|
|
margin: 10px auto 28px;
|
|
max-width: 300px; }
|
|
|
|
.logo {
|
|
margin: 0 auto;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-content: center;
|
|
font-family: Mononoki, 'Fira Code',monospace, Ubuntu; }
|
|
|
|
.toilet-logo {
|
|
color: var(--orange);
|
|
font-size: 0.9em;
|
|
line-height: 1.115em;
|
|
margin: 0;
|
|
font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
|
|
white-space: pre-line; }
|
|
|
|
.not-found {
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
line-height: 28px;
|
|
color: var(--selection);
|
|
tansition: 0.3s; }
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.not-found {
|
|
font-size: 14px;
|
|
line-height: 14px; } }
|
|
|
|
.page-list {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 400px;
|
|
margin: 0 auto;
|
|
font-family: Mononoki;
|
|
padding: 0; }
|
|
|
|
.page-link {
|
|
font-size: 0.4em;
|
|
line-height: 1.115em;
|
|
transition: 0.3s;
|
|
margin: 0px 10px; }
|
|
.page-link a {
|
|
color: var(--green);
|
|
text-decoration: none;
|
|
display: block; }
|
|
.page-link a:hover, .page-link a:focus {
|
|
color: var(--pink); }
|
|
|
|
@media screen and (max-width: 420px) {
|
|
.page-link {
|
|
line-height: 1.112em;
|
|
white-space: pre-line;
|
|
margin-bottom: 5px; }
|
|
.page-list {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: auto; }
|
|
.toilet-logo {
|
|
font-size: 0.6em; } }
|
|
|
|
.recent {
|
|
margin: 0 auto; }
|
|
|
|
.recent-header {
|
|
text-align: center; }
|
|
|
|
.recent-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
.recent-block {
|
|
text-decoration: none;
|
|
font-family: "Mononoki", "Twemoji", monospace;
|
|
font-size: 1.3em;
|
|
box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34);
|
|
background: var(--background);
|
|
border-radius: 10px;
|
|
word-break: break-word;
|
|
display: block;
|
|
align-items: center;
|
|
align-content: center;
|
|
margin: 20px 0;
|
|
padding: 10px 20px;
|
|
width: max-content;
|
|
max-width: 80vw;
|
|
color: var(--cyan);
|
|
transition: 0.2s; }
|
|
.recent-block--left {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
margin-right: auto; }
|
|
.recent-block--left::before {
|
|
content: '📜';
|
|
margin: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center; }
|
|
.recent-block--left:hover, .recent-block--left:focus {
|
|
padding-left: 40px; }
|
|
.recent-block--left:active {
|
|
padding-left: 0; }
|
|
.recent-block--right {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
margin-left: auto; }
|
|
.recent-block--right::after {
|
|
content: url("../../../src/svg/github-icon.svg");
|
|
margin: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center; }
|
|
.recent-block--right:hover, .recent-block--right:focus {
|
|
padding-right: 40px; }
|
|
.recent-block--right:active {
|
|
padding-right: 0; }
|
|
|
|
.recent-block__time {
|
|
float: right;
|
|
font-size: 12px;
|
|
color: var(--purple); }
|
|
|
|
.contacts {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
margin: 0 auto; }
|
|
|
|
.contact-link {
|
|
text-decoration: none;
|
|
font-size: 0.3em;
|
|
color: var(--cyan);
|
|
line-height: 0.8em;
|
|
margin: 10px 15px;
|
|
display: block; }
|
|
|
|
.copyright {
|
|
font-family: "Mononoki", "Twemoji", monospace;
|
|
margin-left: 20px; }
|
|
|
|
.portfolio {
|
|
list-style: none;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: center; }
|
|
|
|
.project {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 26px;
|
|
box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34);
|
|
border-radius: 10px;
|
|
background: var(--background);
|
|
font-family: "Mononoki", "Twemoji", monospace;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
max-width: 70vw;
|
|
transition: 0.3s; }
|
|
.project:hover, .project:focus {
|
|
box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.6); }
|
|
.project h2 {
|
|
margin-bottom: 0; }
|
|
|
|
.project-name {
|
|
color: var(--green);
|
|
margin: 0; }
|
|
.project-name a {
|
|
color: var(--green);
|
|
text-decoration: none; }
|
|
|
|
.project-gallery {
|
|
list-style: none;
|
|
padding: 0; }
|
|
|
|
.project-links {
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around; }
|
|
|
|
.project-icon {
|
|
width: 35px;
|
|
height: auto;
|
|
margin-right: 10px; }
|
|
|
|
.project-link {
|
|
margin-right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
vertical-align: center; }
|
|
.project-link::before {
|
|
margin-right: 10px; }
|
|
.project-link--github::before {
|
|
content: url("./github-icon.svg"); }
|
|
.project-link--iphone::before {
|
|
content: url("./appstore.svg"); }
|
|
.project-link--android::before {
|
|
content: url("./googleplay.svg"); }
|
|
.project-link--app-page::before {
|
|
content: url("./app-page.svg"); }
|
|
|
|
.project-link__logo {
|
|
margin-right: 10px;
|
|
width: 30px; }
|
|
|
|
.blog-posts {
|
|
list-style: none;
|
|
padding: 0;
|
|
font-family: 'Cuprum', sans-serif;
|
|
transition: 0.5s; }
|
|
|
|
.blog-posts__item {
|
|
font-family: 'Cuprum', sans-serif;
|
|
color: var(--foreground); }
|
|
.blog-posts__item::before, .blog-posts__item::after {
|
|
content: '' !important; }
|
|
.blog-posts__item--right p {
|
|
text-align: right; }
|
|
.blog-posts__item--right ul {
|
|
flex-direction: row-reverse; }
|
|
.blog-posts__item--left {
|
|
text-align: left; }
|
|
|
|
.nothing {
|
|
font-family: 'Mononoki Bold', monospace;
|
|
text-align: center; }
|
|
|
|
.blog-post__header {
|
|
color: var(--green); }
|
|
.blog-post__header a {
|
|
color: var(--green); }
|
|
|
|
.blog-info__list {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex; }
|
|
|
|
.blog-info__item {
|
|
margin-right: 20px;
|
|
color: var(--orange);
|
|
display: flex;
|
|
align-items: center; }
|
|
.blog-info__item--created::before {
|
|
content: url("../../svg/watch.svg");
|
|
margin-right: 10px; }
|
|
.blog-info__item--reading-time::before {
|
|
content: url("../../svg/stopwatch.svg");
|
|
margin-right: 10px; }
|
|
|
|
.blog-header {
|
|
color: var(--green);
|
|
font-family: "Mononoki Bold", "Twitter Color Emoji", "Twemoji", sans-serif;
|
|
font-size: 2em;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: 32px; }
|
|
|
|
.blog-post {
|
|
padding: 0px 30px;
|
|
font-size: 22px;
|
|
font-family: Ubuntu; }
|
|
.blog-post time {
|
|
font-family: "Cuprum", "Mononoki", "Twemoji", monospace;
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
font-size: 0.9em; }
|