Yuika/assets/css/styles.css

@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');

@tailwind base;

/* 1. Base Styling */
html {
  @apply font-sans;
}
header {
  @apply py-4 px-4;
}
/* 2. Site Header */
.index-navbar {
  z-index: 10;
  @apply transition-bg;
}
.index-navbar header {
  background-color: transparent;
}
.index-header {
  min-height: 300px;
  height: 50vh;
}

.no-image {
  @apply bg-yuika-blue-500
}

/* 3. Content Styling */
#post p {
  @apply my-3;
}
#post h1 {
  @apply my-4 text-4xl font-light;
}
#post h2 {
  @apply my-4 text-3xl font-light;
}
#post h3 {
  @apply my-4 text-2xl font-light;
}
#post h4 {
  @apply my-4 text-xl font-light;
}
#post h5 {
  @apply my-4 text-lg font-light;
}
#post h6 {
  @apply my-4 text-base font-light;
}
#post a {
  @apply text-yuika-blue-700;
}
#post ul {
  @apply list-disc;
}
#post ol {
  @apply list-decimal;
}
#post code {
  @apply bg-gray-200 text-yuika-blue-700;
}
#post blockquote {
  @apply border-l-4 border-yuika-blue-700 pl-8;
}
#post pre {
  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 border border-yuika-blue-500;
}
#post .kg-card {
  @apply py-4 flex flex-col items-center object-contain my-4 mx-0;
}
#post .kg-card .kg-image {
  @apply w-full;
}
#post .kg-width-wide .kg-image {
  min-width: 100vw;
}
@screen md {
  #post .kg-width-wide .kg-image {
    min-width: 115%;
  }
}
@screen lg {
  #post .kg-width-wide .kg-image {
    min-width: 125%;
  }
}
@screen xl {
  #post .kg-width-wide .kg-image {
    min-width: 140%;
  }
}

#post .kg-width-full .kg-image {
  min-width: 100vw;
}
#post .kg-card figcaption {
  @apply text-sm text-gray-800 mt-2;
}

#post .kg-gallery-container {

}
#post .kg-gallery-row {
  @apply flex flex-row;
}
#post .kg-gallery-image {
  @apply mx-1;
}

#post .kg-bookmark-card {
  @apply text-black;
}

#post .kg-bookmark-container {
  @apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
}
#post .kg-bookmark-container:hover {
  @apply bg-gray-400 transition-bg;
}
#post .kg-bookmark-content {
  @apply w-2/3 py-4 px-4;
}
#post .kg-bookmark-thumbnail {
  @apply w-1/3 h-full;
}
#post .kg-bookmark-thumbnail img {
  @apply w-full h-full object-cover;
}
#post .kg-bookmark-title {
  @apply font-medium text-xl no-underline mb-1;
}
#post .kg-bookmark-description {
  @apply font-light text-sm my-2;
}
#post .kg-bookmark-metadata {
  @apply flex flex-row items-start justify-end h-6 my-4;
}
#post .kg-bookmark-icon {
  @apply h-full mx-2;
}
#post .kg-bookmark-author {
  @apply text-sm text-blue-700 truncate;
}
#post .kg-bookmark-publisher {
  @apply text-sm text-blue-700 truncate;
}
footer {
  @apply py-4 px-4 bg-yuika-blue-700;
}


/* 4. Navbar */

.nav {
  @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700 left-0 right-0;
  top: 100%;
}
.nav li {
  @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4 transition-bg;
}
.nav li a {
  @apply align-middle w-full table-cell;
  line-height: 2rem;
}
.nav li:hover {
  @apply bg-yuika-blue-700 transition-bg;
}

@screen md {
  .nav {
    @apply block static w-auto flex-row h-12 bg-transparent;
  }
  .nav li {
    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
  }
}

.nav-fixed {
  @apply bg-yuika-blue-700;
}

.post-article {
  @apply pb-32;
}

.content {
  @apply mx-auto;
}
.content-full {
  @apply px-4;
}
@screen sm {
  .content-full {
    @apply px-8;
  }
}
@screen md {
  .content-full {
    @apply px-16;
  }
}
@screen lg {
  .content-full {
    @apply px-32;
  }
}
@screen xl {
  .content-full {
    @apply px-64;
  }
}

/* 5. Post Card */
.post-background {
  height: 18rem;
}
.post-card .excerpt {
  max-height: 5.5rem;
}

.primary-tag-header {
  @apply bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
.tag-header {
  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
.author-header {
  @apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
}
@tailwind components;

@tailwind utilities;