|
@@ -0,0 +1,213 @@
|
|
|
|
+/* global base styles */
|
|
|
|
+@layer base {
|
|
|
|
+ html,
|
|
|
|
+ body{
|
|
|
|
+ background-color: #b19fb3;
|
|
|
|
+ @apply h-screen
|
|
|
|
+ }
|
|
|
|
+ a{
|
|
|
|
+ @apply text-purple-400 font-semibold underline;
|
|
|
|
+ }
|
|
|
|
+ a[rel] {
|
|
|
|
+ @apply whitespace-nowrap;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ h1,
|
|
|
|
+ h2,
|
|
|
|
+ h3,
|
|
|
|
+ h4,
|
|
|
|
+ h5,
|
|
|
|
+ h6,
|
|
|
|
+ #site-title {
|
|
|
|
+ @apply font-bold font-mono;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ h1 {
|
|
|
|
+ @apply text-3xl;
|
|
|
|
+ }
|
|
|
|
+ h2 {
|
|
|
|
+ @apply text-2xl;
|
|
|
|
+ }
|
|
|
|
+ h3 {
|
|
|
|
+ @apply text-xl;
|
|
|
|
+ }
|
|
|
|
+ h4 {
|
|
|
|
+ @apply text-lg;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ textarea {
|
|
|
|
+ @apply w-full h-24 p-2 bg-white border border-gray-400 rounded;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ol {
|
|
|
|
+ @apply list-decimal list-inside;
|
|
|
|
+ }
|
|
|
|
+ ul {
|
|
|
|
+ @apply list-disc list-inside;
|
|
|
|
+ }
|
|
|
|
+ li > ol,
|
|
|
|
+ li > ul {
|
|
|
|
+ @apply pl-4;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ pre {
|
|
|
|
+ @apply w-full my-2 p-2 bg-gray-50 rounded;
|
|
|
|
+ }
|
|
|
|
+ code {
|
|
|
|
+ @apply inline-block px-1 bg-gray-50 rounded-sm;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ hr {
|
|
|
|
+ @apply w-full border-gray-700 mt-4 mb-2;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .form {
|
|
|
|
+ /* filler */
|
|
|
|
+ }
|
|
|
|
+ .form label {
|
|
|
|
+ @apply block text-lg font-semibold;
|
|
|
|
+ }
|
|
|
|
+ .form label .desc {
|
|
|
|
+ @apply text-xs lowercase;
|
|
|
|
+ }
|
|
|
|
+ .form label .desc::before {
|
|
|
|
+ content: "(";
|
|
|
|
+ }
|
|
|
|
+ .form label .desc::after {
|
|
|
|
+ content: ")";
|
|
|
|
+ }
|
|
|
|
+ .form input,
|
|
|
|
+ .form select {
|
|
|
|
+ @apply inline-block w-full max-w-screen-lg border border-gray-400 rounded;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .form .input-prefix {
|
|
|
|
+ @apply flex w-full max-w-screen-lg border border-gray-400 rounded overflow-hidden;
|
|
|
|
+ }
|
|
|
|
+ .form .input-prefix::before {
|
|
|
|
+ @apply bg-gray-200 pl-2 pr-1;
|
|
|
|
+ content: attr(data-prefix);
|
|
|
|
+ }
|
|
|
|
+ .form .input-prefix input {
|
|
|
|
+ @apply border-none rounded-none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* tables */
|
|
|
|
+ table {
|
|
|
|
+ @apply w-full bg-purple-200 border-2;
|
|
|
|
+ }
|
|
|
|
+ table a {
|
|
|
|
+ @apply text-black;
|
|
|
|
+ }
|
|
|
|
+ table thead,
|
|
|
|
+ table tbody,
|
|
|
|
+ table thead tr,
|
|
|
|
+ table tbody tr {
|
|
|
|
+ @apply flex w-full;
|
|
|
|
+ }
|
|
|
|
+ table thead {
|
|
|
|
+ @apply bg-gray-100 border-b-2 border-black;
|
|
|
|
+ }
|
|
|
|
+ table thead th {
|
|
|
|
+ @apply text-left;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ table tbody {
|
|
|
|
+ @apply flex-col items-center justify-between overflow-y-auto max-h-80;
|
|
|
|
+ }
|
|
|
|
+ table thead tr *,
|
|
|
|
+ table tbody tr * {
|
|
|
|
+ @apply flex-1;
|
|
|
|
+ }
|
|
|
|
+ table tbody tr:nth-child(even){
|
|
|
|
+ @apply bg-purple-100;
|
|
|
|
+ }
|
|
|
|
+ table tbody tr{
|
|
|
|
+ @apply hover:bg-white;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ table thead th:first-child,
|
|
|
|
+ table tbody td:first-child {
|
|
|
|
+ @apply pl-2;
|
|
|
|
+ }
|
|
|
|
+ table thead th:last-child,
|
|
|
|
+ table tbody td:last-child {
|
|
|
|
+ @apply pr-2;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@layer components {
|
|
|
|
+ /* standard classes */
|
|
|
|
+ .btn {
|
|
|
|
+ @apply inline-block bg-white p-2 border border-black rounded text-black font-normal no-underline;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .panel {
|
|
|
|
+ @apply w-full my-2 border border-black p-2 rounded bg-gray-200 relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .fullscreen {
|
|
|
|
+ @apply block w-screen h-screen;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* wrap an image such that it is only minimally scaled to fit a desired area. */
|
|
|
|
+ /* actual size it left to be applied to the element. */
|
|
|
|
+ .image-wrapper {
|
|
|
|
+ @apply inline-block items-center justify-items-center overflow-hidden;
|
|
|
|
+ }
|
|
|
|
+ .image-wrapper img {
|
|
|
|
+ @apply w-full h-full object-cover;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* Navbar styles */
|
|
|
|
+ #sidebar
|
|
|
|
+ {
|
|
|
|
+ @apply w-screen xl:w-1/6 lg:max-w-xs bg-pink-500 border-r border-black;
|
|
|
|
+ background-image: linear-gradient(to bottom, rgba(123,100,127,0) 0%, rgba(123,100,127,0.25) 5%, rgba(123,100,127,0.75) 25%, rgba(123,100,127,1) 90%), url("/imgs/hex_500_1000_10.png");
|
|
|
|
+ }
|
|
|
|
+ #sidebar h1,
|
|
|
|
+ #sidebar div,
|
|
|
|
+ #sidebar p {
|
|
|
|
+ @apply mx-auto my-4 px-6 py-4 bg-opacity-50 bg-white rounded text-center;
|
|
|
|
+ }
|
|
|
|
+ #sidebar h1 {
|
|
|
|
+ @apply w-max bg-opacity-70;
|
|
|
|
+ }
|
|
|
|
+ #sidebar p,
|
|
|
|
+ #sidebar div {
|
|
|
|
+ @apply mx-8;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #sidebar #site-title {
|
|
|
|
+ @apply text-3xl;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #nav {
|
|
|
|
+ @apply flex justify-around;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #nav a {
|
|
|
|
+ @apply text-black;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* Blog */
|
|
|
|
+ .blog-post {
|
|
|
|
+ @apply w-full md:w-3/4 xl:w-1/2 max-w-3xl mx-auto;
|
|
|
|
+ }
|
|
|
|
+ .blog-post--body {
|
|
|
|
+ @apply px-2;
|
|
|
|
+ }
|
|
|
|
+ .blog-post--body h2 {
|
|
|
|
+ @apply mt-4;
|
|
|
|
+ }
|
|
|
|
+ .blog-post--body p {
|
|
|
|
+ @apply my-2;
|
|
|
|
+ }
|
|
|
|
+ .blog-post--body blockquote {
|
|
|
|
+ @apply pl-2 border-l-8 border-gray-600 italic;
|
|
|
|
+ }
|
|
|
|
+ .blog-post--footer {
|
|
|
|
+ @apply mt-8 p-2 font-mono text-sm border-t border-black;
|
|
|
|
+ }
|
|
|
|
+}
|