pim/sabbatical.ipng.nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Backport ipng.ch's CSS
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Pim van Pelt
2024-08-05 23:19:21 +02:00
parent 97d4dc8b6b
commit 71e943b907
2 changed files with 120 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
assets/styles.scss
View File

@@ -18,6 +18,11 @@ $medium-light-text: #4f4a5f;
$code-background: #f3f3f3; $code-background: #f3f3f3;
$codeblock-background: #f6f8fa; $codeblock-background: #f6f8fa;
$code-text: #f8f8f2; $code-text: #f8f8f2;
$ipng-orange: #f46524;
$ipng-darkorange: #8c1919;
$ipng-lightorange: #fb8c00;
$table-header-background: #ffdcca;
$table-cell-background: #fafafa;
// Breakpoints // Breakpoints
$bp-mini: 28em; // 288px $bp-mini: 28em; // 288px
@@ -38,11 +43,11 @@ $mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; $mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
// Font-Size // Font-Size
$base-font-size: 1.2em; $base-font-size: 1.0em;
// Line-Height // Line-Height
$base-line-height: 1.2; $base-line-height: 1.4;
$header-line-height: 1.3; $header-line-height: 1.0;
// HUGO // HUGO
@@ -55,26 +60,15 @@ body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
overflow-y: scroll; overflow-y: scroll;
font-size: $base-font-size * 1.0;
line-height: $base-line-height * 1.0; line-height: $base-line-height * 1.0;
font-family: FreeSerif, serif; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@media #{$mq-medium} { @media #{$mq-mini} { font-size: $base-font-size * 0.8; }
font-size: $base-font-size*1.0; @media #{$mq-small} { font-size: $base-font-size * 0.9; }
line-height: $base-line-height*1.0; @media #{$mq-medium} { font-size: $base-font-size * 1.0; }
} @media #{$mq-large} { font-size: $base-font-size * 1.0; }
@media #{$mq-xlarge} { font-size: $base-font-size * 1.1; }
@media #{$mq-large} { @media #{$mq-xxlarge} { font-size: $base-font-size * 1.1; }
font-size: $base-font-size*1.0;
}
@media #{$mq-xlarge} {
font-size: $base-font-size*1.0;
}
@media #{$mq-xxlarge} {
font-size: $base-font-size*1.0;
}
} }
/*largest screens*/ /*largest screens*/
@@ -83,55 +77,48 @@ main {
margin: 0; margin: 0;
padding: 1em 1em; padding: 1em 1em;
@media #{$mq-small} { @media #{$mq-mini} { margin: 0 2%; }
margin: 0 15%; @media #{$mq-small} { margin: 0 2%; }
} @media #{$mq-medium} { margin: 0 17%; }
@media #{$mq-large} { margin: 0 21%; }
@media #{$mq-xlarge} { margin: 0 24%; }
@media #{$mq-xxlarge} { margin: 0 27%; }
@media #{$mq-medium} { a {
margin: 0 17%; color: $ipng-lightorange;
text-decoration: none;
} }
@media #{$mq-large} { a:hover {
margin: 0 21%; color: $ipng-darkorange;
} text-decoration: none;
@media #{$mq-xlarge} {
margin: 0 24%;
}
@media #{$mq-xxlarge} {
margin: 0 27%;
} }
} }
a { a {
font-family: FreeSerif, serif;
color: $midnight-blue;
text-decoration: none; text-decoration: none;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: FreeSans, sans-serif;
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
color: $heading-gray; color: $ipng-orange;
} }
p, li { p, li {
color: $text-normal; color: $text-normal;
font-family: FreeSerif, serif;
text-align: justify; text-align: justify;
} }
strong { strong {
font-style: normal; font-style: normal;
font-family: FreeSerif, serif;
font-weight: bold; font-weight: bold;
color: black;
} }
em { em {
font-style: normal; font-style: normal;
font-family: FreeSerif, serif;
font-style: italic; font-style: italic;
} }
@@ -145,24 +132,26 @@ kbd, code {
pre { pre {
background-color: $codeblock-background; background-color: $codeblock-background;
padding: 0.5em; padding: 0.5em;
overflow-x: auto;
font-weight: bold;
border: 1px solid #DDDDDD;
border-radius: 0.5em;
code { code {
background-color: transparent; background-color: transparent;
} }
} }
th { th {
font-family: FreeSerif, serif;
font-weight: bold; font-weight: bold;
color: $text-normal; color: $text-normal;
} }
td { td {
font-family: FreeSerif, serif;
color: $text-normal; color: $text-normal;
} }
.footnotes ol li { .footnotes ol li {
font-family: FreeSerif, serif;
font-size: 0.8em; font-size: 0.8em;
} }
@@ -245,9 +234,18 @@ figcaption {
} }
} }
.home-ipng {
font-size: 1.3em;
font-weight: bold;
color: $ipng-orange;
vertical-align: bottom;
}
.page-title { .page-title {
text-align: center; text-align: left;
font-size: 1.5em; font-size: 2em;
color: $ipng-orange;
} }
.page-title.blog { .page-title.blog {
@@ -286,13 +284,12 @@ nav li {
nav a { nav a {
color: $text-normal; color: $text-normal;
padding: .25em .63em; padding: .25em .63em;
font-family: FreeSans, sans-serif;
font-size: 1.1em; font-size: 1.1em;
display: block; display: block;
} }
nav li:hover { nav li:hover {
border-color: $tab-border-color; border-color: $ipng-lightorange;
} }
.dropdown .sub-menu { .dropdown .sub-menu {
@@ -340,39 +337,58 @@ nav li:hover {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@media #{$mq-small} { @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
margin: 0 15%; @media #{$mq-small} { margin: 0 5%; width: 90%; font-size: $base-font-size * 0.9; }
} @media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
@media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
@media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
@media #{$mq-medium} { a:hover {
margin: 0 17%; color: $ipng-lightorange;
} }
.activetab > a:hover {
@media #{$mq-large} { color: white;
margin: 0 21%;
} }
}
@media #{$mq-xlarge} { .page-footer {
margin: 0 24%; position: fixed;
} font-size: .8em;
border-top: 2px solid $text-dark;
display: flex;
flex-flow: row wrap;
bottom: 0;
color: $text-light;
background-color: #f7f7f7;
@media #{$mq-xxlarge} { @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
margin: 0 27%; @media #{$mq-small} { margin: 0 5%; width: 90%; font-size: $base-font-size * 0.9; }
@media #{$mq-medium} { margin: 0 17%; width: 66%; font-size: $base-font-size * 1.0; }
@media #{$mq-large} { margin: 0 21%; width: 58%; font-size: $base-font-size * 1.0; }
@media #{$mq-xlarge} { margin: 0 24%; width: 52%; font-size: $base-font-size * 1.1; }
@media #{$mq-xxlarge} { margin: 0 27%; width: 48%; font-size: $base-font-size * 1.1; }
span {
width: 100%;
text-align: center;
color: $ipng-orange;
} }
} }
.myname { .myname {
margin: 0 auto 0 0; margin: 0 auto 0 0;
padding: 0 0 .25em .25em; padding-left: .5em;
font-size: 1.25em; font-size: $base-font-size * 1.2;
color: $ipng-orange;
} }
.myname a { .myname a {
color: $text-dark; color: $ipng-orange;
text-decoration: none; text-decoration: none;
font-family: FreeSerif, serif;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: normal;
font-size: 1.3em;
} }
.myname h2 { .myname h2 {
@@ -383,9 +399,7 @@ nav li:hover {
.blog-post-summary { .blog-post-summary {
margin: 0; margin: 0;
@media #{$mq-mini} { @media #{$mq-mini} { margin: 2em; }
margin: 2em;
}
} }
#latest-blog-home { #latest-blog-home {
@@ -407,7 +421,6 @@ nav li:hover {
a { a {
color: $heading-gray; color: $heading-gray;
font-family: FreeSans, sans-serif;
} }
} }
@@ -422,7 +435,6 @@ nav li:hover {
} }
em.taxonomy-emph { em.taxonomy-emph {
font-family: FreeSans, sans-serif;
font-style: oblique; font-style: oblique;
} }
@@ -462,7 +474,6 @@ em.taxonomy-emph {
.pagination { .pagination {
list-style-type: none; list-style-type: none;
font-family: FreeSans, sans-serif;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 1em; margin: 1em;
@@ -488,92 +499,6 @@ em.taxonomy-emph {
} }
} }
// RESUME
.resume-content {
display: flex;
flex-flow: row wrap;
}
.category-title {
text-align: left;
width: 8em;
padding: .5em;
flex: 1 3 auto;
h4 {
margin: 0 0.5em 0 0;
font-size: 1.3em;
}
}
.category-content {
flex: 2 1 65%;
padding: .5em;
a {
color: $midnight-matte;
}
p {
margin: 0;
font-size: 0.9em;
color: $text-light;
}
ul {
list-style-type: "– ";
}
ul, ol {
font-family: FreeSans, sans-serif;
margin-top: 0;
}
li {
font-size: 0.9em;
color: $text-light;
}
}
.resume-entry {
margin: 0 0 1em 0;
.what {
font-family: FreeSans, serif;
text-align: left;
font-size: 1.0em;
color: $text-normal;
}
.resume-entry-data {
font-family: FreeSans, serif;
text-align: left;
font-size: 0.8em;
color: $text-very-light;
margin-left: 0.9rem;
}
.resume-inner {
line-height: 1;
margin-top: 0.2em;
margin-left: 0.9rem;
}
p, ul, ol, li {
font-family: FreeSerif, serif;
color: $text-light;
text-align: left;
font-size: 0.9em;
}
}
p.resume-subcategory {
font-family: FreeSans, sans-serif;
font-size: 1.4em;
text-decoration: underline;
padding: 0 0 .3em 0;
}
// CONTACT // CONTACT
#contactinformation { #contactinformation {
@@ -585,13 +510,15 @@ p.resume-subcategory {
.social { .social {
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: $base-font-size*0.7;
margin: auto;
width: 100%;
ul { ul {
list-style-type: none; list-style-type: none;
display:flex; display:flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
padding: 0; padding: 0;
li { li {
@@ -601,25 +528,26 @@ p.resume-subcategory {
a { a {
white-space: nowrap; white-space: nowrap;
color: #3f444d; color: #3f444d;
font-size: 1em; font-size: 1.2em;
font-family: FreeSans, sans-serif;
i { i {
font-size: 2em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
} }
} }
a:hover {
color: $ipng-lightorange;
}
} }
} }
} }
.contactbox { .contactbox {
padding: 0 1.0em 0 1.0em; padding: 0 1.0em 0 1.0em;
box-sizing: border-box; box-sizing: border-box;
@media #{$mq-mini-reverse} { @media #{$mq-mini-reverse} { width: 100% !important; }
width: 100% !important;
}
ul { ul {
list-style-type: none; list-style-type: none;
@@ -637,7 +565,6 @@ p.resume-subcategory {
a { a {
font-family: FreeSans, sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
color: $contactlinks-text-color; color: $contactlinks-text-color;
@@ -677,13 +604,11 @@ p.resume-subcategory {
// General // General
blockquote { blockquote {
font-family: FreeSerif, serif;
font-size: .9em; font-size: .9em;
color: $text-normal; color: $text-normal;
} }
cite { cite {
font-family: FreeSerif, serif;
font-style: italic; font-style: italic;
} }
@@ -829,14 +754,27 @@ cite {
cursor: pointer; cursor: pointer;
} }
footer { table {
position: fixed; margin-bottom: 1em;
width: 100vw; width: 100%;
color: $text-light; text-align: left;
font-size: .8em; border-collapse: separate;
padding: 0.2em 1em; border-radius: 0.5em;
text-align: center; border: 2px solid $ipng-orange;
bottom: 0; tr {
left: 0; &:nth-child(even) {
background-color: #f7f7f7; background-color: darken($table-cell-background, 10%);
}
}
th, td {
padding: 0.15em 0.5em;
}
th {
color: $ipng-orange;
background-color: lighten($table-header-background, 3%);
border-bottom: 3px solid $ipng-orange;
font-weight: bold;
}
td {
}
} }

2
themes/hugo-theme-notrack/layouts/partials/footer.html
View File

@@ -1,3 +1,3 @@
<footer> <footer class='page-footer'>
<span>{{ .Site.Params.Footer }}</span> <span>{{ .Site.Params.Footer }}</span>
</footer> </footer>