From 262bf139641e2c9717a2f07ce8266896455a466e Mon Sep 17 00:00:00 2001 From: Johannes Rappen Date: Thu, 9 Mar 2017 22:22:35 +0100 Subject: [PATCH] order css source alphabetically --- src/themes/basic/_coverpage.css | 40 +++++----- src/themes/basic/_layout.css | 134 ++++++++++++++++---------------- src/themes/buble.css | 53 +++++++------ src/themes/dark.css | 36 ++++----- src/themes/vue.css | 36 ++++----- 5 files changed, 149 insertions(+), 150 deletions(-) diff --git a/src/themes/basic/_coverpage.css b/src/themes/basic/_coverpage.css index 743d880..9d5aa7f 100644 --- a/src/themes/basic/_coverpage.css +++ b/src/themes/basic/_coverpage.css @@ -11,16 +11,16 @@ section.cover { } &.has-mask .mask { - position: absolute; - size: 100%; background-color: $color-bg; opacity: .8; + position: absolute; + size: 100%; } .cover-main { flex: 1; - text-align: center; margin: -20px 16px 0; + text-align: center; z-index: 1; } @@ -34,65 +34,65 @@ section.cover { } p { - margin: 1em 0; line-height: 1.5rem; + margin: 1em 0; } h1 { - text-align: center; - font-size: 2.5rem; - position: relative; - margin: .625rem 0 2.5rem; - font-weight: 300; color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: .625rem 0 2.5rem; + position: relative; + text-align: center; a { display: block; } small { - position: absolute; bottom: -.4375rem; font-size: 1rem; + position: absolute; } } blockquote { - text-align: center; font-size: 1.5rem; + text-align: center; } ul { - max-width: 500px; + line-height: 1.8; list-style-type: none; margin: 1em auto; + max-width: 500px; padding: 0; - line-height: 1.8; } .cover-main > p:last-child a { - border-radius: 2em; - border-width: 1px; - border-style: solid; border-color: var(--theme-color, $color-primary); + border-radius: 2em; + border-style: solid; + border-width: 1px; box-sizing: border-box; color: var(--theme-color, $color-primary); + display: inline-block; font-size: 1.05em; letter-spacing: 0.1em; + margin-right: 1em; padding: 0.75em 2em; text-decoration: none; transition: all 0.15s ease; - margin-right: 1em; - display: inline-block; &:last-child { - margin-right: 0; background-color: var(--theme-color, $color-primary); color: #fff; + margin-right: 0; &:hover { - opacity: .8; color: inherit; + opacity: .8; } } diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css index f95bcf3..e859303 100644 --- a/src/themes/basic/_layout.css +++ b/src/themes/basic/_layout.css @@ -1,10 +1,10 @@ * { - box-sizing: border-box; + -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: none; -webkit-touch-callout: none; - -webkit-font-smoothing: antialiased; + box-sizing: border-box; } body:not(.ready) { @@ -16,10 +16,10 @@ body:not(.ready) { } div#app { - text-align: center; font-size: 30px; font-weight: lighter; margin: 40vh auto; + text-align: center; &:empty::before { content: "Loading..."; @@ -59,12 +59,12 @@ html, body { body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; + color: $color-text; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; letter-spacing: 0; margin: 0; overflow-x: hidden; - color: $color-text; } img { @@ -72,24 +72,24 @@ img { } kbd { - display: inline-block; - padding: 3px 5px; - margin-bottom : 3px; - font-size: 12px !important; - line-height: 12px; - vertical-align: middle; border: solid 1px #ccc; border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom : 3px; + padding: 3px 5px; + vertical-align: middle; } /* navbar */ nav.app-nav { + left: 0; + margin: 25px 60px 0 0; position: absolute; right: 0; - left: 0; - z-index: 10; - margin: 25px 60px 0 0; text-align: right; + z-index: 10; &.no-badge { margin-right: 25px; @@ -105,15 +105,15 @@ nav.app-nav { } ul, li { - list-style: none; display: inline-block; + list-style: none; margin: 0; } a { + color: inherit; font-size: 16px; text-decoration: none; - color: inherit; transition: color .3s; &:hover { @@ -121,41 +121,41 @@ nav.app-nav { } &.active { - color: var(--theme-color, $color-primary); border-bottom: 2px solid var(--theme-color, $color-primary); + color: var(--theme-color, $color-primary); } } /* navbar dropdown */ li { - position: relative; display: inline-block; margin: 0 1em; padding: 5px 0; + position: relative; ul { - display: none; - box-sizing: border-box; - max-height: calc(100vh - 61px); - overflow-y: scroll; - position: absolute; - top: 100%; - right: -15px; background-color: #fff; - padding: 10px 0; border: 1px solid #ddd; border-bottom-color: #ccc; - text-align: left; border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: scroll; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; white-space: nowrap; li { display: block; font-size: 14px; + line-height: 1em; margin: 0; margin: 8px 14px; white-space: nowrap; - line-height: 1em; } a { @@ -178,12 +178,12 @@ nav.app-nav { /* github corner */ .github-corner { - position: fixed; - top: 0; - right: 0; - z-index: 1; - text-decoration: none; border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; &:hover .octo-arm { animation:octocat-wave 560ms ease-in-out; @@ -191,23 +191,23 @@ nav.app-nav { svg { color: $color-bg; + fill: var(--theme-color, $color-primary); height: 80px; width: 80px; - fill: var(--theme-color, $color-primary); } } /* main */ main { display: block; - size: 100vw 100%; position: relative; + size: 100vw 100%; } .anchor { + display: inline-block; text-decoration: none; transition: all .3s; - display: inline-block; span { color: $color-text; @@ -220,19 +220,19 @@ main { /* sidebar */ .sidebar { + border-right: 1px solid rgba(0, 0, 0, .07); overflow-y: auto; padding: 40px 0; position: absolute 0 * 0 0; transition: transform 250ms ease-out; width: $sidebar-width; z-index: 20; - border-right: 1px solid rgba(0, 0, 0, .07); > h1 { - text-align: center; margin: 0 auto 1em; font-size: 1.5em; font-weight: 300; + text-align: center; a { color: inherit; @@ -255,8 +255,8 @@ main { } ul li a { - display: block; border-bottom: none; + display: block; } ul li ul { @@ -284,17 +284,17 @@ main { /* sidebar toggle */ .sidebar-toggle { background-color: transparent; + background-color: rgba($color-bg, .8); border: 0; outline: none; + outline: none; + padding: 10px; position: absolute * * 0 0; text-align: center; transition: opacity .3s; width: 30px; - z-index: 30; - outline: none; width: calc($sidebar-width - 16px); - padding: 10px; - background-color: rgba($color-bg, .8); + z-index: 30; .sidebar-toggle-button:hover { opacity: .4; @@ -303,8 +303,8 @@ main { span { background-color: var(--theme-color, $color-primary); display: block; - size: 16px 2px; margin-bottom: 4px; + size: 16px 2px; } } @@ -316,17 +316,17 @@ body.sticky { /* main content */ .content { - position: absolute 0 0 0 $sidebar-width; padding-top: 20px; + position: absolute 0 0 0 $sidebar-width; transition: left 250ms ease; } /* markdown content found on pages */ .markdown-section { - position: relative; margin: 0 auto; max-width: 800px; padding: 20px 15px 40px 15px; + position: relative; > * { box-sizing: border-box; @@ -340,28 +340,28 @@ body.sticky { .markdown-section hr { border: none; - margin: 2em 0; border-bottom: 1px solid #eee; + margin: 2em 0; } .markdown-section table { - display: block; - width: 100%; - overflow: auto; - border-spacing: 0; border-collapse: collapse; + border-spacing: 0; + display: block; margin-bottom: 1em; + overflow: auto; + width: 100%; } .markdown-section th { + border: 1px solid #ddd; font-weight: bold; padding: 6px 13px; - border: 1px solid #ddd; } .markdown-section td { - padding: 6px 13px; border: 1px solid #ddd; + padding: 6px 13px; } .markdown-section tr { @@ -372,28 +372,28 @@ body.sticky { } .markdown-section p.tip { - padding: 12px 24px 12px 30px; - margin: 2em 0; - border-left: 4px solid #f66; background-color: #f8f8f8; - position: relative; border-bottom-right-radius: 2px; + border-left: 4px solid #f66; border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; &:before { - position: absolute; - top: 14px; - left: -12px; background-color: #f66; + border-radius: 100%; color: $color-bg; content: "!"; - size: 20px; - border-radius: 100%; - text-align: center; - line-height: 20px; - font-weight: bold; font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; + font-weight: bold; + left: -12px; + line-height: 20px; + position: absolute; + size: 20px; + text-align: center; + top: 14px; } code { @@ -406,9 +406,9 @@ body.sticky { } .markdown-section p.warn { - padding: 1em; background: rgba($color-primary, 0.1); border-radius: 2px; + padding: 1em; } body.close { @@ -460,8 +460,8 @@ body.close { } .sidebar-toggle { - width: auto; background-color: transparent; + width: auto; } body.close { @@ -470,9 +470,9 @@ body.close { } .sidebar-toggle { - width: calc($sidebar-width - 16px); background-color: rgba($color-bg, .8); transition: 1s background-color; + width: calc($sidebar-width - 16px); } .content { diff --git a/src/themes/buble.css b/src/themes/buble.css index 3cb84d2..f70e6c0 100644 --- a/src/themes/buble.css +++ b/src/themes/buble.css @@ -20,8 +20,8 @@ $sidebar-width: 16em; li { list-style: none; - padding: 0.2em 0 0.2em 1em; margin: 0; + padding: 0.2em 0 0.2em 1em; } ul li ul { @@ -29,11 +29,11 @@ $sidebar-width: 16em; } li.active { - background-color: #eee; - a { color: #333; } + + background-color: #eee; } } @@ -42,8 +42,8 @@ $sidebar-width: 16em; .markdown-section h3, .markdown-section h4, .markdown-section strong { - font-weight: 400; color: #333; + font-weight: 400; } .markdown-section a { @@ -54,30 +54,29 @@ $sidebar-width: 16em; .markdown-section p, .markdown-section ul, .markdown-section ol { - word-spacing: 0.05em; line-height: 1.6em; margin: 0 0 1em 0; + word-spacing: 0.05em; } .markdown-section h1 { - margin: 0 0 1em; font-size: 2em; font-weight: 500; + margin: 0 0 1em; } .markdown-section h2 { - padding: 1rem 0 0 0; - margin: 0 0 1rem 0; font-size: 1.8em; font-weight: 400; + margin: 0 0 1rem 0; + padding: 1rem 0 0 0; } .markdown-section h3 { - margin: 52px 0 1.2em; font-size: 1.5em; + margin: 52px 0 1.2em; } - .markdown-section h4 { font-size: 1.25em; } @@ -87,8 +86,8 @@ $sidebar-width: 16em; } .markdown-section h6 { - font-size: 1em; color: #777; + font-size: 1em; } .markdown-section figure, @@ -104,13 +103,13 @@ $sidebar-width: 16em; } .markdown-section li { - margin: 0; line-height: 1.5; + margin: 0; } .markdown-section blockquote { - color: #858585; border-left: 4px solid var(--theme-color, $color-primary); + color: #858585; margin: 2em 0; padding-left: 20px; } @@ -130,29 +129,29 @@ $sidebar-width: 16em; .markdown-section code { background-color: #f9f9f9; - padding: 0.2em 0.4em; border-radius: 3px; - white-space: pre; font-family: Inconsolata; + padding: 0.2em 0.4em; + white-space: pre; } .markdown-section pre { background-color: #f9f9f9; border-left: 2px solid #eee; - padding: 8px; - margin: 0 0 1em 0; font-family: Inconsolata; - padding: 0 10px 12px 0; font-size: 16px; + margin: 0 0 1em 0; + padding: 8px; + padding: 0 10px 12px 0; overflow: auto; word-wrap: normal; } /* code highlight */ +.token.cdata, .token.comment, -.token.prolog, .token.doctype, -.token.cdata { +.token.prolog { color: #93a1a1; /* base1 */ } @@ -218,15 +217,15 @@ $sidebar-width: 16em; } .markdown-section pre>code { + background-color: #f8f8f8; + border-radius: 2px; display: block; font-family: Inconsolata; - overflow: inherit; - max-width: inherit; - position: relative; - background-color: #f8f8f8; - padding: 20px 0.8em 20px; line-height: 1.1em; - border-radius: 2px; + max-width: inherit; + overflow: inherit; + padding: 20px 0.8em 20px; + position: relative; } .markdown-section code::after, .markdown-section code::before { @@ -234,7 +233,7 @@ $sidebar-width: 16em; } code .token { - min-height: 1.5em; -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; + min-height: 1.5em; } diff --git a/src/themes/dark.css b/src/themes/dark.css index 2a69641..5ee2585 100644 --- a/src/themes/dark.css +++ b/src/themes/dark.css @@ -14,8 +14,8 @@ body { /* sidebar */ .sidebar { - color: #c8c8c8; background-color: $color-bg; + color: #c8c8c8; li { margin: 6px 15px; @@ -23,11 +23,11 @@ body { ul li a { color: #c8c8c8; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - text-decoration: none; font-size: 14px; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; &:hover { text-decoration: underline; @@ -50,8 +50,8 @@ body { .markdown-section h3, .markdown-section h4, .markdown-section strong { - font-weight: 600; color: #2c3e50; + font-weight: 600; } .markdown-section a { @@ -60,8 +60,8 @@ body { } .markdown-section h1 { - margin: 0 0 1em; font-size: 2em; + margin: 0 0 1em; } .markdown-section h2 { @@ -70,8 +70,8 @@ body { } .markdown-section h3 { - margin: 40px 0 .6em; font-size: 1.5em; + margin: 40px 0 .6em; } .markdown-section h4 { @@ -83,8 +83,8 @@ body { } .markdown-section h6 { - font-size: 1em; color: #777; + font-size: 1em; } .markdown-section figure, @@ -107,8 +107,8 @@ body { } .markdown-section blockquote { - color: #858585; border-left: 4px solid var(--theme-color, $color-primary); + color: #858585; margin: 2em 0; padding-left: 20px; } @@ -127,14 +127,14 @@ body { } .markdown-section code { + background-color: #282828; border-radius: 2px; color: #657b83; + font-family: 'Roboto Mono', Monaco, courier, monospace; + font-size: 0.8em; margin: 0 2px; padding: 3px 5px; white-space: nowrap; - font-size: 0.8em; - font-family: 'Roboto Mono', Monaco, courier, monospace; - background-color: #282828; } .markdown-section pre { @@ -144,9 +144,9 @@ body { font-family: 'Roboto Mono', Monaco, courier, monospace; line-height: 1.5em; margin: 1.2em 0; + overflow: auto; padding: 0 1.4em; position: relative; - overflow: auto; word-wrap: normal; } @@ -257,10 +257,10 @@ body { font-size: 0.8em; line-height: inherit; margin: 0 2px; + max-width: inherit; overflow: inherit; padding: 2.2em 5px; white-space: inherit; - max-width: inherit; } .markdown-section code::after, .markdown-section code::before { @@ -268,9 +268,9 @@ body { } code .token { - min-height: 1.5em; - -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5em; } pre::after { @@ -293,7 +293,7 @@ pre::after { } input[type="search"] { - border-color: #4f4f4f; background: #4f4f4f; + border-color: #4f4f4f; color: #c8c8c8; } diff --git a/src/themes/vue.css b/src/themes/vue.css index 4c3d03f..818123d 100644 --- a/src/themes/vue.css +++ b/src/themes/vue.css @@ -14,8 +14,8 @@ body { /* sidebar */ .sidebar { - color: #364149; background-color: $color-bg; + color: #364149; li { margin: 6px 0 6px 15px; @@ -23,12 +23,12 @@ body { ul li a { color: #505d6b; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - text-decoration: none; font-size: 14px; font-weight: normal; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; &:hover { text-decoration: underline; @@ -40,9 +40,9 @@ body { } ul li.active>a { + border-right: 2px solid; color: var(--theme-color, $color-primary); font-weight: 600; - border-right: 2px solid; } } @@ -61,8 +61,8 @@ body { .markdown-section h3, .markdown-section h4, .markdown-section strong { - font-weight: 600; color: #2c3e50; + font-weight: 600; } .markdown-section a { @@ -71,8 +71,8 @@ body { } .markdown-section h1 { - margin: 0 0 1em; font-size: 2em; + margin: 0 0 1em; } .markdown-section h2 { @@ -81,8 +81,8 @@ body { } .markdown-section h3 { - margin: 40px 0 .6em; font-size: 1.5em; + margin: 40px 0 .6em; } .markdown-section h4 { @@ -94,8 +94,8 @@ body { } .markdown-section h6 { - font-size: 1em; color: #777; + font-size: 1em; } .markdown-section figure, @@ -118,8 +118,8 @@ body { } .markdown-section blockquote { - color: #858585; border-left: 4px solid var(--theme-color, $color-primary); + color: #858585; margin: 2em 0; padding-left: 20px; } @@ -138,14 +138,14 @@ body { } .markdown-section code { + background-color: #f8f8f8; border-radius: 2px; color: #e96900; + font-family: 'Roboto Mono', Monaco, courier, monospace; + font-size: 0.8em; margin: 0 2px; padding: 3px 5px; white-space: nowrap; - font-size: 0.8em; - font-family: 'Roboto Mono', Monaco, courier, monospace; - background-color: #f8f8f8; } .markdown-section pre { @@ -155,9 +155,9 @@ body { font-family: 'Roboto Mono', Monaco, courier, monospace; line-height: 1.5em; margin: 1.2em 0; + overflow: auto; padding: 0 1.4em; position: relative; - overflow: auto; word-wrap: normal; } @@ -268,10 +268,10 @@ body { font-size: 0.8em; line-height: inherit; margin: 0 2px; + max-width: inherit; overflow: inherit; padding: 2.2em 5px; white-space: inherit; - max-width: inherit; } .markdown-section code::after, .markdown-section code::before { @@ -279,9 +279,9 @@ body { } code .token { - min-height: 1.5em; - -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5em; } pre::after {