Skip to content

Instantly share code, notes, and snippets.

@mightyhorst
Last active December 31, 2023 06:37
Show Gist options
  • Save mightyhorst/a32129407c43c06228db1b7681685194 to your computer and use it in GitHub Desktop.
Save mightyhorst/a32129407c43c06228db1b7681685194 to your computer and use it in GitHub Desktop.
Fonts CDN
@font-face {
font-family: 'Netflix Sans';
font-weight: 100;
font-display: optional;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff2) format('woff2'),url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 300;
font-display: optional;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff2) format('woff2'),url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 400;
font-display: optional;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff2) format('woff2'),url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 700;
font-display: optional;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff2) format('woff2'),url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 800;
font-display: optional;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff2) format('woff2'),url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 900;
font-display: optional;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff2) format('woff2'),url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff) format('woff')
}
.netflix-sans-font-loaded {
font-family: 'Netflix Sans','Helvetica Neue',Helvetica,Arial,sans-serif
}
.netflix-sans-font-loaded.nkufi-font-loaded {
font-family: NKufi,'Netflix Sans','Helvetica Neue',Helvetica,Arial,sans-serif
}
.netflix-sans-font-loaded.graphik-font-loaded {
font-family: GraphikTH,'Netflix Sans','Helvetica Neue',Helvetica,Arial,sans-serif
}
.error-page {
font-family: 'Netflix Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 10px;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
background: rgba(0,0,0,.18);
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
left: 0;
margin-top: 68px;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 1000
}
@-webkit-keyframes pulsateAnimation {
from {
background-color: #1a1a1a
}
25% {
background-color: #333
}
50% {
background-color: #1a1a1a
}
to {
background-color: #1a1a1a
}
}
@-moz-keyframes pulsateAnimation {
from {
background-color: #1a1a1a
}
25% {
background-color: #333
}
50% {
background-color: #1a1a1a
}
to {
background-color: #1a1a1a
}
}
@-o-keyframes pulsateAnimation {
from {
background-color: #1a1a1a
}
25% {
background-color: #333
}
50% {
background-color: #1a1a1a
}
to {
background-color: #1a1a1a
}
}
@keyframes pulsateAnimation {
from {
background-color: #1a1a1a
}
25% {
background-color: #333
}
50% {
background-color: #1a1a1a
}
to {
background-color: #1a1a1a
}
}
@-webkit-keyframes pulsateTransparentAnimation {
from {
background-color: transparent
}
25% {
background-color: #333
}
50% {
background-color: transparent
}
to {
background-color: transparent
}
}
@-moz-keyframes pulsateTransparentAnimation {
from {
background-color: transparent
}
25% {
background-color: #333
}
50% {
background-color: transparent
}
to {
background-color: transparent
}
}
@-o-keyframes pulsateTransparentAnimation {
from {
background-color: transparent
}
25% {
background-color: #333
}
50% {
background-color: transparent
}
to {
background-color: transparent
}
}
@keyframes pulsateTransparentAnimation {
from {
background-color: transparent
}
25% {
background-color: #333
}
50% {
background-color: transparent
}
to {
background-color: transparent
}
}
.pulsate,.pulsate-transparent {
-webkit-animation-duration: 3.6s;
-moz-animation-duration: 3.6s;
-o-animation-duration: 3.6s;
animation-duration: 3.6s;
-webkit-animation-name: pulsateAnimation;
-moz-animation-name: pulsateAnimation;
-o-animation-name: pulsateAnimation;
animation-name: pulsateAnimation;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
.pulsate-transparent {
-webkit-animation-name: pulsateTransparentAnimation;
-moz-animation-name: pulsateTransparentAnimation;
-o-animation-name: pulsateTransparentAnimation;
animation-name: pulsateTransparentAnimation
}
.no-pulsate {
background-color: #333
}
.pulsateTransition-enter {
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: 10000;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0
}
.pulsateTransition-enter.pulsateTransition-enter-active {
opacity: 1
}
.pulsateTransition-leave {
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0
}
.pulsateTransition-leave.pulsateTransition-leave-active {
opacity: 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment