Better CSS in docs

This commit is contained in:
branwright1 2021-04-28 12:25:20 +01:00
parent fb8bf62fae
commit 7edae49b7e
10 changed files with 224 additions and 23 deletions

View File

@ -4,7 +4,7 @@
- Modules - Modules
- [Flash Focus](module/flash.md) - [Flash Focus](module/flash.md)
- [Tabbed](module/tabbed.md) - [Tabbed](module/tabbed.md)
- [Tiled Wallpaper](module/twall.md) - [Tiled Wallpaper](module/twall.md)
- [Wallpaper Easy Setup](module/wall.md) - [Wallpaper Easy Setup](module/wall.md)
- [Window Swallowing](module/swal.md) - [Window Swallowing](module/swal.md)

View File

@ -2,9 +2,9 @@
## Why ## Why
[AwesomeWM](https://awesomewm.org/) is literally what it stands for, an awesome window manager. [AwesomeWM](https://awesomewm.org/) is literally what it stands for, an awesome window manager.
Its unique selling point has always been the widget system, which allows for fancy buttons, sliders, bars, dashboards and anything you can imagine. But that feature can be a curse. Most modules focus on the widget side of things which leave the actual window managing part of AwesomeWM underdeveloped compared to, for example, [xmonad](https://xmonad.org/) even though it's probably just as powerfull in that area. Its unique selling point has always been the widget system, which allows for fancy buttons, sliders, bars, dashboards and anything you can imagine. But that feature can be a curse. Most modules focus on the widget side of things which leave the actual window managing part of AwesomeWM underdeveloped compared to, for example, [xmonad](https://xmonad.org/) even though it's probably just as powerfull in that area.
This project focuses on that problem - adding new layouts and modules that make use of the widget system, but primarily focus on the new window managing features. This project focuses on that problem - adding new layouts and modules that make use of the widget system, but primarily focus on the new window managing features.

View File

@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600"); @import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
* { * {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -7,27 +8,51 @@
-webkit-touch-callout: none; -webkit-touch-callout: none;
box-sizing: border-box; box-sizing: border-box;
} }
body:not(.ready) { body:not(.ready) {
overflow: hidden; overflow: hidden;
} }
body:not(.ready) [data-cloak], body:not(.ready) [data-cloak],
body:not(.ready) .app-nav, body:not(.ready) .app-nav,
body:not(.ready) > nav { body:not(.ready) > nav {
display: none; display: none;
} }
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background: transparent !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
border: none !important;
width: 8px !important;
}
::-webkit-scrollbar-thumb {
background:#29343d !important;
width:8px !important;
border: none !important;
border-radius: 2px !important;
}
div#app { div#app {
font-size: 30px; font-size: 30px;
font-weight: lighter; font-weight: lighter;
margin: 40vh auto; margin: 40vh auto;
text-align: center; text-align: center;
} }
div#app:empty::before { div#app:empty::before {
content: 'Loading...'; content: 'Loading...';
} }
.emoji { .emoji {
height: 1.2rem; height: 1.2rem;
vertical-align: middle; vertical-align: middle;
} }
.progress { .progress {
background-color: var(--theme-color, #7ed491); background-color: var(--theme-color, #7ed491);
height: 2px; height: 2px;
@ -39,18 +64,22 @@ div#app:empty::before {
width: 0%; width: 0%;
z-index: 999999; z-index: 999999;
} }
.search a:hover { .search a:hover {
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
} }
.search .search-keyword { .search .search-keyword {
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
} }
html, html,
body { body {
height: 100%; height: 100%;
} }
body { body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -61,13 +90,16 @@ body {
margin: 0; margin: 0;
overflow-x: hidden; overflow-x: hidden;
} }
img { img {
max-width: 65%; max-width: 65%;
} }
a[disabled] { a[disabled] {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.6; opacity: 0.6;
} }
kbd { kbd {
border: solid 1px #ccc; border: solid 1px #ccc;
border-radius: 3px; border-radius: 3px;
@ -78,10 +110,12 @@ kbd {
padding: 3px 5px; padding: 3px 5px;
vertical-align: middle; vertical-align: middle;
} }
li input[type='checkbox'] { li input[type='checkbox'] {
margin: 0 0.2em 0.25em 0; margin: 0 0.2em 0.25em 0;
vertical-align: middle; vertical-align: middle;
} }
.app-nav { .app-nav {
margin: 25px 60px 0 0; margin: 25px 60px 0 0;
position: absolute; position: absolute;
@ -90,35 +124,43 @@ li input[type='checkbox'] {
z-index: 10; z-index: 10;
/* navbar dropdown */ /* navbar dropdown */
} }
.app-nav.no-badge { .app-nav.no-badge {
margin-right: 25px; margin-right: 25px;
} }
.app-nav p { .app-nav p {
margin: 0; margin: 0;
} }
.app-nav > a { .app-nav > a {
margin: 0 1rem; margin: 0 1rem;
padding: 5px 0; padding: 5px 0;
} }
.app-nav ul, .app-nav ul,
.app-nav li { .app-nav li {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
margin: 0; margin: 0;
} }
.app-nav a { .app-nav a {
color: inherit; color: inherit;
font-size: 16px; font-size: 16px;
text-decoration: none; text-decoration: none;
transition: color 0.3s; transition: color 0.3s;
} }
.app-nav a:hover { .app-nav a:hover {
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
} }
.app-nav a.active { .app-nav a.active {
border-bottom: 2px solid var(--theme-color, #7ed491); border-bottom: 2px solid var(--theme-color, #7ed491);
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
} }
.app-nav li { .app-nav li {
display: inline-block; display: inline-block;
margin: 0 1rem; margin: 0 1rem;
@ -126,6 +168,7 @@ li input[type='checkbox'] {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.app-nav li ul { .app-nav li ul {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -142,6 +185,7 @@ li input[type='checkbox'] {
top: 100%; top: 100%;
white-space: nowrap; white-space: nowrap;
} }
.app-nav li ul li { .app-nav li ul li {
display: block; display: block;
font-size: 14px; font-size: 14px;
@ -150,18 +194,22 @@ li input[type='checkbox'] {
margin: 8px 14px; margin: 8px 14px;
white-space: nowrap; white-space: nowrap;
} }
.app-nav li ul a { .app-nav li ul a {
display: block; display: block;
font-size: inherit; font-size: inherit;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.app-nav li ul a.active { .app-nav li ul a.active {
border-bottom: 0; border-bottom: 0;
} }
.app-nav li:hover ul { .app-nav li:hover ul {
display: block; display: block;
} }
.github-corner { .github-corner {
border-bottom: 0; border-bottom: 0;
position: fixed; position: fixed;
@ -170,16 +218,19 @@ li input[type='checkbox'] {
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
.github-corner:hover .octo-arm { .github-corner:hover .octo-arm {
-webkit-animation: octocat-wave 560ms ease-in-out; -webkit-animation: octocat-wave 560ms ease-in-out;
animation: octocat-wave 560ms ease-in-out; animation: octocat-wave 560ms ease-in-out;
} }
.github-corner svg { .github-corner svg {
color: #fff; color: #fff;
fill: var(--theme-color, #7ed491); fill: var(--theme-color, #7ed491);
height: 80px; height: 80px;
width: 80px; width: 80px;
} }
main { main {
display: block; display: block;
position: relative; position: relative;
@ -187,20 +238,25 @@ main {
height: 100%; height: 100%;
z-index: 0; z-index: 0;
} }
main.hidden { main.hidden {
display: none; display: none;
} }
.anchor { .anchor {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
transition: all 0.3s; transition: all 0.3s;
} }
.anchor span { .anchor span {
color: #FFFFFF; color: #FFFFFF;
} }
.anchor:hover { .anchor:hover {
text-decoration: underline; text-decoration: underline;
} }
.sidebar { .sidebar {
border-right: 1px solid rgba(0,0,0,0.07); border-right: 1px solid rgba(0,0,0,0.07);
overflow-y: auto; overflow-y: auto;
@ -213,59 +269,74 @@ main.hidden {
width: 300px; width: 300px;
z-index: 20; z-index: 20;
} }
.sidebar > h1 { .sidebar > h1 {
margin: 0 auto 1rem; margin: 0 auto 1rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 300; font-weight: 300;
text-align: center; text-align: center;
} }
.sidebar > h1 a { .sidebar > h1 a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.sidebar > h1 .app-nav { .sidebar > h1 .app-nav {
display: block; display: block;
position: static; position: static;
} }
.sidebar .sidebar-nav { .sidebar .sidebar-nav {
line-height: 2em; line-height: 2em;
padding-bottom: 40px; padding-bottom: 40px;
} }
.sidebar li.collapse .app-sub-sidebar { .sidebar li.collapse .app-sub-sidebar {
display: none; display: none;
} }
.sidebar ul { .sidebar ul {
margin: 0 0 0 15px; margin: 0 0 0 15px;
padding: 0; padding: 0;
} }
.sidebar li > p { .sidebar li > p {
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
} }
.sidebar ul, .sidebar ul,
.sidebar ul li { .sidebar ul li {
list-style: none; list-style: none;
} }
.sidebar ul li a { .sidebar ul li a {
border-bottom: none; border-bottom: none;
display: block; display: block;
} }
.sidebar ul li ul { .sidebar ul li ul {
padding-left: 20px; padding-left: 20px;
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
width: 4px; width: 4px;
} }
.sidebar::-webkit-scrollbar-thumb { .sidebar::-webkit-scrollbar-thumb {
background: transparent; background: transparent;
border-radius: 4px; border-radius: 4px;
} }
.sidebar:hover::-webkit-scrollbar-thumb { .sidebar:hover::-webkit-scrollbar-thumb {
background: rgba(136,136,136,0.4); background: rgba(136,136,136,0.4);
} }
.sidebar:hover::-webkit-scrollbar-track { .sidebar:hover::-webkit-scrollbar-track {
background: rgba(136,136,136,0.1); background: rgba(136,136,136,0.1);
} }
.sidebar-toggle { .sidebar-toggle {
background-color: transparent; background-color: transparent;
background-color: #1a2026; background-color: #1a2026;
@ -281,9 +352,11 @@ main.hidden {
z-index: 30; z-index: 30;
cursor: pointer; cursor: pointer;
} }
.sidebar-toggle:hover .sidebar-toggle-button { .sidebar-toggle:hover .sidebar-toggle-button {
opacity: 0.4; opacity: 0.4;
} }
.sidebar-toggle span { .sidebar-toggle span {
background-color: var(--theme-color, #7ed491); background-color: var(--theme-color, #7ed491);
display: block; display: block;
@ -291,10 +364,12 @@ main.hidden {
width: 16px; width: 16px;
height: 2px; height: 2px;
} }
body.sticky .sidebar, body.sticky .sidebar,
body.sticky .sidebar-toggle { body.sticky .sidebar-toggle {
position: fixed; position: fixed;
} }
.content { .content {
padding-top: 60px; padding-top: 60px;
position: absolute; position: absolute;
@ -304,30 +379,36 @@ body.sticky .sidebar-toggle {
left: 300px; left: 300px;
transition: left 250ms ease; transition: left 250ms ease;
} }
.markdown-section { .markdown-section {
margin: 0 auto; margin: 0 auto;
max-width: 80%; max-width: 80%;
padding: 30px 15px 40px 15px; padding: 30px 15px 40px 15px;
position: relative; position: relative;
} }
.markdown-section > * { .markdown-section > * {
box-sizing: border-box; box-sizing: border-box;
font-size: inherit; font-size: inherit;
} }
.markdown-section > :first-child { .markdown-section > :first-child {
margin-top: 0 !important; margin-top: 0 !important;
} }
.markdown-section hr { .markdown-section hr {
border: none; border: none;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
margin: 2em 0; margin: 2em 0;
} }
.markdown-section iframe { .markdown-section iframe {
border: 1px solid #eee; border: 1px solid #eee;
/* fix horizontal overflow on iOS Safari */ /* fix horizontal overflow on iOS Safari */
width: 1px; width: 1px;
min-width: 100%; min-width: 100%;
} }
.markdown-section table { .markdown-section table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
@ -336,21 +417,30 @@ body.sticky .sidebar-toggle {
overflow: auto; overflow: auto;
width: 100%; width: 100%;
} }
.markdown-section th { .markdown-section th {
border: 1px solid #ddd; border: 1px solid #aaa;
color: #a6bcce;
background-color: #13181c;
font-weight: bold; font-weight: bold;
padding: 6px 13px; padding: 6px 13px;
} }
.markdown-section td { .markdown-section td {
border: 1px solid #ddd; border: 1px solid #aaa;
color: #a6bcce;
background-color: #13181c;
padding: 6px 13px; padding: 6px 13px;
} }
.markdown-section tr { .markdown-section tr {
border-top: 1px solid #ccc; border-top: 1px solid #303436;
} }
.markdown-section tr:nth-child(2n) { .markdown-section tr:nth-child(2n) {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.markdown-section p.tip { .markdown-section p.tip {
background-color: #f8f8f8; background-color: #f8f8f8;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
@ -360,6 +450,7 @@ body.sticky .sidebar-toggle {
padding: 12px 24px 12px 30px; padding: 12px 24px 12px 30px;
position: relative; position: relative;
} }
.markdown-section p.tip:before { .markdown-section p.tip:before {
background-color: #f66; background-color: #f66;
border-radius: 100%; border-radius: 100%;
@ -376,29 +467,37 @@ body.sticky .sidebar-toggle {
text-align: center; text-align: center;
top: 14px; top: 14px;
} }
.markdown-section p.tip code { .markdown-section p.tip code {
background-color: #eaeaea; background-color: #eaeaea;
} }
.markdown-section p.tip em { .markdown-section p.tip em {
color: #eaeaea; color: #eaeaea;
} }
.markdown-section p.warn { .markdown-section p.warn {
background: #eaeaea; background: #eaeaea;
border-radius: 2px; border-radius: 2px;
padding: 1rem; padding: 1rem;
} }
.markdown-section ul.task-list > li { .markdown-section ul.task-list > li {
list-style-type: none; list-style-type: none;
} }
body.close .sidebar { body.close .sidebar {
transform: translateX(-300px); transform: translateX(-300px);
} }
body.close .sidebar-toggle { body.close .sidebar-toggle {
width: auto; width: auto;
} }
body.close .content { body.close .content {
left: 0; left: 0;
} }
@media print { @media print {
.github-corner, .github-corner,
.sidebar-toggle, .sidebar-toggle,
@ -407,26 +506,32 @@ body.close .content {
display: none; display: none;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.github-corner, .github-corner,
.sidebar-toggle, .sidebar-toggle,
.sidebar { .sidebar {
position: fixed; position: fixed;
} }
.app-nav { .app-nav {
margin-top: 16px; margin-top: 16px;
} }
.app-nav li ul { .app-nav li ul {
top: 30px; top: 30px;
} }
main { main {
height: auto; height: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.sidebar { .sidebar {
left: -300px; left: -300px;
transition: transform 250ms ease-out; transition: transform 250ms ease-out;
} }
.content { .content {
left: 0; left: 0;
max-width: 100vw; max-width: 100vw;
@ -434,40 +539,49 @@ body.close .content {
padding-top: 20px; padding-top: 20px;
transition: transform 250ms ease; transition: transform 250ms ease;
} }
.app-nav, .app-nav,
.github-corner { .github-corner {
transition: transform 250ms ease-out; transition: transform 250ms ease-out;
} }
.sidebar-toggle { .sidebar-toggle {
background-color: transparent; background-color: transparent;
width: auto; width: auto;
padding: 30px 30px 10px 10px; padding: 30px 30px 10px 10px;
} }
body.close .sidebar { body.close .sidebar {
transform: translateX(300px); transform: translateX(300px);
} }
body.close .sidebar-toggle { body.close .sidebar-toggle {
background-color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8);
transition: 1s background-color; transition: 1s background-color;
width: 284px; width: 284px;
padding: 10px; padding: 10px;
} }
body.close .content { body.close .content {
transform: translateX(300px); transform: translateX(300px);
} }
body.close .app-nav, body.close .app-nav,
body.close .github-corner { body.close .github-corner {
display: none; display: none;
} }
.github-corner:hover .octo-arm { .github-corner:hover .octo-arm {
-webkit-animation: none; -webkit-animation: none;
animation: none; animation: none;
} }
.github-corner .octo-arm { .github-corner .octo-arm {
-webkit-animation: octocat-wave 560ms ease-in-out; -webkit-animation: octocat-wave 560ms ease-in-out;
animation: octocat-wave 560ms ease-in-out; animation: octocat-wave 560ms ease-in-out;
} }
} }
@-webkit-keyframes octocat-wave { @-webkit-keyframes octocat-wave {
0%, 100% { 0%, 100% {
transform: rotate(0); transform: rotate(0);
@ -479,6 +593,7 @@ body.close .content {
transform: rotate(10deg); transform: rotate(10deg);
} }
} }
@keyframes octocat-wave { @keyframes octocat-wave {
0%, 100% { 0%, 100% {
transform: rotate(0); transform: rotate(0);
@ -490,6 +605,7 @@ body.close .content {
transform: rotate(10deg); transform: rotate(10deg);
} }
} }
section.cover { section.cover {
align-items: center; align-items: center;
background-position: center center; background-position: center center;
@ -499,9 +615,11 @@ section.cover {
width: 100vw; width: 100vw;
display: none; display: none;
} }
section.cover.show { section.cover.show {
display: flex; display: flex;
} }
section.cover.has-mask .mask { section.cover.has-mask .mask {
background-color: #fff; background-color: #fff;
opacity: 0.8; opacity: 0.8;
@ -510,23 +628,28 @@ section.cover.has-mask .mask {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
section.cover .cover-main { section.cover .cover-main {
flex: 1; flex: 1;
margin: -20px 16px 0; margin: -20px 16px 0;
text-align: center; text-align: center;
position: relative; position: relative;
} }
section.cover a { section.cover a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
section.cover a:hover { section.cover a:hover {
text-decoration: none; text-decoration: none;
} }
section.cover p { section.cover p {
line-height: 1.5rem; line-height: 1.5rem;
margin: 1em 0; margin: 1em 0;
} }
section.cover h1 { section.cover h1 {
color: inherit; color: inherit;
font-size: 2.5rem; font-size: 2.5rem;
@ -535,18 +658,22 @@ section.cover h1 {
position: relative; position: relative;
text-align: center; text-align: center;
} }
section.cover h1 a { section.cover h1 a {
display: block; display: block;
} }
section.cover h1 small { section.cover h1 small {
bottom: -0.4375rem; bottom: -0.4375rem;
font-size: 1rem; font-size: 1rem;
position: absolute; position: absolute;
} }
section.cover blockquote { section.cover blockquote {
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
} }
section.cover ul { section.cover ul {
line-height: 1.8; line-height: 1.8;
list-style-type: none; list-style-type: none;
@ -554,6 +681,7 @@ section.cover ul {
max-width: 500px; max-width: 500px;
padding: 0; padding: 0;
} }
section.cover .cover-main > p:last-child a { section.cover .cover-main > p:last-child a {
border-color: var(--theme-color, #7ed491); border-color: var(--theme-color, #7ed491);
border-radius: 2rem; border-radius: 2rem;
@ -569,35 +697,48 @@ section.cover .cover-main > p:last-child a {
text-decoration: none; text-decoration: none;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
section.cover .cover-main > p:last-child a:last-child { section.cover .cover-main > p:last-child a:last-child {
background-color: var(--theme-color, #7ed491); background-color: var(--theme-color, #7ed491);
color: #fff; color: #fff;
} }
section.cover .cover-main > p:last-child a:last-child:hover { section.cover .cover-main > p:last-child a:last-child:hover {
color: inherit; color: inherit;
opacity: 0.8; opacity: 0.8;
} }
section.cover .cover-main > p:last-child a:hover { section.cover .cover-main > p:last-child a:hover {
color: inherit; color: inherit;
} }
section.cover blockquote > p > a { section.cover blockquote > p > a {
border-bottom: 2px solid var(--theme-color, #7ed491); border-bottom: 2px solid var(--theme-color, #7ed491);
transition: color 0.3s; transition: color 0.3s;
} }
section.cover blockquote > p > a:hover { section.cover blockquote > p > a:hover {
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
} }
body { body {
background-color: #181e24; background-color: #181e24;
} }
/* sidebar */ /* sidebar */
.sidebar { .sidebar {
background-color: #1a2026; background-color: #1a2026;
color: #FFFFFF; color: #fff;
} }
.sidebar > h1 a {
font-weight: bold;
}
.sidebar li { .sidebar li {
margin: 6px 0 6px 0; margin: 6px 0 6px 0;
} }
.sidebar ul li a { .sidebar ul li a {
color: #eaeaea; color: #eaeaea;
font-size: 14px; font-size: 14px;
@ -607,22 +748,27 @@ body {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.sidebar ul li a:hover { .sidebar ul li a:hover {
text-decoration: underline; text-decoration: underline;
} }
.sidebar ul li ul { .sidebar ul li ul {
padding: 0; padding: 0;
} }
.sidebar ul li.active > a { .sidebar ul li.active > a {
border-right: 2px solid; border-right: 2px solid;
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
font-weight: 600; font-weight: 600;
} }
.app-sub-sidebar li::before { .app-sub-sidebar li::before {
content: '-'; content: '-';
padding-right: 4px; padding-right: 4px;
float: left; float: left;
} }
/* markdown content found on pages */ /* markdown content found on pages */
.markdown-section h1, .markdown-section h1,
.markdown-section h2, .markdown-section h2,
@ -632,87 +778,107 @@ body {
color: #eaeaea; color: #eaeaea;
font-weight: 600; font-weight: 600;
} }
.markdown-section a { .markdown-section a {
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
font-weight: 600; font-weight: 600;
} }
.markdown-section h1 { .markdown-section h1 {
font-size: 2rem; font-size: 2rem;
margin: 0 0 1rem; margin: 0 0 1rem;
} }
.markdown-section h2 { .markdown-section h2 {
font-size: 1.75rem; font-size: 1.75rem;
margin: 45px 0 0.8rem; margin: 45px 0 0.8rem;
} }
.markdown-section h3 { .markdown-section h3 {
font-size: 1.5rem; font-size: 1.5rem;
margin: 40px 0 0.6rem; margin: 40px 0 0.6rem;
} }
.markdown-section h4 { .markdown-section h4 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.markdown-section h5 { .markdown-section h5 {
font-size: 1rem; font-size: 1rem;
} }
.markdown-section h6 { .markdown-section h6 {
color: #777; color: #777;
font-size: 1rem; font-size: 1rem;
} }
.markdown-section figure, .markdown-section figure,
.markdown-section p { .markdown-section p {
margin: 1.2em 0; margin: 1.2em 0;
} }
.markdown-section p, .markdown-section p,
.markdown-section ul, .markdown-section ul,
.markdown-section ol { .markdown-section ol {
line-height: 1.6rem; line-height: 1.6rem;
word-spacing: 0.05rem; word-spacing: 0.05rem;
} }
.markdown-section ul, .markdown-section ul,
.markdown-section ol { .markdown-section ol {
padding-left: 1.5rem; padding-left: 1.5rem;
} }
.markdown-section blockquote { .markdown-section blockquote {
border-left: 4px solid var(--theme-color, #7ed491); border-left: 4px solid var(--theme-color, #7ed491);
color: #858585; color: #858585;
margin: 2em 0; margin: 2em 0;
padding-left: 20px; padding-left: 20px;
} }
.markdown-section blockquote p { .markdown-section blockquote p {
font-weight: 600; font-weight: 600;
margin-left: 0; margin-left: 0;
} }
.markdown-section iframe { .markdown-section iframe {
margin: 1em 0; margin: 1em 0;
} }
.markdown-section em { .markdown-section em {
color: #7f8c8d; color: #7f8c8d;
} }
.markdown-section code, .markdown-section code,
.markdown-section pre, .markdown-section pre,
.markdown-section output::after { .markdown-section output::after {
font-family: 'Roboto Mono', Monaco, courier, monospace; font-family: 'Roboto Mono', Monaco, courier, monospace;
} }
.markdown-section code, .markdown-section code,
.markdown-section pre { .markdown-section pre {
color: #575D74; color: #575D74;
background-color: #1a2026; background-color: #13181c
} }
.markdown-section pre, .markdown-section pre,
.markdown-section output { .markdown-section output {
margin: 1.2em 0; margin: 1.2em 0;
position: relative; position: relative;
} }
.markdown-section pre > code, .markdown-section pre > code,
.markdown-section output { .markdown-section output {
border-radius: 2px; border-radius: 2px;
display: block; display: block;
} }
.markdown-section pre > code, .markdown-section pre > code,
.markdown-section output::after { .markdown-section output::after {
-moz-osx-font-smoothing: initial; -moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial; -webkit-font-smoothing: initial;
} }
.markdown-section code { .markdown-section code {
border-radius: 2px; border-radius: 2px;
color: #3b4b58 color: #3b4b58
@ -720,15 +886,18 @@ body {
padding: 3px 5px; padding: 3px 5px;
white-space: pre-wrap; white-space: pre-wrap;
} }
.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code { .markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
font-size: 0.8rem; font-size: 0.8rem;
} }
.markdown-section pre { .markdown-section pre {
padding: 0 1.4rem; padding: 0 1.4rem;
line-height: 1.5rem; line-height: 1.5rem;
overflow: auto; overflow: auto;
word-wrap: normal; word-wrap: normal;
} }
.markdown-section pre > code { .markdown-section pre > code {
color: #eaeaea; color: #eaeaea;
font-size: 0.8rem; font-size: 0.8rem;
@ -739,22 +908,27 @@ body {
overflow: inherit; overflow: inherit;
white-space: inherit; white-space: inherit;
} }
.markdown-section output { .markdown-section output {
padding: 1.7rem 1.4rem; padding: 1.7rem 1.4rem;
border: 1px dotted #ccc; border: 1px dotted #ccc;
} }
.markdown-section output > :first-child { .markdown-section output > :first-child {
margin-top: 0; margin-top: 0;
} }
.markdown-section output > :last-child { .markdown-section output > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.markdown-section code::after, .markdown-section code::after,
.markdown-section code::before, .markdown-section code::before,
.markdown-section output::after, .markdown-section output::after,
.markdown-section output::before { .markdown-section output::before {
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
} }
.markdown-section pre::after, .markdown-section pre::after,
.markdown-section output::after { .markdown-section output::after {
color: #ccc; color: #ccc;
@ -768,101 +942,128 @@ body {
text-align: right; text-align: right;
top: 0; top: 0;
} }
.markdown-section pre::after, .markdown-section pre::after,
.markdown-section output::after { .markdown-section output::after {
content: attr(data-lang); content: attr(data-lang);
} }
.markdown-section p, .markdown-section ul, .markdown-section ol { .markdown-section p, .markdown-section ul, .markdown-section ol {
color: #eaeaea; color: #eaeaea;
} }
/* code highlight */ /* code highlight */
.token.comment { .token.comment {
color: #575D74; color: #575D74;
} }
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: #8e908c; color: #8e908c;
} }
.token.namespace { .token.namespace {
opacity: 0.7; opacity: 0.7;
} }
.token.boolean { .token.boolean {
color: #FCC5A3 color: #FCC5A3
} }
.token.number { .token.number {
color: #FCC5A3; color: #FCC5A3;
} }
.token.punctuation { .token.punctuation {
color: #fca3ab; color: #fca3ab;
} }
.token.property { .token.property {
color: #d7c1ed; color: #d7c1ed;
} }
.token.tag { .token.tag {
color: #2973b7; color: #2973b7;
} }
.token.string { .token.string {
color: var(--theme-color, #93cfab); color: var(--theme-color, #93cfab);
} }
.token.selector { .token.selector {
color: #6679cc; color: #6679cc;
} }
.token.attr-name { .token.attr-name {
color: #2973b7; color: #2973b7;
} }
.token.entity, .token.entity,
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #22a2c9; color: #22a2c9;
} }
.token.attr-value, .token.attr-value,
.token.control, .token.control,
.token.directive, .token.directive,
.token.unit { .token.unit {
color: var(--theme-color, #7ed491); color: var(--theme-color, #7ed491);
} }
.token.keyword { .token.keyword {
color: #d7c1ed color: #d7c1ed
} }
.token.function { .token.function {
color: #bac8ef; color: #bac8ef;
} }
.token.statement { .token.statement {
color: #fca2aa; color: #fca2aa;
} }
.token.regex, .token.regex,
.token.atrule { .token.atrule {
color: #22a2c9; color: #22a2c9;
} }
.token.placeholder, .token.placeholder,
.token.variable { .token.variable {
color: #3d8fd1; color: #3d8fd1;
} }
.token.deleted { .token.deleted {
text-decoration: line-through; text-decoration: line-through;
} }
.token.inserted { .token.inserted {
border-bottom: 1px dotted #202746; border-bottom: 1px dotted #202746;
text-decoration: none; text-decoration: none;
} }
.token.italic { .token.italic {
font-style: italic; font-style: italic;
} }
.token.bold { .token.bold {
font-weight: bold; font-weight: bold;
} }
.token.important { .token.important {
color: #ccaced; color: #ccaced;
} }
.token.entity { .token.entity {
cursor: help; cursor: help;
} }
code .token { code .token {
-moz-osx-font-smoothing: initial; -moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial; -webkit-font-smoothing: initial;
min-height: 1.5rem; min-height: 1.5rem;
position: relative; position: relative;
left: auto; left: auto;
} }

View File

@ -22,7 +22,7 @@ theme.mstab_dont_resize_slaves = false -- whether the tabbed stack windows
-- currently focused stack window (set it to true if you use -- currently focused stack window (set it to true if you use
-- transparent terminals. False if you use shadows on solid ones -- transparent terminals. False if you use shadows on solid ones
theme.mstab_bar_padding = "default" -- how much padding there should be between clients and your tabbar theme.mstab_bar_padding = "default" -- how much padding there should be between clients and your tabbar
-- by default it will adjust based on your useless gaps. -- by default it will adjust based on your useless gaps.
-- If you want a custom value. Set it to the number of pixels (int) -- If you want a custom value. Set it to the number of pixels (int)
theme.mstab_border_radius = 0 -- border radius of the tabbar theme.mstab_border_radius = 0 -- border radius of the tabbar
theme.mstab_bar_height = 40 -- height of the tabbar theme.mstab_bar_height = 40 -- height of the tabbar

View File

@ -14,7 +14,7 @@ This connects to the focus signal of a client, which means that the flash focus
The other way is to call the function itself like this: `bling.module.flash_focus.flashfocus(someclient)`. This allows you to activate on certain keybinds like so: The other way is to call the function itself like this: `bling.module.flash_focus.flashfocus(someclient)`. This allows you to activate on certain keybinds like so:
```lua ```lua
awful.key({modkey}, "Up", awful.key({modkey}, "Up",
function() function()
awful.client.focus.bydirection("up") awful.client.focus.bydirection("up")
bling.module.flash_focus.flashfocus(client.focus) bling.module.flash_focus.flashfocus(client.focus)
end, {description = "focus up", group = "client"}) end, {description = "focus up", group = "client"})

View File

@ -20,9 +20,9 @@ To initalize a scratchpad you can do something like the following:
```lua ```lua
local bling = require("bling") local bling = require("bling")
local awestore = require("awestore") -- Totally optional, only required if you are using animations. local awestore = require("awestore") -- Totally optional, only required if you are using animations.
-- These are example awestore tween stores. You can use one for just y, just x, or both. -- These are example awestore tween stores. You can use one for just y, just x, or both.
-- The duration and easing is up to you. Please check out the awestore docs to learn more. -- The duration and easing is up to you. Please check out the awestore docs to learn more.
local anim_y = awestore.tweened(1100, { local anim_y = awestore.tweened(1100, {
duration = 300, duration = 300,
@ -34,7 +34,7 @@ local anim_x = awestore.tweened(1920, {
easing = awestore.easing.cubic_in_out easing = awestore.easing.cubic_in_out
}) })
local term_scratch = bling.module.scratchpad:new { local term_scratch = bling.module.scratchpad:new {
command = "wezterm start --class spad", -- How to spawn the scratchpad command = "wezterm start --class spad", -- How to spawn the scratchpad
rule = { instance = "spad" }, -- The rule that the scratchpad will be searched by rule = { instance = "spad" }, -- The rule that the scratchpad will be searched by
sticky = true, -- Whether the scratchpad should be sticky sticky = true, -- Whether the scratchpad should be sticky

View File

@ -16,7 +16,7 @@ bling.module.tabbed.pick_with_dmenu() -- picks a client with a dmenu application
```lua ```lua
-- For tabbed only -- For tabbed only
theme.tabbed_spawn_in_tab = false -- whether a new client should spawn into the focused tabbing container theme.tabbed_spawn_in_tab = false -- whether a new client should spawn into the focused tabbing container
-- For tabbar in general -- For tabbar in general
theme.tabbar_ontop = false theme.tabbar_ontop = false
@ -30,13 +30,13 @@ theme.tabbar_fg_normal = "#ffffff" -- foreground color of the focused c
theme.tabbar_bg_focus = "#1A2026" -- background color of unfocused clients on the tabbar theme.tabbar_bg_focus = "#1A2026" -- background color of unfocused clients on the tabbar
theme.tabbar_fg_focus = "#ff0000" -- foreground color of unfocused clients on the tabbar theme.tabbar_fg_focus = "#ff0000" -- foreground color of unfocused clients on the tabbar
-- the following variables are currently only for the "modern" tabbar style -- the following variables are currently only for the "modern" tabbar style
theme.tabbar_color_close = "#f9929b" -- chnges the color of the close button theme.tabbar_color_close = "#f9929b" -- chnges the color of the close button
theme.tabbar_color_min = "#fbdf90" -- chnges the color of the minimize button theme.tabbar_color_min = "#fbdf90" -- chnges the color of the minimize button
theme.tabbar_color_float = "#ccaced" -- chnges the color of the float button theme.tabbar_color_float = "#ccaced" -- chnges the color of the float button
``` ```
### Preview ### Preview
Modern theme: Modern theme:

View File

@ -4,7 +4,7 @@
The function to set an automatically created tiled wallpaper can be called the following way (you don't need to set every option in the table): The function to set an automatically created tiled wallpaper can be called the following way (you don't need to set every option in the table):
```lua ```lua
awful.screen.connect_for_each_screen(function(s) -- that way the wallpaper is applied to every screen awful.screen.connect_for_each_screen(function(s) -- that way the wallpaper is applied to every screen
bling.module.tiled_wallpaper("x", s, { -- call the actual function ("x" is the string that will be tiled) bling.module.tiled_wallpaper("x", s, { -- call the actual function ("x" is the string that will be tiled)
fg = "#ff0000", -- define the foreground color fg = "#ff0000", -- define the foreground color
bg = "#00ffff", -- define the background color bg = "#00ffff", -- define the background color

View File

@ -143,7 +143,7 @@ theme.playerctl_backend = "playerctl_lib"
theme.playerctl_ignore = "firefox" theme.playerctl_ignore = "firefox"
theme.playerctl_player = {"ncspot", "%any"} theme.playerctl_player = {"ncspot", "%any"}
-- Prioritize vlc over all other players and deprioritize spotify -- Prioritize vlc over all other players and deprioritize spotify
theme.playerctl_backend = "playerctl_lib" theme.playerctl_backend = "playerctl_lib"
theme.playerctl_player = {"vlc", "%any", "spotify"} theme.playerctl_player = {"vlc", "%any", "spotify"}

View File

@ -8,7 +8,7 @@ You might just want to copy that whole part into your theme.lua and start adjust
-- window swallowing -- window swallowing
theme.dont_swallow_classname_list = {"firefox", "Gimp"} -- list of class names that should not be swallowed theme.dont_swallow_classname_list = {"firefox", "Gimp"} -- list of class names that should not be swallowed
theme.dont_swallow_filter_activated = true -- whether the filter above should be active theme.dont_swallow_filter_activated = true -- whether the filter above should be active
-- flash focus -- flash focus
theme.flash_focus_start_opacity = 0.6 -- the starting opacity theme.flash_focus_start_opacity = 0.6 -- the starting opacity
@ -22,7 +22,7 @@ theme.playerctl_update_on_activity = true -- whether to prioritize the most
theme.playerctl_position_update_interval = 1 -- the update interval for fetching the position from playerctl theme.playerctl_position_update_interval = 1 -- the update interval for fetching the position from playerctl
-- tabbed -- tabbed
theme.tabbed_spawn_in_tab = false -- whether a new client should spawn into the focused tabbing container theme.tabbed_spawn_in_tab = false -- whether a new client should spawn into the focused tabbing container
-- tabbar general -- tabbar general
theme.tabbar_ontop = false theme.tabbar_ontop = false
@ -42,7 +42,7 @@ theme.mstab_dont_resize_slaves = false -- whether the tabbed stack windows
-- currently focused stack window (set it to true if you use -- currently focused stack window (set it to true if you use
-- transparent terminals. False if you use shadows on solid ones -- transparent terminals. False if you use shadows on solid ones
theme.mstab_bar_padding = "default" -- how much padding there should be between clients and your tabbar theme.mstab_bar_padding = "default" -- how much padding there should be between clients and your tabbar
-- by default it will adjust based on your useless gaps. -- by default it will adjust based on your useless gaps.
-- If you want a custom value. Set it to the number of pixels (int) -- If you want a custom value. Set it to the number of pixels (int)
theme.mstab_border_radius = 0 -- border radius of the tabbar theme.mstab_border_radius = 0 -- border radius of the tabbar
theme.mstab_bar_height = 40 -- height of the tabbar theme.mstab_bar_height = 40 -- height of the tabbar
@ -51,7 +51,7 @@ theme.mstab_tabbar_style = "default" -- style of the tabbar ("default", "
-- defaults to the tabbar_style so only change if you want a -- defaults to the tabbar_style so only change if you want a
-- different style for mstab and tabbed -- different style for mstab and tabbed
-- the following variables are currently only for the "modern" tabbar style -- the following variables are currently only for the "modern" tabbar style
theme.tabbar_color_close = "#f9929b" -- chnges the color of the close button theme.tabbar_color_close = "#f9929b" -- chnges the color of the close button
theme.tabbar_color_min = "#fbdf90" -- chnges the color of the minimize button theme.tabbar_color_min = "#fbdf90" -- chnges the color of the minimize button
theme.tabbar_color_float = "#ccaced" -- chnges the color of the float button theme.tabbar_color_float = "#ccaced" -- chnges the color of the float button