/* * Stylesheet for Carbs Linux website * Copyright (c) 2019-2021 Cem Keylan */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document ======== */ /** Use a better box model (opinionated). */ *, *::before, *::after { box-sizing: border-box; } /** Use a more readable tab size (opinionated). */ :root { -moz-tab-size: 4; tab-size: 4; } /** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ======== */ /** Remove the margin in all browsers. */ body { margin: 0; } /** Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; } /* Grouping content ================ */ /** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ } /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { text-decoration: underline dotted; } /** Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /** 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 2. Correct the odd 'em' font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Tabular data ============ */ /** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } /* Forms ===== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** Remove the additional ':invalid' styles in Firefox. See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 */ :-moz-ui-invalid { box-shadow: none; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } :root { --color-carbs-color-bg: #ffffff; --color-carbs-color-fg: #3b4252; --color-carbs-highlight: #eceff4; --color-carbs-pink: #B48EAD; --color-carbs-purple: #97365B; --color-carbs-blue: #5e81ac; --color-carbs-blue-alt: #81a1c1; --color-carbs-red: #bf616a; --color-carbs-grey: #8b94a5; --color-carbs-green: #4F894C; --color-carbs-orange: #d08770; } @media (prefers-color-scheme: dark) { :root { --color-carbs-color-bg: #2e3440; --color-carbs-color-fg: #eceff4; --color-carbs-highlight: #3b4252; --color-carbs-pink: #b48ead; --color-carbs-purple: #b48ead; --color-carbs-blue: #81a1c1; --color-carbs-blue-alt: #88c0d0; --color-carbs-red: #bf616a; --color-carbs-grey: #6f7787; --color-carbs-green: #a3be8c; --color-carbs-orange: #d08770; } } body { margin: 0; background-color: var(--color-carbs-color-bg); font-family: "Noto Sans", "Open Sans", sans-serif; font-size: 16px; color: var(--color-carbs-color-fg); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } /* Reasonable line-height for better readability. */ p, pre, li, dt, dd, table, code, address { line-height: 1.5em; } p { margin-top: 1em; margin-bottom: 1em; } .subtitle { color: var(--color-carbs-color-fg); font-weight: normal; font-size: 16px; font-style: italic; } code, pre.src { padding: .2em .4em; margin: 0; font-size: 85%; } code { background-color: var(--color-carbs-highlight); border-radius: 3px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: none; } h1 { color: var(--color-carbs-pink); font-weight: 800; } h1 a:hover { color: #b48e9a; } @media (prefers-color-scheme: dark) { h1 a:hover { color: #b48e9a; } } h2 { color: var(--color-carbs-blue); font-weight: 700; } h2 a:hover { color: var(--color-carbs-purple); } h3 { color: var(--color-carbs-color-fg); font-weight: 600; } h3 a:hover { color: var(--color-carbs-blue); } pre { font: monospace; border-radius: 3px; border: 1px solid var(--color-carbs-highlight); background-color: var(--color-carbs-highlight); padding: 0.5em; margin: 1em; } pre code, pre.src { display: block; overflow: auto; } pre code { background: transparent; } a { text-decoration: none; font-weight: bold; color: var(--color-carbs-pink); } a:hover { text-decoration: underline; color: var(--color-carbs-blue-alt); } blockquote { border-left: 1px solid var(--color-carbs-highlight); font-style: italic; } #preamble { margin-bottom: 2em; } #titlebar { box-sizing: content-box; background: #2e3440 none repeat scroll 0 0 !important; min-height: 40px; padding: 10px 15px !important; } #titlebar a.maintitle { margin: 0 !important; padding: 0 !important; color: #b48ead !important; float: left !important; font-weight: bolder !important; font-size: 200% !important; } #titlebar a.maintitle:hover { text-decoration: none; color: #b48ead; } #navbar { background: #81a1c1 !important; clear: both; padding: .3em; } #navbar #navbarlist li a { color: #eceff4; font-weight: bold; text-decoration: none; } #navbar ul { vertical-align: middle; list-style: none; margin: 0; padding: 0; text-align: left; font-size: 0; display: flex; justify-content: space-evenly; } #navbar ul li { display: inline; text-align: justify; font-size: 14px; font-family: "Noto Sans", "Open Sans", sans-serif !important; line-height: 1.4; letter-spacing: 0; padding: 0.7ex; margin: 0; } #navbar ul li a { color: #eceff4; font-weight: bold; text-decoration: none; } #navbar ul li a:hover { color: #2e3440 !important; text-decoration: none !important; } footer { clear: both; margin-top: 2em; background: #2e3440 none repeat scroll 0 0 !important; border-top: 5px solid #81a1c1 !important; padding: 10px 15px !important; bottom: 0; } footer p { text-align: center; color: #eceff4; } /* Syntax highlighting for org-mode source block exports */ .org-comment, .org-comment-delimiter { color: var(--color-carbs-grey); font-style: italic; } .org-builtin { color: var(--color-carbs-blue); } .org-constant { color: var(--color-carbs-pink); } .org-doc { color: var(--color-carbs-grey); } .org-function-name { color: var(--color-carbs-blue); } .org-variable-name { color: var(--color-carbs-purple); } .org-keyword { color: var(--color-carbs-blue-alt); } .org-string { color: var(--color-carbs-green); } .org-type { color: var(--color-carbs-orange); } .org-warning { color: var(--color-carbs-red); } /* Background */ .chroma { background-color: var(--color-carbs-highlight); } /* Other */ /* Error */ .chroma .err { color: var(--color-carbs-red); background-color: #e3d2d2; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } /* LineHighlight */ .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #7f7f7f; } /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #7f7f7f; } /* Keyword */ .chroma .k { color: var(--color-carbs-color-fg); font-weight: bold; } /* KeywordConstant */ .chroma .kc { color: var(--color-carbs-color-fg); font-weight: bold; } /* KeywordDeclaration */ .chroma .kd { color: var(--color-carbs-color-fg); font-weight: bold; } /* KeywordNamespace */ .chroma .kn { color: var(--color-carbs-color-fg); font-weight: bold; } /* KeywordPseudo */ .chroma .kp { color: var(--color-carbs-color-fg); font-weight: bold; } /* KeywordReserved */ .chroma .kr { color: var(--color-carbs-color-fg); font-weight: bold; } /* KeywordType */ .chroma .kt { color: var(--color-carbs-blue); font-weight: bold; } /* Name */ /* NameAttribute */ .chroma .na { color: var(--color-carbs-blue-alt); } /* NameBuiltin */ .chroma .nb { color: var(--color-carbs-blue); } /* NameBuiltinPseudo */ .chroma .bp { color: var(--color-carbs-grey); } /* NameClass */ .chroma .nc { color: var(--color-carbs-blue); font-weight: bold; } /* NameConstant */ .chroma .no { color: var(--color-carbs-blue-alt); } /* NameDecorator */ .chroma .nd { color: var(--color-carbs-blue-alt); font-weight: bold; } /* NameEntity */ .chroma .ni { color: var(--color-carbs-pink); } /* NameException */ .chroma .ne { color: var(--color-carbs-red); font-weight: bold; } /* NameFunction */ .chroma .nf { color: var(--color-carbs-red); font-weight: bold; } /* NameFunctionMagic */ /* NameLabel */ .chroma .nl { color: var(--color-carbs-red); font-weight: bold; } /* NameNamespace */ .chroma .nn { color: var(--color-carbs-grey); } /* NameOther */ /* NameProperty */ /* NameTag */ .chroma .nt { color: var(--color-carbs-blue); } /* NameVariable */ .chroma .nv { color: var(--color-carbs-blue-alt); } /* NameVariableClass */ .chroma .vc { color: var(--color-carbs-blue-alt); } /* NameVariableGlobal */ .chroma .vg { color: var(--color-carbs-blue-alt); } /* NameVariableInstance */ .chroma .vi { color: var(--color-carbs-blue-alt); } /* NameVariableMagic */ /* Literal */ /* LiteralDate */ /* LiteralString */ .chroma .s { color: var(--color-carbs-red); } /* LiteralStringAffix */ .chroma .sa { color: var(--color-carbs-red); } /* LiteralStringBacktick */ .chroma .sb { color: var(--color-carbs-red); } /* LiteralStringChar */ .chroma .sc { color: var(--color-carbs-red); } /* LiteralStringDelimiter */ .chroma .dl { color: var(--color-carbs-red); } /* LiteralStringDoc */ .chroma .sd { color: var(--color-carbs-red); } /* LiteralStringDouble */ .chroma .s2 { color: var(--color-carbs-red); } /* LiteralStringEscape */ .chroma .se { color: var(--color-carbs-red); } /* LiteralStringHeredoc */ .chroma .sh { color: var(--color-carbs-red); } /* LiteralStringInterpol */ .chroma .si { color: var(--color-carbs-red); } /* LiteralStringOther */ .chroma .sx { color: var(--color-carbs-red); } /* LiteralStringRegex */ .chroma .sr { color: var(--color-carbs-green); } /* LiteralStringSingle */ .chroma .s1 { color: var(--color-carbs-red); } /* LiteralStringSymbol */ .chroma .ss { color: var(--color-carbs-pink); } /* LiteralNumber */ .chroma .m { color: var(--color-carbs-blue-alt); } /* LiteralNumberBin */ .chroma .mb { color: var(--color-carbs-blue-alt); } /* LiteralNumberFloat */ .chroma .mf { color: var(--color-carbs-blue-alt); } /* LiteralNumberHex */ .chroma .mh { color: var(--color-carbs-blue-alt); } /* LiteralNumberInteger */ .chroma .mi { color: var(--color-carbs-blue-alt); } /* LiteralNumberIntegerLong */ .chroma .il { color: var(--color-carbs-blue-alt); } /* LiteralNumberOct */ .chroma .mo { color: var(--color-carbs-blue-alt); } /* Operator */ .chroma .o { color: var(--color-carbs-color-fg); font-weight: bold; } /* OperatorWord */ .chroma .ow { color: var(--color-carbs-color-fg); font-weight: bold; } /* Punctuation */ /* Comment */ .chroma .c { color: var(--color-carbs-grey); font-style: italic; } /* CommentHashbang */ .chroma .ch { color: var(--color-carbs-grey); font-style: italic; } /* CommentMultiline */ .chroma .cm { color: var(--color-carbs-grey); font-style: italic; } /* CommentSingle */ .chroma .c1 { color: var(--color-carbs-grey); font-style: italic; } /* CommentSpecial */ .chroma .cs { color: var(--color-carbs-grey); font-weight: bold; font-style: italic; } /* CommentPreproc */ .chroma .cp { color: var(--color-carbs-grey); font-weight: bold; font-style: italic; } /* CommentPreprocFile */ .chroma .cpf { color: var(--color-carbs-grey); font-weight: bold; font-style: italic; } /* Generic */ /* GenericDeleted */ .chroma .gd { color: var(--color-carbs-color-fg); background-color: #ffdddd; } /* GenericEmph */ .chroma .ge { color: var(--color-carbs-color-fg); font-style: italic; } /* GenericError */ .chroma .gr { color: var(--color-carbs-red); } /* GenericHeading */ .chroma .gh { color: var(--color-carbs-grey); } /* GenericInserted */ .chroma .gi { color: var(--color-carbs-color-fg); background-color: var(--color-carbs-green); } /* GenericOutput */ .chroma .go { color: var(--color-carbs-grey); } /* GenericPrompt */ .chroma .gp { color: var(--color-carbs-grey); } /* GenericStrong */ .chroma .gs { font-weight: bold; } /* GenericSubheading */ .chroma .gu { color: var(--color-carbs-grey); } /* GenericTraceback */ .chroma .gt { color: var(--color-carbs-red); } /* GenericUnderline */ .chroma .gl { text-decoration: underline; } /* TextWhitespace */ .chroma .w { color: var(--color-carbs-grey); } #content { width: 95%; margin: 0 auto; margin-left: auto; margin-right: auto; text-align: left; max-width: 50em; }