akko/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS

Browse Source
This commit is contained in:
Akko
2025-12-02 16:11:00 +01:00
parent ef0bf1b834
commit 1ab026343c
51 changed files with 1550 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
org/source.org
View File

@@ -560,7 +560,6 @@ Style the cells, set legible text color, outline clickable:
#+END_SRC
*** Header Collapsing :autocollapse:
Sections can be expanded and collapsed by clicking on their headers; this will assign =.orgjq-expanded= and =.orgjq-contracted= CSS classes as appropriate. Headers with the =:autocollapse:= tag will be collapsed by default (like this section).
#+BEGIN_SRC css :tangle ../html/static/style.css
@@ -740,6 +739,72 @@ document.addEventListener('DOMContentLoaded', enableFootnotes);
box-shadow: 1px 1px 1px var(--grey2);
}
#+END_SRC
*** Colored Table Rows :autocollapse:
By adding some invisible helper elements like so:
#+BEGIN_SRC org
,#+MACRO: c @@html: <span class="row-color-$1" />@@
| Cool colors: |
|-------------------------|
| Red {{{c(red4)}}} |
|-------------------------|
| Green {{{c(green4)}}} |
|-------------------------|
| Blue {{{c(blue4)}}} |
|-------------------------|
| Purple {{{c(purple4)}}} |
|-------------------------|
| Grey {{{c(grey4)}}} |
|-------------------------|
#+END_SRC
We can color table rows like so:
#+MACRO: c @@html: <span class="row-color-$1" />@@
| Cool colors: |
|-------------------------|
| Red {{{c(red4)}}} |
|-------------------------|
| Green {{{c(green4)}}} |
|-------------------------|
| Blue {{{c(blue4)}}} |
|-------------------------|
| Purple {{{c(purple4)}}} |
|-------------------------|
| Grey {{{c(grey4)}}} |
|-------------------------|
**** CSS :autocollapse:
#+BEGIN_SRC css :tangle ../html/static/style.css
tbody:has(.row-color-green1) { background-color: var(--green1); }
tbody:has(.row-color-green2) { background-color: var(--green2); }
tbody:has(.row-color-green3) { background-color: var(--green3); }
tbody:has(.row-color-green4) { background-color: var(--green4); }
tbody:has(.row-color-green5) { background-color: var(--green5); }
tbody:has(.row-color-red1) { background-color: var(--red1); }
tbody:has(.row-color-red2) { background-color: var(--red2); }
tbody:has(.row-color-red3) { background-color: var(--red3); }
tbody:has(.row-color-red4) { background-color: var(--red4); }
tbody:has(.row-color-red5) { background-color: var(--red5); }
tbody:has(.row-color-blue1) { background-color: var(--blue1); }
tbody:has(.row-color-blue2) { background-color: var(--blue2); }
tbody:has(.row-color-blue3) { background-color: var(--blue3); }
tbody:has(.row-color-blue4) { background-color: var(--blue4); }
tbody:has(.row-color-blue5) { background-color: var(--blue5); }
tbody:has(.row-color-purple1) { background-color: var(--purple1); }
tbody:has(.row-color-purple2) { background-color: var(--purple2); }
tbody:has(.row-color-purple3) { background-color: var(--purple3); }
tbody:has(.row-color-purple4) { background-color: var(--purple4); }
tbody:has(.row-color-purple5) { background-color: var(--purple5); }
tbody:has(.row-color-grey1) { background-color: var(--grey1); }
tbody:has(.row-color-grey2) { background-color: var(--grey2); }
tbody:has(.row-color-grey3) { background-color: var(--grey3); }
tbody:has(.row-color-grey4) { background-color: var(--grey4); }
tbody:has(.row-color-grey5) { background-color: var(--grey5); }
#+END_SRC