292 lines
7 KiB
CSS
292 lines
7 KiB
CSS
|
@charset "UTF-8";
|
||
|
|
:root {
|
||
|
|
--background: #282A36 ;
|
||
|
|
--comment: #6272A4 ;
|
||
|
|
--selection: #44475A ;
|
||
|
|
--foreground: #F8F8F2 ;
|
||
|
|
--cyan: #8BE9FD ;
|
||
|
|
--orange: #FFB86C;
|
||
|
|
--green: #50FA7B ;
|
||
|
|
--pink: #FF79C6 ;
|
||
|
|
--purple: #BD93F9 ;
|
||
|
|
--red: #FF5555 ;
|
||
|
|
--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"); }
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: var(--background);
|
||
|
|
color: var(--foreground);
|
||
|
|
font-family: 'Ubuntu', 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';
|
||
|
|
font-size: 2em; }
|
||
|
|
|
||
|
|
.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; }
|
||
|
|
|
||
|
|
.page-list {
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 300px;
|
||
|
|
margin: 0 auto;
|
||
|
|
font-family: Mononoki;
|
||
|
|
padding: 0; }
|
||
|
|
|
||
|
|
.page-link {
|
||
|
|
font-size: 0.4em;
|
||
|
|
line-height: 1.115em;
|
||
|
|
width: 100px;
|
||
|
|
transition: 0.3s; }
|
||
|
|
.page-link a {
|
||
|
|
color: var(--green);
|
||
|
|
text-decoration: none;
|
||
|
|
display: block; }
|
||
|
|
.page-link a:hover, .page-link a:focus {
|
||
|
|
color: var(--pink); }
|
||
|
|
|
||
|
|
.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, 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", 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", monospace;
|
||
|
|
text-align: center;
|
||
|
|
margin: 20px 0;
|
||
|
|
max-width: 70vw;
|
||
|
|
transition: 0.3s; }
|
||
|
|
.project:hover, .project:focus {
|
||
|
|
box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.5); }
|
||
|
|
|
||
|
|
.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-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("../../svg/github-icon.svg"); }
|
||
|
|
.project-link--iphone::before {
|
||
|
|
content: url("../../svg/appstore.svg"); }
|
||
|
|
.project-link--android::before {
|
||
|
|
content: url("../../svg/googleplay.svg"); }
|
||
|
|
.project-link--app-page::before {
|
||
|
|
content: url("../../svg/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; }
|