Collapse SCSS to the theme
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2024-08-25 15:35:39 +02:00
parent 42da7646f9
commit 282c10a613
2 changed files with 8 additions and 786 deletions

View File

@ -1,780 +0,0 @@
// Colors
$midnight-blue: #07608f;
$midnight-matte: #4c7e99;
$tab-border-color: #ddd;
$tab-active-color: #474a4f;
$heading-gray: #333;
$caption-color: #ccc;
$close-button-gray: #f1f1f1;
$close-hover-gray: #bbb;
$contactlinks-color: #eee;
$contactlinks-text-color: #524e59;
$cv-red: #b25347;
$text-dark: #444;
$text-normal: #777;
$text-light: #5f5a6f;
$text-very-light: #767676;
$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
$bp-small: 48em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px
// Media Queries
$mq-mini: "(min-width: #{$bp-mini})";
$mq-mini-reverse: "(max-width: #{$bp-mini})";
$mq-small: "(min-width: #{$bp-small})";
$mq-medium: "(min-width: #{$bp-medium})";
$mq-large: "(min-width: #{$bp-large})";
$mq-xlarge: "(min-width: #{$bp-xlarge})";
$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
// Font-Size
$base-font-size: 1.0em;
// Line-Height
$base-line-height: 1.4;
$header-line-height: 1.0;
// HUGO
html {
margin: 0;
height: 100vh;
}
body {
margin: 0;
min-height: 100vh;
overflow-y: scroll;
line-height: $base-line-height * 1.0;
font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@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*/
main {
display: block;
margin: 0;
padding: 1em 1em;
@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%; }
a {
color: $ipng-lightorange;
text-decoration: none;
}
a:hover {
color: $ipng-darkorange;
text-decoration: none;
}
}
a {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
font-style: normal;
color: $ipng-orange;
}
p, li {
color: $text-normal;
text-align: justify;
}
strong {
font-style: normal;
font-weight: bold;
color: black;
}
em {
font-style: normal;
font-style: italic;
}
kbd, code {
font-family: Mononoki, monospace;
color: $text-normal;
background-color: $code-background;
font-size: 0.9em;
}
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-weight: bold;
color: $text-normal;
}
td {
color: $text-normal;
}
.footnotes ol li {
font-size: 0.8em;
}
figure.image-shortcode {
margin: 1em auto;
img {
width: 100%;
}
@media #{$mq-mini-reverse} {
width: 100% !important;
}
}
figure.wide {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 90vw;
padding-bottom: 0.5em;
}
}
figure.right, .right {
float: right;
margin: 0 0 0.5em 1em;
@media #{$mq-mini-reverse} {
margin-bottom: 1.0em;
}
}
figure.right:first-child, .right:first-child {
margin-top: 1em;
}
figure.left, .left {
float: left;
margin: 0 1em 0.5em 0;
@media #{$mq-mini-reverse} {
margin-bottom: 1.0em;
}
}
figure.left:first-child, .left:first-child {
margin-top: 1em;
color: blue;
}
figure.frame {
background-color: #f7f7f7;
border: 1px solid #bbb;
border-radius: 0.2em;
padding: 0.5em;
box-sizing: border-box;
img { border: 1px solid #bbb; }
figcaption { border: none; }
}
figcaption {
font-size: 0.8em;
padding: 0;
width: 100%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid #666674;
p {
margin-top: 0em;
color: #666674;
text-align: left;
}
h4 {
margin: 0.3em 0;
color: $text-normal;
text-align: left;
}
}
.home-ipng {
font-size: 1.3em;
font-weight: bold;
color: $ipng-orange;
vertical-align: bottom;
}
.page-title {
text-align: left;
font-size: 2em;
color: $ipng-orange;
}
.page-title.blog {
text-align: left;
margin-bottom: 0.5em;
}
// NAVBAR
nav {
display: flex;
justify-content: flex-end;
flex-flow: row wrap;
overflow: hidden;
margin: auto 2% .6em auto;
padding-left: 2em;
}
nav ul {
list-style-type: none;
margin: 0;
}
nav li {
background-color: inherit;
float: left;
cursor: pointer;
padding: 0;
margin: 0;
border-width: 0 0 .3em 0;
border-color: transparent;
border-style: solid;
display: inline-block;
}
nav a {
color: $text-normal;
padding: .25em .63em;
font-size: 1.1em;
display: block;
}
nav li:hover {
border-color: $ipng-lightorange;
}
.dropdown .sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
color: $text-normal;
cursor: pointer;
border-width: 0 0 .3em 0;
min-width: 6em;
margin-top: .3em;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .sub-menu {
display: block;
}
.sub-menu a:hover {
background-color: $tab-active-color;
color: white;
}
.sub-menu a {
display: block;
text-align: left;
padding: .2em .63em;
color: $text-normal;
}
.dropdown.activetab, .activetab, li.activetab {
background-color: $tab-active-color;
border-color: white;
}
.activetab > a, a.activetab {
color: white;
}
.page-header {
border-bottom: 2px solid $text-dark;
background-color: #f7f7f7;
text-align: center;
display: flex;
flex-flow: row wrap;
@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; }
a:hover {
color: $ipng-lightorange;
}
.activetab > a:hover {
color: white;
}
}
.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-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-left: .5em;
font-size: $base-font-size * 1.2;
color: $ipng-orange;
}
.myname a {
color: $ipng-orange;
text-decoration: none;
font-style: normal;
font-weight: normal;
font-size: 1.3em;
}
.myname h2 {
margin: 0;
}
// HOME
.blog-post-summary {
margin: 0;
@media #{$mq-mini} { margin: 2em; }
}
#latest-blog-home {
text-align: center;
font-size: 2em;
}
.delimiter {
font-size: 2em;
text-align: center;
}
// BLOG
.blog-post-title {
margin-bottom: 0.2em;
padding-bottom: 0;
font-size: 1.6em;
a {
color: $heading-gray;
}
}
.blog-post-info {
margin: 0.2em 0;
font-size: 0.8em;
color: $text-light;
margin-left: 1em;
text-align: left;
a { text-transform: capitalize; }
}
em.taxonomy-emph {
font-style: oblique;
}
.blog-post-content {
h1 { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
}
.taxonomy-links ul {
list-style-type: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
border-bottom: 2px solid $text-normal;
li {
flex-grow: 1;
margin: 1em 0.5em;
width: 100%;
display: flex;
}
li a {
display: inline-block;
background-color: $tab-border-color;
font-size: 1.5em;
text-align: center;
color: $text-normal;
padding: .5em;
flex-grow: 1;
text-transform: capitalize;
}
}
.pagination {
list-style-type: none;
display: flex;
justify-content: center;
margin: 1em;
padding: 0;
}
.page-item {
color: $text-normal;
display: inline-block;
padding: .2em .6em;
a {
color: $text-normal;
}
}
.page-item.active {
background-color: $tab-active-color;
a {
background-color: $tab-active-color;
color: white;
}
}
// CONTACT
#contactinformation {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.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;
padding: 0;
li {
display: inline-block;
padding: 0.5em;
a {
white-space: nowrap;
color: #3f444d;
font-size: 1.2em;
i {
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; }
ul {
list-style-type: none;
background-color: $contactlinks-color;
border-radius: 0.5em;
box-shadow: 0.025em 0.1em 0.2em 0.1em #333;
box-shadow: 0.025em 0.1em 0.2em 0.1em rgba(0, 0, 0, 0.3);
padding: 10%;
margin: auto;
}
i {
padding-right: 0.3em;
}
a {
font-weight: bold;
font-size: 1em;
color: $contactlinks-text-color;
white-space: nowrap;
}
img {
height:.7em;
padding-right: .5em;
filter: opacity(80%);
}
}
// Projects tab
.p5js {
width: 100%;
border: none;
display: block;
padding: 0;
margin: 0;
overflow-y: none;
}
.video-shortcode {
width: 100%;
height: auto;
padding: 1em 0;
}
// Ethos tab
#ethos {
text-align: justify;
}
// General
blockquote {
font-size: .9em;
color: $text-normal;
}
cite {
font-style: italic;
}
// GALLERY
#gallery h3 { font-size: 1.7em; }
.gallery-category {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
list-style-type: none;
padding: 0;
margin: 0;
}
.gallery-photo {
flex-grow: 1;
height: 10.5em;
padding: .2em;
img {
min-width: 100%;
max-height: 100%;
object-fit: cover;
vertical-align: bottom;
border-radius: .2em;
}
img:hover {
opacity: 0.7;
transition: 0.3s;
cursor: pointer;
}
}
.gallery-photo:last-child { flex-grow: 10; }
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 5vh; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: 4vh auto;
padding: 4vh 3%;
display: block;
width: auto;
height: auto;
max-height: 69vh;
max-width: 94%;
pointer-events: none;
user-select: none;
}
#loader {
display: none;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: fadein 1s, spin 2s linear infinite;
animation: fadein 1s, spin 2s linear infinite;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 30em;
text-align: center;
color: $caption-color;
padding: 1vh 0;
height: 8vh;
}
/* Add Animation */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.4s;
}
@keyframes zoom {
from {transform: scale(0.4)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 2vh;
right: 3vh;
color: $close-button-gray;
font-size: 6vh;
font-weight: bold;
transition: 0.3s;
}
.close:hover, .close:focus {
color: $close-hover-gray;
text-decoration: none;
cursor: pointer;
}
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 {
}
}

View File

@ -135,14 +135,11 @@ pre {
padding: 0.5em;
overflow-x: auto;
font-weight: bold;
font-size: 0.9em;
line-height: $base-line-height * 0.9;
border: 1px solid #ddd;
border-radius: 0.75em;
border: 1px solid #DDDDDD;
border-radius: 0.5em;
code {
background-color: transparent;
color: #444;
}
}
@ -360,7 +357,6 @@ nav li:hover {
position: fixed;
font-size: .8em;
border-top: 2px solid $text-dark;
text-align: center;
display: flex;
flex-flow: row wrap;
bottom: 0;
@ -373,6 +369,12 @@ nav li:hover {
@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 {