tailwind.config.css

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */

@tailwind base;

/**
  * This injects any component classes registered by plugins.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/components";
  */

@tailwind components;

/**
  * Here you would add any of your custom component classes; stuff that you'd
  * want loaded *before* the utilities so that the utilities could still
  * override them.
  *
  * Example:
  *
  * .btn { ... }
  * .form-input { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "components/buttons";
  * @import "components/forms";
  */

/*Card*/

.card {
  @apply mx-2 overflow-hidden bg-white rounded shadow;
  transition: -webkit-transform 0.1s ease-in;
  transition: transform 0.1s ease-in;
  transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in;
}

.card:hover {
  @apply shadow-lg;
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.card img {
  @apply w-auto h-auto rounded-t shadow;
}

.new-badge {
  @apply absolute top-0 right-0 p-1 ml-2 text-sm font-bold text-white border-none rounded bg-brand;
}

.sticky-badge {
  @apply absolute top-0 left-0 p-1 ml-2 text-sm font-bold text-white border-none rounded bg-brand;
}


.card-title {
  @apply pt-2 my-1 text-sm font-bold text-center;
}

.card-description {
  @apply hidden;
  opacity: 0;
}

.card:hover .card-description {
  opacity: 1;
}

.card-author {
  @apply mb-3 text-xs text-center text-gray-200;
}

@screen sm {
  .card-title {
    @apply my-2 text-base;
  }

  .card-description {
    @apply absolute top-0 block p-3 text-sm font-bold text-white bg-brand;
    transition: -webkit-transform 0.1s ease-in;
    transition: transform 1s ease-in;
    transition: transform 1s ease-in, -webkit-transform 1s ease-in;
  }

  .card-author {
    @apply text-sm;
  }
}

/*Links*/
.navlink {
  @apply px-2 pb-1 mr-2 text-base font-bold text-center text-white no-underline border-b-0 border-l-2 border-transparent;
}

.navlink:hover {
  @apply text-teal-200 no-underline border-teal-100;
}

@screen sm {
  .navlink {
    @apply px-2 pb-1 mr-2 border-b-2 border-l-0;
  }
}

.footerlink {
  @apply font-bold no-underline text-brand-ondark;
}

.footerlink:hover {
  @apply font-bold no-underline text-brand-alt;
}

a {
  @apply underline text-brand;
}
a:hover {
  @apply text-teal-700 underline;
}

/*Code syntax*/
pre code {
  @apply w-full p-4 my-4 overflow-x-auto text-xs border rounded shadow;
}

code {
  @apply p-1 text-xs bg-gray-100 text-brand;
}

@screen md {
  pre code,
  code {
    @apply text-sm;
  }
}

/*Faux cmd window */
.window-nav {
  @apply px-4 py-2 bg-teal-400 border-t border-l border-r border-teal-400 rounded-t;
}
.window-nav-dot {
  @apply inline-block w-3 h-3 mr-1 bg-gray-100 rounded-full;
}
.window-bg {
  @apply relative p-4 font-mono text-sm tracking-wide text-white break-normal bg-black;
}

/*Button*/
.btn {
  @apply p-3 mt-2 text-sm font-bold text-white no-underline border-none rounded bg-brand;
}
.btn:hover {
  @apply text-white no-underline bg-teal-700 shadow;
}
.template-btn {
  @apply fixed relative inset-x-0 bottom-0 block w-full p-3 mt-2 text-sm font-bold text-white border-none rounded bg-brand;
}
.template-btn:hover {
  @apply no-underline bg-teal-400;
}

/*Card
  .card {
    @apply mx-2 overflow-hidden bg-white rounded shadow;
  }
  .card:hover {
    @apply shadow-lg;
  }*/

/*Tabs*/

.tab:focus,
.active-tab:focus {
  @apply outline-none;
}
a.tab {
  @apply inline-block px-4 py-3 -mb-px font-semibold text-gray-700 no-underline border-b-4 border-transparent;
}
a.tab:hover {
  @apply no-underline border-b-4 text-brand border-brand;
}
a.active-tab {
  @apply inline-block px-4 py-3 -mb-px font-semibold no-underline border-b-4 text-brand border-brand;
}
a.active-tab:hover {
  @apply text-gray-700 no-underline border-b-4 border-gray-700;
}

button.tab {
  @apply flex items-center w-full gap-2 p-3 font-semibold text-left text-gray-700 no-underline border-b-4 border-transparent;
}
button.tab:hover {
  @apply no-underline bg-transparent bg-gray-100 border-b-4 text-brand border-brand;
}
button.active-tab {
  @apply flex items-center w-full px-4 py-3 font-semibold text-left no-underline bg-gray-100 border-b-4 text-brand border-brand;
}
button.active-tab:hover {
  @apply no-underline bg-gray-100 border-b-4 text-brand border-brand;
}

@screen md {
  button.tab {
    @apply border-b-0 border-l-4;
  }
  button.tab:hover {
    @apply border-b-0 border-l-4 text-brand;
  }
  button.active-tab {
    @apply border-b-0 border-l-4 text-brand;
  }
  button.active-tab:hover {
    @apply border-b-0 border-l-4 text-brand border-brand;
  }
}

.nunito {
  font-family: "Nunito", Tahoma;
}

#post-content p {
  padding-top: 0.7em;
}

