@tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: "hack"; font-weight: normal; font-style: normal; src: url(font/hack.eot); src: url("font/hack.eot?#iefix") format("embedded-opentype"), url(font/hack.woff2) format("woff2"), url(font/hack.woff) format("woff"); } * { font-family: Hack, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } body { @apply bg-grey; display: block; display: linline; } .pixelated { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } .shown { @apply !visible !block; margin-top: 72px; transition: all ease-in 1s; } .text-xxs { font-size: 0.5rem; } .revealed { @apply !visible; } .floatLeft, p.floatLeft { @apply !float-left inline-flex px-1; } .floatRight, p.floatRight { @apply !float-right inline-flex px-1; } center { @apply block text-center mx-auto; } .art.title, .code.title, .entertainment.title, .lab.title, .notes.title, .random.title, .uncategorized.title { @apply text-snow; } .code a, .code h2, .code h3, .code h2 a, .code h3 a, .code.nf-md-folder_multiple, .code.title:hover { @apply text-lime; } .code a:hover, .code h2 a:hover, .code h3 a:hover, .code.nf-md-folder_multiple:hover, .code.title:hover:hover { @apply text-green; } .lab a, .lab h2, .lab h3, .lab h2 a, .lab h3 a, .lab.nf-md-folder_multiple, .lab.title:hover { @apply text-purp; } .lab a:hover, .lab h2 a:hover, .lab h3 a:hover, .lab.nf-md-folder_multiple:hover, .lab.title:hover:hover { @apply text-lavender; } .art a, .art h2, .art h3, .art h2 a, .art h3 a, .art.nf-md-folder_multiple, .art.title:hover { @apply text-mainlyblue; } .art a:hover, .art h2 a:hover, .art h3 a:hover, .art.nf-md-folder_multiple:hover, .art.title:hover:hover { @apply text-blue; } .entertainment a, .entertainment h2, .entertainment h3, .entertainment h2 a, .entertainment h3 a, .entertainment.nf-md-folder_multiple, .entertainment.title:hover { @apply text-crimson; } .entertainment a:hover, .entertainment h2 a:hover, .entertainment h3 a:hover, .entertainment.nf-md-folder_multiple:hover, .entertainment.title:hover:hover { @apply text-red; } .random a, .random h2, .random h3, .random h2 a, .random h3 a, .random.nf-md-folder_multiple, .random.title:hover { @apply text-pumpkin; } .random a:hover, .random h2 a:hover, .random h3 a:hover, .random.nf-md-folder_multiple:hover, .random.title:hover:hover { @apply text-orange; } .notes a, .notes h2, .notes h3, .notes h2 a, .notes h3 a, .notes.nf-md-folder_multiple, .notes.title:hover { @apply text-skyblue; } .notes a:hover, .notes h2 a:hover, .notes h3 a:hover, .notes.nf-md-folder_multiple:hover, .notes.title:hover:hover { @apply text-slate; } .uncategorized a, .uncategorized a:hover, .uncategorized h2, .uncategorized h3, .uncategorized h2 a, .uncategorized h2 a:hover, .uncategorized h3 a, .uncategorized h3 a:hover, .uncategorized.title:hover .uncategorized.nf-md-folder_multiple, .uncategorized.title:hover .uncategorized.nf-md-folder_multiple:hover { @apply text-fog; } .uncategorized p a { border-bottom: 1px solid #000; } .admin { width: 100% !important; } header { nav { background: #111 url(img/nav-bg-lil.png); background-position: center center; background-size: 120% auto; min-height: 74px; overflow: auto; @apply pixelated border-b-2 border-b-white border-solid; #menu { @apply block float-right mr-8 text-5xl pt-3 text-white clear-both; } #linx { @apply h-fit list-none z-50 hidden border-t-2 border-solid border-t-white; li { @apply p-2 block text-left bg-grey; a { @apply text-white p-2 text-xl; width: 100%; display: block; i, b { @apply mr-4 inline-block clear-none; } i { @apply text-xl; } b { @apply font-normal text-base; } } } li.selected { @apply bg-blue; a { @apply text-midnight; } } } #logo a { @apply pixelated; display: block; position: absolute; top: 0; background: url(img/xero-graff-alt-lil.png) top center no-repeat; width: 197px; height: 86px; z-index: 99; font-size: 0; text-indent: 100%; white-space: nowrap; overflow: visible; } } } #loading { @apply fixed block p-3 ml-8; background: #222 url(img/hash.png); pointer-events: none; z-index: 999; top: 10px; h1, img { @apply float-left; } h1 { @apply pt-6 pl-2 text-lime text-xl font-bold; } } #main { @apply m-1 px-2 py-10 bg-grey text-white flex flex-wrap z-20; #content { @apply flex flex-col basis-full; article { header { @apply mb-2 pb-3; background: url(img/hash.png); h2 { @apply text-xl w-full bg-grey; } h3 { @apply text-lg w-full bg-grey pb-1; } } p { @apply text-sm my-4; } img { width: 0; min-width: 100%; } video, iframe, pre, code { @apply my-2; max-width: 380px; max-height: auto; } h3.read { @apply text-lg p-4; } h1, h2 { @apply text-xl; } h3 { @apply text-lg; } pre, code { @apply bg-black p-3 my-4 overflow-auto text-sm; page-break-inside: avoid; max-width: 380px !important; line-height: 1.4; } pre > code, code > pre { @apply !p-0; } kbd { @apply bg-black py-1 px-2 overflow-auto; } ul { list-style-type: square; margin: 15px 0 15px 20px; } blockquote { @apply m-0 p-1.5; } blockquote p { @apply bg-black text-white inline-block p-2.5 m-0 text-base; } blockquote cite { @apply block text-base text-fog; padding: 5px 0 0px 40px; background-image: url(img/arrow-dark-half.png); background-repeat: no-repeat; background-position: 20px 0; min-height: 20px; } blockquote cite:before { content: ""; } form section { @apply mb-6; } select, textarea, input[type="text"], input[type="date"] { @apply bg-black text-snow border-midnight border-2 rounded-none p-4 w-full my-2; } select { @apply p-5 text-lg; } #excerpt { height: 300px; } #content { height: 400px; } label { @apply text-mainlyblue font-bold text-lg my-4 w-full; } button { @apply bg-black text-snow border-midnight border-2 rounded-none p-4 mb-6 ml-4 float-right; } button.tag, button.cat { @apply bg-black text-snow border-midnight border-2 rounded-none p-2 my-2 mr-2 float-left; } button.tag::after { content: "\f0910"; @apply text-red px-2; } button.cat::after { @apply text-red px-2; content: "\f0258"; } nav { button { @apply float-left; } button.cat::before { @apply text-blue px-2; content: "\f0770"; } button.tag::before { content: "\f1224"; @apply text-blue px-2; } button.cat::after, button.tag::after { content: "" !important; } } input[type="checkbox"] { @apply inline-block p-2 m-1 bg-black border-midnight float-left; } input:is(:focus:invalid), textarea:is(:focus:invalid) { @apply border-crimson; } input:read-only { @apply bg-charcoal text-fog border-black; } legend { @apply inline-block p-1 italic text-fog float-left; } form:is(:invalid):focus-within callout { @apply font-bold text-crimson italic text-base py-3 px-4 mx-1 !visible; text-shadow: 2px 3px #111; } form:is(:valid):focus-within callout, form:not(:focus-within) callout { @apply !invisible !hidden; } footer.meta { @apply text-xs text-white mt-0 mb-6 mr-0 ml-0 inline-block w-full bg-transparent bg-no-repeat overflow-hidden; background-image: url(img/arrow-dark.png); background-position: 19px 9px; .date, .info { @apply inline float-left bg-black px-2 py-3 border-b-2 border-grey border-solid; } .date a, .date a:visited, .info a, .info a:visited { @apply text-snow decoration-0 border-b-0; } .date a:hover, .info a:hover { @apply border-b-2 border-blue border-solid; } .date { @apply text-center pb-2 border-r-grey border-r-2 border-solid; .day { @apply block text-xxs leading-3 font-medium; } .month { @apply block text-xxs leading-3 font-normal uppercase text-snow; } .year { @apply block text-xxs leading-3 font-normal uppercase text-snow; } } .info { @apply leading-4 text-fog text-xxs; } .info .nf { @apply text-white mr-2 text-xs align-bottom; } } } .pagination { @apply w-full bg-repeat mb-20; background: url(img/hash.png); ul { @apply list-none w-full text-center p-2; li { @apply inline-block bg-transparent my-1; a { @apply text-snow bg-grey px-2 py-1 text-sm; } } li.selected { @apply bg-blue; a { @apply bg-blue text-midnight font-bold; } } } } } aside { @apply flex flex-col basis-full; h3 { background: url(img/hash.png); @apply mt-5 text-snow; em { @apply font-extrabold text-xl bg-grey not-italic py-5 pl-0 pr-3 text-white; } } ul.admin { li { @apply my-2 py-2; a { @apply text-xl text-snow; i { @apply text-mainlyblue; } } } } .tags, .feeds { @apply px-1; } ul.tags { @apply list-none text-justify align-middle m-0 p-0 text-base leading-relaxed; li { @apply inline; } li a:hover, li.highlight { @apply border-b-mainlyblue border-b; } li a { @apply whitespace-nowrap no-underline text-white; } } .cats { @apply pt-2 text-xs; i { @apply inline-block mr-1; } .title { @apply inline-block font-bold; } ul { @apply mb-1; li { @apply pl-2; } } } .feeds { article { @apply float-left text-left p-2; } .ico { @apply pr-0; i { @apply mr-2 text-3xl text-fog align-bottom; } a { @apply text-xl text-snow; } } .list { @apply pl-0; } } } } footer { @apply flex flex-row m-0 px-2 py-4 bg-black; #cc { @apply float-left basis-3/4 text-white ml-8 text-sm; i { @apply text-xl text-mainlyblue align-middle; } em { @apply italic text-xs text-fog pb-0.5; } a { @apply ml-0; } #metroid { @apply hidden; } #metroid-larva { @apply inline-block; } } nav { @apply basis-1/4 !bg-transparent; ul { @apply !float-right !list-none mr-4; li { @apply !float-left; a { @apply transition-colors text-white inline-block text-xl !mx-2; &:hover, &:selected { @apply text-blue; } } } } } } @media (min-width: 500px) { #main { #content { article { img, video, iframe, code, pre { max-width: 550px !important; } } } } } @media (min-width: 600px) { #main { #content { article { img, video, iframe, code, pre { @apply text-sm; max-width: 740px !important; } } } } } @media (min-width: 768px) { header { nav { background: #111 url(img/nav-bg.png) center -20px !important; height: 132px; @apply !bg-cover; } #menu { @apply !invisible !hidden; } #linx { @apply !float-right !visible !block mr-2; border-top: none !important; li { @apply !float-left !bg-transparent !text-left !p-1; height: 130px; a { @apply !h-full !pt-6 !block; i, b { @apply !mx-1 !clear-both !block; } i { @apply !text-xl; } b { @apply !text-base; } .nf-fa-user { @apply pl-4; } .nf-fa-book { @apply pl-3; } .nf-fa-code { @apply pl-3; } .nf-fa-camera { @apply pl-3; } .nf-fa-flask { @apply pl-2; } .nf-seti-font { @apply pl-4; } .nf-fa-bolt { @apply pl-2; } } } li.selected { @apply !bg-blue; a { @apply !text-midnight; } } } #logo a { background: url(img/xero-graff-alt.png) top center no-repeat !important; width: 394px !important; height: 172px !important; margin-left: 30px !important; } } #main { @apply !m-6 !px-2 !py-10; #content { @apply !flex-col !basis-2/3; margin: 0 auto; article { img, video, iframem code, pre { max-width: 590px !important; } h2 { @apply !text-2xl; } h3 { @apply !text-xl; } p { @apply !text-base my-5; } h3.read { @apply !text-xl; } footer.meta { background-position: 19px 9px; .info { @apply text-xs; } .info .nf { @apply text-sm; } } } .pagination { @apply mb-0; a { @apply !text-base; } } } aside { margin: 0 auto; max-width: 400px; @apply !flex-col !basis-1/3 !px-6 !my-0; @apply !float-right; } } footer { #cc, nav { @apply basis-1/2; } #cc { @apply !text-base; #metroid { @apply !inline-block; } #metroid-larva { @apply !hidden; } } nav { a, #git, #rss { @apply !text-2xl !mx-4; } } } } @media (min-width: 1024px) { header { #linx { margin-right: 3%; li { a { i { @apply !text-3xl; } b { @apply !text-xl; } .nf-fa-user { @apply pl-5; } .nf-fa-book { @apply pl-3; } .nf-fa-code { @apply pl-4; } .nf-fa-camera { @apply pl-3; } .nf-fa-flask { @apply pl-2; } .nf-seti-font { @apply pl-5; } .nf-fa-bolt { @apply pl-2; } } } } #logo a { background: url(img/xero-graff-alt.png) top center no-repeat !important; width: 394px !important; height: 172px !important; margin-left: 5% !important; } } #main { @apply !m-6 !px-2 !py-10; #content { @apply !flex-col !basis-2/3; article { img, video, iframe, code, pre { @apply text-base; max-width: 100% !important; } h2 { @apply !text-3xl; } h3 { @apply !text-2xl; } p { @apply !text-base my-5; } h3.read { @apply !text-xl; } footer.meta { @apply !text-xs; background-position: 24px 9px; .date { @apply !text-center !pb-2; .day, .month, .year { @apply !block !text-xs leading-3; } } .info { @apply leading-5 py-2; } } } } } footer { #cc, nav { @apply basis-1/2; } #cc { @apply !text-lg; #metroid { @apply !inline-block; } #metroid-larva { @apply !hidden; } } nav { a, #git, #rss { @apply !text-2xl; } } } } /* section layout overrides */ #blog { header { nav { background-image: url(img/nav-bg-lil.png) !important; overflow: auto; #logo a { background-image: url(img/xero-graff-alt-lil.png) !important; } #linx { li.selected { @apply bg-blue; } } } } } #code { background: #bcbcbc; #main, #content { background: #bcbcbc; } header { nav { background-image: url(img/nav-bg-lil4.png) !important; overflow: auto; border-bottom: 2px solid #fff; #logo a { background-image: url(img/xero-graff-alt-lil4.png) !important; } #linx { li.selected { @apply bg-skyblue; } } } } } #lab { @apply bg-midnight; h1, h2, h3, h4, h5 { @apply text-red mt-6; i { @apply text-lavender ml-2.5 align-bottom; } i:hover { @apply text-purp; } } #main, #content { @apply bg-midnight; } #glitch { display: block; } #burger { width: 114px; height: 160px; float: left; } #codez { float: left; width: 220px; height: 160px; } header { nav { background-image: url(img/nav-bg-lil3.png) !important; overflow: auto; #logo a { background-image: url(img/xero-graff-alt-lil3.png) !important; } #linx { li.selected { @apply !bg-red; } } } } footer #cc i { @apply text-lime; } } #whois { header { nav { background-image: url(img/nav-bg-lil6.png) !important; overflow: auto; #logo a { background-image: url(img/xero-graff-alt-lil6.png) !important; } #linx { li { &.selected { @apply !bg-lime; i, b { @apply drop-shadow-none; } } i, b { @apply drop-shadow-sm; filter: drop-shadow(1px 2px 0px #111); } } } } } main { aside { @apply inline-block float-right; width: 40%; height: 40%; float: right; margin: 0px 0px 5px 10px; img { width: 100%; } } #age { @apply !not-italic; } h1, h2, h3, h6 { @apply !text-lime clear-both; } h5 { @apply !text-crimson my-5; } a { @apply !text-green; } a:hover { @apply !text-lime; } a.strikeout { text-decoration: line-through; color: #bcbcbc; } a.strikeout:hover { color: #d0d0d0; } a.vim { @apply !text-crimson; } a.vim:hover { color: #ff6a6a; } ul { list-style-type: none; } .nf { @apply mr-3; color: #fff; } #contact { .nf-md-at { @apply text-white ml-0.5 mr-1; } em { @apply not-italic; color: #fff; } } #social { @apply inline-block clear-both; a { @apply inline-block float-left p-2; } img { @apply border-0; } } } footer #cc i { @apply text-green; } } #feeds { @apply bg-midnight; #main, #content { @apply bg-midnight; } h1, h2, h3, h4, h5 { color: #813db6; } header { nav { background-image: url(img/nav-bg-lil2.png) !important; overflow: auto; #logo a { background-image: url(img/xero-graff-alt-lil2.png) !important; } #linx { li.selected { background-color: #813db6 !important; } } } } } #error { header { nav { background-image: url(img/nav-bg-lil5.png) !important; overflow: auto; #logo a { background-image: url(img/xero-graff-alt-lil5.png) !important; } #linx { li.selected { @apply bg-crimson; } } } } } @media (min-width: 600px) { #lab { #burger { width: 186px; height: 255px; } #codez { width: 480px; height: 255px; } } } @media (min-width: 768px) { #blog { header { nav { background-image: url(img/nav-bg.png) !important; #logo a { background-image: url(img/xero-graff-alt.png) !important; } } } } #code { header { nav { background-image: url(img/nav-bg4.png) !important; #logo a { background-image: url(img/xero-graff-alt4.png) !important; } } } } #lab { #burger { width: 190px !important; height: 266px !important; } #codez { width: 366px !important; height: 266px !important; } header { nav { background-image: url(img/nav-bg3.png) !important; #logo a { background-image: url(img/xero-graff-alt3.png) !important; } } } } #whois { header { nav { background-image: url(img/nav-bg6.png) !important; #logo a { background-image: url(img/xero-graff-alt6.png) !important; } } } } #feeds { header { nav { background-image: url(img/nav-bg2.png) !important; #logo a { background-image: url(img/xero-graff-alt2.png) !important; } } } } #error { header { nav { background-image: url(img/nav-bg5.png) !important; #logo a { background-image: url(img/xero-graff-alt5.png) !important; } } } } } @media (min-width: 1024px) { #lab { #burger { width: 229px !important; height: 320px !important; } #codez { width: 440px !important; height: 320px !important; } } } /* limited nerd font icons */ .nf, .nerd-font, .nerd-fonts { padding: 0; border: 0; vertical-align: text-bottom; font-family: "hack"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 1.25em; transform: scale(1.25); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .nf-cod-mail:before { content: "\eb1c"; } .nf-fa-bolt:before { content: "\f0e7"; } .nf-fa-book:before { content: "\f02d"; } .nf-fa-camera:before { content: "\f030"; } .nf-fa-code:before { content: "\f121"; } .nf-fa-flask:before { content: "\f0c3"; } .nf-fa-git:before { content: "\f1d3"; } .nf-fa-key:before { content: "\f084"; } .nf-fa-rss:before { content: "\f09e"; } .nf-fa-user:before { content: "\f007"; } .nf-fa-warning:before { content: "\f071"; } .nf-fae-cc_cc:before { content: "\e291"; } .nf-md-at:before { content: "\f0065"; } .nf-md-coffin:before { content: "\f0b7f"; } .nf-md-content_save_edit_outline:before { content: "\f0cfc"; } .nf-md-data_matrix_scan:before { content: "\f1541"; } .nf-md-delete_forever_outline:before { content: "\f0b89"; } .nf-md-flask_plus:before { content: "\f1242"; } .nf-md-folder_multiple:before { content: "\f0253"; } .nf-md-git:before { content: "\f02a2"; } .nf-md-menu_open:before { content: "\f0bab"; } .nf-md-radioactive:before { content: "\f043c"; } .nf-md-rss:before { content: "\f046b"; } .nf-md-tag_multiple:before { content: "\f04fb"; } .nf-md-tag_text:before { content: "\f1224"; } .nf-seti-font:before { content: "\e659"; } .nf-seti-git:before { content: "\e65d"; }