palo
/
tech-ingolf-wagner-de
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css font-size seems to work better but not really great

master
Ingolf Wagner 2021-09-02 05:56:14 +02:00
parent 95e054126a
commit ab170fc7f3
Signed by: palo
GPG Key ID: 76BF5F1928B9618B
11 changed files with 91 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
content/nixos/krops.md
View File

@ -320,9 +320,9 @@ source = lib.evalSource [
This copies `secrets/server01` to `/var/src/secrets` after it is decrypted.
You will be prompted to enter the password.
{{% note %}}
{{% warning %}}
The files in `/var/src/secrets` will be unencrypted!
{{% /note %}}
{{% /warning %}}
### How to use Sources in configuration.nix

15
content/nixos/new-design.md
View File

@ -11,6 +11,7 @@ summary: >
but I was to "dark" for me.
---
It took me a long time,
but I finally created a hugo template I was
sketching for quite some time.
@ -19,6 +20,20 @@ but I was to "dark" for me.
Here is a list of elements.
## Paragraphs
I found it strange that margin of headings do not intersect with
margins of the other elements.
But margins of paragraphs do intersect with other elements like divs
or anything.
{{< flexbox-half >}}
{{% flexitem %}}{{% card text="1/2" /%}}{{% /flexitem %}}
{{% flexitem %}}{{% card text="2/2" /%}}{{% /flexitem %}}
{{< /flexbox-half >}}
## Images
{{% figure

2
layouts/shortcodes/card.html
View File

@ -1,7 +1,7 @@
<div class="card">
{{ with .Get "header" }}<div class="card-header">{{ . }}</div>{{ end }}
<div class="card-body">
{{ with .Get "text" }}{{ . }}{{ end }}
{{ with .Get "text" }}<p>{{ . }}<p>{{ end }}
{{ .Inner }}
</div>
</div>

4
layouts/shortcodes/note.html
View File

@ -1,3 +1,5 @@
<div class="note">
<div class="card color-green">
<div class="card-body">
{{ .Inner }}
</div>
</div>

4
layouts/shortcodes/warning.html
View File

@ -1,3 +1,5 @@
<div class="warning">
<div class="card color-red">
<div class="card-body">
{{ .Inner }}
</div>
</div>

7
src/lessc/page/color.less
View File

@ -7,8 +7,8 @@
@color-code-border: @gb-lm-light-yellow;
@color-code-inline: @gb-lm-light-gray;
@color-note-background: rgb(182, 201, 182);
@color-note-border: rgb(172, 216, 132);
@color-note-background: @color-body-background;
@color-note-border: @gb-lm-light-green;
@color-warning-background: rgba(188, 32, 11, 0.55);
@ -37,3 +37,6 @@
@color-card-border: @gb-lm-bg2;
@color-card-border-red: @gb-lm-light-red;
@color-card-border-green: @gb-lm-light-green;

52
src/lessc/page/main-hack-card.less Normal file
View File

@ -0,0 +1,52 @@
// cards
.card {
&.color-green {
.card-header {
border-top: 2px solid @color-card-border-green;
border-left: 2px solid @color-card-border-green;
border-right: 2px solid @color-card-border-green;
}
.card-body {
border: 2px solid @color-card-border-green;
}
}
&.color-red{
.card-header {
border-top: 2px solid @color-card-border-red;
border-left: 2px solid @color-card-border-red;
border-right: 2px solid @color-card-border-red;
}
.card-body {
border: 2px solid @color-card-border-red;
}
}
padding:0;
margin:0;
text-align: center;
.card-header {
text-align: center;
//margin-top: @standard-margin;
padding-bottom: @standard-margin;
padding-top: @standard-margin;
padding-left: 0.25em;
padding-right: 0.25em;
border-top: 2px solid @color-card-border;
border-left: 2px solid @color-card-border;
border-right: 2px solid @color-card-border;
}
.card-body{
text-align: center;
padding-left: 0.25em;
padding-right: 0.25em;
//padding-top: @standard-margin;
//padding-bottom: @standard-margin;
border: 2px solid @color-card-border;
}
}

31
src/lessc/page/main-hack-code.less
View File

@ -1,35 +1,14 @@
//@import "color.less";
//@import "media-types.less";
//@import "font.less";
// code blocks
//pre {
// padding: 2rem;
// margin: 1.75rem 0;
// background-color: #fff;
// border: 1px solid #ccc;
// overflow: auto
//}
//
//code[class*=language-], pre[class*=language-], pre code {
// font-weight: 100;
// text-shadow: none;
// margin: 1.75rem 0
//}
pre {
//background: @color-code-background;
text-align: left;
margin-left: 0;
margin-right: 0;
padding-left: @special-info-padding-side ;
padding-left: .5em;
padding-top: .7em ;
padding-right: .0em;
padding-right: .0;
padding-bottom: 0.7em;
border-left: .7em solid @color-code-border;
border-left: 1px solid @color-code-border;
border-right: 1px solid @color-code-border;
border-top: 1px solid @color-code-border;
border-bottom: 1px solid @color-code-border;
@ -37,12 +16,10 @@
font-weight: normal;
font-family: @font-code;
//line-height: @font-size;
code {
font-weight: normal;
font-family: @font-code;
//line-height: @font-size;
}
}

4
src/lessc/page/main-hack-flex.less
View File

@ -4,8 +4,8 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 2em;
margin-top: 2em;
margin-bottom: 1em;
margin-top: 1em;
&.box-size-half {
.flexitem {

25
src/lessc/page/main-hack.less
View File

@ -3,6 +3,7 @@
@import "main-hack-code.less";
@import "main-hack-flex.less";
@import "main-hack-card.less";
@standard-margin: 1em;
@ -109,28 +110,4 @@ a:hover {
color: @color-link-hover-font;
}
// cards
.card {
border: 1px solid @color-card-border;
padding: 0;
margin: 0;
text-align: center;
.card-header {
text-align: center;
border-bottom: 1px solid @color-card-border;
margin-top: @standard-margin;
padding-bottom: @standard-margin;
padding-left: 0.25em;
padding-right: 0.25em;
}
.card-body{
text-align: center;
padding-left: 0.25em;
padding-right: 0.25em;
padding-top: @standard-margin;
padding-bottom: @standard-margin;
}
}

41
src/lessc/page/main.less
View File

@ -17,7 +17,6 @@ html {
font-size: 16px;
}
font-size: 23px;
//font-size: clamp(16px, 5vw, 32px);
background-color: @color-body-background;
color: @color-body-font;
}
@ -64,46 +63,12 @@ h1, h2, h3, h4 {
color: @color-publishing-date;
}
// left and right for notes and warning and and code blocks
@special-info-padding-side: 0.5em;
.note {
background: @color-note-background;
border-left: .4em solid @color-note-border;
padding-left: 0px;
padding-top: .4em;
padding-bottom: .4em;
p {
margin-left: @special-info-padding-side;
padding-top: 0px;
padding-bottom: 0px;
}
pre {
margin-left: 0;
padding-left: @special-info-padding-side * 2;
padding-right: @special-info-padding-side * 2;
padding-top: .6em;
padding-bottom: 0.4em;
border-left: none;
white-space: pre-wrap;
}
}
.warning {
background: @color-warning-background;
}
table.comparison {
width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-left: 0;
margin-right: 0;
.good {
background: @color-comparison-good;
@ -122,5 +87,5 @@ table.comparison {
}
figure {
margin: 0px;
margin: 0;
}