order css source alphabetically
This commit is contained in:
Johannes Rappen
parent
0b1fc2343f
commit
262bf13964
5 changed files with 149 additions and 150 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue