Initial commit
|
@ -0,0 +1 @@
|
|||
public/
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "themes/hugo-scroll"]
|
||||
path = themes/hugo-scroll
|
||||
url = https://github.com/zjedi/hugo-scroll.git
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
baseURL = "https://guilevi.github.io"
|
||||
|
||||
# This is a "one page"-website, so we do not need these kinds of pages...
|
||||
disableKinds = ["section", "taxonomy", "term", "RSS", "robotsTXT"]
|
||||
|
||||
defaultContentLanguage = "en"
|
||||
|
||||
# The name of this wonderful theme ;-).
|
||||
theme = "hugo-scroll"
|
||||
|
||||
# The browser tab name
|
||||
title = "Guillem León Vivas - Pianist"
|
||||
|
||||
# In order to add version information in the page's footer set to true.
|
||||
# enableGitInfo = true
|
||||
|
||||
# Theme-specific variables `.Site.Params.myParamName`
|
||||
[params]
|
||||
|
||||
# The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
|
||||
favicon = "images/favicon.png"
|
||||
|
||||
# These "images" are used for the structured data templates. This will show up, when
|
||||
# services like Twitter or Slack want to generate a preview of a link to your site.
|
||||
# See https://gohugo.io/templates/internal#twitter-cards and https://gohugo.io/templates/internal#open-graph.
|
||||
# NOT the actual header background image, go to _index.md instead
|
||||
images = ["images/cover-image.jpg"]
|
||||
|
||||
# When set true, it creates a visual guard (partially transparent rounded box), preventing non-ideal background images from interfering with title/description headings
|
||||
# Ideal images are homogenous around the centre and contrasting to the text.
|
||||
# see CSS classes: .title-and-description-guard, .blog-title, .blog-description
|
||||
# see _index.md header_headline and header_subheadline
|
||||
title_guard = true
|
||||
|
||||
# Another "title" :-). This one is used as the site_name on the Hugo's internal
|
||||
# opengraph structured data template.
|
||||
# See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
|
||||
title = "Guillem León - Pianist"
|
||||
|
||||
# The "description" of your website. This is used in the meta data of your generated html.
|
||||
description = "Classical pianist"
|
||||
|
||||
# A "copyright"-line to be added at the bottom of the page.
|
||||
# Hint: Plain HTML is supported in here as well. So you may e.g. add a link to your legal imprint-page.
|
||||
copyright = "© Guillem León Vivas"
|
||||
|
||||
# This theme will, by default, inject a design-by-line at the bottom of the page.
|
||||
# You can turn it off, but we would really appreciate if you don’t :-)
|
||||
hidedesignbyline = false
|
||||
|
||||
# The sections of the home page alternate styling. Mark invert as true to swap the styling of the sections
|
||||
invertSectionColors = false
|
||||
|
||||
[params.meta]
|
||||
keywords = "classical, piano, pianist, music, classical piano, recitals, performance"
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
# Striking header background image, Ideal images are homogenous around the centre and contrasting to the text. Non-ideal images can use `title_guard`
|
||||
header_image: "images/cover-image.png"
|
||||
#
|
||||
# When set true, uses video from custom_header_video.html partial, instead of header_image
|
||||
header_use_video: false
|
||||
#
|
||||
# Optional header logo. CSS: `#blog-logo`, with max-height defined, optimize to prevent scaling
|
||||
#header_logo: "images/chef-hat.png"
|
||||
#
|
||||
# Headers are safeHTML, you can use HTML tags such as b,i,u,br
|
||||
header_headline: "Guillem León"
|
||||
header_subheadline: "Classical <b>Pianist</b>"
|
||||
---
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Contact"
|
||||
weight: 10
|
||||
header_menu: true
|
||||
---
|
||||
|
||||
{{<icon class="fa fa-envelope">}} [Send me an email](mailto:guilevi2000@gmail.com)
|
||||
|
||||
{{<icon class="fa fa-phone">}} [Send me a WhatsApp message](https://wa.me/34644056776)
|
||||
|
||||
Feel free to get in touch!
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "Download my full academic CV"
|
||||
weight: 95
|
||||
header_menu: true
|
||||
external: /files/Guillem-Leon-English-CV.pdf
|
||||
---
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
headless: true
|
||||
---
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "Instagram"
|
||||
weight: 99
|
||||
header_menu: true
|
||||
external: http://instagram.com/guillem.leon/
|
||||
---
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "About"
|
||||
weight: 1
|
||||
---
|
||||
|
||||
Guillem León is a Spanish classical pianist praised by La Vanguardia for his "remarkable musical intelligence and intuition". Guillem has started a multinational career, performing in venues across Spain and in Portugal, Italy, England and the United States.
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
title: "Resumé"
|
||||
header_menu_title: "Brief resumé"
|
||||
navigation_menu_title: "Resumé"
|
||||
weight: 4
|
||||
header_menu: true
|
||||
---
|
||||
|
||||
### Education
|
||||
|
||||
|||||
|
||||
| --- | --- | --- | --- |
|
||||
| Royal Academy of Music (London, UK) | Tatiana Sarkissova | Master of Arts | 2022-present |
|
||||
| Conservatori del Liceu (Barcelona, Spain) | José Enrique Bagaría | Bachelor of Music/Grado Superior | 2018-2022 |
|
||||
|
||||
### Notable Performances
|
||||
|
||||
- Teatros del Canal, Madrid (2023)
|
||||
- David josefowitz Recital Hall, London (2023)
|
||||
- Auditorio Martín Códax, Vigo (2023)
|
||||
|
||||
### Notable Masterclasses
|
||||
|
||||
- Boris Berman (2021-2022)
|
||||
- Eugen Indjic (2021-2022)
|
||||
- Yevgeny Sudbin (2023)
|
||||
- Ilya Maximov (2021)
|
||||
- Claudio Martínez mehner (2021)
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
title: "The Services I Offer"
|
||||
header_menu_title: "Services"
|
||||
navigation_menu_title: "My Services"
|
||||
weight: 2
|
||||
header_menu: true
|
||||
---
|
||||
|
||||
Feature notice: This section displays options to customize title:
|
||||
- has a normal section title (`title` = "The Services I Offer"),
|
||||
- custom welcome screen title (`header_menu_title` = "Services"),
|
||||
- custom navigation menu title (`navigation_menu_title` = "My Services").
|
||||
|
||||
That is the important part, right? You want to know what I can do for you. This is why I put this right up there into the header menu of the website.
|
||||
|
||||
---
|
||||
|
||||
### Nutrition Coaching
|
||||
|
||||
This is not an easy task.
|
||||
You will likely have to pay money for this.
|
||||
|
||||
### Chef Consulting
|
||||
|
||||
I can raise your table culture!
|
||||
|
||||
![Let us get started on a clean slate](images/woman-pouring-juice-on-glass-3184192.jpg)
|
||||
|
||||
Want to learn more about my services? See [dedicated page](services) with more details.
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: "Upcoming Performances"
|
||||
weight: 2
|
||||
header_menu: true
|
||||
---
|
||||
|
||||
### June 16th, 2023: Angela Burgess Recital Hall, [Royal Academy of Music](https://ram.ac.uk), London
|
||||
|
||||
I'm delighted to have been given the opportunity to participate in the Royal Academy's _Summer Piano Festival_ with fellow students Tomos Boyles and Vedran Janjanin, in a program that will explore the relationship between words and music for Sergei Rachmaninoff.
|
||||
|
||||
### July 6th, 2023: [Church of St Mary-le-Bow](http://stmarylebow.org.uk/), London
|
||||
|
||||
Lunchtime recital with works by Chopin and Granados.
|
||||
|
||||
### May 21st, 2024: [St Brides Church](https://www.stbrides.com), London
|
||||
|
||||
Lunchtime Recital.
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
title: "Services"
|
||||
---
|
||||
|
||||
This is a page about the services, which I offer.
|
||||
|
||||
It carries a lot more detail than what I put on the homepage - I swear!
|
||||
|
||||
You want to know what I can do for you?
|
||||
|
||||
Well, let me tell ya!
|
||||
|
||||
---
|
||||
|
||||
## Nutrition Coaching
|
||||
|
||||
This is not an easy task. You will likely have to pay money for this. You know what - let us look at a nice picture first.
|
||||
|
||||
![Nice picture to make you pay me ;-)](../images/selective-focus-photography-of-pasta-with-tomato-and-basil-1279330.jpg)
|
||||
|
||||
Wow. That was nice, right? Well, call me and let us talk.
|
||||
|
||||
---
|
||||
|
||||
## Chef Consulting
|
||||
|
||||
Did you see the picture above? I can show you how to go from
|
||||
|
||||
![Let us get started on a clean slate](../images/board-bunch-cooking-food-349609.jpg)
|
||||
|
||||
to
|
||||
|
||||
![Let us get started on a clean slate](../images/woman-pouring-juice-on-glass-3184192.jpg)
|
||||
|
||||
in estimated seconds.
|
||||
|
||||
Don't believe me? Here are some bullets
|
||||
|
||||
* If anyone can teach you to cook, I can
|
||||
* And if you already know how to cook, I will make you that much better
|
|
@ -0,0 +1,54 @@
|
|||
<!-- A partial to be overwritten by the user.
|
||||
Its content will appear before the closing </head>-tag -->
|
||||
|
||||
|
||||
<!-- Custom CSS via inline styles
|
||||
You may use this template to add custom CSS to your site like so: -->
|
||||
<!--
|
||||
<style>
|
||||
:root {
|
||||
/* see variables.scss for more variables*/
|
||||
|
||||
/*
|
||||
--section-light-text-color: #3a4145!important;
|
||||
--section-light-bg-color: #ffdb8c!important;
|
||||
--section-dark-bg-color: #035e00!important;
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
|
||||
|
||||
<!-- Custom CSS via "custom.css"-file
|
||||
If you would rather place your custom CSS into
|
||||
a separate file, create a "custom.css" in your
|
||||
local "static/css"-directory. Then add a <link>-tag
|
||||
referencing your "custom.css" like so: -->
|
||||
|
||||
<!-- <link rel="stylesheet" href='{{ "css/custom.css" | absURL }}'> -->
|
||||
|
||||
<!-- Custom CSS: Color Codes
|
||||
You may checkout https://htmlcolorcodes.com/ to get those
|
||||
weird color codes (like "#22343A") ;-). -->
|
||||
|
||||
<!-- Custom link-tags for different icons
|
||||
Generated via https://favicon.io/favicon-generator/ -->
|
||||
|
||||
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="{{ "images/apple-touch-icon.png" | absURL }}"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="{{ "images/favicon-32x32.png" | absURL }}"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="{{ "images/favicon-16x16.png" | absURL }}"
|
||||
/>
|
|
@ -0,0 +1,11 @@
|
|||
<video playsinline="" autoplay="true" muted="" loop=""
|
||||
poster="https://www.ledger.com/wp-content/themes/ledger-v2/public/images/homepage/home-hero-ledger.jpg">
|
||||
<!--
|
||||
<source src="https://cdn.shopify.com/s/files/1/2974/4858/files/home-hero-mobile.webm?v=1637155649" type="video/webm">
|
||||
<source src="https://cdn.shopify.com/s/files/1/2974/4858/files/home-hero-mobile.mp4?v=1637155649" type="video/mp4">
|
||||
<source src="https://cdn.shopify.com/s/files/1/2974/4858/files/home-hero-mobile.mov?v=1637155649" type="video/mov">
|
||||
-->
|
||||
|
||||
{{ $videoResource := resources.Get "cover/pexels-pressmaster-3209239-960x540-25fps.mp4" }}
|
||||
<source src="{{ $videoResource.Permalink }}" type="video/mp4">
|
||||
</video>
|
|
@ -0,0 +1,568 @@
|
|||
:root {
|
||||
/* === Cover / Landing area === */
|
||||
--cover-text-color: #37501a;
|
||||
/* Used for Landing screen menu buttons, but potentially usable for highlighting other things */
|
||||
--highlight: #86c440;
|
||||
--highlight-contrast: var(--cover-text-color);
|
||||
/*iverse colors used for :hover */
|
||||
--highlight-inverse: var(--cover-text-color);
|
||||
--highlight-inverse-contrast: white;
|
||||
/* visual guard around title and description, when the feature is enabled */
|
||||
--cover-title-and-description-guard-bg-color: rgba(255, 255, 255, 0.6);
|
||||
--cover-title-text-shadow: white 0px 0px 7px;
|
||||
/* === sticky top/left navigation menus === */
|
||||
--sticky-menu-text-color: #9fd067;
|
||||
/* === Alternating content (post) sections === */
|
||||
/* Light section - text color */
|
||||
--section-light-text-color: #3a4145;
|
||||
/* Light section - background color */
|
||||
--section-light-bg-color: #f2efe8;
|
||||
/* Dark section - text color */
|
||||
--section-dark-text-color: var(--section-light-bg-color);
|
||||
/* Dark section - background color */
|
||||
--section-dark-bg-color: #b80135;
|
||||
/* Light&Dark section >quote. Supressive color, compared to 'Light section - text color'*/
|
||||
--section-uni-quote: grey;
|
||||
/* Light&Dark section `code` a bit darker than 'Light section - background color' */
|
||||
--section-uni-code-bg-color: #e0ded7;
|
||||
/* === Footer === */
|
||||
--footer-color-background: #22343a;
|
||||
--footer-color: #bbc7cc; }
|
||||
|
||||
body {
|
||||
--color-text: var(--section-light-text-color);
|
||||
--color-background: var(--section-light-bg-color); }
|
||||
|
||||
/* ===== Cover =======*/
|
||||
#blog-logo {
|
||||
display: block;
|
||||
max-height: 100px;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
line-height: 0; }
|
||||
|
||||
#site-head.withCenteredImage {
|
||||
/* can't be used together with video */
|
||||
background: var(--section-light-bg-color) no-repeat center center; }
|
||||
|
||||
#site-head, #site-head.withCenteredImage {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0rem;
|
||||
text-align: center;
|
||||
color: var(--cover-text-color);
|
||||
background-size: cover;
|
||||
/* Big cover video at the landing area */
|
||||
/** The arrow button to scroll to content */ }
|
||||
#site-head video, #site-head.withCenteredImage video {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
z-index: -100; }
|
||||
#site-head .title-and-description-guard, #site-head.withCenteredImage .title-and-description-guard {
|
||||
margin: auto;
|
||||
padding: 0.6em;
|
||||
background-color: var(--cover-title-and-description-guard-bg-color);
|
||||
border-radius: 25px;
|
||||
width: fit-content; }
|
||||
#site-head .blog-title, #site-head.withCenteredImage .blog-title {
|
||||
margin: 10px 0 10px 0;
|
||||
font-size: 5rem;
|
||||
letter-spacing: -1px;
|
||||
text-shadow: var(--cover-title-text-shadow); }
|
||||
#site-head .blog-description, #site-head.withCenteredImage .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: var(--cover-title-text-shadow); }
|
||||
#site-head a.btn, #site-head.withCenteredImage a.btn {
|
||||
text-decoration: none;
|
||||
background-color: var(--highlight);
|
||||
color: var(--highlight-contrast);
|
||||
border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 10px 50px 10px 50px;
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
font-family: "Oswald", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: lighter; }
|
||||
#site-head a.btn:hover, #site-head.withCenteredImage a.btn:hover {
|
||||
color: var(--highlight-inverse-contrast);
|
||||
background-color: var(--highlight-inverse); }
|
||||
#site-head #header-arrow, #site-head.withCenteredImage #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; }
|
||||
#site-head #header-arrow:hover, #site-head.withCenteredImage #header-arrow:hover {
|
||||
color: inherit;
|
||||
opacity: 0.9; }
|
||||
|
||||
/* Left sticky menu */
|
||||
.fixed-nav {
|
||||
background-color: var(--section-light-bg-color);
|
||||
border-radius: 0 25px 20px 0;
|
||||
padding: 1em 1.5em;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
z-index: 99999;
|
||||
font-family: "Open Sans Condensed", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
line-height: 130%;
|
||||
font-weight: bold; }
|
||||
|
||||
a.fn-item {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
text-decoration: none; }
|
||||
a.fn-item:hover, a.fn-item.active {
|
||||
color: var(--sticky-menu-text-color); }
|
||||
a.fn-item.active {
|
||||
opacity: 1; }
|
||||
|
||||
/* ========= Content ==========*/
|
||||
.post-title {
|
||||
margin: 0; }
|
||||
.post-title a {
|
||||
text-decoration: none; }
|
||||
|
||||
.post-holder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
/* The triangular parts between posts */ }
|
||||
.post-holder.dark {
|
||||
--color-text: var(--section-dark-text-color);
|
||||
--color-background: var(--section-dark-bg-color);
|
||||
background-color: var(--section-dark-bg-color);
|
||||
color: var(--section-dark-text-color); }
|
||||
.post-holder.dark hr {
|
||||
border-color: var(--section-dark-text-color); }
|
||||
.post-holder.dark .post-after {
|
||||
left: unset;
|
||||
right: 6%;
|
||||
border-top-color: var(--section-dark-bg-color); }
|
||||
.post-holder .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; }
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* ======= Single pages =========== */
|
||||
.post-template .post {
|
||||
margin-top: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0; }
|
||||
|
||||
.post-template .post:after {
|
||||
display: none; }
|
||||
|
||||
.post-template .post-header {
|
||||
padding: 60px 0; }
|
||||
|
||||
.post-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto; }
|
||||
|
||||
/** ========== Site footer ============ */
|
||||
.site-footer {
|
||||
background: var(--footer-color-background);
|
||||
color: var(--footer-color);
|
||||
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: var(--footer-color);
|
||||
text-decoration: underline; }
|
||||
|
||||
.site-footer a:hover {
|
||||
color: var(--sticky-menu-text-color); }
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
font-size: 62.5%;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
font-family: "Roboto Slab", serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1.6em;
|
||||
color: var(--section-light-text-color); }
|
||||
|
||||
::-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; }
|
||||
a:hover {
|
||||
color: var(--sticky-menu-text-color); }
|
||||
a.fa {
|
||||
text-decoration: none; }
|
||||
|
||||
/** ======== Lists ====================== */
|
||||
dl {
|
||||
margin: 1.6em 0; }
|
||||
dl dt {
|
||||
float: left;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em; }
|
||||
dl dd {
|
||||
margin-left: 200px;
|
||||
margin-bottom: 1em; }
|
||||
|
||||
ul, ol {
|
||||
margin: 1em 0; }
|
||||
ul ol, ul ul, ol ol, 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*/
|
||||
.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;
|
||||
color: var(--section-uni-quote); }
|
||||
blockquote p {
|
||||
margin: 0.8em 0; }
|
||||
blockquote small {
|
||||
display: inline-block;
|
||||
margin: 0.8em 0 0.8em 1.5em;
|
||||
font-size: 0.9em;
|
||||
color: #ccc; }
|
||||
blockquote small:before {
|
||||
content: "\2014 \00A0"; }
|
||||
blockquote cite {
|
||||
font-weight: bold; }
|
||||
blockquote cite a {
|
||||
font-weight: normal; }
|
||||
|
||||
mark {
|
||||
background-color: var(--sticky-menu-text-color);
|
||||
filter: brightness(125%); }
|
||||
|
||||
code, tt {
|
||||
color: var(--section-light-text-color);
|
||||
background-color: var(--section-uni-code-bg-color);
|
||||
border-radius: 3px;
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
font-size: 0.75em;
|
||||
padding: 3px 5px; }
|
||||
|
||||
code {
|
||||
color: var(--section-light-text-color);
|
||||
background-color: var(--section-uni-code-bg-color);
|
||||
border-radius: 3px;
|
||||
font-family: Inconsolata, monospace, sans-serif;
|
||||
font-size: 0.75em;
|
||||
padding: 3px 5px; }
|
||||
|
||||
pre {
|
||||
background: var(--section-light-text-color);
|
||||
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%; }
|
||||
pre code, pre tt {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
border: none;
|
||||
padding: 0; }
|
||||
|
||||
kbd {
|
||||
color: var(--section-light-text-color);
|
||||
background: var(--section-uni-code-bg-color);
|
||||
border: var(--section-light-text-color) 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; }
|
||||
table th,
|
||||
table td {
|
||||
padding: 8px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
vertical-align: top; }
|
||||
table thead th,
|
||||
table thead td {
|
||||
border-bottom: 1px solid var(--color-text); }
|
||||
table tbody > tr:nth-child(even) {
|
||||
background-color: #fff5;
|
||||
background-blend-mode: lighten; }
|
||||
table.plain tbody > tr:nth-child(odd) > td, table.plain tbody > tr:nth-child(odd) > th {
|
||||
background: transparent; }
|
||||
|
||||
/** ======== Github integration ========= */
|
||||
.gist table {
|
||||
margin: 0;
|
||||
font-size: 1.4rem; }
|
||||
|
||||
.gist .line-number {
|
||||
min-width: 25px;
|
||||
font-size: 1.1rem; }
|
||||
|
||||
/* ==========================================================================
|
||||
8. Media Queries - Smaller than 1130px
|
||||
========================================================================== */
|
||||
@media only screen and (max-width: 1130px) {
|
||||
/* makes it a top sticky menu */
|
||||
.fixed-nav {
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
z-index: 99999;
|
||||
background: var(--color-background);
|
||||
border-radius: 0;
|
||||
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; }
|
||||
.site-footer {
|
||||
font-size: 1.1rem; } }
|
|
@ -0,0 +1 @@
|
|||
{"Target":"css/_index.css","MediaType":"text/css","Data":{}}
|
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 3.8 MiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 668 KiB |
After Width: | Height: | Size: 383 B |
After Width: | Height: | Size: 698 B |
After Width: | Height: | Size: 698 B |
After Width: | Height: | Size: 492 KiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 1.6 MiB |
|
@ -0,0 +1 @@
|
|||
Subproject commit 476e9adc1443924300dca7be7c90d6689b4111f4
|