1 line
6.2 KiB
CSS
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 { fon
|