@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Automatic headers numbering for blog articles
 * @see https://2ality.com/2012/01/numbering-headingshtml.html
 **/



/**
 * Blog layout
 **/

article h2 {
  @apply text-xl;
}
article h3 {
  @apply text-lg;
}

article h1,
article h2,
article h3,
article h4,
article h5 {
  @apply mt-4;
  @apply mb-2;
  @apply font-semibold;
  @apply leading-normal;
}

article p {
  @apply text-justify;
}

article li {
  @apply text-justify;
  @apply text-base;
}

article ul {
  @apply list-disc;
  @apply list-outside;
  @apply pl-5;
}

article a {
  @apply text-prussian-blue-300;
  @apply underline;
}

.code-block pre {
  @apply pl-4;
  @apply pr-4;
  @apply py-5;
  @apply my-0;
}
.code-block,
.code-block code {
  @apply rounded-xl;
  @apply overflow-x-auto;
  @apply bg-gray-800 !important;
  @apply text-white !important;
  @apply py-0;
  @apply pl-0;
  @apply pr-5;
}

.prose :where(code):not(:where([class~=not-prose]*))::before,
.prose :where(code):not(:where([class~=not-prose]*))::after {
  content: none;
}

p code,
li code,
td code {
  @apply text-prussian-blue-300;
  @apply font-mono;
  @apply font-semibold;
}

a code {
  @apply underline;
}

blockquote {
  @apply px-3 py-1;
}

ol {
  list-style: decimal;
  @apply pl-5;
}

 /**
  * Blog list
  **/

  .row-preview {
    width: 100%;
    max-height: 150px;
    position: relative;
    display: flex;
    flex-flow: column-reverse wrap;
    overflow: hidden;
  }
  
  .content-preview {
    max-height: 100%;
    overflow: hidden;
  }
  
  .background {
    width: 100%;
    height: 100px;
    position: relative;
  }
  
  .background:before {
    content: '';
    display: block;
    width: 100%;
    height: 100px;
    left: -100%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(transparent, white);
    pointer-events: none
  }

  
/** 
 * Responsive table 
 * @see https://tailwindcomponents.com/component/mobile-responsive-table
 */

@media (min-width: 1024px) {
  table {
    display: inline-table !important;
  }

  thead tr:not(:first-child) {
    display: none;
  }
}


article th {
  @apply bg-prussian-blue-600;
  @apply text-white;
}

article th,
article td {
  @apply border;
  @apply border-gray-100;
  @apply px-4;
  @apply py-2;
  @apply text-left;
}

article tr:nth-child(even),
article tr:nth-child(even) td {
  @apply bg-gray-100;
  @apply border-white;
}

article table {
  @apply w-full;
  @apply flex;
  @apply flex-row;
  @apply flex-nowrap;
  @apply rounded-lg;
  @apply overflow-hidden;
  @apply my-5;
}

article table thead tr {
  @apply flex;
  @apply flex-col;
  @apply flex-nowrap;
  @apply mb-2;
  @apply rounded-l-lg;
}

article tbody {
  @apply flex-1;
}
article tbody tr {
  @apply flex;
  @apply flex-col;
  @apply flex-nowrap;
  @apply mb-2;
}

article p img {
  margin: 0 auto;
}

@media (min-width: 1024px) {
  article table {
    @apply shadow-lg;
  }
  article table thead tr {
    @apply table-row;
    @apply rounded-none;
  }
  article tbody {
    @apply flex-none;
  }
  article tbody tr {
    @apply table-row;
  }
}
