nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

print: make it nice #822

Browse source 
now the user can use <mark> aswell as the theme, when marking search results in the page;
to only print users <mark> with color, we had to adjust the serach highlighting
This commit is contained in:
Sören Weber 2024-04-05 00:22:12 +02:00
parent a955167df4
commit 7ee2023bff
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
7 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/format-print.css
View file

@ -139,7 +139,7 @@ h1 + .footline{
.term-list { .term-list {
display: none; display: none;
} }
mark { mark.search {
background: inherit; background: inherit;
color: inherit; color: inherit;
} }

10
static/css/ie.css
View file

@ -445,8 +445,8 @@
} }
div.box.accent { div.box.accent {
background-color: rgba( 255, 136, 255, 1 ); /* var(--INTERNAL-ACCENT-color) */ background-color: rgb( 255, 102, 78, 1 ); /* var(--INTERNAL-ACCENT-color) */
border-color: rgba( 255, 136, 255, 1 ); /* var(--INTERNAL-ACCENT-color) */ border-color: rgb( 255, 102, 78, 1 ); /* var(--INTERNAL-ACCENT-color) */
} }
div.box.accent > .box-content { div.box.accent > .box-content {
@ -679,11 +679,11 @@
} }
.btn.cstyle.accent { .btn.cstyle.accent {
background-color: rgba( 255, 136, 255, 1 ); /* var(--ACCENT-color) */ background-color: rgb( 255, 102, 78, 1 ); /* var(--ACCENT-color) */
} }
.btn.cstyle.accent > * { .btn.cstyle.accent > * {
border-color: rgba( 255, 136, 255, 1 ); /* var(--ACCENT-color) */ border-color: rgb( 255, 102, 78, 1 ); /* var(--ACCENT-color) */
} }
.btn.cstyle.blue { .btn.cstyle.blue {
@ -789,7 +789,7 @@
} }
.badge.accent > .badge-content { .badge.accent > .badge-content {
background-color: rgba( 255, 136, 255, 1 ); /* var(--INTERNAL-ACCENT-color) */ background-color: rgb( 255, 102, 78, 1 ); /* var(--INTERNAL-ACCENT-color) */
} }
.badge.blue > .badge-content { .badge.blue > .badge-content {

2
static/css/theme-relearn-bright.css
View file

@ -1,7 +1,7 @@
:root { :root {
--PRIMARY-color: rgba( 131, 201, 50, 1 ); /* brand primary color */ --PRIMARY-color: rgba( 131, 201, 50, 1 ); /* brand primary color */
--SECONDARY-color: rgba( 99, 128, 208, 1 ); /* brand secondary color */ --SECONDARY-color: rgba( 99, 128, 208, 1 ); /* brand secondary color */
--ACCENT-color: rgba( 255, 136, 255, 1 ); /* brand accent color, used for search highlights */ --ACCENT-color: rgb( 255, 102, 78, 1 ); /* brand accent color, used for search highlights */
--MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */
--MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */

2
static/css/theme-relearn-dark.css
View file

@ -1,7 +1,7 @@
:root { :root {
--PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */
--SECONDARY-color: rgba( 108, 140, 227, 1 ); /* brand secondary color */ --SECONDARY-color: rgba( 108, 140, 227, 1 ); /* brand secondary color */
--ACCENT-color: rgba( 255, 68, 255, 1 ); /* brand accent color, used for search highlights */ --ACCENT-color: rgb( 255, 102, 78, 1 ); /* brand accent color, used for search highlights */
--MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */
--MAIN-LINK-HOVER-color: rgba( 147, 176, 255, 1 ); /* hovered link color of content */ --MAIN-LINK-HOVER-color: rgba( 147, 176, 255, 1 ); /* hovered link color of content */

2
static/css/theme-relearn-light.css
View file

@ -1,7 +1,7 @@
:root { :root {
--PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */
--SECONDARY-color: rgba( 72, 106, 201, 1 ); /* brand secondary color */ --SECONDARY-color: rgba( 72, 106, 201, 1 ); /* brand secondary color */
--ACCENT-color: rgba( 255, 136, 255, 1 ); /* brand accent color, used for search highlights */ --ACCENT-color: rgb(255, 102, 78); /* brand accent color, used for search highlights */
--MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */
--MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */

18
static/css/theme.css
View file

@ -525,12 +525,14 @@ body:not(.print) #R-body-inner.narrow p {
mark { mark {
background: transparent; background: transparent;
border-radius: 0.8em 0.3em; border-radius: 0.8em 0.3rem;
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
box-decoration-break: clone; box-decoration-break: clone;
color: rgba( 0, 0, 0, 1 ); color: rgba( 0, 0, 0, 1 );
margin: 0 -0.4em; -webkit-print-color-adjust: exact;
padding: 0.1em 0.4em; color-adjust: exact;
margin: 0 -0.4rem;
padding: 0.1em 0.4rem;
} }
kbd { kbd {
@ -539,14 +541,16 @@ kbd {
border-radius: 0.25rem; border-radius: 0.25rem;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
box-shadow: 0 1px 0 1px rgba( 134, 134, 134, .5 ); box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 );
font-size: 0.75em; -webkit-print-color-adjust: exact;
color-adjust: exact;
font-size: 0.75rem;
line-height: 1; line-height: 1;
min-width: 0.75rem; min-width: 0.75rem;
padding: 2px 5px 2px 5px; padding: .125rem .3125rem .125rem .3125rem;
position: relative; position: relative;
text-align: center; text-align: center;
top: -2px; top: -.125rem;
} }
h1 { h1 {

8
static/js/theme.js
View file

@ -1323,9 +1323,9 @@ function mark() {
var value = sessionStorage.getItem( window.relearn.absBaseUri + '/search-value' ); var value = sessionStorage.getItem( window.relearn.absBaseUri + '/search-value' );
var highlightableElements = document.querySelectorAll( '.highlightable' ); var highlightableElements = document.querySelectorAll( '.highlightable' );
highlight( highlightableElements, value, { element: 'mark' } ); highlight( highlightableElements, value, { element: 'mark', className: 'search' } );
var markedElements = document.querySelectorAll( 'mark' ); var markedElements = document.querySelectorAll( 'mark.search' );
for( var i = 0; i < markedElements.length; i++ ){ for( var i = 0; i < markedElements.length; i++ ){
var parent = markedElements[i].parentNode; var parent = markedElements[i].parentNode;
while( parent && parent.classList ){ while( parent && parent.classList ){
@ -1410,7 +1410,7 @@ function highlightNode( node, re, nodeName, className ){
function unmark() { function unmark() {
sessionStorage.removeItem( window.relearn.absBaseUri + '/search-value' ); sessionStorage.removeItem( window.relearn.absBaseUri + '/search-value' );
var markedElements = document.querySelectorAll( 'mark' ); var markedElements = document.querySelectorAll( 'mark.search' );
for( var i = 0; i < markedElements.length; i++ ){ for( var i = 0; i < markedElements.length; i++ ){
var parent = markedElements[i].parentNode; var parent = markedElements[i].parentNode;
while( parent && parent.classList ){ while( parent && parent.classList ){
@ -1435,7 +1435,7 @@ function unmark() {
} }
var highlighted = document.querySelectorAll( '.highlightable' ); var highlighted = document.querySelectorAll( '.highlightable' );
unhighlight( highlighted, { element: 'mark' } ); unhighlight( highlighted, { element: 'mark', className: 'search' } );
psm && setTimeout( function(){ psm.update(); }, 10 ); psm && setTimeout( function(){ psm.update(); }, 10 );
} }