Custom Userstyle – freedesktop.org

README.md

freedesktop.org userstyle

A few light touches to improve the experience of finding and reading the documentation on freedesktop.org.

Screenshots

freedesktop.user.css

/* ==UserStyle==
@name			      freedesktop.org
@author			    Chris Tippett <git@christippett.dev> (https://christippett.dev)
@description	  A few light touches to improve the experience of finding and reading the documentation on freedesktop.org.
@version		    2023.01.28
@namespace		  @christippett
@homepageURL    https://github.com/christippett
@supportURL     https://gist.github.com/christippett/c9959e50867a00b9f8e3481c8adfc92a/
@updateURL      https://gist.github.com/christippett/c9959e50867a00b9f8e3481c8adfc92a/raw/freedesktop.user.css
@license		    MIT
@preprocessor	  stylus
==/UserStyle== */

@-moz-document domain("freedesktop.org") {
	html {
		--body-bg: white;
		--text: #404a4b;
		--code: #3f454e;
		--link: #3c50c6;
		--link-title: #e3e3e3;
		--border-radius: 5px;
		--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		--code-font: 'Input Mono', monospace;
		--code-bg: rgba(254, 254, 254, 0.5);
		--code-shadow: 0 0 2px 0px var(--text);
		--table-bg: rgba(247, 248, 249, 0.9);
		--table-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.75);
	}

	@media (prefers-color-scheme: dark) {
		html {
			--body-bg: #32363d;
			--text: #fafafa;
			--code: #f0f0f0;
			--link: #a5bded;
			--link-title: #e3e3e3;
			--border-radius: 5px;
			--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
			--code-font: 'Input Mono', monospace;
			--code-bg: rgba(18, 21, 41, 0.5);
			--code-shadow: 0 0 4px -2px var(--text);
			--table-bg: rgba(32, 33, 34, 0.9);
		}
	}

	html,
	body {
		font-family: 'Bear Sans', sans-serif;
		font-size: 16px;
	}

	body {
		background: var(--body-bg);
		padding: 1rem;
		color: var(--text);
		line-height: 1.4;
		text-anchor: middle;
	}

	hr {
		border: 0
	}


	h3,
	h4,
	h5 {
		font-weight: bold
	}

	a:not([name]) {
		color: var(--link);
		font-weight: bold;
		text-decoration-thickness: 2px;
		text-underline-offset: 1px;
		text-decoration: underline;
		padding: 0 5px;
		transition: color 240ms ease-in-out;

		&.headerlink {
			text-decoration: none;
			visibility: visible;
			font-size: 1em;
			margin: 0 0.5ch;
			color: var(--link-title);
			font-weight: normal;
			transform: translateX(-0.5rem);
		}

		&.headerlink:hover {
			background: none;
			color: var(--link);
		}
	}

	// main container
	.refentry {
		max-width: 800px;
		margin: 0 auto;
		padding: 1rem 3rem;
	}

	.refnamediv {
		margin: 1.5rem 0 3rem;

		> h2 {
			line-height: 1;
			font-weight: 600;
			margin: 0;
			color: #7d7d7d;
		}

		> p {
			margin: 0;
			font-size: 2.75rem;
			font-family: 'Input Mono', monospace;
			font-weight: 700;
			font-style: italic;
			max-width: 90%;
			line-height: 1;
			text-decoration: underline;
			text-decoration-thickness: 5px;
			text-underline-offset: 2px;
		}
	}

	.refsect1 {
		margin: 2rem 0;

		p,
		ul,
		ol {
			margin: 0.5rem 0.5rem 2rem;
		}
	}

	ul,
	ol {
		> li::marker {
			font-weight: bold;
			font-size: 0.9em;
		}

		> li > p {
			margin: 0.5em !important;
		}
	}


	.refsect2 {
		margin: 1rem;
	}

	code +br {
		display: inline-block;
		margin-bottom: 0.5rem;
	}

	code,
	pre,
	.command,
	.term {
		font-family: 'Input Mono', monospace;
		font-weight: normal;
		color: var(--code);

		strong {
			font-weight: 500
		}
	}

	code,
	pre {
		line-height: 1.25;

		> strong {
			font-weight: 500;
		}

		> em code {
			line-height: 1;
			font-weight: 500;
			padding: 1px 4px;
			border-radius: 2px;
		}
	}


	*:not(.literallayout) p > code,
	li > code,
	*:not(.term) > .command {
		font-size: 0.9em;
		box-shadow: 0 0 0 rgba(254, 254, 254, 0);
		border-radius: var(--border-radius);
		padding: 0 0.25em;
		margin: 0 0.2em;
		transition: all 80ms ease-in;
		cursor: default;
		word-break: keep-all;

		&:hover {
			background: var(--code-bg);
			box-shadow: var(--code-shadow);
		}
	}

	div.table > p.title,
	div.example > p.title {
		margin-bottom: 0.85rem;
		font-size: 0.85rem;
		font-weight: 400;
	}

	div.table-contents {
		overflow-x: auto;
		padding: 1rem;
	}

	table,
	.example pre,
	.literallayout p:has(code) {
		min-width: 400px;
		width: max-content;
		padding: 1rem 1.5rem;
		margin-left: 0.5rem;
		border-radius: 10px;
		background: var(--table-bg);
		box-shadow: var(--table-shadow);

		> p {
			margin: 0;
		}
	}

	.literallayout > p > code {
		background: none;
		box-shadow: none;
		text-shadow: none;
	}

	table {
		vertical-align: center;
		text-align: left;
		padding: 0;
		border: 0;
		font-size: 0.85rem;
		max-width: 95%;

		position: relative;

		code {
			font-weight: 400;
			text-decoration: normal;
		}

		td,
		th {
			border: 0;
			padding: 0.25rem 0.5rem;
			word-wrap: break-word;
			// max-width: 350px;
		}

		// td[rowspan] {
		// 	vertical-align: top;
		// }
		td {
			border-top: 1px solid #e9e9e9;
		}
	}
}