<!DOCTYPE html>
<html lang="en">
<head>
<style>
@font-face {
font-family: OpenDyslexic;
src: url(https://practicaldev-herokuapp-com.freetls.fastly.net/assets/OpenDyslexic-Regular-e2da53e6ae0d57455acaecf9151769780f875f17ce0aed72d90a7be3edf98b57.otf)
}
@font-face {
font-family: OpenDyslexic-Bold;
src: url(https://practicaldev-herokuapp-com.freetls.fastly.net/assets/OpenDyslexic-Bold-84cc2b8adaffe43edd5295004b627caac868f58d7e21e4afb019559312acfa5a.otf)
}
@font-face {
font-family: OpenDyslexic-Bolditalic;
src: url(https://practicaldev-herokuapp-com.freetls.fastly.net/assets/OpenDyslexic-BoldItalic-f4713bbb9a294df6ab38b28b0b5ec0547ed987a886f3ae46aec1d601de2109ae.otf)
}
@font-face {
font-family: OpenDyslexic-Italic;
src: url(https://practicaldev-herokuapp-com.freetls.fastly.net/assets/OpenDyslexic-Italic-6abd13b9690e8140655fcda16f7a3d2a1fc1f5a4da61895cce7bed9eb774a1af.otf)
}
body {
background: var(--body-bg);
color: var(--body-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 0;
margin: 0;
overflow-y: scroll;
padding-top: 56px
}
#audiocontent {
display: none
}
*:focus:active {
outline: 0
}
*:focus:not(.focus-visible) {
outline: none
}
.modal-open {
margin: 0;
overflow: hidden;
overflow-y: hidden;
height: 90vh
}
.zen-mode .top-bar, .zen-mode .primary-sticky-nav, .zen-mode .article-actions {
display: none !important
}
@media print {
.top-bar, .article-actions {
display: none
}
}
.config_minimize_newest_listings #sidebar-listings-widget .widget-body {
display: none !important
}
.universal-page-content-wrapper {
overflow: hidden;
min-height: 88vh;
visibility: visible;
font-size: 18px
}
a {
color: var(--link-brand-color);
text-decoration: none
}
div.field, div.actions {
margin-bottom: 5px
}
#instantclick {
display: none
}
pre {
background: #29292e;
border-radius: 2px;
overflow-x: scroll;
font-size: 11px;
padding: 10px;
color: #eff0f9;
line-height: 1.42em;
font-size: 13px;
width: calc(100% - 25px)
}
@media screen and (min-width: 380px) {
pre {
font-size: 15px
}
}
pre code {
background: #29292e;
color: #eff0f9;
white-space: pre
}
.cta {
color: #0a0a0a;
background: #66e2d5;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
-webkit-appearance: none;
font-stretch: condensed;
font-weight: bold
}
.cta.cta-danger {
background: #ff0000
}
button {
cursor: pointer
}
input[type='submit'] {
cursor: pointer
}
input[type='text'], textarea, input[type='url'], input[type='email'] {
outline: 0
}
.partner-image-dark-mode {
display: none !important
}
body.night-theme .on-page-nav-butt img, body.night-theme .icon-img, body.night-theme .dropdown-icon, body.night-theme .reaction-button:not(.reacted) img, body.night-theme .image-upload-button button, body.night-theme .icon-image, body.night-theme .dev-badge, body.night-theme .chatchannels__config img, body.night-theme .external-link-img, body.night-theme .group-img, body.night-theme .user-profile-header .social a, body.ten-x-hacker-theme .on-page-nav-butt img, body.ten-x-hacker-theme .icon-img, body.ten-x-hacker-theme .dropdown-icon, body.ten-x-hacker-theme .reaction-button:not(.reacted) img, body.ten-x-hacker-theme .image-upload-button button, body.ten-x-hacker-theme .icon-image, body.ten-x-hacker-theme .dev-badge, body.ten-x-hacker-theme .chatchannels__config img, body.ten-x-hacker-theme .external-link-img, body.ten-x-hacker-theme .group-img, body.ten-x-hacker-theme .user-profile-header .social a {
-webkit-filter: invert(95%);
filter: invert(95%)
}
body.night-theme .ltag__tag, body.ten-x-hacker-theme .ltag__tag {
border-color: white !important;
box-shadow: 3px 3px 0px #fff !important
}
body.night-theme .partner-image-dark-mode, body.ten-x-hacker-theme .partner-image-dark-mode {
display: block !important
}
body.night-theme .partner-image-light-mode, body.ten-x-hacker-theme .partner-image-light-mode {
display: none !important
}
body.night-theme .not-dark-theme-text-compatible, body.ten-x-hacker-theme .not-dark-theme-text-compatible {
color: white !important;
color: var(--theme-secondary-color, white) !important
}
body.static-navbar-config {
padding-top: 0
}
body.static-navbar-config .top-bar {
position: relative !important
}
.trusted-visible-block {
display: none !important
}
body.trusted-status-true .trusted-visible-block {
display: flex !important
}
body.hidden-shell .top-bar, body.hidden-shell footer {
display: none
}
body.hidden-shell .container {
margin-top: 0px
}
body.hidden-shell .universal-page-content-wrapper {
margin-top: -56px !important;
margin-bottom: 30px
}
.delete-confirm.container {
padding: 150px 10px;
min-height: 300px;
text-align: center
}
.delete-confirm.container h4 {
background: #0a0a0a;
padding: 5px 8px;
color: #ffffff;
display: inline-block;
margin-bottom: 0px;
border-radius: 3px
}
.delete-confirm.container h2 {
font-size: 22px;
margin-bottom: 40px
}
.delete-confirm.container a.delete-link {
background: #ff0000;
color: white;
padding: 10px 15px
}
.delete-confirm.container a.delete-link:hover {
color: white;
opacity: 0.9
}
.delete-confirm.container form button {
background: #ff0000;
color: white;
font-size: 1.5em;
border: 0px;
border-radius: 3px;
padding: 6px 12px
}
.app-shell-loader {
position: absolute;
top: 200px;
text-align: center;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: loading-fadein 1.5s;
animation: loading-fadein 1.5s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
font-size: 1.2em;
z-index: -1
}
@-webkit-keyframes loading-fadein {
from {
opacity: 0
}
to {
opacity: 0.6
}
}
@keyframes loading-fadein {
from {
opacity: 0
}
to {
opacity: 0.6
}
}
.top-bar {
--indicator-outline: var(--header-bg);
--dropdown-display: none;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 101;
height: 56px;
background: var(--header-bg);
box-shadow: 0 1px 1px var(--header-shadow)
}
.top-bar, .top-bar::after, .top-bar::before, .top-bar *, .top-bar *::after, .top-bar *::before {
box-sizing: border-box
}
.top-bar__container {
max-width: 1250px;
margin: auto;
display: flex;
align-items: center;
position: relative
}
.top-bar .crayons-indicator {
position: absolute;
top: -0.25rem;
right: 0;
box-shadow: 0 0 0 2px var(--indicator-outline)
}
.top-bar--logo {
display: flex;
margin-left: 0.5rem
}
@media (min-width: 768px) {
.top-bar--logo {
margin-left: 1rem
}
}
.top-bar--logo .logo {
width: 50px;
height: 40px;
padding: 0 7px 0 9px;
background: var(--logo-bg);
fill: var(--logo-color);
border-radius: 3px
}
.top-bar--search {
max-width: 420px;
flex: 1 auto;
margin: 0 0.5rem
}
@media (min-width: 640px) {
.top-bar--search {
margin: 0 1rem
}
}
.top-bar__links {
height: 56px;
display: flex;
align-items: center;
margin-left: auto
}
.top-bar__link {
position: relative;
display: flex;
padding: 0.5rem;
margin: 0 0.25rem;
border-radius: 50%;
align-items: center;
color: var(--header-icons-color);
outline: 0;
transition: background cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms
}
.top-bar__link:hover, .top-bar__link:focus {
--indicator-outline: var(--header-bg-hover);
color: var(--header-icons-color-hover);
background: var(--header-bg-hover)
}
.top-bar__link--current {
--indicator-outline: var(--header-bg-current);
color: var(--header-icons-color-hover);
background: var(--header-bg-current)
}
.top-bar__menu {
height: 100%;
display: flex;
align-items: center;
z-index: 20
}
.top-bar__menu__trigger {
all: unset;
padding: 0.25rem;
margin: 0 0.25rem;
border-radius: 50%;
color: var(--header-icons-color);
cursor: pointer
}
.top-bar__menu__dropdown {
display: var(--dropdown-display);
top: 56px
}
.top-bar__menu.showing, .top-bar__menu.desktop:hover, .top-bar__menu.desktop:focus {
--dropdown-display: block
}
.top-bar__menu.showing .top-bar__menu__trigger, .top-bar__menu.desktop:hover .top-bar__menu__trigger, .top-bar__menu.desktop:focus .top-bar__menu__trigger {
color: var(--header-icons-color-hover);
background: var(--header-bg-hover)
}
.skip-content-link {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100px);
background: var(--body-color);
color: var(--body-color-inverted);
z-index: 9999;
padding: 1rem;
pointer-events: none;
opacity: 0;
border-radius: 3px;
outline: 0
}
.skip-content-link:focus {
pointer-events: auto;
opacity: 1;
transform: translate(-50%, 28px)
}
.pwa-nav-buttons {
height: 100%;
display: none;
padding-left: 0.5rem
}
.pwa-nav-buttons button {
all: unset;
padding: 0 0.5rem;
color: var(--header-icons-color)
}
.pwa-nav-buttons button:hover {
color: var(--header-icons-color-hover)
}
@media (min-width: 768px) {
.pwa-nav-buttons.pwa-nav-buttons--showing {
display: flex
}
}
.cta {
color: #0a0a0a;
background: #66e2d5;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
-webkit-appearance: none;
font-stretch: condensed;
font-weight: bold
}
.cta-button {
background: transparent;
padding: 8px 0;
color: var(--accent-brand);
display: inline-block
}
.cta-button:hover {
text-decoration: underline;
opacity: 1
}
body.sans-serif-article-body .body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
body.sans-serif-article-body .body p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 0.98em
}
body.comic-sans-article-body .body {
font-family: 'Comic Sans MS', cursive, sans-serif
}
body.comic-sans-article-body .body p {
font-family: 'Comic Sans MS', cursive, sans-serif;
font-size: 0.98em
}
body.open-dyslexic-article-body .body {
font-display: swap;
font-family: OpenDyslexic, sans-serif
}
body.open-dyslexic-article-body .body p {
font-display: swap;
font-family: OpenDyslexic, sans-serif;
font-size: 0.9em
}
body.open-dyslexic-article-body .body b, body.open-dyslexic-article-body .body strong {
font-family: OpenDyslexic-Bold, sans-serif
}
body.open-dyslexic-article-body .body i, body.open-dyslexic-article-body .body em {
font-family: OpenDyslexic-Italic, sans-serif
}
body.open-dyslexic-article-body .body b > i, body.open-dyslexic-article-body .body b > em, body.open-dyslexic-article-body .body strong > i, body.open-dyslexic-article-body .body strong > em, body.open-dyslexic-article-body .body i > b, body.open-dyslexic-article-body .body em > b, body.open-dyslexic-article-body .body i > strong, body.open-dyslexic-article-body .body em > strong {
font-family: OpenDyslexic-Bolditalic
}
body.monospace-article-body .body {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
}
body.monospace-article-body .body p {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9em
}
.unpublished {
background: #ff0000;
display: block;
text-align: center;
position: relative;
padding: calc(10px + 1.3vw) 10px;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
@media screen and (min-width: 380px) {
.unpublished {
font-size: 1.2em;
line-height: 1.5em
}
}
.unpublished:hover {
opacity: 0.92;
color: white
}
.unpublished em {
display: inline-block;
font-weight: bold
}
.blank-space {
height: 10px
}
@media screen and (min-width: 880px) {
.video-player-header {
height: 492px
}
}
@media screen and (min-width: 950px) {
.video-player-header {
border-top-left-radius: 2px;
border-top-right-radius: 2px
}
}
article {
padding: 0 0;
position: relative
}
article .image {
position: relative;
width: 100%;
margin: auto;
max-width: 1024px;
z-index: 2;
height: 42vw
}
@media screen and (min-width: 880px) {
article .image {
height: 370px
}
}
@media screen and (min-width: 950px) {
article .image {
border-top-left-radius: 2px;
border-top-right-radius: 2px
}
}
article .category-banner {
height: 250px;
background: #45525c
}
@media screen and (min-width: 1250px) {
.home .container {
margin-left: 16px
}
}
.container {
width: 880px;
max-width: 100%;
margin: 0 auto 20px;
text-align: left;
background: var(--card-bg);
border: none;
border: var(--theme-container-border, none);
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8))
}
@media screen and (min-width: 950px) {
.container {
border-radius: 3px;
margin-bottom: 12px
}
}
@media screen and (min-width: 950px) {
.container {
border-radius: 3px;
margin-top: 24px
}
}
.container.article {
position: relative;
z-index: 5
}
.container .title {
z-index: 6;
position: relative;
width: 81%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 710px;
margin: auto
}
@media screen and (max-width: 750px) {
.container .title {
width: 90%
}
}
@media screen and (max-width: 430px) {
.container .title {
width: 93%
}
}
.container .title .org-branded-title-link {
color: var(--card-color-secondary)
}
.container .title .org-branded-title-link .org-branded-title {
font-size: calc(0.9em + 0.3vw);
padding: 8px 0 6px;
margin-bottom: -8px
}
@media screen and (min-width: 1600px) {
.container .title .org-branded-title-link .org-branded-title {
font-size: 20px
}
}
.container .title .org-branded-title-link .org-branded-title .org-pic {
height: calc(27px + 0.5vw);
width: calc(27px + 0.5vw);
display: inline;
vertical-align: calc(-8px - 0.1vw);
border-radius: 100px;
margin-right: 0.2vw;
background: #f5f6f7
}
.container .title h1 {
margin: 0 auto;
padding: 14px 0 7px;
font-weight: 700;
min-height: 40px;
font-size: calc(2vw + 26px);
word-break: break-word;
line-height: 1.28em
}
@media screen and (min-width: 1600px) {
.container .title h1 {
font-size: 57px
}
}
.container .title h1 .title-block {
display: inline-block
}
.container .title h1.medium {
font-size: calc(1.82vw + 25px)
}
@media screen and (min-width: 1600px) {
.container .title h1.medium {
font-size: 47px
}
}
.container .title h1.long {
font-size: calc(1.48vw + 23px)
}
@media screen and (min-width: 1600px) {
.container .title h1.long {
font-size: 46px
}
}
.container .title h1.longer {
font-size: calc(1.44vw + 22px)
}
@media screen and (min-width: 1600px) {
.container .title h1.longer {
font-size: 45px
}
}
.container .title h1.longest {
font-size: calc(1.42vw + 22px)
}
@media screen and (min-width: 1600px) {
.container .title h1.longest {
font-size: 42px
}
}
.container .title h3 {
margin: 2px auto;
padding: 0;
padding: 0 3px 16px;
font-weight: 500;
color: var(--card-color-tertiary);
font-size: 13.5px;
line-height: 1.8em
}
@media screen and (min-width: 430px) {
.container .title h3 {
font-size: 15px
}
}
.container .title h3 .profile-pic {
width: 28px;
height: 28px;
border-radius: 50px;
display: inline-block;
vertical-align: -9px;
margin-right: 2px;
background: #f5f6f7
}
.container .title h3 a {
color: var(--card-color-tertiary);
text-decoration: none
}
.container .title h3 .icon-img, .container .title h3 .reader-image-tiny {
opacity: 0.5;
width: 18px;
height: 18px;
vertical-align: -4px;
margin: 0 1px
}
.container .title h3 .icon-img:hover, .container .title h3 .reader-image-tiny:hover {
opacity: 0.6
}
.container .title h3 .published-at {
margin-right: 0;
display: inline-block
}
.container .title h3 .posted-date-inline {
display: inline-block
}
.container .title h3 .action-space {
padding: 0 0 0 0;
display: inline-flex;
min-width: 44px
}
.container .title h3 .action-space a {
display: inline-block;
background: #66e2d5;
color: #0a0a0a;
padding: 2px 12px 3px;
border-radius: 3px;
line-height: 1.1em;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
margin-right: 4px
}
@media screen and (max-width: 376px) {
.container .title h3 .action-space a {
padding: 2px 6px 3px;
margin-left: 3px;
margin-left: 5px
}
.container .title h3 .action-space a .post-word {
display: none
}
}
.container .title .tags .tag {
display: inline-block;
border-radius: 3px;
font-size: 13px;
font-weight: bold;
padding: 2px 5px 3px;
border-radius: 2px;
background: #d6d9e0;
color: #606570
}
.container .title .tags .tag:hover {
opacity: 0.9
}
.container .article-collection-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
border-radius: 5px;
border: 1px solid #dbdbdb;
width: 92%;
max-width: 500px;
margin: calc(1.1vw + 5px) auto 1vw;
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8)
}
.container .article-collection-wrapper p {
margin: 0px auto;
padding: calc(0.1vw + 9px);
font-weight: bold;
font-size: 0.96em
}
.container .article-collection-wrapper .article-collection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 16px;
overflow: hidden;
position: relative;
z-index: 8
}
.container .article-collection-wrapper .article-collection a {
color: var(--body-color);
padding: calc(0.1vw + 9px);
display: block;
position: relative;
z-index: 4;
border-top: 1px solid #dbdbdb;
font-size: 0.88em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.container .article-collection-wrapper .article-collection a:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
}
.container .article-collection-wrapper .article-collection a.current-article {
background: var(--accent-brand-lighter);
color: var(--body-color-inverted)
}
.container .article-collection-wrapper .article-collection a.coming-soon {
pointer-events: none;
color: #d1d1d1
}
.container .article-collection-wrapper .article-collection a.collection-link-hidden {
display: none
}
.container .article-collection-wrapper.article-collection-wrapper-bottom {
margin-bottom: 3vw
}
.container .article-collection-wrapper.article-collection-wrapper-bottom p {
margin-top: 5px
}
.container .body {
margin: auto;
width: 82%;
font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
font-size: 21px;
line-height: 32px;
background: var(--card-bg);
position: relative;
z-index: 5;
padding: 5px 0px;
overflow-wrap: break-word
}
.container .body a code {
color: #557de8
}
.container .body a.anchor {
padding-top: 0;
margin-top: 0;
top: -50px;
display: block;
visibility: hidden;
position: relative
}
.container .body h1, .container .body h2, .container .body h3, .container .body h4, .container .body h5, .container .body h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0.3em auto;
padding-left: 4px;
padding-right: 4px
}
.container .body h1 {
font-size: 1.85em;
line-height: 1.14em;
font-weight: 400
}
.container .body h2 {
font-size: 1.7em;
font-weight: 400;
line-height: 1.14em;
padding-bottom: 0;
margin-bottom: 0.5em
}
.container .body h3 {
font-size: 1.32em;
font-weight: 400
}
.container .body hr {
width: calc(25% + 12px);
opacity: 0.1;
border-width: 1px;
border-style: solid;
border-color: var(--body-color);
margin: 1.3em auto 1.5em
}
.container .body p {
margin: 0.95em 0 1.2em;
padding: 0.2em
}
.container .body ul, .container .body ol {
padding-left: 6px;
margin: 0.8em 0.7em 0.8em 1.9em
}
.container .body ol br {
line-height: 0;
margin: 0;
padding: 0
}
.container .body ul {
list-style-type: square
}
.container .body ul br {
line-height: 0;
margin: 0;
padding: 0
}
.container .body ul p {
margin: 0;
padding: 0
}
.container .body ul ul {
margin: 0 0.7em 0 1.9em;
list-style-type: circle
}
.container .body li {
margin: 0.3em auto
}
.container .body figure {
margin: 0
}
.container .body figcaption {
font-style: italic;
text-align: center;
font-size: 0.8em;
line-height: 1.4em;
color: var(--body-color);
display: block
}
.container .body p + figcaption {
margin-top: -0.8em
}
@media screen and (max-width: 750px) {
.container .body {
width: 92%
}
}
@media screen and (max-width: 430px) {
.container .body {
font-size: 17.5px;
line-height: 26px;
width: 94%;
margin-left: 3%
}
.container .body ul, .container .body ol {
margin: 0.8em 0.7em 0.8em 1.4em
}
.container .body h1 {
font-size: 1.6em
}
.container .body h2 {
font-size: 1.4em
}
.container .body h3 {
font-size: 1.16em
}
}
.container .body blockquote {
border-left: calc(0.2vw + 2px) solid #333;
padding: 0.1% 6% 0.1% 4%;
margin: 1.6em 1vw;
font-size: 0.92em;
line-height: 1.4em
}
.container .body blockquote p {
padding: 0;
margin: 0.95em 0 0.95em
}
.container .body blockquote.twitter-tweet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: white;
max-width: 456px;
border: 1px solid #e9eef2;
font-size: 0.75em;
line-height: 1.35em;
border-radius: 5px;
margin: 1.6em auto;
padding: 60px 10px 18px;
color: white;
min-height: 60px;
padding: 33px 15px 8px
}
.container .body blockquote.twitter-tweet a {
color: white
}
@media screen and (min-width: 360px) {
.container .body blockquote.twitter-tweet {
padding: 60px 22px 18px;
min-height: 105px
}
}
.container .body code {
margin: auto;
background: rgba(0, 0, 0, 0.1);
padding: 0.1em 0.3em 0;
border-radius: 2px;
font-size: 0.84em;
vertical-align: 0;
max-width: 100%;
line-height: 1.6em
}
.container .body kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: solid 1px #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5
}
.container .body pre {
background: #29292e;
border-radius: 2px;
overflow-x: auto;
color: #eff0f9;
line-height: 1.42em;
padding-left: 4%;
padding-right: 7%;
font-size: 0.7em;
width: 97%;
margin-left: -3%;
padding-top: 6%;
padding-bottom: 6%;
border-radius: 0;
overflow-wrap: normal
}
@media screen and (min-width: 430px) {
.container .body pre {
width: 111%;
margin-left: -11%;
padding-left: 9%;
padding-right: 2%
}
}
.container .body pre code {
background: #29292e;
color: #eff0f9;
white-space: pre
}
.container .body img {
height: auto;
position: relative;
display: block;
margin: auto;
left: -4%;
max-width: 108%
}
@media screen and (min-width: 430px) {
.container .body img {
left: -6px;
max-width: calc(100% + 12px)
}
}
.container .body a.article-body-image-wrapper {
cursor: zoom-in
}
.container .body iframe {
width: 100%;
border: 0;
margin: 1.2em 0
}
.container .body .fluidvids {
margin: 1em 0
}
.container .body .fluidvids iframe {
margin: 0
}
.container .body .table-wrapper-paragraph {
width: 100%;
margin-left: 0%;
overflow-x: auto
}
@media screen and (min-width: 430px) {
.container .body .table-wrapper-paragraph {
width: 108%;
margin-left: -4%
}
}
@media screen and (min-width: 800px) {
.container .body .table-wrapper-paragraph {
width: 110%;
margin-left: -5%
}
}
.container .body table {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border-collapse: collapse;
font-size: 0.78em;
margin: 0.8em auto 1.2em;
table-layout: fixed
}
@media screen and (min-width: 500px) {
.container .body table {
font-size: 0.9em
}
}
.container .body table th {
border: 1px solid #dbdbdb;
padding: 5px 1vw;
background: var(--body-bg);
text-align: left
}
.container .body table td {
border: 1px solid #dbdbdb;
padding: 5px 1vw;
box-sizing: border-box
}
.container .body .twitter-tweet {
margin: auto
}
.container .about-the-author {
margin: auto;
width: calc(100% - 5px);
position: relative;
overflow: hidden;
padding: 0px 0px 5px;
background: var(--card-bg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
.container .about-the-author a {
color: var(--body-color)
}
@media screen and (min-width: 520px) {
.container .about-the-author {
width: 82%
}
}
.container .about-the-author .left-column {
text-align: center;
float: left;
width: 90px;
padding-top: 8px
}
.container .about-the-author .left-column .profile-pic {
width: 70px;
height: 70px;
border-radius: 100px;
display: inline-block;
background: no-repeat center center;
background-size: cover;
margin-right: 2px;
margin-bottom: 12px
}
.container .about-the-author .main-content {
margin: auto;
width: calc(100% - 92px);
float: left
}
.container .about-the-author .main-content h4 {
margin: 13px 0 0;
font-size: 28px;
text-align: left;
font-weight: 400
}
.container .about-the-author .main-content h4 button {
background: #66e2d5;
color: #0a0a0a;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
border: 0;
font-size: 15px;
border-radius: 5px;
vertical-align: 2px;
padding: 4px 7px;
display: none;
margin-left: 6px
}
.container .about-the-author .main-content h4 button.showing {
display: inline-block
}
.container .about-the-author .main-content p {
margin: 2px 0;
padding-left: 0;
line-height: 22px;
font-size: 0.88em
}
.container .about-the-author .main-content .social {
font-size: 0.85em
}
.container .about-the-author .main-content .social a {
color: var(--card-color-tertiary);
margin-right: 6px;
display: inline-block
}
.container .article-actions {
text-align: center;
padding: 5px 0 12px;
position: fixed;
bottom: 0;
z-index: 22;
width: 100%;
background: #fdf9f3;
background: var(--theme-container-background, #fdf9f3);
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8))
}
@media screen and (min-width: 950px) {
.container .article-actions {
border-radius: 3px 3px 0 0
}
}
.container .article-actions .dropdown-content clipboard-copy {
display: flex;
flex-flow: row wrap;
position: relative;
width: calc(100% - 24px);
margin-left: 12px;
cursor: pointer
}
.container .article-actions .dropdown-content clipboard-copy #article-copy-link-input {
border-radius: 3px;
border: 1px dashed black;
flex: 1 1 auto;
font-size: 1em;
margin: 10px auto;
padding: 4px 6px;
width: auto
}
.container .article-actions .dropdown-content clipboard-copy img {
flex: 1 0 24px;
max-width: 24px;
margin-left: 5px;
-webkit-filter: invert(0);
filter: invert(0);
-webkit-filter: var(--theme-social-icon-invert, invert(0));
filter: var(--theme-social-icon-invert, invert(0))
}
.container .article-actions .dropdown-content clipboard-copy input {
cursor: pointer
}
.container .article-actions .dropdown-content clipboard-copy #article-copy-link-announcer {
flex: 1 0 100%;
color: #0045ff;
position: absolute;
bottom: -8px;
padding-left: 0px;
font-size: 12px;
text-align: left
}
.container .article-actions .dropdown-content clipboard-copy #article-copy-link-announcer[hidden] {
display: none
}
@media screen and (min-width: 880px) {
.container .article-actions {
width: 880px
}
}
@media screen and (min-width: 1365px) {
.container .article-actions {
margin-left: -1px;
margin-right: -1px;
width: calc(55px + 1.1vw);
top: 0%;
padding: calc(11px + 6%) 0px;
bottom: 5%;
left: calc(50% - 672px);
background: transparent;
border: 0;
box-shadow: none;
transition: opacity 0.25s;
padding-right: 2px
}
.container .article-actions .article-share-action-block {
width: 100% !important
}
.container .article-actions button, .container .article-actions a {
display: block !important;
width: 100% !important;
padding: 7px 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
border: 0px !important;
transition-delay: 0.1s
}
.container .article-actions button.user-animated img, .container .article-actions a.user-animated img {
-webkit-animation: image-reaction-animation 0.3s !important;
animation: image-reaction-animation 0.3s !important
}
.container .article-actions button:focus-visible, .container .article-actions a:focus-visible {
outline: 0;
box-shadow: 0px 0px 4px #666666 !important
}
.container .article-actions a {
margin-top: 5px !important;
font-size: 0.67em !important;
padding: 10px 0px 9px !important
}
.container .article-actions a.article-actions-comments-count {
padding: 12px 0 !important
}
.container .article-actions .dropdown-content {
left: 80px !important;
bottom: 0px !important
}
}
@media screen and (min-width: 1365px) and (min-width: 1365px) {
.container .article-actions .dropdown-content {
bottom: -185px !important
}
}
@media screen and (min-width: 1365px) {
.container .article-actions .dropdown-content a {
background: transparent !important;
padding-left: 10px !important
}
}
@media screen and (min-width: 1439px) {
.container .article-actions {
width: calc(90px + 1.1vw);
left: calc(50% - 711px)
}
.container .article-actions a {
font-size: 0.7em !important
}
.container .article-actions button {
padding: 9px 0px !important
}
.container .article-actions .dropdown-content {
left: 100px !important
}
}
@media screen and (min-width: 1530px) {
.container .article-actions {
width: 156px;
left: calc(50% - 750px)
}
.container .article-actions button, .container .article-actions a {
width: 140px !important
}
.container .article-actions a {
font-size: 0.79em !important
}
.container .article-actions .dropdown-content {
left: 150px !important
}
.container .article-actions button {
padding: 12px 0px !important
}
}
.container .article-actions button {
background: transparent;
margin: 0px calc(0.22vw + 2px);
padding: 2px calc(0.88vw + 6px);
padding-right: calc(0.88vw + 10px);
border: 0px;
font-weight: bold;
font-stretch: condensed
}
.container .article-actions button img {
height: 23px;
width: 23px;
transition: -webkit-filter 0.2s, opacity 0.2s;
padding: 4px;
border-radius: 100px;
transition: box-shadow 0.18s;
background: var(--card-bg)
}
@media screen and (min-width: 500px) {
.container .article-actions button img {
height: 26px;
width: 26px
}
}
@media screen and (min-width: 1365px) {
.container .article-actions button img {
height: 19px;
width: 19px
}
}
@media screen and (min-width: 1439px) {
.container .article-actions button img {
height: 23px;
width: 23px
}
}
@media screen and (min-width: 1530px) {
.container .article-actions button img {
height: 28px;
width: 28px;
padding: 7px
}
}
.container .article-actions button:hover img {
box-shadow: 0px 0px 0px 2px var(--accent-brand-lighter)
}
.container .article-actions button .reaction-number {
display: inline-block;
vertical-align: 6px;
margin-left: 5px;
vertical-align: 10px;
color: var(--card-color-tertiary);
font-size: 13px;
width: 27px
}
@media screen and (min-width: 500px) {
.container .article-actions button .reaction-number {
width: 37px;
font-size: 16px;
vertical-align: 9px
}
}
@media screen and (min-width: 1365px) {
.container .article-actions button .reaction-number {
font-size: 12px;
vertical-align: 9px;
margin-left: 1px;
width: 28px
}
}
@media screen and (min-width: 1439px) {
.container .article-actions button .reaction-number {
font-size: 15px;
vertical-align: 9px;
width: 37px;
margin-left: 7px
}
}
@media screen and (min-width: 1530px) {
.container .article-actions button .reaction-number {
font-size: 16px;
vertical-align: 15px
}
}
.container .article-actions button.activated img {
-webkit-filter: none;
filter: none;
opacity: 1
}
.container .article-actions button.user-activated img {
-webkit-filter: none;
filter: none;
opacity: 1;
box-shadow: 0px 0px 0px 2px #ffc0d3;
background: linear-gradient(111deg, #ffb4cb, #ff80a8)
}
.container .article-actions button.user-activated.unicorn-reaction-button img {
box-shadow: 0px 0px 0px 2px #d0e3ff;
background: linear-gradient(111deg, #c5d9f8, #90bbff)
}
.container .article-actions button.user-activated.readinglist-reaction-button img {
box-shadow: 0px 0px 0px 2px #cfc9f3;
background: linear-gradient(111deg, #cac3f3, #958aee)
}
.container .article-actions button.user-activated.user-animated img {
-webkit-animation: image-reaction-animation 0.3s !important;
animation: image-reaction-animation 0.3s !important
}
.container .article-actions .article-share-action-block {
display: inline-block;
position: relative;
width: 40px
}
.container .article-actions .article-share-action-block button {
min-width: 38px;
opacity: 0.7
}
.container .article-actions .article-share-action-block button:hover {
opacity: 1
}
.container .article-actions .article-share-action-block button .dropdown-icon {
vertical-align: -2px
}
.container .article-actions .article-share-action-block img {
background: transparent !important
}
.container .article-actions .article-share-action-block:hover img {
box-shadow: none !important
}
.container .article-actions .article-share-action-block .dropdown-content {
display: none;
position: fixed;
bottom: 55px;
right: 0;
left: 0;
z-index: 100;
background: var(--header-bg);
font-size: 1em;
text-align: left;
min-width: 300px;
padding-bottom: 15px;
padding-top: 15px
}
@media screen and (min-width: 500px) {
.container .article-actions .article-share-action-block .dropdown-content {
position: absolute;
right: -20px;
border-radius: 3px;
font-size: 0.92em;
border: 1px solid #dbdbdb;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
left: auto;
bottom: 48px;
min-width: 312px;
padding-bottom: 6px;
padding-top: 6px
}
}
.container .article-actions .article-share-action-block .dropdown-content.showing {
display: block
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row input[type='text'] {
border: 1px dashed black;
padding: 4px 6px;
font-size: 1em;
width: calc(100% - 50px);
border-radius: 3px;
margin: 10px auto 5px;
margin-left: 15px
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row input[type='checkbox'] {
float: right;
cursor: pointer
}
@media screen and (min-width: 400px) {
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row input[type='checkbox'] {
margin: 5px
}
}
@media screen and (min-width: 500px) {
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row input[type='checkbox'] {
margin: 3px
}
}
@media screen and (min-width: 1365px) {
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row input[type='checkbox'] {
margin: 1px
}
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row a {
font-weight: bold;
color: var(--body-color);
padding: 12px 18px;
width: calc(100% - 36px);
display: block;
font-size: 0.8em
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row.notification-subscriptions-area-row {
padding: 0px;
border-bottom: 1px solid #666666;
border-bottom: var(--theme-container-border, 1px solid #666)
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row .notification-subscriptions-area-header {
padding: 12px 6px;
padding-left: 12px;
font-size: 0.7em;
font-weight: bold;
margin-top: -5px;
background: #fbf2e6 !important;
background: var(--theme-container-background, #fbf2e6) !important
}
@media screen and (min-width: 500px) {
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row .notification-subscriptions-area-header {
border-top-right-radius: 3px;
border-top-left-radius: 3px
}
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row .notification-subscriptions-area-header button.notification-subscription-label {
display: inline-block;
width: 90px !important;
margin-left: 5px !important;
text-align: center !important;
float: right !important;
padding: 4px 0px !important;
border: 1px solid #dbdbdb !important;
border: var(--theme-border, 1px solid #dbdbdb) !important;
border-radius: 100px
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row .notification-subscriptions-area-header button.notification-subscription-label.selected {
visibility: hidden !important
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row button.notification-subscription-label {
width: 100% !important;
opacity: 1 !important;
text-align: left;
font-size: 0.8em;
box-sizing: border-box !important;
padding: 13px 4px !important;
padding-left: 13px !important;
margin: auto !important;
cursor: pointer !important;
color: var(--body-color)
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row button.notification-subscription-label .selected-emoji {
visibility: hidden;
margin-left: 4px;
font-size: 1.2em;
vertical-align: -0.1em
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row button.notification-subscription-label.selected {
color: var(--body-color)
}
.container .article-actions .article-share-action-block .dropdown-content .dropdown-link-row button.notification-subscription-label.selected .selected-emoji {
display: inline-block;
visibility: visible
}
.container .article-actions .article-actions-comments-count {
display: none;
position: relative;
color: var(--card-color-tertiary);
font-weight: bold;
font-size: calc(0.8em + 0.1vw);
vertical-align: calc(7px - 0.07vw);
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
padding: 4px 0.88vw;
border-radius: 3px
}
.container .article-actions .article-actions-comments-count .article-actions-comments-count-number {
display: none
}
@media screen and (min-width: 620px) {
.container .article-actions .article-actions-comments-count {
display: inline-block
}
}
@media screen and (min-width: 1250px) {
.container .article-actions .article-actions-comments-count {
font-size: 0.92em;
vertical-align: 6px
}
}
@media screen and (min-width: 1439px) {
.container .article-actions .article-actions-comments-count .article-actions-comments-count-number {
display: inline-block
}
}
.container .article-actions .article-actions-tweet-button {
padding: 2px 0 2px !important;
border-radius: 3px;
margin-right: 0.15vw;
margin-left: calc(0.2vw + 11px);
vertical-align: calc(3px - 0.07vw);
text-align: center;
width: 50px;
display: none
}
.container .article-actions .article-actions-tweet-button img {
height: 23px;
width: 23px;
vertical-align: -4px
}
@media screen and (min-width: 500px) {
.container .article-actions .article-actions-tweet-button {
display: inline-block;
vertical-align: calc(6px - 0.07vw)
}
}
@media screen and (min-width: 1365px) {
.container .article-actions .article-actions-tweet-button {
padding: 7px 0px !important
}
.container .article-actions .article-actions-tweet-button img {
height: 17px;
width: 17px
}
}
@media screen and (min-width: 1439px) {
.container .article-actions .article-actions-tweet-button {
padding: 8px 0px !important
}
.container .article-actions .article-actions-tweet-button img {
height: 20px;
width: 20px
}
}
@media screen and (min-width: 1530px) {
.container .article-actions .article-actions-tweet-button {
padding: 20px 0px 12px !important
}
.container .article-actions .article-actions-tweet-button img {
height: 23px;
width: 23px
}
}
.container .html-variant-wrapper {
width: 88%;
margin: 0 auto 25px
}
@media screen and (min-width: 500px) {
.container .html-variant-wrapper {
width: 82%
}
}
.dev-ios-native-body .container .article-actions {
padding: 4px 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.33);
transition: padding 0.33s
}
.dev-ios-native-body .container .article-actions .article-share-action-block .dropdown-content {
bottom: 43px
}
.showpage-reaction-cta {
width: 390px;
max-width: 78%;
margin: 30px auto;
padding: 20px 10px;
position: relative;
box-shadow: 3px 4px 0 #20a99a;
display: none
}
.showpage-reaction-cta .down-arrow {
position: absolute;
bottom: -20px;
left: 30px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 27px solid #66e2d5
}
.show-comments-header {
width: 800px;
max-width: 90%;
margin: auto;
margin-bottom: -50px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
.show-comments-footer {
width: 800px;
max-width: 98%;
margin: auto;
margin-top: -80px;
text-align: center
}
.show-comments-footer .full-discussion-button {
padding: calc(0.6vw + 6px) 0;
border-radius: 3px;
display: block;
width: 100%;
margin: 7.5vw auto calc(1vw + 5px);
max-width: 450px;
background: #66e2d5;
color: #0a0a0a;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed
}
@media screen and (min-width: 500px) {
.show-comments-footer .full-discussion-button {
font-size: 1.1em
}
}
.show-comments-footer .full-discussion-button:hover {
opacity: 0.96
}
.org-branding {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-align: center;
margin-top: 20px;
margin-bottom: 0;
padding-bottom: 20px
}
.org-branding a {
color: var(--body-color)
}
.org-branding .inner {
width: 800px;
max-width: calc(100% - 40px);
overflow: hidden;
padding: 24px 20px 0;
margin: auto
}
.org-branding .content {
font-size: calc(0.45vw + 16px)
}
@media screen and (min-width: 520px) {
.org-branding .content {
float: left;
width: calc(100% - 150px);
text-align: left
}
}
.org-branding .content .name {
font-size: 2.2em;
font-weight: 500
}
.org-branding .content .summary {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 8px;
font-weight: 400;
font-size: 0.9em
}
@media screen and (min-width: 520px) {
.org-branding .content .summary {
font-size: 17px
}
}
.org-branding .content .social {
font-size: 0.9em;
margin: 4px 0
}
@media screen and (min-width: 520px) {
.org-branding .content .social {
font-size: 18px
}
}
.org-branding .content .social a {
margin-right: 10px;
opacity: 0.85
}
.org-branding .content .social a:hover {
opacity: 1
}
.org-branding .profile-image {
text-align: center;
width: 100%;
float: left;
padding-top: 6px
}
@media screen and (min-width: 520px) {
.org-branding .profile-image {
width: 150px
}
}
.org-branding .profile-image img {
height: 100px;
width: 100px;
border-radius: 5px;
border-radius: 140px;
border: 3px solid #f5f6f7;
background: #f5f6f7
}
.comments-container-container {
padding-bottom: 20px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
@-webkit-keyframes fade-in {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fade-in {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes SHW {
from {
bottom: -80px
}
to {
bottom: 0
}
}
@keyframes SHW {
from {
bottom: -80px
}
to {
bottom: 0
}
}
@-webkit-keyframes image-reaction-animation {
0% {
}
30% {
transform: rotate(-15deg)
}
100% {
}
}
@keyframes image-reaction-animation {
0% {
}
30% {
transform: rotate(-15deg)
}
100% {
}
}
.comments .article-header .body kbd, .comments-container form .comment-preview-div kbd, .single-comment-node .body kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: solid 1px #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5
}
@-webkit-keyframes fade-out {
0% {
background-color: #d0ffeb
}
100% {
background-color: white
}
}
@keyframes fade-out {
0% {
background-color: #d0ffeb
}
100% {
background-color: white
}
}
a.header-link {
color: var(--body-color);
display: block
}
a.header-link:hover {
color: var(--body-color)
}
.show-page-content-display {
vertical-align: top;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0 auto 32px;
position: relative;
overflow: hidden
}
.show-page-content-display a {
color: var(--card-color)
}
.show-page-content-display .content-classification {
margin: 15px 20px -8px;
text-align: left;
font-size: 0.8em
}
@media screen and (min-width: 680px) {
.show-page-content-display .content-classification {
margin: 15px 20px 0px
}
}
.show-page-content-display .content-classification .content-classification-text {
display: inline-block;
padding: 3px 25px;
border-radius: 3px;
background: #f5f6f7;
background: var(--theme-container-accent-background, #f5f6f7);
color: var(--body-color)
}
.show-page-content-display .main-content-display {
padding: 20px 0px;
width: calc(98% - 60px);
padding: 30px;
margin-bottom: 10px
}
@media screen and (min-width: 680px) {
.show-page-content-display .main-content-display {
float: left;
width: calc(97% - 345px);
border-right: 2px solid #dbdbdb;
margin-left: 3%;
padding: 15px 25px 35px 15px;
margin-bottom: 35px
}
}
.show-page-content-display .main-content-display h2 {
margin: 0px auto 10px;
font-size: 1.55em
}
@media screen and (min-width: 680px) {
.show-page-content-display .main-content-display h2 {
font-size: 2.2em
}
}
.show-page-content-display .main-content-display .content-author img {
border-radius: 100%;
width: 28px;
vertical-align: -7px;
margin-right: 3px
}
.show-page-content-display .main-content-display .content-author a {
color: #666666
}
.show-page-content-display .main-content-display p {
margin-bottom: 30px
}
.show-page-content-display .main-content-display .cta {
width: 100px;
padding: 7px 9px;
padding: 3px 3px;
margin-top: 10px;
margin-right: 3px;
display: inline-block;
font-size: 0.95em
}
@media screen and (min-width: 680px) {
.show-page-content-display .main-content-display .cta {
font-size: 1.2em;
padding: 7px 20px
}
}
.show-page-content-display .main-content-display .engagement-count {
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
color: #666666;
margin-top: -18px;
margin-bottom: -25px
}
.show-page-content-display .main-content-display .engagement-count img {
height: 20px;
min-width: 27px;
vertical-align: -3px;
margin-right: 3px
}
.show-page-content-display .main-content-display .engagement-count img.comments-bubble {
margin-left: 10px
}
.show-page-content-display .main-content-display .engage-button {
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
background: #4a69ff;
color: white;
letter-spacing: 1px;
border: 0px;
padding: 7px 8px;
margin-top: 10px;
font-size: 0.95em
}
@media screen and (min-width: 680px) {
.show-page-content-display .main-content-display .engage-button {
font-size: 1.2em;
padding: 7px 16px
}
}
.show-page-content-display .main-content-display .engage-button .bm-success {
display: none
}
.show-page-content-display .main-content-display .engage-button.selected {
background: white;
color: #4a69ff
}
.show-page-content-display .main-content-display .engage-button.selected .bm-success {
display: inline-block
}
.show-page-content-display .main-content-display .engage-button.selected .bm-success img {
width: 18px;
vertical-align: -2px
}
.show-page-content-display .main-content-display .engage-button.selected .bm-initial {
display: none
}
.show-page-content-display .secondary-content-display {
display: none;
float: left;
width: 280px;
text-align: center;
padding: 10px 0px 30px
}
@media screen and (min-width: 680px) {
.show-page-content-display .secondary-content-display {
display: block
}
}
.show-page-content-display .secondary-content-display .profile-pic-wrapper {
width: 110px;
height: 110px;
border-radius: 100%;
margin: auto
}
.show-page-content-display .secondary-content-display .profile-pic-wrapper.wide-profile-image-wrapper {
height: 50px;
width: 150px;
margin-top: 50px;
margin-bottom: 10px
}
.show-page-content-display .secondary-content-display .profile-pic-wrapper img {
vertical-align: middle
}
.show-page-content-display .secondary-content-display .profile-pic-wrapper img.profile-image {
width: calc(100% - 8px);
height: calc(100% - 8px);
border-radius: 100%
}
.show-page-content-display .secondary-content-display .profile-pic-wrapper img.wide-image {
width: calc(100% - 8px)
}
.show-page-content-display .secondary-content-display .org-name {
font-weight: bold;
margin: 10px auto;
font-size: 1.1em
}
.show-page-content-display .secondary-content-display .follow-action-button {
background: #66e2d5;
color: #0a0a0a;
border: 0;
font-size: 1.05em;
border: 0;
padding: 8px 6px;
border-radius: 3px;
width: 170px
}
div.highlight pre.highlight code {
font-size: inherit;
padding: 0px
}
div.inner-comment div.body div.highlight pre.highlight {
background: #29292e
}
div.inner-comment div.body div.highlight pre.highlight code {
font-size: inherit;
white-space: inherit;
background: inherit;
color: inherit
}
.highlight .hll {
background-color: #49483e
}
.highlight {
background: #29292e;
color: #f8f8f2
}
.highlight .c {
color: #808080
}
.highlight .err {
text-shadow: 0 0 7px #f9690e
}
.highlight .k {
color: #f39c12
}
.highlight .l {
color: #dda0dd
}
.highlight .n {
color: #f8f8f2
}
.highlight .o {
color: #f9690e
}
.highlight .p {
color: #f8f8f2
}
.highlight .ch {
color: #808080
}
.highlight .cm {
color: #808080
}
.highlight .cp {
color: #808080
}
.highlight .cpf {
color: #808080
}
.highlight .c1 {
color: #808080
}
.highlight .cs {
color: #808080
}
.highlight .gd {
color: #f9690e
}
.highlight .ge {
font-style: italic
}
.highlight .gi {
color: #7ed07e
}
.highlight .gs {
font-weight: bold
}
.highlight .gu {
color: #808080
}
.highlight .kc {
color: #f39c12
}
.highlight .kd {
color: #f39c12
}
.highlight .kn {
color: #f9690e
}
.highlight .kp {
color: #f39c12
}
.highlight .kr {
color: #f39c12
}
.highlight .kt {
color: #f39c12
}
.highlight .ld {
color: #f2ca27
}
.highlight .m {
color: #dda0dd
}
.highlight .s {
color: #f2ca27
}
.highlight .na {
color: #7ed07e
}
.highlight .nb {
color: #f8f8f2
}
.highlight .nc {
color: #7ed07e
}
.highlight .no {
color: #f39c12
}
.highlight .nd {
color: #7ed07e
}
.highlight .ni {
color: #f8f8f2
}
.highlight .ne {
color: #7ed07e
}
.highlight .nf {
color: #7ed07e
}
.highlight .nl {
color: #f8f8f2
}
.highlight .nn {
color: #f8f8f2
}
.highlight .nx {
color: #7ed07e
}
.highlight .py {
color: #f8f8f2
}
.highlight .nt {
color: #f9690e
}
.highlight .nv {
color: #f8f8f2
}
.highlight .ow {
color: #f9690e
}
.highlight .w {
color: #f8f8f2
}
.highlight .mb {
color: #dda0dd
}
.highlight .mf {
color: #dda0dd
}
.highlight .mh {
color: #dda0dd
}
.highlight .mi {
color: #dda0dd
}
.highlight .mo {
color: #dda0dd
}
.highlight .sa {
color: #f2ca27
}
.highlight .sb {
color: #f2ca27
}
.highlight .sc {
color: #f2ca27
}
.highlight .dl {
color: #f2ca27
}
.highlight .sd {
color: #f2ca27
}
.highlight .s2 {
color: #f2ca27
}
.highlight .se {
color: #dda0dd
}
.highlight .sh {
color: #f2ca27
}
.highlight .si {
color: #f2ca27
}
.highlight .sx {
color: #f2ca27
}
.highlight .sr {
color: #f2ca27
}
.highlight .s1 {
color: #f2ca27
}
.highlight .ss {
color: #f2ca27
}
.highlight .bp {
color: #f8f8f2
}
.highlight .fm {
color: #7ed07e
}
.highlight .vc {
color: #f8f8f2
}
.highlight .vg {
color: #f8f8f2
}
.highlight .vi {
color: #f8f8f2
}
.highlight .vm {
color: #f8f8f2
}
.highlight .il {
color: #dda0dd
}
.ltag__replit br {
line-height: 0 !important;
display: none !important
}
.ltag__replit iframe {
margin: 0 !important
}
blockquote.ltag__twitter-tweet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: white;
max-width: 500px;
font-size: 0.75em;
line-height: 1.35em;
border-radius: 3px;
margin: 1.6em auto !important;
min-height: 60px;
cursor: pointer;
padding: 0px !important;
border: 1px solid #dbdbdb !important;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18)
}
blockquote.ltag__twitter-tweet:hover {
border: 1px solid lightgray !important
}
blockquote.ltag__twitter-tweet a {
color: #55acee
}
@media screen and (min-width: 360px) {
blockquote.ltag__twitter-tweet {
min-height: 105px
}
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__media {
position: relative;
overflow: hidden
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__media img {
width: 100%;
left: 0;
right: 0;
margin: auto;
border-top-left-radius: 3px;
border-top-right-radius: 3px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__media img.ltag__twitter-tweet__play-butt {
width: 70px;
height: 70px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__video {
display: none
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__video video {
width: 100%
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header {
position: relative;
height: 45px
}
@media screen and (min-width: 360px) {
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header {
height: 52px
}
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__profile-image {
height: 36px;
min-height: 36px;
width: 36px;
border-radius: 50px;
position: absolute;
left: calc(0.3vw + 13px);
top: calc(0.3vw + 13px);
background-color: #ececec
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__twitter-logo {
position: absolute;
right: calc(0.3vw + 8px);
top: 20px;
left: auto
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__twitter-logo img {
height: 24px;
min-height: 24px;
max-width: 24px;
display: inline-block;
width: 36px;
margin: auto
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__full-name {
color: #1c2022;
position: absolute;
left: calc(0.3vw + 57px);
top: calc(0.3vw + 13px);
font-weight: bold;
font-size: 16px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__header .ltag__twitter-tweet__username {
position: absolute;
left: calc(0.3vw + 57px);
top: calc(0.3vw + 33px);
color: #697882;
font-size: 14px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__body {
color: #1c2022;
font-size: 16px;
line-height: 22px;
padding: calc(0.3vw + 13px) calc(0.3vw + 13px) 0px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__body br {
line-height: 0 !important
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__date {
font-size: 14px;
color: #697882;
margin-top: 3px;
padding: 0px calc(0.3vw + 13px)
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote {
color: #1c2022;
margin: calc(0.3vw + 13px) calc(0.3vw + 13px) 0px;
padding: calc(0.2vw + 8px) calc(0.2vw + 8px);
border: 1px solid #dce3e8;
border-radius: 4px;
font-size: 15px;
line-height: 1.1em
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote:hover {
border: 1px solid #a09dad
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote .ltag__twitter-tweet__quote__header {
padding: 0 0 calc(0.05vw + 3px);
font-size: 0.9em
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__quote .ltag__twitter-tweet__quote__header .ltag__twitter-tweet__quote__header__name {
font-weight: bold;
font-size: 1.1em
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions {
margin: 6px auto 0px;
padding: 0px calc(0.3vw + 13px) 5px;
color: #aab8c2;
font-size: 14px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions .ltag__twitter-tweet__actions__button {
width: 18px;
height: 22px;
display: inline-block;
margin-left: 20px;
margin-right: 2px;
vertical-align: -7px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions .ltag__twitter-tweet__actions__button:first-child {
margin-left: 8px
}
blockquote.ltag__twitter-tweet .ltag__twitter-tweet__actions img {
height: 20px;
min-height: 20px
}
.ltag_github-liquid-tag {
margin: 1.1em auto 1.3em;
max-width: 580px
}
.ltag_github-liquid-tag h1 {
font-size: 1.05em !important;
line-height: 1.2em !important;
margin: 0 0 0.7em
}
@media screen and (min-width: 500px) {
.ltag_github-liquid-tag h1 {
word-wrap: break-word;
margin-bottom: 10px
}
}
.ltag_github-liquid-tag h1 a {
color: var(--body-color)
}
.ltag_github-liquid-tag h1 .issue-title {
font-weight: normal
}
.ltag_github-liquid-tag h1 .issue-number {
font-weight: 300;
color: #a3aab1;
letter-spacing: -1px
}
.ltag_github-liquid-tag h1 img.github-logo {
width: 1.15em !important;
max-width: 1.1em !important;
display: inline-block;
left: 0px;
margin-right: 0.3em;
vertical-align: -0.18em;
display: inline-block !important;
margin-left: 0 !important;
left: 0 !important;
-webkit-filter: invert(0);
filter: invert(0);
-webkit-filter: var(--theme-social-icon-invert, invert(0));
filter: var(--theme-social-icon-invert, invert(0))
}
.github-thread {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
background-color: #fff;
background-color: var(--card-bg);
border: 1px solid #d1d5da;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
font-size: 0.77em;
line-height: 1.15em;
margin: 0;
width: 98%;
overflow: hidden
}
.github-thread .arrow-left-outer {
display: none
}
@media screen and (min-width: 500px) {
.github-thread .arrow-left-outer {
display: block;
width: 0;
height: 0;
border-width: 8px;
border-color: transparent;
border-style: solid solid outset;
border-right-color: #d1d5da;
content: ' ';
float: left;
margin-left: -31px;
margin-top: 13px
}
}
.github-thread .arrow-left-inner {
display: none
}
@media screen and (min-width: 500px) {
.github-thread .arrow-left-inner {
display: block;
width: 0;
height: 0;
border-width: 8px;
border-color: transparent;
border-style: solid solid outset;
border-right-color: #f6f8fa;
content: ' ';
float: left;
margin-left: -30px;
margin-top: 13px
}
}
.github-thread .timeline-comment-header {
display: flex;
background: #f6f8fa;
background: var(--card-bg);
border-bottom: 1px solid #d1d5da;
padding: 0px 15px
}
@media screen and (min-width: 500px) {
.github-thread .timeline-comment-header {
display: block
}
}
.github-thread .timeline-comment-header img.github-liquid-tag-img {
min-height: inherit;
width: 44px;
height: 44px;
border-radius: 3px;
float: none;
padding: 10px 0 10px 12px;
margin: inherit
}
@media screen and (min-width: 500px) {
.github-thread .timeline-comment-header img.github-liquid-tag-img {
float: left;
padding: 0;
margin-left: -75px
}
}
.github-thread .timeline-comment-header-text {
padding: 10px 0px
}
.github-thread .timeline-comment-header-text a {
color: #586069
}
.github-thread .timeline-comment-header-text a:hover {
color: #586069;
text-decoration: underline
}
.ltag-github-body {
padding: 1em 0.5em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
max-height: calc(21vw + 165px);
overflow: hidden
}
@media screen and (min-width: 430px) {
.ltag-github-body {
max-height: calc(20vw + 153px)
}
}
@media screen and (min-width: 800px) {
.ltag-github-body {
max-height: 310px
}
}
.ltag-github-body h1, .ltag-github-body h2, .ltag-github-body h3, .ltag-github-body h4, .ltag-github-body h5, .ltag-github-body h6 {
font-weight: 500 !important
}
.ltag-github-body h1 {
margin-left: 0;
font-size: 1.9em;
padding-bottom: 0.3em;
border-bottom: 1px solid #eaecef;
margin-top: 1em !important;
margin-bottom: 0.9em !important
}
.ltag-github-body h3 {
margin-top: 1em !important;
margin-bottom: 0.9em !important;
padding: 0;
font-size: 1.2em;
font-weight: 600;
line-height: 1.25
}
.ltag-github-body h4 {
padding: 0
}
.ltag-github-body *:first-child {
margin-top: 0 !important
}
.ltag-github-body *:last-child {
margin-bottom: 0 !important
}
.ltag-github-body img {
left: inherit
}
.ltag-github-body blockquote {
color: #6a737d;
padding: 0px 1em;
border-left: 0.25em solid #dfe2e5;
margin: 16px 0px
}
.ltag-github-body kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
background-color: var(--card-bg);
border: solid 1px #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5
}
.ltag-github-body p {
margin-top: 0px;
padding: 0px;
margin-bottom: 15px
}
.ltag-github-body p a.github-user-link {
color: var(--card-color-secondary);
font-weight: 600;
white-space: nowrap
}
.ltag-github-body p a.github-user-link:hover {
color: #24292e;
text-decoration: underline
}
.ltag-github-body code {
border-radius: 3px;
padding: 0.2em 5px 0px;
margin: 0px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
}
.ltag-github-body pre {
width: 100% !important;
margin: 0px;
color: black;
background-color: #f6f8fa;
padding: 0
}
.ltag-github-body pre code {
background-color: #f6f8fa;
color: black;
padding: 0em 0px 0px !important;
line-height: 2em !important
}
.ltag-github-body .highlight pre, .ltag-github-body pre, .ltag-github-body pre code {
padding: 16px !important;
overflow: auto !important;
font-size: 14px !important;
margin-bottom: 16px !important;
background-color: #f7f7f7 !important;
border-radius: 3px !important;
box-sizing: border-box !important;
color: black !important;
border-radius: 3px !important;
margin: 0.95em 0 1.2em !important
}
.ltag-github-body .highlight {
font-size: 14px !important;
margin-bottom: 16px !important;
border-radius: 3px !important
}
.ltag-github-body b, .ltag-github-body strong {
font-weight: 600
}
.ltag-github-body .pl-c {
color: #969896
}
.ltag-github-body .pl-c1, .ltag-github-body .pl-s .pl-v {
color: #0086b3
}
.ltag-github-body .pl-e, .ltag-github-body .pl-en {
color: #795da3
}
.ltag-github-body .pl-s .pl-s1, .ltag-github-body .pl-smi {
color: #333
}
.ltag-github-body .pl-ent {
color: #63a35c
}
.ltag-github-body .pl-k {
color: #a71d5d
}
.ltag-github-body .pl-pds, .ltag-github-body .pl-s, .ltag-github-body .pl-s .pl-pse .pl-s1, .ltag-github-body .pl-sr, .ltag-github-body .pl-sr .pl-cce, .ltag-github-body .pl-sr .pl-sra, .ltag-github-body .pl-sr .pl-sre {
color: #183691
}
.ltag-github-body .pl-v {
color: #ed6a43
}
.ltag-github-body .pl-id {
color: #b52a1d
}
.ltag-github-body .pl-ii {
background-color: #b52a1d;
color: #f8f8f8
}
.ltag-github-body .pl-sr .pl-cce {
color: #63a35c;
font-weight: bold
}
.ltag-github-body .pl-ml {
color: #693a17
}
.ltag-github-body .pl-mh, .ltag-github-body .pl-mh .pl-en, .ltag-github-body .pl-ms {
color: #1d3e81;
font-weight: bold
}
.ltag-github-body .pl-mq {
color: #008080
}
.ltag-github-body .pl-mi {
color: #333;
font-style: italic
}
.ltag-github-body .pl-mb {
color: #333;
font-weight: bold
}
.ltag-github-body .pl-md {
background-color: #ffecec;
color: #bd2c00
}
.ltag-github-body .pl-mi1 {
background-color: #eaffea;
color: #55a532
}
.ltag-github-body .pl-mdr {
color: #795da3;
font-weight: bold
}
.ltag-github-body .pl-mo {
color: #1d3e81
}
.gh-btn-container {
text-align: center;
padding: 0.35em 0 1.35em;
box-shadow: -0px -0px 60px 42px #fff;
box-shadow: 0px 0px 60px 42px var(--card-bg);
position: relative;
z-index: 100
}
.gh-btn {
color: #0366d6;
background-color: #f1f8ff;
border-radius: 3px;
line-height: 20px;
padding: 0.25em 1.2em;
opacity: 0.9;
font-size: 0.94em;
font-weight: bold;
border: 1px solid #0366d6
}
.gh-btn:hover {
opacity: 1
}
.liquid-comment {
padding: 0px;
background: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0.95em 0 1.2em;
position: relative;
border: 1px solid var(--card-color-tertiary);
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px
}
@media screen and (min-width: 760px) {
.liquid-comment {
margin: 0.95em auto;
width: 620px
}
}
.liquid-comment .details {
padding: 0px;
margin: 13px;
height: 33px;
border-top-left-radius: 3px;
border-top-left-radius: 3px;
color: #333333;
display: flex
}
.liquid-comment .details img {
left: inherit
}
.liquid-comment .details img.profile-pic {
min-height: inherit;
height: 33px;
width: 33px;
border-radius: 100px;
margin: 0
}
.liquid-comment .details .icon-img {
min-height: inherit;
height: 16px;
width: 16px;
margin-right: 0px;
opacity: 0.7
}
.liquid-comment .details .comment-date {
border: none;
position: absolute;
top: calc(28px - 0.25vw);
right: calc(5px + 0.1vw) !important;
font-size: 12px;
text-align: right;
display: block;
width: 100px
}
.liquid-comment .details .comment-date a {
color: var(--card-color-tertiary)
}
.liquid-comment .details a {
color: var(--card-color-tertiary);
line-height: initial;
align-self: center;
margin-right: 6px
}
.liquid-comment .details a:last-child {
align-self: baseline;
position: absolute;
right: 5px
}
.liquid-comment .body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #0a0a0a;
color: var(--body-color);
font-size: 0.95em;
line-height: 1.35em;
overflow: hidden;
margin: 13px;
word-wrap: break-word;
width: auto;
padding: 0;
margin-bottom: 10px !important
}
.liquid-comment .body pre {
width: auto;
margin-left: 0;
padding: 10px
}
.liquid-comment .body h1, .liquid-comment .body h2, .liquid-comment .body h3, .liquid-comment .body h4, .liquid-comment .body h5, .liquid-comment .body h6 {
padding: 0px;
margin: 4px 0px calc(1.1vw + 10px);
font-size: 1em;
font-weight: 600
}
.liquid-comment .body h1 {
font-size: 1.3em
}
.liquid-comment .body p {
padding: 0px;
font-size: 0.95em;
margin: 0 0 15px 0
}
.liquid-comment .body br {
line-height: 220%
}
.liquid-comment .body ul, .liquid-comment .body ol {
padding-left: 6px;
margin: 0.8em 0.7em 0.8em 1em
}
.liquid-comment .body ul {
list-style-type: square
}
.liquid-comment .body li {
margin: 3px 0px calc(0.5vw + 5px)
}
.liquid-comment .body blockquote {
border-left: calc(0.2vw + 2px) solid #333;
padding: 0.1% 3% 0.1% 2%;
margin: 1.6em 1vw;
font-size: 0.92em;
line-height: 1.4em
}
.liquid-comment .body blockquote p {
padding: 0;
margin: 0.95em 0 0.95em
}
.liquid-comment .body blockquote.twitter-tweet {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: white;
max-width: 480px;
min-height: 135px;
border: 1px solid #e9eef2;
font-size: 17px;
line-height: 20px;
border-radius: 5px;
margin-top: 10px;
padding: 10px
}
.liquid-comment .body .edited-notification {
color: #999999;
font-size: 0.7em;
padding: 3px 0px 0px;
position: relative;
z-index: 1
}
.liquid-comment .body code {
margin: auto;
white-space: nowrap;
background: #f9fafa;
background: var(--body-bg);
padding: 1px 5px 0px;
border-radius: 2px;
color: #333842;
font-size: 0.8em;
display: inline-block;
vertical-align: 0.1em;
max-width: 100%;
line-height: 1.4em
}
.liquid-comment .body img {
max-width: 100%
}
.liquid-comment .body button {
border: 0px;
background: transparent;
vertical-align: 2px;
cursor: pointer;
border-radius: 3px;
display: block;
padding: 0px;
position: relative;
z-index: 6
}
.liquid-comment .body button img {
left: inherit;
min-height: 0px;
height: 16px;
opacity: 0.62
}
.liquid-comment .body button:hover img {
opacity: 1
}
.liquid-comment .body button .voted-heart {
display: none;
font-size: 22px;
line-height: 21px;
vertical-align: -2px
}
@media screen and (min-width: 390px) {
.liquid-comment .body button {
vertical-align: -7px
}
}
.liquid-comment .body button.reacted {
color: #66e2d5
}
.liquid-comment .body button.reacted img {
display: none
}
.liquid-comment .body button.reacted .voted-heart {
display: inline-block
}
.ltag__link__link {
color: #0a0a0a !important;
color: var(--body-color) !important
}
.ltag__link__link:active {
opacity: 0.7
}
.ltag__link {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border: 1px solid #dbdbdb;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
display: block;
margin: 0.95em 0 1.2em;
max-width: 100%
}
@media screen and (min-width: 760px) {
.ltag__link {
margin: 0.95em auto;
width: 620px
}
}
.ltag__link .video-image {
position: relative;
padding-top: 56%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #0a0a0a no-repeat center center;
background-size: cover;
display: block
}
.ltag__link .video-timestamp {
position: absolute;
font-size: 12px;
bottom: 6px;
right: 5px;
background-color: rgba(0, 0, 0, 0.8);
color: #ffffff;
padding: 0px 5px 0px;
font-weight: 500;
border-radius: 3px;
display: block;
line-height: 20px
}
.ltag__link .video-timestamp img {
height: 14px;
width: 14px;
display: inline-block;
vertical-align: -2px;
padding-left: 5px
}
.ltag__link .ltag__link__pic {
display: inline-block;
padding: calc(0.4vw + 8px) calc(0.8vw + 8px);
padding-right: 8px
}
.ltag__link .ltag__link__pic img {
width: calc(2.2vw + 45px);
height: calc(2.2vw + 45px);
margin: auto auto !important;
border-radius: 150px
}
.ltag__link .ltag__link__content {
display: inline-block;
vertical-align: top;
padding: calc(0.5vw + 6px);
padding-left: 0;
width: calc(100% - 5vw - 70px)
}
.ltag__link .ltag__link__content h2 {
margin: 0;
padding: 0;
font-weight: 500;
font-size: 1.5em
}
.ltag__link .ltag__link__content h3 {
margin: 0.1vw 0;
padding: 0;
font-size: 0.7em;
margin-bottom: 0;
font-weight: bold;
color: #666666;
color: var(--card-color-tertiary)
}
.ltag__link .ltag__link__content h3 a {
color: var(--card-color-tertiary)
}
.ltag__link .ltag__link__content .missing {
padding: 0 10px !important
}
.ltag__link .ltag__link__content .ltag__link__taglist {
margin: 0;
padding: 0;
line-height: 1;
font-size: 0.88em;
margin-bottom: 5px
}
.ltag__link .ltag__link__content .ltag__link__tag {
margin-right: calc(0.4vw + 4px);
font-size: 0.8em;
margin-left: 1px
}
.ltag__link .ltag__link__content .ltag__link__servicename {
color: var(--card-color-tertiary);
font-size: 0.7em
}
.ltag__link .ltag__link__content .ltag__link__servicename img {
vertical-align: -5px;
height: 1.5em;
width: 1.5em;
display: inline-block;
margin-left: 2px
}
.single-comment-node .ltag__link {
width: 100%;
margin: 0.95em 0 1.2em
}
.single-comment-node .ltag__link .ltag__link__pic {
padding-top: calc(0.5vw + 12px)
}
.single-comment-node .ltag__link .ltag__link__pic img {
width: calc(2.5vw + 40px)
}
.single-comment-node .ltag__link .ltag__link__content h2 {
font-size: calc(1.05em + 0.7vw) !important;
margin-top: 0em !important;
margin-bottom: 0.4em !important;
font-weight: 400 !important;
line-height: 1.22em !important
}
.single-comment-node .ltag__link .ltag__link__content h3 {
margin-bottom: 0.4em !important;
font-size: calc(0.8em + 0.5vw) !important;
font-weight: 400 !important
}
.podcastliquidtag {
padding: 0px;
margin-bottom: 20px;
margin-top: 90px;
border-radius: 3px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5)
}
@media screen and (min-width: 830px) {
.podcastliquidtag {
flex-direction: row-reverse;
margin: 20px 0
}
}
.podcastliquidtag .podcastliquidtag__info {
color: white;
font-weight: 500;
margin: -5px 15px 10px
}
@media screen and (min-width: 830px) {
.podcastliquidtag .podcastliquidtag__info {
margin: 20px 15px;
width: 77%
}
}
.podcastliquidtag .podcastliquidtag__info a {
color: white
}
.podcastliquidtag .podcastliquidtag__info a .tinyimage {
width: 22px;
height: 22px;
border-radius: 100%;
margin-right: 10px;
left: 0;
float: left
}
.podcastliquidtag .podcastliquidtag__info a:hover {
color: white
}
.podcastliquidtag .podcastliquidtag__info h1 {
margin: 0px 0px 0.5em 0px;
font-weight: 700;
padding: 0
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__episodetitle {
font-size: calc(1.8vw + 19px)
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle {
font-size: calc(1.2vw + 14px);
padding: 0px 0px;
font-weight: 500;
margin-top: -5px
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle button {
font-size: 25px;
border-radius: 3px;
border: 0px;
width: 100%;
margin-top: 15px;
padding: 20px 0px
}
@media screen and (min-width: 950px) {
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle button {
font-size: calc(1.2vw + 16px);
margin-left: 5px;
display: inline-block;
width: 220px;
padding: 5px 0px
}
}
@media screen and (min-width: 950px) {
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__episodetitle {
font-size: 38px
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle {
font-size: 24px
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__info__podcasttitle button {
font-size: 22px;
width: 165px
}
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links {
display: flex;
flex-direction: row;
font-size: 14px
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a {
margin-right: 10px;
background-color: #292e34;
color: white;
border-radius: 3px;
font-size: 13px;
font-weight: 400;
width: 100px;
border: 1px solid #3c5163;
box-shadow: inset 1px 1px 0 #485f74;
transition: background-color 250ms ease;
text-align: center
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a:hover {
background-color: #202429
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a img {
display: inline;
width: 16px;
height: 16px;
left: 0;
margin-right: 5px;
vertical-align: middle
}
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a .service-name {
display: none
}
@media screen and (min-width: 630px) {
.podcastliquidtag .podcastliquidtag__info .podcastliquidtag__links a .service-name {
display: inline-block
}
}
.podcastliquidtag .podcastliquidtag__record {
position: relative;
margin: 20px 20px;
height: 70px;
transform: translateY(-33px)
}
@media screen and (min-width: 830px) {
.podcastliquidtag .podcastliquidtag__record {
width: 15%;
height: inherit;
transform: none
}
}
.podcastliquidtag .podcastliquidtag__record:hover {
cursor: pointer
}
.podcastliquidtag .podcastliquidtag__record img {
max-width: 100%
}
.podcastliquidtag .podcastliquidtag__record .pause-butt {
display: none
}
.podcastliquidtag .podcastliquidtag__record .podcastliquidtag__podcastimage {
border-radius: 100%;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
height: 130px;
background: #0a0a0a
}
@media screen and (min-width: 830px) {
.podcastliquidtag .podcastliquidtag__record .podcastliquidtag__podcastimage {
height: inherit
}
}
.podcastliquidtag .podcastliquidtag__record .button {
position: absolute;
height: 115px;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0
}
@media screen and (min-width: 830px) {
.podcastliquidtag .podcastliquidtag__record .button {
height: 75px
}
}
.podcastliquidtag .playing .play-butt {
display: none
}
.podcastliquidtag .playing .pause-butt {
display: block
}
.podcastliquidtag .playing .podcastliquidtag__podcastimage {
-webkit-animation: spin 20s linear infinite;
animation: spin 20s linear infinite;
-webkit-backface-visibility: hidden
}
@-webkit-keyframes spin {
100% {
transform: rotate(360deg)
}
}
@keyframes spin {
100% {
transform: rotate(360deg)
}
}
.ltag__user__link {
color: var(--body-color)
}
.ltag__user__link:active {
opacity: 0.7
}
.ltag__user__link.profile-image-link:hover {
opacity: 1
}
.ltag__user__link.profile-image-link:active {
opacity: 1
}
.ltag__user {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border: 1px solid #dbdbdb;
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8));
border-radius: 3px;
display: block;
margin: 0.95em 0 1.2em;
position: relative;
overflow: hidden
}
@media screen and (min-width: 760px) {
.ltag__user {
margin: 0.95em auto;
width: 620px
}
}
.ltag__user .ltag__user__pic {
display: inline-block;
padding: calc(0.6vw + 8px);
padding-right: 8px
}
.ltag__user .ltag__user__pic img {
width: calc(5vw + 30px);
height: calc(5vw + 30px);
margin: auto auto !important;
border-radius: 50%
}
.ltag__user .ltag__user__content {
display: inline-block;
vertical-align: top;
padding: calc(0.5vw + 6px);
padding-left: 0;
width: calc(100% - 8vw - 60px)
}
.ltag__user .ltag__user__content h2 {
margin: 0;
padding: 0;
font-weight: 500
}
.ltag__user .ltag__user__content h2 .follow-action-button {
visibility: hidden;
min-height: 25px;
display: inline-block;
color: white;
background: #66e2d5;
border-radius: 5px;
font-size: 0.6em;
vertical-align: 0.3em;
padding: 2px 20px;
border: 1px solid #66e2d5;
margin: 0.2em 0.5em;
cursor: pointer
}
.ltag__user .ltag__user__content h2 .follow-action-button.following-butt {
background: #66e2d5;
color: white
}
.ltag__user .ltag__user__content h2 .follow-action-button.showing {
visibility: visible
}
.ltag__user .ltag__user__content .ltag__user__social {
margin: 2px 0px;
padding-left: 0px;
line-height: 22px;
font-size: 0.75em
}
.ltag__user .ltag__user__content .ltag__user__social a {
color: var(--card-color-tertiary);
margin-right: 10px;
display: inline-block
}
.ltag__user .ltag__user__content .ltag__user__social a .icon-img {
float: left;
width: 15px;
height: 15px;
border-radius: 3px;
vertical-align: -2px;
margin: 3px 0;
opacity: 0.7
}
.ltag__user .ltag__user__content .ltag__user__summary {
margin: 0.3em 0;
padding: 0;
font-size: 0.889em;
margin-bottom: 0;
line-height: 1.2em;
opacity: 0.85
}
.ltag__user .ltag__user__content .ltag__user__taglist {
margin: 1em 0px;
padding: 0px;
line-height: 1;
font-size: 0.8em;
opacity: 0.7
}
.ltag__user .ltag__user__content .ltag__user__taglist a {
color: #0a0a0a;
margin-right: 1em;
display: inline-block;
height: 30px
}
.ltag__user .ltag__user__content .ltag__user__taglist img {
display: inline-block !important;
width: 1em !important;
height: 1em !important;
margin-right: 2px;
vertical-align: -0.1em;
left: 0px
}
.ltag__tag {
border: 1px solid #0a0a0a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border: 1px solid #dbdbdb;
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8));
border-radius: 3px;
display: block;
margin: 0.95em 0 1.2em;
position: relative;
overflow: hidden
}
@media screen and (min-width: 760px) {
.ltag__tag {
margin: 0.95em auto;
width: 620px
}
}
.ltag__tag .ltag__tag__content {
width: 90%;
width: calc(100% - 36px);
padding: calc(0.5vw + 6px) 0px;
padding-left: 24px
}
.ltag__tag .ltag__tag__content a {
color: var(--card-color)
}
.ltag__tag .ltag__tag__content h2 {
margin: 0;
padding: 0;
font-weight: 500
}
.ltag__tag .ltag__tag__content h2 .follow-action-button {
visibility: hidden;
min-height: 25px;
display: inline-block;
color: white;
background: #66e2d5;
border-radius: 5px;
font-size: 0.6em;
vertical-align: 0.1em;
padding: 2px 20px;
border: 1px solid #66e2d5;
cursor: pointer
}
.ltag__tag .ltag__tag__content h2 .follow-action-button.following-butt {
background: #66e2d5;
color: white
}
.ltag__tag .ltag__tag__content h2 .follow-action-button.showing {
visibility: visible
}
.ltag__tag .ltag__tag__content .ltag__tag__summary {
padding-top: calc(0.5vw + 6px);
font-size: 0.77em;
line-height: 1.1em
}
#instagram-liquid-tag {
background: white;
border: 1px solid #dbdbdb;
margin: 1px 1px 12px;
max-width: 450px;
width: calc(100% - 2px);
box-shadow: none;
display: block;
padding: 0px
}
.instagram-position {
position: relative;
max-width: 460px;
margin: 0 auto
}
.ltag_gist-liquid-tag table {
margin: 0 !important
}
.ltag_gist-liquid-tag td {
border: 0 !important;
width: 0 !important
}
.ltag_gist-liquid-tag .gist .markdown-body pre {
margin-left: 0;
width: 100%;
box-sizing: border-box;
color: #29292e
}
.ltag_gist-liquid-tag .gist .markdown-body pre code {
color: #29292e
}
.ltag_gist-liquid-tag .gist .blob-wrapper table {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2
}
.ltag-github-readme-tag {
border: 1px solid #dbdbdb;
border-radius: 3px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
margin: 1.1em auto 1.3em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
overflow: hidden;
max-width: 620px
}
.ltag-github-readme-tag a {
color: var(--link-brand-color) !important
}
.ltag-github-readme-tag .readme-overview {
padding: 0.8em 0.5em;
border-bottom: 1px solid #dbdbdb
}
.ltag-github-readme-tag .readme-overview h2 {
font-weight: 400 !important;
font-size: 1.2em !important;
line-height: 1.3em !important;
margin: 0em 0px 0.5em !important
}
.ltag-github-readme-tag .readme-overview h2 img {
width: 1.15em !important;
max-width: 1.1em !important;
display: inline-block;
left: 0px;
margin-right: 0.3em;
vertical-align: -0.18em;
-webkit-filter: invert(0);
filter: invert(0);
-webkit-filter: var(--theme-social-icon-invert, invert(0));
filter: var(--theme-social-icon-invert, invert(0))
}
.ltag-github-readme-tag .readme-overview h3 {
font-weight: 400 !important;
margin: 0;
margin-left: 0.15em;
font-size: 0.75em !important;
line-height: 1.05em !important
}
.ltag-github-readme-tag .ltag-github-body {
font-size: 0.72em;
line-height: 1.12em;
text-align: left;
min-height: 100px
}
.ltag-github-readme-tag .gh-btn-container {
padding: 0.1em 0 1.15em
}
.ltag-github-readme-tag .gh-btn {
padding: 0.28em 1.2em;
font-size: 0.75em
}
.ltag-github-readme-tag .markdown-body {
padding: 0em 0.2em
}
.ltag-github-readme-tag .markdown-body table {
max-width: 80%;
margin-left: 10%
}
.ltag-github-readme-tag .markdown-body img {
display: inline-block;
left: 0px
}
.ltag-github-readme-tag .markdown-body .highlight {
background: white
}
.ltag-github-readme-tag .markdown-body pre {
max-width: 100%;
margin-left: 10%
}
.ltag-github-readme-tag .markdown-body .anchor {
display: none
}
.ltag-poll {
width: 600px;
max-width: 96%;
margin: auto;
border-radius: 3px;
border: 1px solid #dbdbdb !important;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 2px 15px 18px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 1.6em auto !important
}
.ltag-poll h3 {
margin: 15px 0px
}
.ltag-poll .ltag-pollanswers {
list-style-type: none !important;
margin: 0 !important;
padding: 0 !important;
padding-bottom: 8px !important;
font-size: 0.9em !important
}
.ltag-poll .ltag-pollanswers li {
padding-left: 8px;
border-radius: 3px;
width: 95%;
position: relative
}
.ltag-poll .ltag-pollanswers li:hover {
background: #f5f6f7;
background: var(--theme-container-background-hover, #f5f6f7)
}
.ltag-poll .ltag-pollanswers li.ltag-polloption-justshowmetheresults:hover {
background: transparent
}
.ltag-poll .ltag-pollanswers li.already-voted {
background: transparent
}
.ltag-poll .ltag-pollanswers input {
vertical-align: top;
margin-top: 1.05em
}
.ltag-poll .ltag-pollanswers label {
width: calc(100% - 40px);
padding: 2px 6px;
cursor: pointer;
vertical-align: -3px;
display: inline-block;
line-height: 1.25em
}
.ltag-poll .ltag-pollanswers .ltag-voting-results-count {
font-size: 0.7em;
color: #666666;
text-align: left
}
.ltag-poll .ltag-pollanswers button {
width: 100%;
background: transparent;
border: 0px;
font-size: 0.7em;
color: #666666;
text-align: left;
padding-left: 20px
}
.ltag-poll .ltag-pollanswers .ltag-votepercent {
display: inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 3;
border-radius: 3px
}
.ltag-poll .ltag-pollanswers .ltag-votepercent.ltag-optionvotedfor {
background: #66e2d5;
font-weight: bold
}
.ltag-poll .ltag-pollanswers .ltag-votepercent.ltag-optionnotvotedfor {
background: #dbdbdb;
background: var(--theme-container-accent-background, #dbdbdb)
}
.ltag-poll .ltag-pollanswers .ltag-votepercenttext {
position: relative;
z-index: 5
}
.ltag__listing {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border: 1px solid #dbdbdb;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
display: block;
margin: 0.95em 0 1.2em;
max-width: 100%
}
@media screen and (min-width: 760px) {
.ltag__listing {
margin: 0.95em auto;
width: 620px
}
}
.ltag__listing .ltag__listing-content {
padding: calc(0.5vw + 6px)
}
.ltag__listing .ltag__listing-content h3 {
margin: 0;
padding: 0;
font-weight: 500;
font-size: 1.5em
}
.ltag__listing .ltag__listing-content h3 a {
color: var(--body-color)
}
.ltag__listing .ltag__listing-content .ltag__listing-body {
max-width: 100%;
margin: 5px 0 15px 0;
font-size: 0.9em
}
.ltag__listing .ltag__listing-content .ltag__listing-body a {
color: var(--body-color)
}
.ltag__listing .ltag__listing-content .ltag__listing-tags {
font-size: 0.7em;
line-height: 1.3em
}
.ltag__listing .ltag__listing-content .ltag__listing-tags .ltag__listing-tag {
margin-right: calc(0.4vw + 4px);
margin-left: 1px
}
.ltag__listing .ltag__listing-content .ltag__listing-tags .ltag__listing-tag a {
color: var(--card-color-secondary);
display: inline-block;
margin: 2px;
padding: 2px 7px;
border-radius: 3px;
font-weight: bold
}
.ltag__listing .ltag__listing-content .ltag__listing-author-info {
color: var(--card-color-tertiary);
line-height: 1.3em
}
.ltag__listing .ltag__listing-content .ltag__listing-author-info a {
margin: 0.1vw 0;
padding: 0;
font-size: 0.7em;
margin-bottom: 0;
font-weight: bold;
color: var(--card-color-tertiary)
}
.ltag__stackexchange--container {
max-width: 620px;
border: 1px solid #dbdbdb;
border-radius: 3px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
margin: 1.1em auto 1.3em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
overflow: hidden
}
.ltag__stackexchange--container .ltag__stackexchange--title-container {
border-bottom: 1px solid #eaecef;
display: flex;
flex-direction: column
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header {
display: flex;
justify-content: space-between
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title h1 {
margin-left: 5px;
margin-bottom: 0;
margin-top: 8px;
font-size: 1.4em;
padding-bottom: 0
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title h1 .title-flare {
background: #557de8;
color: white;
padding: 0px 7px;
border-radius: 3px
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--title h1 img {
height: 44px;
width: 44px;
display: inline-block;
vertical-align: -9px
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--post-metadata {
font-size: 0.6em
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--post-metadata span {
display: inline-block;
padding: 7px 6px;
margin-left: 6px
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--score-container {
margin-right: 15px;
display: flex;
width: 50px;
flex-direction: column;
flex-wrap: nowrap;
color: gray;
font-size: 0.85em;
align-self: center
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--score-container img {
position: initial;
width: 16px;
height: 16px
}
.ltag__stackexchange--container .ltag__stackexchange--title-container header .ltag__stackexchange--score-container .ltag__stackexchange--score-number {
width: 100%;
height: 20px;
text-align: center;
padding-bottom: 10px;
font-size: 0.8em
}
.ltag__stackexchange--container .ltag__stackexchange--body {
padding: 1em 0.5em;
max-height: calc(21vw + 165px);
overflow: hidden
}
@media screen and (min-width: 430px) {
.ltag__stackexchange--container .ltag__stackexchange--body {
max-height: calc(20vw + 153px)
}
}
@media screen and (min-width: 800px) {
.ltag__stackexchange--container .ltag__stackexchange--body {
max-height: 310px
}
}
.ltag__stackexchange--container .ltag__stackexchange--body h1, .ltag__stackexchange--container .ltag__stackexchange--body h2, .ltag__stackexchange--container .ltag__stackexchange--body h3, .ltag__stackexchange--container .ltag__stackexchange--body h4, .ltag__stackexchange--container .ltag__stackexchange--body h5, .ltag__stackexchange--container .ltag__stackexchange--body h6 {
font-weight: 500 !important
}
.ltag__stackexchange--container .ltag__stackexchange--body p {
margin-top: 0px;
padding: 0px;
margin-bottom: 15px;
font-size: 1.1rem
}
.ltag__stackexchange--container .ltag__stackexchange--body code {
border-radius: 3px;
padding: 0.2em 5px 0px;
margin: 0px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace
}
.ltag__stackexchange--container .ltag__stackexchange--body pre {
width: 100%;
margin: 0px;
padding: 0.2em 0.6em
}
.ltag__stackexchange--container .ltag__stackexchange--body pre code {
background-color: #f6f8fa;
color: black;
padding: 0em 0px 0px !important;
line-height: 2em !important
}
.ltag__stackexchange--container .ltag__stackexchange--body .highlight pre, .ltag__stackexchange--container .ltag__stackexchange--body pre, .ltag__stackexchange--container .ltag__stackexchange--body pre code {
overflow: auto;
background-color: #f7f7f7;
border-radius: 3px;
box-sizing: border-box;
color: black
}
.ltag__stackexchange--container .ltag__stackexchange--body .highlight {
font-size: 14px;
margin-bottom: 16px;
border-radius: 3px
}
.ltag__stackexchange--container .ltag__stackexchange--btn--container {
padding: 0.1em 0 1.15em;
z-index: 100;
text-align: center;
position: relative;
box-shadow: 0px 0px 60px 42px #fff;
box-shadow: 0px 0px 60px 42px var(--card-bg)
}
.ltag__stackexchange--container .ltag__stackexchange--btn {
color: #0366d6;
background-color: #f1f8ff;
border-radius: 3px;
line-height: 20px;
padding: 0.25em 1.2em;
opacity: 0.9;
font-weight: bold;
border: 1px solid #0366d6;
font-size: 0.75em
}
.ltag__stackexchange--container .ltag__stackexchange--btn:hover {
opacity: 1
}
.ltag__wikipedia--container {
border: 1px solid #dbdbdb;
border-radius: 3px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.18);
margin: 1.1em auto 1.3em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
overflow: hidden;
max-width: 620px;
padding: 0.8em 0.5em 0
}
.ltag__wikipedia--container a {
color: #0366d6 !important;
color: var(--theme-anchor-color, #0366d6) !important
}
.ltag__wikipedia--container .ltag__wikipedia--header {
font-weight: 400;
font-size: 1.2em;
line-height: 1.3em;
margin: 0em 0px 0.5em
}
.ltag__wikipedia--container .ltag__wikipedia--header .ltag__wikipedia--logo {
width: 1.15em;
max-width: 1.1em;
display: inline-block;
left: 0px;
margin-right: 0.3em;
vertical-align: -0.18em;
-webkit-filter: invert(0);
filter: invert(0);
-webkit-filter: var(--theme-social-icon-invert, invert(0));
filter: var(--theme-social-icon-invert, invert(0))
}
.ltag__wikipedia--container .ltag__wikipedia--extract {
font-weight: 400;
margin: 0;
margin-left: 0.15em;
font-size: 0.75em;
line-height: 1.5em;
padding-bottom: 1em
}
.ltag__wikipedia--container .ltag__wikipedia--btn--container {
padding: 0.1em 0 1.15em;
z-index: 100;
text-align: center;
position: relative;
box-shadow: 0px 0px 60px 42px #fff;
box-shadow: 0px 0px 60px 42px var(--theme-container-background, #fff)
}
.ltag__wikipedia--container .ltag__wikipedia--btn {
color: #0366d6;
background-color: #f1f8ff;
border-radius: 3px;
line-height: 20px;
padding: 0.25em 1.2em;
opacity: 0.9;
font-weight: bold;
border: 1px solid #0366d6;
font-size: 0.75em
}
.ltag__wikipedia--container .ltag__wikipedia--btn:hover {
opacity: 1
}
.primary-sticky-nav {
display: none
}
@media screen and (min-width: 1250px) {
.primary-sticky-nav {
display: block;
position: fixed;
left: calc(50% + 298px);
top: 70px;
bottom: 20px;
padding: 0 2px;
display: flex;
flex-flow: column wrap;
overflow: hidden;
z-index: 100;
width: 300px
}
}
.primary-sticky-nav.hidden {
display: none
}
.primary-sticky-nav .primary-sticky-nav-author a {
color: var(--card-color)
}
.primary-sticky-nav .primary-sticky-nav-author .primary-sticky-nav-author-top-profile-image {
width: 35px;
height: 35px;
border-radius: 360px;
margin-right: 5px;
vertical-align: -2px
}
.primary-sticky-nav .primary-sticky-nav-author .primary-sticky-nav-author-name {
font-size: 1.3em;
font-weight: bold
}
.primary-sticky-nav .primary-sticky-nav-author .primary-sticky-nav-author-username {
font-size: 0.8em;
font-weight: bold
}
.primary-sticky-nav .primary-sticky-nav-author .primary-sticky-nav-author-summary {
font-weight: 400;
color: var(--card-color-tertiary);
padding: 10px 0px 5px;
font-style: italic;
font-size: 0.88em;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word
}
.primary-sticky-nav .primary-sticky-nav-author .primary-sticky-nav-author-follow {
padding-top: 8px
}
.primary-sticky-nav .primary-sticky-nav-author .primary-sticky-nav-author-follow button {
width: 100%;
font-size: 1.25em;
border: 0px;
border-radius: 3px;
padding: 3px;
height: 44px
}
.primary-sticky-nav .primary-sticky-nav-profile-image {
height: 23px;
width: 23px;
border-radius: 100px;
vertical-align: -5px
}
.primary-sticky-nav .primary-sticky-nav-title {
padding: 8px 0px 9px;
margin-left: 15px;
font-weight: bold
}
.primary-sticky-nav .primary-sticky-nav-title img {
width: 19px;
height: 19px;
vertical-align: -1px
}
.primary-sticky-nav .primary-sticky-nav-title a {
color: var(--card-color);
display: inline-block
}
.primary-sticky-nav .primary-sticky-nav-element {
display: block;
padding: 10px 13px;
font-size: 0.9em;
font-weight: bold;
background: var(--card-bg);
border: none;
border: var(--theme-container-border, none);
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8));
margin-left: 10px;
color: var(--card-color);
width: 262px;
border-radius: 3px
}
@media screen and (min-width: 950px) {
.primary-sticky-nav .primary-sticky-nav-element {
border-radius: 3px;
margin-bottom: 12px
}
}
.primary-sticky-nav .primary-sticky-nav-element .primary-sticky-nav-element-details {
margin-top: 9px;
font-size: 0.8em;
color: var(--card-color-tertiary)
}
.primary-sticky-nav .user-metadata-details {
margin-top: 10px;
margin-left: 2px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.primary-sticky-nav .user-metadata-details .row {
padding: calc(3px + 0.1vw) 0px;
display: inline-block;
width: 96%
}
.primary-sticky-nav .user-metadata-details .key {
font-size: 0.8em;
font-weight: 800;
margin-bottom: 2px;
color: var(--card-color-tertiary)
}
.primary-sticky-nav .user-metadata-details .value {
display: inline-block;
font-size: 0.92em;
margin-bottom: 4px
}
.primary-sticky-nav .html-variant-wrapper {
margin: 10px
}
.primary-sticky-nav-org-summary {
font-weight: 400;
color: var(--card-color);
padding: 4px 0px;
font-size: 0.95em;
margin-top: 20px;
border-top: 1px solid #dbdbdb
}
.primary-sticky-nav-org-summary p {
margin: 12px 0px
}
.primary-sticky-nav-org-summary code {
background: #f5f6f7;
border-radius: 3px;
padding: 3px 4px;
color: #333842;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.primary-sticky-nav-org-summary .primary-sticky-nav-org-cta-link-wrapper {
text-align: center
}
.primary-sticky-nav-org-summary a.primary-sticky-nav-org-cta-link {
display: inline-block;
font-size: 1.25em;
border: 0px;
border-radius: 100px;
padding: 6px 38px;
margin-top: 20px;
background: white;
color: #0a0a0a;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight: bold;
text-align: center;
font-stretch: condensed;
margin-bottom: 5px
}
footer {
z-index: 10;
position: relative
}
footer .container {
width: 100%;
margin: auto;
max-width: 1250px;
box-shadow: none;
border: none;
font-weight: 500;
background: transparent
}
footer .container.centered-footer {
width: 97%;
max-width: 722px;
margin-left: auto
}
@media screen and (min-width: 950px) and (max-width: 1119px) {
footer .container.centered-footer {
max-width: calc(100% - 377px)
}
}
@media screen and (min-width: 1120px) {
footer .container.centered-footer {
max-width: calc(100% - 642px)
}
}
@media screen and (min-width: 1240px) {
footer .container.centered-footer {
max-width: 606px
}
}
footer .container a {
color: var(--body-color);
display: inline-block;
margin-right: 12px
}
footer .container a:hover {
text-decoration: underline
}
footer .container .inner-footer-container {
max-width: 880px;
padding: 48px 32px;
box-sizing: border-box;
line-height: 3em;
margin: auto;
background: #fdf9f3;
background: var(--theme-container-background, #fdf9f3);
border: none;
border: var(--theme-container-border, none);
box-shadow: 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8);
box-shadow: var(--theme-container-box-shadow, 0px 1px 1px rgba(10, 10, 10, 0.1), 0px 1px 2px rgba(10, 10, 10, 0.1), 0px 0px 1px rgba(10, 10, 10, 0.8))
}
@media screen and (min-width: 950px) {
footer .container .inner-footer-container {
border-radius: 3px 3px 0 0
}
}
@media screen and (min-width: 1250px) {
.stories-show + footer .inner-footer-container {
margin-left: 16px
}
.podcast_episodes-show + footer .inner-footer-container {
margin-left: auto
}
}
</style>
<style>
.home {
overflow: hidden;
position: relative;
margin: auto;
max-width: 1250px;
}
.nav {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#mactutorial">> Mac Instructions</a>
<a href="#windowstutorial">> Windows Instructions</a>
</div>
<div
class="container article"
id="mactutorial">
<article>
<header class="title" id="main-title">
<h1 class="medium">
Installing Laravel App with Homestead on MacOS
</h1>
</header>
<div class="body" id="article-body">
<p>The following are steps for installing Laravel 7.x on MacOS with Homestead.</p>
<p>Install VirtualBox.</p>
<ul>
<li>Download - Oracle VM VirtualBox <a href="https://www.virtualbox.org/wiki/Downloads">https://www.virtualbox.org/wiki/Downloads</a>
</li>
</ul>
<p>Install Vagrant.</p>
<ul>
<li>Download - Vagrant by HashiCorp <a href="https://www.vagrantup.com/downloads.html">https://www.vagrantup.com/downloads.html</a>
</li>
</ul>
<p>Install the Homestead Vagrant box. (This should take a few minutes)<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ vagrant box add laravel/homestead
</code></pre>
</div>
<p>When prompted for a provider choice, enter <code>3</code> (for VirtualBox). <br>
</p>
<p>If you couldn't install homestead using the above command, you can use the following:<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ vagrant box add laravel/homestead https://vagrantcloud.com/laravel/homestead
</code></pre>
</div>
<p>Install Homestead.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ git clone https://github.com/laravel/homestead.git ~/Homestead
</code></pre>
</div>
<p>Create a directory to house your Laravel code.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ mkdir ~/code
</code></pre>
</div>
<p>Fork the repository on Bitbucket or Github.<br></p>
<p>Clone the forked repo into your new directory.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd ~/code
$ git clone https://[your-repo-string]/ufis-bnb.git
</code></pre>
</div>
<p>Create the Homestead configuration file.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd ~/Homestead
$ bash init.sh
</code></pre>
</div>
<p><code>Homestead.yaml</code> is created in the directory.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cat Homestead.yaml
---
ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: virtualbox
authorize: ~/.ssh/id_rsa.pub
keys:
- ~/.ssh/id_rsa
folders:
- map: ~/code
to: /home/vagrant/code
sites:
- map: homestead.test
to: /home/vagrant/code/public
databases:
- homestead
features:
- mariadb: false
- ohmyzsh: false
- webdriver: false
# ports:
# - send: 50000
# to: 5000
# - send: 7777
# to: 777
# protocol: udp
</code></pre>
</div>
<p>View the <code>folders</code> property of the Homestead.yaml file.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>folders:
- map: ~/code
to: /home/vagrant/code
</code></pre>
</div>
<p>Edit the <code>sites</code> property of the Homestead.yaml file. In this case, the project directory name
is <code>ufis-bnb</code>.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>sites:
- map: homestead.test
to: /home/vagrant/code/ufis-bnb/public
</code></pre>
</div>
<p>Add name resolution to hosts file by adding <code>192.168.10.10 homestead.test</code> to the end of your hosts file.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ sudo nano /etc/hosts
192.168.10.10 homestead.test
</code></pre>
</div>
<p>To save the /etc/hosts file, press <code>CONTROL-X</code>, then <code>Y</code>, then <code>return</code>. <br>
</p>
<p>Launch Vagrant.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd ~/Homestead
$ vagrant up
</code></pre>
</div>
<p>If there aren't <code>id_rsa</code> (secret key) and <code>id_rsa.pub</code> (public key) in <code>~/.ssh</code>
directory, create key files.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ ssh-keygen -t rsa
</code></pre>
</div>
<p>Connect to the virtual machine using SSH.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ vagrant ssh
</code></pre>
</div>
<p>IMPORTANT: From the VM command line, navigate to the code directory, install dependencies, and set up database.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>vagrant@homestead:$ cd ~/code/ufis-bnb
vagrant@homestead:$ composer install
vagrant@homestead:$ php artisan migrate:fresh --seed
</code></pre>
</div>
<p>View <code>homestead.test</code> in your browser.</p>
<p><a
href="https://i.ibb.co/s2yfTLD/Screen-Shot-2020-05-04-at-11-30-21-AM.png"
class="article-body-image-wrapper"><img
src="https://i.ibb.co/s2yfTLD/Screen-Shot-2020-05-04-at-11-30-21-AM.png"
alt="Welcome to UFIS-BNB" loading="lazy"></a></p>
<p>Success!</p>
</div>
</article>
</div>
<div
class="container article"
id="windowstutorial">
<article>
<header class="title">
<h1 class="medium">
Installing Laravel App with Homestead on Windows 10
</h1>
</header>
<div class="body">
<p>The following are steps for installing Laravel 7.x on Windows 10 with Homestead.</p>
<p>Enable hardware virtualization (VT-x) by following this guide:</p>
<ul>
<li><a href="https://www.howtogeek.com/213795/how-to-enable-intel-vt-x-in-your-computers-bios-or-uefi-firmware/">https://www.howtogeek.com/213795/how-to-enable-intel-vt-x-in-your-computers-bios-or-uefi-firmware/</a>
</li>
</ul>
<p>Install VirtualBox.</p>
<ul>
<li>Download - Oracle VM VirtualBox <a href="https://www.virtualbox.org/wiki/Downloads">https://www.virtualbox.org/wiki/Downloads</a>
</li>
</ul>
<p>Install Vagrant.</p>
<ul>
<li>Download - Vagrant by HashiCorp <a href="https://www.vagrantup.com/downloads.html">https://www.vagrantup.com/downloads.html</a>
</li>
</ul>
<p>Install Git Bash.</p>
<ul>
<li>Download - Git Bash by SCM <a href="https://git-scm.com/download/win">https://git-scm.com/download/win</a>
</li>
</ul>
<p>Open git bash in <b>administrator</b> mode and install the Homestead Vagrant box. (This should take a few minutes)<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ vagrant box add laravel/homestead
</code></pre>
</div>
<p>If you get this error:<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>The box 'laravel/homestead' could not be found or
could not be accessed in the remote catalog. If this is a private
box on HashiCorp's Atlas, please verify you’re logged in via
'vagrant login'. Also, please double-check the name. The expanded
URL and error message are shown below:
URL: [“https://atlas.hashicorp.com/laravel/homestead"]
Error:
</code></pre>
</div>
<p>then download this <a href="https://www.microsoft.com/en-us/download/confirmation.aspx?id=5555">MS Visual C++ 2010 x86 Redistributables</a> and install it. Then run the following again:<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ vagrant box add laravel/homestead
</code></pre>
</div>
<p>Create a directory to house your Laravel code.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ mkdir ~/code
</code></pre>
</div>
<p>Fork the repository on Bitbucket or Github.<br></p>
<p>Clone the forked repo into your new directory.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd ~/code
$ git clone https://[your-repo-string]/ufis-bnb.git
</code></pre>
</div>
<p>Install Homestead.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd ~
$ git clone https://github.com/laravel/homestead.git ~/Homestead
</code></pre>
</div>
<p>Create the Homestead configuration file.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd ~/Homestead
$ bash init.sh
</code></pre>
</div>
<p><code>Homestead.yaml</code> is created in the directory.<br>
</p>
<p>Edit the <code>folders</code> property of the Homestead.yaml file.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>folders:
- map: e:/code
to: /home/vagrant/code
</code></pre>
</div>
<p>Edit the <code>sites</code> property of the Homestead.yaml file. In this case, the project directory name
is <code>ufis-bnb</code>.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>sites:
- map: homestead.test
to: /home/vagrant/code/ufis-bnb/public
</code></pre>
</div>
<p>Your <code>Homestead.yaml</code> file should look something like this:<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cat Homestead.yaml
---
ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: virtualbox
authorize: c:/Users/USER_NAME/.ssh/id_rsa.pub
keys:
- c:/Users/USER_NAME/.ssh/id_rsa
folders:
- map: e:/code
to: /home/vagrant/code
sites:
- map: homestead.test
to: /home/vagrant/code/ufis-bnb/public
databases:
- homestead
features:
- mariadb: false
- ohmyzsh: false
- webdriver: false
# ports:
# - send: 50000
# to: 5000
# - send: 7777
# to: 777
# protocol: udp
</code></pre>
</div>
<p>Add name resolution to your hosts file by adding <code>192.168.10.10 homestead.test</code> to the end of the file. Go to <code>C:\Windows\System32\drivers\etc\</code> folder, edit the hosts file in any text editor (text editor must have to open in administrator mode), add the following line to the bottom of the hosts file:<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>192.168.10.10 homestead.test
</code></pre>
</div>
<!--<p>Now, you can start up homestead using vagrant box by running the command <code>vagrant up</code>, but to do so you have to always run this command from <code>C:\User\USER_NAME\Homestead</code> directory. To make it so you can run vagrant boxes from anywhere using git bash, download this file, <a href="https://www.dropbox.com/s/haekwwhab4jn56r/.bash_profile?dl=0">https://www.dropbox.com/s/haekwwhab4jn56r/.bash_profile?dl=0</a>, and paste it in the <code>C:\User\USER_NAME\</code> directory. If you want to do it manually, you can create/edit a file named <code>.bash_profile</code> in <code>C:\User\USER_NAME\</code> directory, and add the following lines to the <code>.bash_profile</code> file:<br></p>-->
<!--<div class="highlight"><pre class="highlight plaintext"><code># Some shortcuts for easier navigation & access-->
<!--alias ..="cd .."-->
<!--# Homestead shortcut-->
<!--function homestead() {-->
<!--( cd ~/Homestead && vagrant $* )-->
<!--}-->
<!--</code></pre>-->
<!--</div>-->
<p>Launch Vagrant using git bash.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>$ cd C:\User\USER_NAME\Homestead
$ vagrant up
$ vagrant ssh
</code></pre>
</div>
<p>IMPORTANT: From the VM command line, navigate to the code directory, install dependencies, and set up database.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>vagrant@homestead:$ cd ~/code/ufis-bnb
vagrant@homestead:$ composer install
vagrant@homestead:$ php artisan migrate:fresh --seed
</code></pre>
</div>
<p>View <code>homestead.test</code> in your browser.</p>
<p><a
href="https://i.ibb.co/s2yfTLD/Screen-Shot-2020-05-04-at-11-30-21-AM.png"
class="article-body-image-wrapper"><img
src="https://i.ibb.co/s2yfTLD/Screen-Shot-2020-05-04-at-11-30-21-AM.png"
alt="Welcome to UFIS-BNB" loading="lazy"></a></p>
<p>Success!</p>
</div>
</article>
</div>
</body>
</html>