Backport ipng.ch's CSS
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@ -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 {
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<footer>
|
||||
<footer class='page-footer'>
|
||||
<span>{{ .Site.Params.Footer }}</span>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user