/*Horizontal Scrolling*/
.scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.hidescrollbar {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.hidescrollbar::-webkit-scrollbar {
  display: none;
}

header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.header__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  transform-origin: top left;
}

/*Search*/

#searchresults a {
  @apply no-underline;
}
/* Supporter Ad */

.supporter {
  max-width: 330px;
}

@screen md {
  .supporter {
    max-width: 180px;
  }
}
/*Animation*/
.bounce-in-right {
  -webkit-animation: bounce-in-right 0.8s both;
  animation: bounce-in-right 0.8s both;
}
@screen md {
  .bounce-in-right {
    -webkit-animation: none;
    animation: none;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-9-29 17:35:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-right
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(600px);
    transform: translateX(600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(68px);
    transform: translateX(68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(600px);
    transform: translateX(600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(68px);
    transform: translateX(68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/*Markdown - https://github.com/iandinwoodie/github-markdown-tailwindcss*/

/* Additional vertical padding used by kbd tag. */
.py-05 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.markdown {
  @apply leading-normal break-words;
}

.markdown > * + * {
  @apply mt-4 mb-4;
}

.markdown li + li {
  @apply mt-1;
}

.markdown li > p + p {
  @apply my-6;
}

.markdown strong {
  @apply font-semibold;
}

.markdown a {
  @apply font-semibold text-blue-600;
}

.markdown strong a {
  @apply font-bold;
}

.markdown h1 {
  @apply pb-2 mt-6 mb-4 text-4xl font-semibold leading-tight border-b;
}

.markdown h2 {
  @apply pb-2 mt-6 mb-4 text-2xl font-semibold leading-tight border-b;
}

.markdown h3 {
  @apply mt-6 mb-4 text-lg font-semibold leading-snug;
}

.markdown h4 {
  @apply mt-6 mb-4 text-base font-semibold leading-none;
}

.markdown h5 {
  @apply mt-6 mb-4 text-sm font-semibold leading-tight;
}

.markdown h6 {
  @apply mt-6 mb-4 text-sm font-semibold leading-tight text-gray-600;
}

.markdown blockquote {
  @apply pl-4 pr-4 text-base text-gray-600 border-l-4 border-gray-300;
}

.markdown ul {
  @apply pl-8 text-base list-disc;
}

.markdown ol {
  @apply pl-8 text-base list-decimal;
}

.markdown kbd {
  @apply inline-block px-1 font-mono text-xs font-normal align-middle border rounded shadow py-05;
}

.markdown table {
  @apply text-base border-gray-600;
}

.markdown th {
  @apply px-3 py-1 border;
}

.markdown td {
  @apply px-3 py-1 border;
}

/**
  * This injects all of Tailwind's utility classes, generated based on your
  * config file.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/utilities";
  */

@tailwind utilities;

/**
  * Here you would add any custom utilities you need that don't come out of the
  * box with Tailwind.
  *
  * Example :
  *
  * .bg-pattern-graph-paper { ... }
  * .skew-45 { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "utilities/background-patterns";
  * @import "utilities/skew-transforms";
  */