personal-site/public/css/basic.min.1c7d0df3f4d862d66...

1 line
6.2 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:0 -30px 20px rgba(0,0,0,.5);border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:10px 0}a,.link{transition:.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; }}