Skip to content

Nicer Elm documentation by upsiflu

Screenshot of Nicer Elm documentation

Details

Authorupsiflu

LicenseNo License

CategoryElm packages

Created

Updated

Size6.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

An opinionated style for making the default package view as used in elm-docs-preview and in the official elm package repo more beautiful.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Nicer Elm documentation
@version      20230902.08.33
@namespace    userstyles.world/user/upsiflu
@description  An opinionated style for making the default package view as used in elm-docs-preview and in the official elm package repo more beautiful.
@author       upsiflu
@license      No License
==/UserStyle== */

@-moz-document regexp("htt(p|ps)://.*/packages/.*/.*/.*") {
div {
    font-weight: 300;
}
body,
h1,
h2,
h3,
h4 {
    font-family: "Fira Sans", serif;
    color: black;
    font-weight: 200;
}
p {
    line-height: 1.2em;
    margin: .6em 0;
}


.center {
    flex: 1;
    width: calc(100% - 12em);
    margin-left: 4vw;
    padding-left: min(calc(100vw - 100%), 2rem);
    display: inline-flex;
    padding-bottom: 5rem;
}
a,
.header a {
    color: blue;
    z-index: 5;
}
.header > a > div *,
.block-list-title {
    color: black;
    column-span: all;
    font-style: normal;
}
.header > a > div svg {
    background-color: #cc6688;
}
body > div:first-child,
.header {
    background: transparent !important;
    color: black;
}
h1,
h2,
h3,
h4 {
    letter-spacing: -.03em;
    color: black;
    font-style: italic;
    padding-top: .9em;
    padding-bottom: .4em;
}
.docs-comment *:not(:is(p, a)) > code {
    color: #555;
    font-weight: 100;
}
.docs-comment pre {
    background: rgba(0, 0, 0, .1);
}
code,
a.pkg-nav-value,
.docs-header,
.block-list pre {
    font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: .95em;
}
pre {
    overflow-x: visible;
}
.docs-block {
    border: none;
    margin-bottom: 2.2rem;
    margin-top: 0;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
:not(pre) > code {
    font-size: 80%;
    background-color: rgba(0, 0, 0, .09);
}
.pkg-nav,
a.pkg-nav-module {
    font-family: "Fira sans";
    font-size: .8rem;
    line-height: 1.2rem;
    border-left-color: white;
}
.pkg-nav input {
    background: white;
    margin-left: -5px;
}
.docs-comment {
    font-style: italic;
    margin-top: -.5em;
}
.docs-comment pre {
    margin-left: -11px;
}
.docs-comment code {
    font-style: normal;
}

.docs-header {
    overflow-x: visible;
}
.docs-header > div:first-child {
    position: relative;
    padding-bottom: .6em;
}
.docs-header > div:first-child:before {
    content: "";
    position: absolute;
}

.block-list-title + .markdown-block div > p:first-child {
    font-size: 1.4rem;
    margin: -1rem;
    padding: 1rem;
    border-radius: 4px;
    padding-bottom: 1rem;
    column-span: all;
    max-width: 90%;
    margin-bottom: 2rem;
}
.block-list-title + .markdown-block div > pre {
    font-size: 0.8rem;
    margin: 1rem -1rem;
    padding: 1rem;
    border-radius: 4px;
    padding-bottom: 1rem;
    column-span: all;
    max-width: calc(100% + 2rem);
    overflow: visible;
}
.block-list-title + span.markdown-block {
    display: block;
    margin-bottom: 0;
}
.block-list-title {
    border-radius: 4px;
    margin: -1rem;
    padding: 1rem;
    padding-top: 8rem;
    margin-top: -4rem;
    z-index: -1;
    text-indent: -.1em;
}
.header {
    z-index: 6;
    position: relative;
}

.footer {
    display: none;
}

.hljs-keyword {
    background: white;
}
.hljs-keyword + .hljs-keyword {
    margin-left: 0;
    position: relative;
}

.block-list {
    width: calc(100% - 2rem);
    columns: 600px 4;
}
.pkg-nav {
    width: 12rem;
    margin: 1rem;
}
}

@-moz-document regexp("htt(p|ps)://elm-doc-preview.*") {
div {
    font-weight: 300;
}
body,
h1,
h2,
h3,
h4 {
    font-family: "Fira Sans", serif;
    color: black;
    font-weight: 200;
}
p {
    line-height: 1.2em;
    margin: .6em 0;
}


.center {
    flex: 1;
    width: calc(100% - 12em);
    margin-left: 4vw;
    padding-left: min(calc(100vw - 100%), 2rem);
    display: inline-flex;
    padding-bottom: 5rem;
    /* flex-wrap: wrap-reverse; */
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}
a,
.header a {
    color: blue;
    z-index: 5;
}
.header > a > div *,
.block-list-title {
    color: black;
    column-span: all;
    font-style: normal;
}
.header > a > div svg {
    background-color: #cc6688;
}
body > div:first-child,
.header {
    background: transparent !important;
    color: black;
}
h1,
h2,
h3,
h4 {
    letter-spacing: -.03em;
    color: black;
    font-style: italic;
    padding-top: .9em;
    padding-bottom: .4em;
}
.docs-comment *:not(:is(p, a)) > code {
    color: #555;
    font-weight: 100;
}
.docs-comment pre {
    background: rgba(0, 0, 0, .1);
}
code,
a.pkg-nav-value,
.docs-header,
.block-list pre {
    font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: .95em;
}
pre {
    overflow-x: visible;
}
.docs-block {
    border: none;
    margin-bottom: 2.2rem;
    margin-top: 0;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
:not(pre) > code {
    font-size: 80%;
    background-color: rgba(0, 0, 0, .09);
}
.pkg-nav,
a.pkg-nav-module {
    font-family: "Fira sans";
    font-size: .8rem;
    line-height: 1.2rem;
    border-left-color: white;
}
.pkg-nav input {
    background: white;
    margin-left: -5px;
}
.docs-comment {
    font-style: italic;
    margin-top: -.5em;
}
.docs-comment pre {
    margin-left: -11px;
}
.docs-comment code {
    font-style: normal;
}

.docs-header {
    overflow-x: visible;
}
.docs-header > div:first-child {
    position: relative;
    padding-bottom: .6em;
}
.docs-header > div:first-child:before {
    content: "";
    position: absolute;
}

.block-list-title + .markdown-block div > p:first-child {
    font-size: 1.4rem;
    margin: -1rem;
    padding: 1rem;
    border-radius: 4px;
    padding-bottom: 1rem;
    column-span: all;
    max-width: 90%;
    margin-bottom: 2rem;
}
.block-list-title + .markdown-block div > pre {
    font-size: 0.8rem;
    margin: 1rem -1rem;
    padding: 1rem;
    border-radius: 4px;
    padding-bottom: 1rem;
    column-span: all;
    max-width: calc(100% + 2rem);
    overflow: visible;
}
.block-list-title + span.markdown-block {
    display: block;
    margin-bottom: 0;
}
.block-list-title {
    border-radius: 4px;
    margin: -1rem;
    padding: 1rem;
    padding-top: 8rem;
    margin-top: -4rem;
    z-index: -1;
    text-indent: -.1em;
}
.header {
    z-index: 6;
    position: relative;
}

.footer {
    display: none;
}

.hljs-keyword {
    margin-left: -3em;
    background: white;
}
.hljs-keyword + .hljs-keyword {
    margin-left: 0;
    position: relative;
}

.block-list {
    width: calc(100% - 2rem);
    columns: 600px 4;
}
.pkg-nav {
    width: 12rem;
    margin: 1rem;
}
}

Reviews

No reviews yet.