phoenix-ausblick/assets/css/article.css

.main {
  @apply place-content-center;
}

.article {
  /* @apply pr-8 */
  max-width: 25rem;
}

.article span.tunit {
  @apply hover:bg-gray-300;
}

.dark .article span.tunit {
  @apply hover:bg-gray-700;
}

.article span.tunit[current="yes"] {
  @apply bg-amber-300 text-stone-700 hover:bg-amber-200 hover:text-red-900;
}

.dark .article span.tunit[current="yes"] {
  @apply bg-amber-500/70 text-white hover:bg-amber-500/70 hover:text-red-900;
}

.article.show_status span.tunit[status="untranslated"] {
  @apply text-red-900;
}

.dark .article.show_status span.tunit[status="untranslated"] {
  @apply text-red-500;
}

.dark .article.show_status span.tunit[status="passable"] {
  @apply text-amber-50;
}

.dark .article.show_status span.tunit[status="done"] {
  @apply text-green-100;
}

.article a.hide-link {
  display: none;
}

.article.show-boundary a.hide-link {
  display: inline;
}

.article.show-boundary a.show-link {
  display: none;
}

.article.show-boundary span + span.tunit::before {
  content: "🭱";
  color: brown;
  font-weight: bold;
  font-size: 130%;
  vertical-align: -2px;
}

.article h4 {
  @apply my-2 font-semibold text-lg leading-8 text-stone-800;
}

.dark .article h4 {
  @apply text-stone-300;
}

.article p, .article div {
  @apply text-justify;
}

.article p + p {
  @apply  indent-4;
}

.article blockquote {
  @apply px-4 py-2 text-sm;
}

.article a {
  @apply text-cyan-900;
}

.dark .article a {
  @apply text-cyan-700;
}

.article ul {
  @apply pl-6 list-disc my-2;
}

.article ol {
  @apply pl-8 list-decimal my-2;
}

.article li {
  @apply text-justify;
}

.article img {
    max-width: 100%;
    height: auto;
}

.article img + div, a + div {
  font-size: smaller;
  margin-bottom: 0.6ex;
}