From 71e943b907e6cdeebefda7a97227ae909c3491b2 Mon Sep 17 00:00:00 2001
From: Pim van Pelt <pim@ipng.ch>
Date: Mon, 5 Aug 2024 23:19:21 +0200
Subject: [PATCH] Backport ipng.ch's CSS
---
assets/styles.scss | 300 +++++++-----------
.../layouts/partials/footer.html | 2 +-
2 files changed, 120 insertions(+), 182 deletions(-)
diff --git a/assets/styles.scss b/assets/styles.scss
index 96fb9b0..820ca79 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -18,6 +18,11 @@ $medium-light-text: #4f4a5f;
$code-background: #f3f3f3;
$codeblock-background: #f6f8fa;
$code-text: #f8f8f2;
+$ipng-orange: #f46524;
+$ipng-darkorange: #8c1919;
+$ipng-lightorange: #fb8c00;
+$table-header-background: #ffdcca;
+$table-cell-background: #fafafa;
// Breakpoints
$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)";
// Font-Size
-$base-font-size: 1.2em;
+$base-font-size: 1.0em;
// Line-Height
-$base-line-height: 1.2;
-$header-line-height: 1.3;
+$base-line-height: 1.4;
+$header-line-height: 1.0;
// HUGO
@@ -55,26 +60,15 @@ body {
margin: 0;
min-height: 100vh;
overflow-y: scroll;
- font-size: $base-font-size * 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} {
- font-size: $base-font-size*1.0;
- line-height: $base-line-height*1.0;
- }
-
- @media #{$mq-large} {
- 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;
- }
+ @media #{$mq-mini} { font-size: $base-font-size * 0.8; }
+ @media #{$mq-small} { font-size: $base-font-size * 0.9; }
+ @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-xxlarge} { font-size: $base-font-size * 1.1; }
}
/*largest screens*/
@@ -83,55 +77,48 @@ main {
margin: 0;
padding: 1em 1em;
- @media #{$mq-small} {
- margin: 0 15%;
- }
+ @media #{$mq-mini} { margin: 0 2%; }
+ @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} {
- margin: 0 17%;
+ a {
+ color: $ipng-lightorange;
+ text-decoration: none;
}
-
- @media #{$mq-large} {
- margin: 0 21%;
- }
-
- @media #{$mq-xlarge} {
- margin: 0 24%;
- }
-
- @media #{$mq-xxlarge} {
- margin: 0 27%;
+
+ a:hover {
+ color: $ipng-darkorange;
+ text-decoration: none;
}
}
a {
- font-family: FreeSerif, serif;
- color: $midnight-blue;
text-decoration: none;
}
+
h1, h2, h3, h4, h5, h6 {
- font-family: FreeSans, sans-serif;
font-weight: bold;
font-style: normal;
- color: $heading-gray;
+ color: $ipng-orange;
}
p, li {
color: $text-normal;
- font-family: FreeSerif, serif;
text-align: justify;
}
strong {
font-style: normal;
- font-family: FreeSerif, serif;
font-weight: bold;
+ color: black;
}
em {
font-style: normal;
- font-family: FreeSerif, serif;
font-style: italic;
}
@@ -145,24 +132,26 @@ kbd, code {
pre {
background-color: $codeblock-background;
padding: 0.5em;
+ overflow-x: auto;
+ font-weight: bold;
+ border: 1px solid #DDDDDD;
+ border-radius: 0.5em;
+
code {
background-color: transparent;
}
}
th {
- font-family: FreeSerif, serif;
font-weight: bold;
color: $text-normal;
}
td {
- font-family: FreeSerif, serif;
color: $text-normal;
}
.footnotes ol li {
- font-family: FreeSerif, serif;
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 {
- text-align: center;
- font-size: 1.5em;
+ text-align: left;
+ font-size: 2em;
+ color: $ipng-orange;
}
.page-title.blog {
@@ -286,13 +284,12 @@ nav li {
nav a {
color: $text-normal;
padding: .25em .63em;
- font-family: FreeSans, sans-serif;
font-size: 1.1em;
display: block;
}
nav li:hover {
- border-color: $tab-border-color;
+ border-color: $ipng-lightorange;
}
.dropdown .sub-menu {
@@ -340,39 +337,58 @@ nav li:hover {
display: flex;
flex-flow: row wrap;
- @media #{$mq-small} {
- margin: 0 15%;
- }
+ @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
+ @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} {
- margin: 0 17%;
+ a:hover {
+ color: $ipng-lightorange;
}
-
- @media #{$mq-large} {
- margin: 0 21%;
+ .activetab > a:hover {
+ color: white;
}
+}
- @media #{$mq-xlarge} {
- margin: 0 24%;
- }
+.page-footer {
+ 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} {
- margin: 0 27%;
+ @media #{$mq-mini} { margin: 0; width: 100%; font-size: $base-font-size * 0.8; }
+ @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 {
margin: 0 auto 0 0;
- padding: 0 0 .25em .25em;
- font-size: 1.25em;
+ padding-left: .5em;
+ font-size: $base-font-size * 1.2;
+ color: $ipng-orange;
}
.myname a {
- color: $text-dark;
+ color: $ipng-orange;
text-decoration: none;
- font-family: FreeSerif, serif;
font-style: normal;
- font-weight: bold;
+ font-weight: normal;
+ font-size: 1.3em;
}
.myname h2 {
@@ -383,9 +399,7 @@ nav li:hover {
.blog-post-summary {
margin: 0;
- @media #{$mq-mini} {
- margin: 2em;
- }
+ @media #{$mq-mini} { margin: 2em; }
}
#latest-blog-home {
@@ -407,7 +421,6 @@ nav li:hover {
a {
color: $heading-gray;
- font-family: FreeSans, sans-serif;
}
}
@@ -422,7 +435,6 @@ nav li:hover {
}
em.taxonomy-emph {
- font-family: FreeSans, sans-serif;
font-style: oblique;
}
@@ -462,7 +474,6 @@ em.taxonomy-emph {
.pagination {
list-style-type: none;
- font-family: FreeSans, sans-serif;
display: flex;
justify-content: center;
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
#contactinformation {
@@ -585,13 +510,15 @@ p.resume-subcategory {
.social {
display: flex;
justify-content: center;
+ font-size: $base-font-size*0.7;
+ margin: auto;
+ width: 100%;
ul {
list-style-type: none;
display:flex;
justify-content: space-around;
flex-wrap: wrap;
- width: 100%;
padding: 0;
li {
@@ -601,25 +528,26 @@ p.resume-subcategory {
a {
white-space: nowrap;
color: #3f444d;
- font-size: 1em;
- font-family: FreeSans, sans-serif;
+ font-size: 1.2em;
i {
- font-size: 2em;
+ font-size: 1.5em;
vertical-align: middle;
}
}
+ a:hover {
+ color: $ipng-lightorange;
+ }
}
}
}
+
.contactbox {
padding: 0 1.0em 0 1.0em;
box-sizing: border-box;
- @media #{$mq-mini-reverse} {
- width: 100% !important;
- }
+ @media #{$mq-mini-reverse} { width: 100% !important; }
ul {
list-style-type: none;
@@ -637,7 +565,6 @@ p.resume-subcategory {
a {
- font-family: FreeSans, sans-serif;
font-weight: bold;
font-size: 1em;
color: $contactlinks-text-color;
@@ -677,13 +604,11 @@ p.resume-subcategory {
// General
blockquote {
- font-family: FreeSerif, serif;
font-size: .9em;
color: $text-normal;
}
cite {
- font-family: FreeSerif, serif;
font-style: italic;
}
@@ -829,14 +754,27 @@ cite {
cursor: pointer;
}
-footer {
- position: fixed;
- width: 100vw;
- color: $text-light;
- font-size: .8em;
- padding: 0.2em 1em;
- text-align: center;
- bottom: 0;
- left: 0;
- background-color: #f7f7f7;
+table {
+ margin-bottom: 1em;
+ width: 100%;
+ text-align: left;
+ border-collapse: separate;
+ border-radius: 0.5em;
+ border: 2px solid $ipng-orange;
+ tr {
+ &:nth-child(even) {
+ 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 {
+ }
}
diff --git a/themes/hugo-theme-notrack/layouts/partials/footer.html b/themes/hugo-theme-notrack/layouts/partials/footer.html
index ab79762..3bb3686 100644
--- a/themes/hugo-theme-notrack/layouts/partials/footer.html
+++ b/themes/hugo-theme-notrack/layouts/partials/footer.html
@@ -1,3 +1,3 @@
-<footer>
+<footer class='page-footer'>
<span>{{ .Site.Params.Footer }}</span>
</footer>