hanez/fun
1
1
Fork 0
forked from fun/fun
Code Pull requests Activity

Some web style updates for pre and code tags with some new fonts. No code changes. (0.42.2)

Browse source
This commit is contained in:
Johannes Findeisen 2026-07-25 16:07:33 +02:00
commit b5864fe4bd
20 changed files with 107 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

56
web/_sass/_base.scss
View file

@ -93,62 +93,6 @@ blockquote {
}
}
pre {
background: $grey-color-dark;
/*background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);*/
background-position: 0 0;
background-repeat: repeat;
background-size: 2.8em 2.8em;
border: 0px $grey-color solid;
border-radius: 8px;
counter-reset: line-numbering;
font-family: $base-font-family;
font-size: $base-font-size;
// https://stackoverflow.com/questions/5840328/styling-each-line-inside-pre-with-css
line-height: 1.4em;
margin: 0 0 0 0;
overflow: auto;
overflow-x: auto;
padding: 8px;
tab-size: 2;
-moz-tab-size: 2;
}
/*pre::before {
content: counter(linex);
counter-increment: linex;
padding-right: 1em;
width: 1.5em;
text-align: right;
opacity: 0.5;
}*/
/*pre > code {
font-family: $base-font-family;
font-size: $base-font-size;
counter-increment: line;
margin: 0 0 0 0;
padding: 0 0 0 0;
}*/
/**pre > code:before{
content: counter(line);
display: inline-block;
width: 2.0em;
border-right: 1px solid $grey-color;
padding-right: .7em;
margin-right: .7em;
color: #bc6c21;
-webkit-user-select: none;
text-align: right;
}**/
audio {
height: 24px;
width: 100%;

26
web/_sass/_code.scss Normal file
View file

@ -0,0 +1,26 @@
code {
//-moz-tab-size: 2;
//tab-size: 2;
//border-radius: 12px;
font-family: "CourierPrimeSans";
font-size: $base-font-size;
//margin: 0 0 0 0;
//padding: 0 0 0 0;
//border: 1px $grey-color solid;
//line-height: 1.2em;
//background: $grey-color-dark;
//background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
//background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
//background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
//background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
//background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
//background-position: 0 0;
//background-repeat: repeat;
//background-size: 2.8em 2.8em;
//white-space: pre-wrap;
//white-space: -moz-pre-wrap;
//white-space: -o-pre-wrap;
//word-wrap: break-word;
//width: 100%;
}

35
web/_sass/_fonts.scss
View file

@ -7,3 +7,38 @@
font-family: "MDI";
src: url("../fonts/materialdesignicons-webfont.woff2") format("woff2");
}
@font-face {
font-family: 'OpenSans-Regular';
src: url('/fonts/OpenSans-Regular.woff') format('woff');
}
@font-face {
font-family: 'MDI';
src: url('/fonts/materialdesignicons-webfont.woff2') format('woff2');
}
.mdi:before,
.mdi-set {
display: inline-block;
font: normal normal normal 24px/1 "MDI";
font-size: inherit;
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mdi-hamburger::before {
content: "\F0685";
}
@font-face {
font-family: 'Graph-35-pix';
src: url('/fonts/Graph-35-pix.ttf');
}
@font-face {
font-family: 'CourierPrimeSans';
src: url('/fonts/Courier-Prime-Sans.ttf');
}

45
web/_sass/_pre.scss Normal file
View file

@ -0,0 +1,45 @@
pre {
//counter-reset: line;
-moz-tab-size: 2;
tab-size: 2;
border-radius: 12px;
//color: #363c3e;
font-family: "CourierPrimeSans";
//font-weight: bold;
font-size: $base-font-size;
margin: 0 0 0 0;
padding: 0 0 0 0.5em;
border: 1px $grey-color solid;
//overflow: auto;
overflow-x:auto;
line-height: 1.2em;
// https://stackoverflow.com/questions/5840328/styling-each-line-inside-pre-with-css
background: $grey-color-dark;
background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 2.4em 2.4em;
white-space: pre;
}
//pre > code {
// margin: 0 0 0 0;
// padding: 0 0 0 0;
//}
/*pre.highlight > code:before{
content: counter(line);
display: inline-block;
width: 2.0em;
border-right: 1px solid $grey-color;
padding-right: .7em;
margin-right: .7em;
color: #bc6c21;
-webkit-user-select: none;
text-align: right;
}*/