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;
}
header a:hover {
  @apply no-underline;
}
a:hover {
  @apply underline;
}
/* 2. Site Header */
.index-navbar {
  top: 0;
  z-index: 10;
  width: 100vw;
  height: 4rem;
  overflow: hidden;
  @apply fixed transition-all duration-300 ease-in-out;
}
.index-navbar.enabled {
  height: 100vh;
}
.index-navbar header {
  z-index: 12;
  @apply transition duration-300 ease-in-out h-full;
}
.index-navbar.enabled header {
  background-color: rgba(0,0,0,0.5);
}
.index-navbar.detached header {
  background-color: rgba(0,0,0,0.5);
}
.index-header {
  min-height: 200px;
  height: 70vh;
}
@screen md {
  .index-header {
    min-height: 300px;
    height: 70vh;
  }
}
.index-header.large {
  height: 90vh;
}
.no-image {
  @apply bg-yuika-blue-500
}

.site-title {
  @apply flex flex-row transition duration-300 ease-in-out;
}
.site-head {
  @apply flex flex-row flex-grow transition duration-300 ease-in-out;
}
.site-head a {
  @apply flex flex-row py-2 items-center transition duration-300 ease-in-out h-16 inline-block px-4;
}
.site-head a:hover {
  @apply bg-yuika-blue-500;
}
.site-background {
  position: absolute;
  opacity: 0%;
  top: -23vh;
  width: 100vw;
  height: 100vh;
  @apply transition-all duration-300 ease-in-out;
}
.index-navbar.enabled .site-background {
  opacity: 100%;
  top: 0;
}
.main-container {
  @apply relative;
}
/* 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-300 ease-in-out;
}
#post .kg-bookmark-container:hover {
  @apply bg-gray-400 transition duration-300 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 {
  @apply flex flex-col h-full;
}
#menushow {
  @apply cursor-pointer w-16 h-16 relative px-2 py-2 transition duration-300 ease-in-out text-center whitespace-nowrap;
}
#menushow:hover {
  @apply bg-yuika-blue-500
}
.nav {
  background: transparent;
  @apply flex-col w-full pl-0 my-0;
  top: 100%;
}
.nav li {
  @apply w-full flex flex-row justify-start items-center my-0 text-white text-base h-12 transition duration-300 ease-in-out;
}
.nav li.separator {
  height: 0;
  @apply border border-white border-t opacity-75;
}
.nav li a {
  @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
}
.nav li a:hover {
  @apply no-underline;
}
.nav li:hover {
  @apply bg-yuika-blue-500 transition duration-300 ease-in-out;
}
@screen md {
  .nav {
    @apply pl-16;
  }
}

.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-card {

}
.post-image-box {
  @apply relative;
  width: 100%;
  overflow: hidden;
}
@screen md {
  .post-image-box {
    width: 35vw;
    min-width: 300px;
    max-width: 450px;
  }
}
.post-image-box::after {
  @apply block;
  content: '';
  padding-bottom: 56.25%;
}
.post-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.primary-tag-header {
  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
}
.primary-tag-header:hover {
  @apply transition-all duration-300 ease-in-out underline;
}

.tag-accent-color {
  @apply inline-block rounded-full align-text-bottom h-12 w-12;
}
.tag-accent-color.small {
  @apply h-4 w-4;
}
.tag-accent-color.medium {
  @apply h-6 w-6;
}
.author-image {
  @apply inline-block rounded-full align-text-bottom h-12 w-12;
}
@screen md {
  .tag-accent-color {
    @apply h-16 w-16;
  }
  .author-image {
    @apply h-16 w-16;
  }
}
.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;
}
.author-names a:hover {
  @apply underline;
}

/* 6. Post feed */
.post-feed {
  @apply grid grid-cols-1 gap-y-4 my-8;
}

/* 7. Subscribe form */
#subscribe-form .message-success {
  @apply hidden;
}
#subscribe-form.success .message-success {
  @apply block;
}
#subscribe-form .message-error {
  @apply hidden;
}
#subscribe-form.error .message-error {
  @apply block;
}

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

@tailwind utilities;