src/ui/theme.css
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
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;
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,
video,
iframe {
@apply my-2;
max-width: 380px !important;
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;
page-break-inside: avoid;
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;
}
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;
}
}
}
.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;
i {
@apply inline-block mr-1;
}
.title {
@apply inline-block text-xs font-bold ml-1;
}
ul {
@apply text-xs mb-1;
li {
@apply pl-2;
}
}
}
.feeds {
article {
@apply float-left text-left p-2;
}
.ico {
@apply pr-0;
i {
@apply text-5xl 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-base mr-1 text-mainlyblue;
}
em {
@apply italic text-xs text-fog;
}
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 mx-2;
}
a:hover,
a:selected {
@apply text-blue;
}
}
}
}
}
@media (min-width: 500px) {
#main {
#content {
article {
img,
video,
iframe {
max-width: 550px !important;
}
}
}
}
}
@media (min-width: 600px) {
#main {
#content {
article {
img,
video,
iframe {
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;
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 !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-2;
}
.nf-fa-camera {
@apply pl-2;
}
.nf-fa-flask {
@apply pl-1;
}
.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;
}
}
#loading {
h1 {
@apply text-2xl;
}
}
#main {
@apply !m-6 !px-2 !py-10;
#content {
@apply !flex-col !basis-2/3;
margin-left: auto;
article {
max-width: 750px;
margin: 0 auto;
img,
video,
iframe {
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;
}
}
.pagination {
@apply mb-0;
a {
@apply !text-base;
}
}
}
aside {
margin-right: auto;
max-width: 400px;
@apply !flex-col !basis-1/3 !px-6 !my-0;
section {
@apply !float-right;
}
}
}
footer {
#cc,
nav {
@apply basis-1/2;
}
#cc {
@apply !text-base;
i {
@apply !text-lg;
}
#metroid {
@apply !inline-block;
}
#metroid-larva {
@apply !hidden;
}
}
nav {
a {
@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-4;
}
.nf-fa-book {
@apply pl-3;
}
.nf-fa-code {
@apply pl-2;
}
.nf-fa-camera {
@apply pl-2;
}
.nf-fa-flask {
@apply pl-1;
}
.nf-seti-font {
@apply pl-4;
}
.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;
}
}
#loading {
h1 {
@apply text-3xl;
}
}
#main {
@apply !m-6 !px-2 !py-10;
#content {
@apply !flex-col !basis-2/3;
article {
img,
video,
iframe {
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 !text-xs leading-5 py-2;
}
}
}
}
}
footer {
#cc,
nav {
@apply basis-1/2;
}
#cc {
@apply !text-lg;
i {
@apply !text-xl;
}
#metroid {
@apply !inline-block;
}
#metroid-larva {
@apply !hidden;
}
}
nav {
a {
@apply !text-2xl;
}
}
}
}
