CSS refactor - Extracted generic.css from screen.css
Co-Authored-By: Ferdinand Thiessen <1855448+susnux@users.noreply.github.com>
This commit is contained in:
Zdenek Kedaj
parent
2e8256d0db
commit
f4ac2a0612
13 changed files with 926 additions and 1063 deletions
1
.github/workflows/ci.yml
vendored
1
.github/workflows/ci.yml
vendored
|
|
@ -20,6 +20,7 @@ jobs:
|
|||
uses: peaceiris/actions-hugo@v2.6.0
|
||||
with:
|
||||
hugo-version: latest
|
||||
extended: true
|
||||
|
||||
- name: Build local ./exampleSite
|
||||
run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://zjedi.github.io/hugo-scroll/
|
||||
|
|
|
|||
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,4 +1,5 @@
|
|||
public
|
||||
exampleSite/public
|
||||
exampleSite/resources
|
||||
node_modules
|
||||
*.lock
|
||||
*.lock
|
||||
11
assets/css/_index.scss
Normal file
11
assets/css/_index.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// Color variables
|
||||
@import "./colors.scss";
|
||||
|
||||
// Theme layout and base styling
|
||||
@import "./theme.scss";
|
||||
|
||||
// Content-related styles
|
||||
@import "./content.scss";
|
||||
|
||||
// Media queries for responsiveness
|
||||
@import "./responsiveness.scss"
|
||||
28
assets/css/colors.scss
Normal file
28
assets/css/colors.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
:root {
|
||||
/** Main text color */
|
||||
--color-text-main: #3a4145;
|
||||
--color-text-lighter: #576161;
|
||||
/** Text color on the cover image */
|
||||
--color-text-cover: #37501a;
|
||||
/** Text color on odd sections */
|
||||
--color-text-alt: white;
|
||||
|
||||
/** Main background color */
|
||||
--color-background-main: #f2efe8;
|
||||
/** color-background : #f2efe8 defined elsewhere,why?*/
|
||||
--color-background-darker: #e0ded7;
|
||||
/** Background color on odd sections*/
|
||||
--color-background-alt: #b80135;
|
||||
|
||||
/* Used for Landing screen menu buttons */
|
||||
--color-glow: #86c440;
|
||||
--color-glow-contrast: #37501a;
|
||||
--color-glow-dark: #37501a;
|
||||
--color-glow-dark-contrast: white;
|
||||
|
||||
/** Primary color, e.g. for the main buttons */
|
||||
--color-primary: #9fd067;
|
||||
|
||||
/** Color to be used for text on primary elements */
|
||||
--color-primary-text: black;
|
||||
}
|
||||
291
assets/css/content.scss
Normal file
291
assets/css/content.scss
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
html {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
font-size: 62.5%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
font-family: "Roboto Slab", serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1.6em;
|
||||
color: #3a4145;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: #222;
|
||||
background: #d6edff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #222;
|
||||
background: #d6edff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/** =========== Headings =========== */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
text-rendering: optimizeLegibility;
|
||||
line-height: 1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
h3,h4,h5,h6 {
|
||||
text-rendering: optimizeLegibility;
|
||||
line-height: 120%;
|
||||
margin-top: 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: -2px;
|
||||
text-indent: -3px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: -1px;
|
||||
text-indent: -2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
p,{
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/** ======== Links ========= */
|
||||
a {
|
||||
color: inherit;
|
||||
transition: all ease 0.3s;
|
||||
-webkit-transition: all ease 0.3s;
|
||||
-moz-transition: all ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
// Fix font awesome icons
|
||||
&.fa {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/** ======== Lists ====================== */
|
||||
dl {
|
||||
margin: 1.6em 0;
|
||||
|
||||
dt {
|
||||
float: left;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 200px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 1em 0;
|
||||
|
||||
// Second level of lists
|
||||
ol, ul {
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
/** ======== Content semantics ============= */
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-text);
|
||||
margin: 1.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/** Helper to be inserted by JS before quotations
|
||||
//TODO is this used anywhere?*/
|
||||
.quo {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 1em 0 1em -2.2em;
|
||||
padding: 0 0 0 1em;
|
||||
font-weight: lighter;
|
||||
|
||||
p {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
small {
|
||||
display: inline-block;
|
||||
margin: 0.8em 0 0.8em 1.5em;
|
||||
font-size: 0.9em;
|
||||
color: #ccc;
|
||||
|
||||
&:before {
|
||||
content: "\2014 \00A0";
|
||||
}
|
||||
}
|
||||
|
||||
cite {
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--color-primary);
|
||||
filter: brightness(125%);
|
||||
}
|
||||
|
||||
code, tt {
|
||||
color: var(--color-text-lighter);
|
||||
background-color: var(--color-background-darker);
|
||||
border-radius: 3px;
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
font-size: 0.75em;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--color-text-lighter);
|
||||
background-color: var(--color-background-darker);
|
||||
border-radius: 3px;
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
font-size: 0.75em;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #3a4145;
|
||||
color: #e2e2e2;
|
||||
border: 1px solid #343434;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
font-size: 0.9em;
|
||||
margin: 1.6em 0;
|
||||
padding: 10px;
|
||||
white-space: pre;
|
||||
overflow-x: scroll;
|
||||
width: 100%;
|
||||
|
||||
code, tt {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
color: var(--color-text-main);
|
||||
background: var(--color-background-darker);
|
||||
border: var(--color-text-lighter) 1px solid;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.4em;
|
||||
padding: 1px 8px;
|
||||
text-shadow: #fff 0 1px 0;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset;
|
||||
}
|
||||
|
||||
/** ======== Tables ========= */
|
||||
table {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-spacing: 0;
|
||||
margin: 1.6em 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
tbody>tr:nth-child(even) {
|
||||
background-color: #fff5;
|
||||
background-blend-mode: lighten;
|
||||
}
|
||||
|
||||
&.plain tbody>tr:nth-child(odd)>td,
|
||||
&.plain tbody>tr:nth-child(odd)>th {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/** ======== Github integration ========= */
|
||||
.gist {
|
||||
table {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
min-width: 25px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
43
assets/css/generic.css
Normal file
43
assets/css/generic.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* Utilities - These things get used a lot */
|
||||
|
||||
/**
|
||||
Hides stuff
|
||||
*/
|
||||
.hidden {
|
||||
text-indent: -9999px;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
Creates a responsive wrapper that makes our content scale nicely
|
||||
*/
|
||||
.inner {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
Centres vertically yo. (IE8+)
|
||||
*/
|
||||
.vertical {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
Floating tools
|
||||
*/
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
195
assets/css/responsiveness.scss
Normal file
195
assets/css/responsiveness.scss
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
|
||||
/* ==========================================================================
|
||||
8. Media Queries - Smaller than 1130px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 1130px) {
|
||||
.fixed-nav {
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 99999;
|
||||
background: var(--color-background);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
a.fn-item {
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.post-holder {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#site-head {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-height: 240px;
|
||||
padding: 15% 0;
|
||||
height: 100%;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-size: 4rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.post {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.post-template .post {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-template .post-header {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.8rem;
|
||||
text-indent: -2px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.8rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.3rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
9. Media Queries - Smaller than 500px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.fixed-nav {
|
||||
display: none;
|
||||
}
|
||||
.post-holder {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#blog-logo img{
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.inner,
|
||||
.pagination {
|
||||
width: auto;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.post {
|
||||
width: auto;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#site-head {
|
||||
padding: 10% 0;
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
#header-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
line-height: 1.1em;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
|
||||
.post-template .post {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-template .post-header {
|
||||
padding: 30px 0;
|
||||
}
|
||||
/*
|
||||
.post-meta {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-footer .author {
|
||||
margin: 0 0 2rem 0;
|
||||
padding: 0 0 1.6rem 0;
|
||||
border-bottom: #ebf2f6 1px dashed;
|
||||
}
|
||||
|
||||
.post-footer .share {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.post-footer .share a {
|
||||
margin: 1.4rem 0.8rem 0 0.8rem;
|
||||
}
|
||||
|
||||
.older-posts,
|
||||
.newer-posts {
|
||||
position: static;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.page-number {
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
.site-footer {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
333
assets/css/theme.scss
Normal file
333
assets/css/theme.scss
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
body {
|
||||
--color-text: var(--color-text-main);
|
||||
--color-background: var(--color-background-main);
|
||||
}
|
||||
|
||||
.post-holder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
|
||||
&.dark {
|
||||
// override variables for alternative style
|
||||
--color-text: var(--color-text-alt);
|
||||
--color-background: var(--color-background-alt);
|
||||
|
||||
background-color: var(--color-background-alt);
|
||||
color: var(--color-text-alt);
|
||||
|
||||
// Fix <hr> color
|
||||
hr {
|
||||
border-color: var(--color-text-alt);
|
||||
}
|
||||
|
||||
// On alt posts move the triangle to the right and match the background the color
|
||||
.post-after {
|
||||
left: unset;
|
||||
right: 6%;
|
||||
border-top-color: var(--color-background-alt);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
The tri-angular parts between posts
|
||||
*/
|
||||
.post-after {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
z-index: 1;
|
||||
left: 6%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 60px solid transparent;
|
||||
border-top: 50px solid var(--color-background);
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#blog-logo {
|
||||
display: block;
|
||||
max-height: 100px;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* Big cover image on the home page */
|
||||
#site-head {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0rem;
|
||||
text-align: center;
|
||||
color: var(--color-text-cover);
|
||||
background: var(--color-background-alt) no-repeat center center;
|
||||
background-size: cover;
|
||||
|
||||
.title-and-description-guard {
|
||||
margin: auto;
|
||||
padding: 0.6em;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 25px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
margin: 10px 0 10px 0;
|
||||
font-size: 5rem;
|
||||
letter-spacing: -1px;
|
||||
text-shadow: white 0px 0px 7px;
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 400;
|
||||
font-family: "Roboto Slab", serif;
|
||||
letter-spacing: 0;
|
||||
text-shadow: white 0px 0px 7px;
|
||||
}
|
||||
|
||||
// Landing screen menu
|
||||
a.btn {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-glow);
|
||||
color: var(--color-glow-contrast);
|
||||
border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 10px 20px 10px 20px;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
font-family: "Oswald", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: lighter;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-glow-dark-contrast);;
|
||||
background-color: var(--color-glow-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/** The arrow button to scroll to content */
|
||||
#header-arrow {
|
||||
font-size: 140px;
|
||||
margin: -10px auto;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: -120px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: all ease 0.3s;
|
||||
-webkit-transition: all ease 0.3s;
|
||||
-moz-transition: all ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** For single pages and 404 error page the "back" button */
|
||||
#back {
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/** ========== Site footer ============ */
|
||||
.site-footer {
|
||||
/*TODO extract footer colors to variables*/
|
||||
background: #22343a;
|
||||
color: #bbc7cc;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.3rem;
|
||||
position: relative;
|
||||
margin: 0rem 0 0 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
color: #bbc7cc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.site-footer a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/**
|
||||
Every post, on every page, gets this style on its <article> tag
|
||||
Not inside the post holder as this also applies for single pages
|
||||
*/
|
||||
.post {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
margin: 0rem auto;
|
||||
padding-bottom: 4rem;
|
||||
padding-top: 4rem;
|
||||
height: 70%;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.fixed-nav {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 2%;
|
||||
z-index: 99999;
|
||||
font-family: "Open Sans Condensed", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
line-height: 130%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Navigation items
|
||||
a.fn-item {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.post-title {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* UNUSED STYLES
|
||||
.post-after {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 6%;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 60px solid transparent;
|
||||
border-top: 50px solid #f2efe8;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.post-after.light {
|
||||
left: 6%;
|
||||
}
|
||||
|
||||
.post-excerpt p {
|
||||
margin: 1.6rem 0 0 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: inline-block;
|
||||
margin: 0 0 5px 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.5rem;
|
||||
color: #9eabb3;
|
||||
}
|
||||
|
||||
.post-meta a {
|
||||
color: #9eabb3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-meta a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
*/
|
||||
|
||||
/* ======= Single pages =========== */
|
||||
.post-template {
|
||||
|
||||
// Tweak the .post wrapper style
|
||||
.post {
|
||||
margin-top: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Kill that stylish little circle that was on the border
|
||||
.post:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Insert some mad padding up in the header for better spacing
|
||||
.post-header {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep large images within the bounds of the post-width
|
||||
.post-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* CSS tooltip saying "Subscribe!" - initially hidden */
|
||||
.tooltip {
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
padding: 4px 8px 5px 8px;
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
left: -23px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
background: #50585d;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.3s ease, top 0.3s ease;
|
||||
}
|
||||
|
||||
/* The little chiclet arrow under the tooltip, pointing down */
|
||||
.tooltip:after {
|
||||
content: "";
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-style: solid;
|
||||
border-color: #50585d transparent;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
z-index: 220;
|
||||
width: 0;
|
||||
}
|
||||
9
assets/js/css-vars-ponyfill.min.js
vendored
Normal file
9
assets/js/css-vars-ponyfill.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -6,8 +6,10 @@ header_menu: true
|
|||
|
||||
|
||||
|
||||
##### Professionel Experience
|
||||
##### Professional Experience
|
||||
|
||||
A lot, but let us get into the details with some lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat lectus et magna placerat tincidunt. Nullam sit amet lectus vitae elit mollis rhoncus non eget lorem. Ut tempor sed dui quis volutpat.
|
||||
|
||||
----
|
||||
|
||||
In ultrices, est at lobortis pretium, magna quam mollis neque, id viverra odio est sit amet lorem. Mauris efficitur nunc vel lectus porttitor, sit amet sodales quam eleifend. Duis et felis ut mauris dignissim efficitur. Aliquam non sem eros. Integer elit ante, bibendum id hendrerit vitae, vestibulum eget risus. Nunc efficitur nisl in iaculis vestibulum.
|
||||
|
|
|
|||
|
|
@ -13,10 +13,14 @@
|
|||
<!-- The main JavaScript files for HugoScroll -->
|
||||
{{ $scriptIcons := resources.Get "js/icons.js" }}
|
||||
{{ $scriptIndex := resources.Get "js/index.js" }}
|
||||
{{ $js := slice $scriptJquery $scriptIcons $scriptIndex | resources.Concat "js/script.js" | resources.Minify | resources.Fingerprint }}
|
||||
{{ $scriptPolyfill := resources.Get "js/css-vars-ponyfill.min.js" }}
|
||||
{{ $js := slice $scriptJquery $scriptIcons $scriptIndex $scriptPolyfill | resources.Concat "js/script.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" ></script>
|
||||
|
||||
<!-- activate css-vars-ponyfill.min.js -->
|
||||
<script>cssVars();</script>
|
||||
|
||||
<!-- A partial to be overwritten by the user.
|
||||
Simply place a custom_body.html into
|
||||
your local /layouts/partials-directory -->
|
||||
|
|
|
|||
|
|
@ -19,12 +19,14 @@
|
|||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
{{ $stylesheetFA := resources.Get "css/fork-awesome.css" }}
|
||||
{{ $stylesheetNormalize := resources.Get "css/normalize.css" }}
|
||||
{{ $stylesheetFA := resources.Get "css/fork-awesome.css" }}
|
||||
{{ $stylesheetFonts := resources.Get "css/fonts.css" }}
|
||||
{{ $stylesheetScreen := resources.Get "css/screen.css" }}
|
||||
{{ $stylesheet := slice $stylesheetNormalize $stylesheetFA $stylesheetFonts $stylesheetScreen | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }}
|
||||
{{ $stylesheetGeneric := resources.Get "css/generic.css" }}
|
||||
|
||||
{{ $stylesheetScreen := ( resources.Get "css/_index.scss" | resources.ToCSS ) }}
|
||||
|
||||
{{ $stylesheet := slice $stylesheetNormalize $stylesheetFA $stylesheetFonts $stylesheetGeneric $stylesheetScreen | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $stylesheet.Permalink }}" type="text/css" integrity="{{ $stylesheet.Data.Integrity }}" />
|
||||
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue