diff --git a/styles-neopixl/assets/favicon.ico b/styles-neopixl/assets/favicon.ico new file mode 100644 index 0000000..9c57187 Binary files /dev/null and b/styles-neopixl/assets/favicon.ico differ diff --git a/styles-neopixl/assets/logo.svg b/styles-neopixl/assets/logo.svg new file mode 100644 index 0000000..79f9651 --- /dev/null +++ b/styles-neopixl/assets/logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles-neopixl/config.json b/styles-neopixl/config.json new file mode 100644 index 0000000..8353f69 --- /dev/null +++ b/styles-neopixl/config.json @@ -0,0 +1,63 @@ +{ + "quadrants": { + "iOS": "iOS", + "Android": "Android", + "React": "React Native", + "tools": "Tools" + }, + "rings": ["adopt", "trial", "assess", "hold"], + "showEmptyRings": false, + "homepageContent": "both", + "quadrantsMap": { + "iOS": { + "colour": "#FB8734", + "txtColour": "black", + "position": 1, + "description": "All iOS technologies related as languages or framework" + }, + "Android": { + "colour": "#41C67A", + "txtColour": "black", + "position": 2, + "description": "All Android technologies related as languages or framework" + }, + "React": { + "colour": "#3099F6", + "txtColour": "black", + "position": 3, + "description": "All React technologies related as languages or framework" + }, + "tools": { + "colour": "#9399D2", + "txtColour": "white", + "position": 4, + "description": "Tools to develop, manage or debug" + } + }, + "chartConfig": { + "size": 800, + "scale": [-16, 16], + "blipSize": 12, + "ringsAttributes": [ + { + "radius": 8, + "arcWidth": 6 + }, + { + "radius": 11, + "arcWidth": 4 + }, + { + "radius": 14, + "arcWidth": 2 + }, + { + "radius": 16, + "arcWidth": 2 + } + ] + }, + "dateFormat": "MMMM YYYY" +} + + diff --git a/styles-neopixl/fonts/PathwayExtreme_14pt-Bold.ttf b/styles-neopixl/fonts/PathwayExtreme_14pt-Bold.ttf new file mode 100644 index 0000000..ad70329 Binary files /dev/null and b/styles-neopixl/fonts/PathwayExtreme_14pt-Bold.ttf differ diff --git a/styles-neopixl/fonts/PathwayExtreme_14pt-Regular.ttf b/styles-neopixl/fonts/PathwayExtreme_14pt-Regular.ttf new file mode 100644 index 0000000..2868252 Binary files /dev/null and b/styles-neopixl/fonts/PathwayExtreme_14pt-Regular.ttf differ diff --git a/styles-neopixl/fonts/PathwayExtreme_14pt-Thin.ttf b/styles-neopixl/fonts/PathwayExtreme_14pt-Thin.ttf new file mode 100644 index 0000000..ff5d836 Binary files /dev/null and b/styles-neopixl/fonts/PathwayExtreme_14pt-Thin.ttf differ diff --git a/styles-neopixl/main.7f6950a9.css b/styles-neopixl/main.7f6950a9.css new file mode 100644 index 0000000..6670add --- /dev/null +++ b/styles-neopixl/main.7f6950a9.css @@ -0,0 +1,1200 @@ +.branding { + align-items: center; + display: flex; + justify-content: space-between; + margin: 40px 0; + min-height: 60px; + opacity: 1; + transition: opacity .45s cubic-bezier(.24, 1.12, .71, .98) +} + +.branding__backlink { + flex: 0 0 auto +} + +.branding__logo { + flex: 0 0 200px +} + +.branding__logo img { + display: inline-block +} + +.branding__content { + flex: 0 1 auto +} + +.branding.is-hidden { + opacity: 0 +} + +@media(max-width:30em) { + .branding--footer { + display: block; + text-align: center + } + + .branding--footer .branding__logo { + margin: 0 0 15px + } +} + +@media(max-width:75em) { + .branding { + margin: 15px 0 0 + } +} + +.footer-end { + align-items: center; + display: flex; + flex-direction: row-reverse; + font-size: 12px; + justify-content: space-between; + padding: 0 0 10px +} + +.footer-end, +.footer-end a { + color: var(--color-brand) +} + +.footer-end__in-sidebar { + align-items: flex-start; + flex-direction: column; + margin-top: 100px +} + +@media(max-width:30em) { + .footer-end { + align-items: center; + flex-direction: column; + margin: 20px 0 0 + } +} + +.footer-social { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-end +} + +.footer-social__label { + margin: 0 10px 0 0 +} + +.footer { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-top: 1px solid var(--color-gray-normal); + opacity: 1; + transition: opacity .45s cubic-bezier(.24, 1.12, .71, .98) 1.5s +} + +.footer.is-hidden { + opacity: 0; + transition-delay: 0s +} + +.link { + color: var(--color-white); + cursor: pointer; + text-decoration: none +} + +.link:hover { + text-decoration: underline +} + +.logo-link { + color: var(--color-white); + display: inline-block; + position: relative; + text-decoration: none; + transition: all .2s ease-out; + width: 400px +} + +.logo-link__slide { + display: block; + position: relative; + transition: all .4s cubic-bezier(.54, 0, .28, 1) +} + +.logo-link__icon { + opacity: 0; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + transition: opacity .4s ease-out +} + +.logo-link__img, +.logo-link__text { + transition: all .4s cubic-bezier(.54, 0, .28, 1) +} + +.logo-link__text { + font-size: 18px; + left: 130px; + line-height: 1; + margin-top: -1px; + opacity: 0; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + white-space: nowrap +} + +.logo-link--small .logo-link__img { + -webkit-transform: scale(.55); + transform: scale(.55) +} + +.logo-link--small .logo-link__text { + opacity: .8 +} + +.logo-link--small .logo-link__slide { + -webkit-transform: translateX(-32px); + transform: translateX(-32px) +} + +.logo-link--small:hover .logo-link__icon { + opacity: 1 +} + +.logo-link--small:hover .logo-link__slide { + -webkit-transform: translateX(0); + transform: translateX(0) +} + +.search { + box-sizing: border-box; + height: 50px; + margin: 0; + padding: 0; + position: relative; + width: 600px +} + +.search__field { + background: #120571; + border: none; + box-sizing: border-box; + color: var(--color-white); + display: block; + font-family: DIN; + font-size: 16px; + font-weight: 400; + height: 100%; + line-height: 1; + padding: 10px 120px 10px 20px; + width: 100% +} + +.search__field::-webkit-input-placeholder { + color: var(--color-gray-light) +} + +.search__field::placeholder { + color: var(--color-gray-light) +} + +.search__field:focus { + background: #120571; + outline: none +} + +.search__button { + margin-top: -18px; + position: absolute; + right: 7px; + top: 50% +} + +.search--closable .search__field { + padding-right: 160px +} + +.search--closable .search__button { + right: 50px; + -webkit-transform: translateX(20px); + transform: translateX(20px); + transition: -webkit-transform .45s cubic-bezier(.24, 1.12, .71, .98) .1s; + transition: transform .45s cubic-bezier(.24, 1.12, .71, .98) .1s; + transition: transform .45s cubic-bezier(.24, 1.12, .71, .98) .1s, -webkit-transform .45s cubic-bezier(.24, 1.12, .71, .98) .1s +} + +.search--closable .search__button.is-open { + -webkit-transform: translateX(0); + transform: translateX(0); + transition-delay: .25s +} + +.search--closable .search__close { + margin-top: -21px; + padding: 10px; + position: absolute; + right: 4px; + top: 50%; + -webkit-transform: scale(.2); + transform: scale(.2); + transition: -webkit-transform .4s cubic-bezier(.24, 1.12, .71, .98); + transition: transform .4s cubic-bezier(.24, 1.12, .71, .98); + transition: transform .4s cubic-bezier(.24, 1.12, .71, .98), -webkit-transform .4s cubic-bezier(.24, 1.12, .71, .98) +} + +.search--closable .search__close.is-open { + -webkit-transform: rotate(180deg) scale(1); + transform: rotate(180deg) scale(1); + transition-delay: .3s +} + +.tags-modal { + font-size: 16px; + padding: 50px; + position: relative +} + +.tags-modal__close-button { + position: absolute; + right: 30px; + top: 10px; + -webkit-transform: translateX(20px); + transform: translateX(20px) +} + +.tags-modal__title { + width: 100% +} + +.tags-modal__list { + list-style-type: none; + margin: 0; + padding: 15px 0 0 +} + +.tags-modal__list-item { + display: flex; + margin-bottom: 5px +} + +.tags-modal__list-item-checkbox { + margin-right: 10px +} + +.ReactModal__Overlay { + background-color:rgba(9, 7, 64, 0.8); + opacity: 0; + transition: opacity .3s ease-in-out +} + +.ReactModal__Overlay--after-open { + background-color:rgba(9, 7, 64, 0.8) !important; + opacity: 1 +} + +.ReactModal__Overlay--before-close { + background-color:rgba(9, 7, 64, 0.8); + + opacity: 0 +} + +.fadable { + opacity: 1; + transition: opacity .2s cubic-bezier(.54, 0, .28, 1) +} + +.fadable.is-faded { + opacity: 0 +} + +.hero-headline { + color: var(--color-white); + font-size: 38px; + font-weight: 300; + line-height: 1.2; + margin: 0; + padding: 0 +} + +.hero-headline--inverse, +.hero-headline__alt { + color: var(--color-orange) +} + +@media(max-width:30em) { + .hero-headline { + font-size: 26px + } + + .hero-headline__alt { + display: block + } +} + +.badge { + border: 1px solid var(--color-gray-normal); + border-radius: 13px; + box-sizing: border-box; + color: var(--color-white); + display: inline-block; + font-size: 12px; + height: 25px; + line-height: 25px; + overflow: hidden; + padding: 0 15px; + text-decoration: none; + text-transform: uppercase +} + +.badge--big { + border-radius: 15px; + font-size: 14px; + height: 30px; + line-height: 30px; + padding: 0 20px +} + +.badge--all { + background: var(--color-gray-normal); + border-color: var(--color-gray-normal) +} + +.badge--first { + background: var(--color-green); + border-color: var(--color-green) +} + +.badge--second { + background: var(--color-orange); + border-color: var(--color-orange) +} + +.badge--third { + background: var(--color-blue); + border-color: var(--color-blue) +} + +.badge--fourth { + background: var(--color-marine); + border-color: var(--color-marine) +} + +.flag { + border-radius: 10px; + color: var(--color-white); + display: inline-block; + font-size: 9px; + left: 5px; + margin-top: -2px; + padding: 3px 8px; + position: relative; + vertical-align: top +} + +.flag--new { + background: var(--color-red) +} + +.flag--changed { + background: var(--color-blue) +} + +.item { + border-bottom: 1px solid var(--color-gray-normal); + box-sizing: border-box; + color: var(--color-gray-light); + display: block; + padding: 10px; + text-decoration: none; + transition: background .2s ease-out +} + +.item.is-active { + background: var(--color-purple-light-alt) +} + +.item:hover { + background: var(--color-purple-light-alt) +} + +.item:first-child { + border-top: 1px solid var(--color-gray-normal) +} + +.item--big { + min-height: 80px; + padding: 20px 10px +} + +.item--no-leading-border:first-child { + border-top: none +} + +.item--no-trailing-border:last-child { + border-bottom: none +} + +.item__title { + color: var(--color-white); + font-size: 16px +} + +.item__title.greyed-out { + color: var(--color-gray-light) +} + +.item__info { + color: var(--color-gray-normal); + font-size: 12px; + margin-top: 5px +} + +.item-list { + margin: 0 0 25px +} + +.item-list__header, +.quadrant-section__header { + margin-bottom: 20px +} + +.quadrant-section__rings { + display: flex; + flex-wrap: wrap +} + +.quadrant-section__ring { + box-sizing: border-box; + flex: 0 0 25%; + margin: 0 0 25px; + padding: 0 8px +} + +@media(max-width:48em) { + .quadrant-section__ring { + flex-basis: 50% + } +} + +.quadrant-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between +} + +.quadrant-grid__quadrant { + flex: 0 0 45%; + margin-bottom: 40px +} + +@media(max-width:61.875em) { + .quadrant-grid__quadrant { + flex-basis: 100% + } +} + +.chart { + fill: #fff; + font-size: 12px; + margin: 0 auto; + position: relative; + text-align: center +} + +.chart .blip:hover { + cursor: pointer +} + +.chart .tooltip { + border-radius: 11px; + padding: 5px 10px +} + +.chart .ring-label { + text-transform: uppercase +} + +.radar-grid { + color: #fff; + display: none; + margin-bottom: 50px; + position: relative +} + +@media screen and (min-width:800px) { + .radar-grid { + display: block + } +} + +.radar-grid .quadrant-label { + position: absolute; + width: 20% +} + +.quadrant-label .split { + font-size: 12 px; + text-transform: uppercase +} + +.quadrant-label hr { + margin: 10px 0; + width: 100% +} + +.quadrant-label .description { + color: #a6b1bb; + font-size: 14px +} + +.quadrant-label .icon-link { + font-size: 12px +} + +.quadrant-label .icon-link .icon { + background-size: 18px 18px; + height: 18px; + width: 18px +} + +.radar-grid .radar-legend { + position: absolute; + right: 0; + top: 45%; + width: 15% +} + +.radar-legend .wrapper { + margin-bottom: 10px +} + +.radar-legend .icon { + background-position: 50%; + margin-right: 5px +} + +.headline-group { + margin: 0 0 60px +} + +@media(max-width:30em) { + .headline-group { + margin: 30px 0 + } +} + +.headline-group--secondary { + margin: 10px 0 +} + +@media(max-width:30em) { + .headline-group--secondary { + margin: 5px 0 + } +} + +.item-revisions { + margin-top: 60px +} + +.item-page { + display: flex; + left: 0; + min-height: 100vh; + position: absolute; + top: 0; + width: 100vw; + z-index: 10 +} + +.item-page__content, +.item-page__nav { + box-sizing: border-box; + min-height: 100vh; + padding-top: 130px; + position: relative +} + +.item-page__header { + margin: 0 0 25px; + min-height: 40px +} + +.item-page__nav { + background: var(--color-gray-dark); + flex-basis: calc(50vw - 200px); + flex-grow: 0; + flex-shrink: 0 +} + +.item-page__nav__inner { + box-sizing: border-box; + float: right; + padding: 0 40px 0 10px; + width: 410px +} + +.item-page__content { + background: var(--color-gray-light); + flex-basis: calc(50vw + 200px); + flex-grow: 0; + flex-shrink: 0; + -webkit-transform: translateZ(0); + transform: translateZ(0) +} + +.item-page__content__inner { + box-sizing: border-box; + padding: 0 10px 0 100px; + width: 810px +} + +.hero-headline__wrapper { + align-items: center; + display: flex; + gap: 15px; +} + +.mobile-item-page { + background: #EEEEEE; + margin: 0 -15px; + min-height: 300px; + padding: 15px +} + +.mobile-item-page__aside { + padding: 20px 0 +} + +:root { + --color-blue-bg: linear-gradient(to bottom, #190695, #22098a, #280d7f, #2b1074, #2d126a); + --color-gray-dark-alt: #595959; + --color-gray-normal: #6E6E6E; + --color-gray-light: #EEEEEE; + --color-purple-light-alt: #32299A; + --color-purple-light: #AEA0CE; + --color-white: #fff; + --color-green: #117069; + --color-orange: #FB8734; + --color-blue: #3099F6; + --color-marine: #9E9E9E; + --color-red: #FF4600; + --color-brand: #f59134; + --color-blue-brand: #0819B5; + --color-blue-darker: #07076C; + --until-sm: 30em; + --until-md: 48em; + --until-lg: 61.875em; + --until-xl: 75em +} + +body { + background: var(--color-blue-bg); + box-sizing: border-box; + font-family: DIN; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + margin: 0; + padding: 0; +} + +body h1 { + color: blue +} + +#root { + min-height: 100vh; + overflow: hidden +} + +.button { + background: transparent; + border: none; + color: var(--color-orange); + font-size: 16px; + line-height: 16px; + margin: 0; + padding: 10px 10px 10px 35px; + position: relative +} + +.button__icon { + left: 5px; + margin-top: -11px; + position: absolute; + top: 50% +} + +.link-button { + background-color: transparent; + border: none; + cursor: pointer; + display: inline; + margin: 0; + padding: 0; + text-decoration: underline +} + +.link-button:focus, +.link-button:hover { + text-decoration: none +} + +.fullpage-content { + color: #fff; + color: var(--color-white); + font-size: 16px; +} + +.fullpage-content p .fullpage-content ul { + font-weight: lighter +} + +.fullpage-content a { + color: #fff; + color: var(--color-white) +} + +.filter { + margin-bottom: 40px +} + +@media(max-width:30em) { + .filter { + display: none + } +} + +.footnote { + color: var(--color-gray-light); + font-size: 12px +} + +h4.headline { + font-size: 18px +} + +.headline { + color: #fff; + color: var(--color-white); + font-size: 20px; + font-weight: 400; + margin: 0; + padding: 0 +} + +.headline--dark { + color: #7d878d; + color: var(--color-gray-normal) +} + +.hljs { + background: #2b2b2b; + color: #bababa; + display: block; + overflow-x: auto; + padding: .5em +} + +.hljs-emphasis, +.hljs-strong { + color: #a8a8a2 +} + +.hljs-bullet, +.hljs-link, +.hljs-literal, +.hljs-number, +.hljs-quote, +.hljs-regexp { + color: #6896ba +} + +.hljs-code, +.hljs-selector-class { + color: #a6e22e +} + +.hljs-emphasis { + font-style: italic +} + +.hljs-attribute, +.hljs-keyword, +.hljs-name, +.hljs-section, +.hljs-selector-tag, +.hljs-variable { + color: #cb7832 +} + +.hljs-params { + color: #b9b9b9 +} + +.hljs-string { + color: #6a8759 +} + +.hljs-addition, +.hljs-built_in, +.hljs-builtin-name, +.hljs-selector-attr, +.hljs-selector-id, +.hljs-selector-pseudo, +.hljs-subst, +.hljs-symbol, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type { + color: #e0c46c +} + +.hljs-comment, +.hljs-deletion, +.hljs-meta { + color: #7f7f7f +} + +.icon { + background-position: 0 0; + background-repeat: no-repeat; + background-size: 22px 22px; + display: inline-block; + height: 22px; + vertical-align: middle; + width: 22px +} + +.icon--pie { + background-image: url(/static/media/pie.7ef18b270cc2509e9039.svg) +} + +.icon--question { + background-image: url(/static/media/question.f49af21b0654459dca13.svg) +} + +.icon--overview { + background-image: url(/static/media/overview.2e91b190e821b00544b6.svg) +} + +.icon--search { + background-image: url(/static/media/search.679b98f82ae5196a396b.svg) +} + +.icon--back { + background-image: url(/static/media/back.6d132c7e444cbbde9648.svg) +} + +.icon--close { + background-image: url(/static/media/close.0a8d1a237ec4bf5218c6.svg) +} + +.icon--blip_new { + background-image: url(/static/media/blip_new.a61075d6f6957f19d98c.svg) +} + +.icon--blip_changed, +.icon--blip_new { + background-size: 18px; + height: 18px; + width: 18px +} + +.icon--blip_changed { + background-image: url(/static/media/blip_changed.08c84aef1cf47bb9bb1c.svg) +} + +.icon--blip_default { + background-image: url(/static/media/blip_default.5e46a91d07200ba1acf3.svg); + background-size: 18px; + height: 18px; + width: 18px +} + +.icon--filter { + background-image: url(/static/media/filter.410297804239c0ea9222.svg) +} + +.icon-link { + background: none; + border: 0; + color: #f59134; + color: var(--color-brand); + cursor: pointer; + display: inline-block; + font-size: 14px; + height: 25px; + line-height: 25px; + position: relative; + text-decoration: none +} + +.icon-link--primary { + color: #f59134; + color: var(--color-brand) +} + +.icon-link--big { + font-size: 16px +} + +.icon-link__icon { + margin-right: 6px; + position: relative; + top: -1px +} + +.icon-link:hover:after { + border-bottom: 2px solid #0819B5; + border-bottom: 2px solid var(--color-purple-light-alt); + bottom: -8px; + content: ""; + left: 0; + position: absolute; + width: 100% +} + +.letter-index { + margin-bottom: 60px +} + +.letter-index__group { + border-top: 1px solid #7f858a; + border-top: 1px solid var(--color-gray-normal); + min-height: 80px; + padding: 0 0 0 200px; + position: relative +} + +@media(max-width:48em) { + .letter-index__group { + padding: 0 0 0 50px + } +} + +.letter-index__letter { + color: var(--color-orange); + font-size: 50px; + left: 50px; + line-height: 80px; + position: absolute; + top: 0 +} + +@media(max-width:48em) { + .letter-index__letter { + left: 0 + } +} + +.markdown { + color: #7f858a; + color: var(--color-gray-normal); + font-size: 16px +} + +.markdown p { + margin: 20px 0 +} + +.markdown a { + color: #0819B5; + color: var(--color-blue-brand); + text-decoration: underline +} + +.markdown a:hover { + color: #32299A; + color: var(--color-purple-light-alt) +} + +.markdown h1, +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #595959; + color: var(--color-gray-dark-alt) +} + +.markdown h1 { + font-size: 2em; + font-weight: 300; + margin: 1em 0 +} + +.markdown h2 { + font-size: 1.5em; + margin: 1em 0 +} + +.markdown h3 { + font-size: 1.2em; + margin: 1em 0; +} + +.markdown img { + margin: 10 0; + max-width: 100% +} + +.markdown pre { + -webkit-overflow-scrolling: touch; + background: #475157; + background: var(--color-gray-dark); + overflow-x: auto; + padding: 10px +} + +/* Nav */ + +.nav { + white-space: nowrap +} + +.nav__item { + display: inline-flex; + position: relative +} + +.nav__item+.nav__item { + margin-left: 20px +} + +.nav__search { + margin-top: -25px; + opacity: .8; + overflow: hidden; + position: absolute; + right: 0; + top: 50%; + transition: width .4s cubic-bezier(.24, 1.12, .71, .98) .1s, visibility 0s linear .5s, opacity .2s linear; + visibility: hidden; + width: 0 +} + +.nav__search.is-open { + opacity: 1; + transition-delay: 0s; + visibility: visible; + width: 600px +} + +@media(max-width:48em) { + .nav--relations .nav__item { + display: block; + margin: 5px 0 0 + } +} + +.page { + display: flex; + flex-direction: column; + margin: 0 auto; + max-width: 1200px; + min-height: 100%; + min-height: 100vh; + padding: 0 15px +} + +.page__header { + flex: 0 0 auto; + margin-bottom: 20px; + position: relative; + z-index: 100; +} + +@media(max-width:30em) { + .page__header { + margin: 0 + } +} + +@media(max-width:61.875em) { + .page__header .nav { + display: none + } +} + +.page__content { + flex: 1 1 auto +} + +.page__footer { + flex: 0 0 auto; + margin-top: 5px +} + +.publish-date { + color: #7f858a; + color: var(--color-gray-normal); + text-align: right +} + +@media(max-width:30em) { + .publish-date { + text-align: center + } +} + +.ring-list__header { + margin-bottom: 20px +} + +.ring-list__item { + display: block; + font-size: 13px; + margin-bottom: 12px +} + +.social-icon-a { + align-items: center; + background-color: #fff; + background-color: var(--color-white); + border-radius: 50%; + box-sizing: border-box; + display: inline-flex; + height: 30px; + justify-content: center; + margin: 0 5px; + width: 30px +} + +.social-icon { + color: var(--color-blue-brand); + font-size: 16px +} + +.split { + align-items: center; + display: flex; + justify-content: space-between +} + +.split--align-top { + align-items: flex-start +} + +.split--overview { + min-height: 40px +} + +.split__left, +.split__right { + flex: 0 1 auto +} + +@media(max-width:30em) { + .split { + display: block + } +} \ No newline at end of file