Yuika/assets/css/styles.css

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

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@tailwind base;

/* 1. Base Styling */
html {
  @apply font-sans;
}
header {
  @apply py-4;
}

/* 2. Site Header */
.index-navbar {
  z-index: 10;
  @apply transition duration-500 ease-in-out;
}
.index-navbar header {
  @apply transition duration-500 ease-in-out;
  background-color: transparent;
}
.index-navbar:hover header {
  @apply bg-yuika-blue-700 transition duration-500 ease-in-out;
}
.index-header {
  min-height: 300px;
  height: 70vh;
}
.no-image {
  @apply bg-yuika-blue-500
}

.site-head {
  @apply flex flex-row flex-grow py-2 transition duration-500 ease-in-out pl-4 flex flex-row flex-grow py-2;
}
.site-head:hover {
  @apply bg-yuika-blue-500;
}
/* 3. Content Styling */
#post p {
  @apply my-4;
}
#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 a:hover {
  @apply underline;
}
#post ul {
  @apply list-disc;
}
#post ol {
  @apply list-decimal;
}
#post code {
  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
}
#post blockquote {
  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
}
#post pre {
  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
}
#post .kg-card {
  @apply py-4 flex flex-col items-center object-contain my-8 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 {
  min-width: 100vw;
}
@screen md {
  #post .kg-gallery-container {
    min-width: 115%;
  }
}
@screen lg {
  #post .kg-gallery-container {
    min-width: 125%;
  }
}
@screen xl {
  #post .kg-gallery-container {
    min-width: 140%;
  }
}

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

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

#post .kg-bookmark-container {
  @apply flex flex-row justify-between text-black border-l-4 border-yuika-blue-700 bg-white transition duration-500 ease-in-out;
}
#post .kg-bookmark-container:hover {
  @apply bg-gray-400 transition duration-500 ease-in-out;
}
#post .kg-bookmark-content {
  @apply w-2/3 py-4 px-4;
}
#post .kg-bookmark-thumbnail {
  min-width: 33.3333%;
  @apply max-h-full relative;
}
#post .kg-bookmark-thumbnail img {
  @apply absolute top-0 left-0 h-full w-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-group {

}
.nav-group #menushow {
  @apply cursor-pointer relative px-2 py-2 transition duration-500 ease-in-out;
}
.nav-group #menushow:hover {
  @apply bg-yuika-blue-500
}
.nav {
  @apply hidden flex-row w-full pl-0 my-0 absolute bg-yuika-blue-700 left-0 right-0;
  top: 100%;
}
.nav-group:hover .nav {
  @apply block;
}
.nav li {
  @apply flex flex-row justify-start items-center my-0 text-white text-sm h-12 transition duration-500 ease-in-out;
}
.nav li a {
  @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
}
.nav li:hover {
  @apply bg-yuika-blue-500 transition duration-500 ease-in-out;
}

@screen md {
  .nav-group #menushow {
    @apply py-0;
  }
  .nav-group:hover .nav {
    @apply flex;
  }
  .nav {
    @apply flex static w-auto flex-row bg-transparent h-full;
  }
  .nav li {
    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 flex h-full;
  }
  .nav li a {
    @apply justify-center;
  }
}

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

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

.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 {
  @apply h-full;
}
.primary-tag-header {
  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-500 ease-in-out;
}
.primary-tag-header:hover {
  @apply bg-blue-900 transition duration-500 ease-in-out;
}
.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;
}

.author-list {
  @apply flex flex-row items-center my-2 py-2;
}
.author-images {
  @apply flex flex-row;
}
.author-names {
  @apply flex-grow flex flex-col;
}

/* 6. Post feed */
.post-feed {
  @apply grid grid-cols-1 row-gap-4 col-gap-4 my-8;
}
@screen md {
  .post-feed {
    @apply grid grid-cols-2;
  }
}
@screen xl {
  .post-feed {
    @apply grid grid-cols-3;
  }
}

/* 7. Default transitions */
@tailwind components;

@tailwind utilities;