site/leter.css
html {
font-size: var(--text_size);
line-height: 1.58;
}
::-moz-selection {
/* text-shadow: none; */
}
::selection {
/* text-shadow: none; */
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--accent_color);
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
iframe {
width: 350px;
height: 400px;
border-color: #21BF73;
border-style: dashed;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
display: block;_
}
.embedForm {
margin-top: 30px !important;
margin-bottom: 30px !important;
border-style: dashed !important;
padding-left: 0px !important;
padding-bottom: 10px !important;
}
h1 {
margin-top: 80px;
margin-bottom: 50px;
text-align: center;
}
h2, h3, h4, h5, h6 {
font-family: var(--text_font);
color: var(--accent_color);
/* color: var(--heading_color); */
}
body {
font-family: var(--text_font);
color: var(--text_color);
background: var(--background_color);
/* padding-left: 1.2em; */
/* padding-right: 1.2em; */
/* padding-bottom: 5em; */
font-weight: normal;
padding-bottom: 1.2em;
/* padding: 1.2em; */
}
figure {
/* width: 100%; */
margin: 0;
/* position: absolute;
left:0;
right:0;
*/
/* padding: 0; */
/* padding-top: 20px; */
/* padding-bottom: 20px; */
}
figure img {
/* width: 100%; */
/* width: 100vw; */
/* position: relative; */
/* left: calc(-50vw + 50%); */
}
figcaption {
font-size: small;
color: var(--accent_color);
margin-top:10px;
}
h1 {
/* color: #2E383F; */
/* background-color: #f7f7f7; */
/* text-shadow: 2px 2px 0px #F6BB42; */
/* display:inline-block; */
/* text-align: center; */
/* margin-bottom: 50px; */
/* margin-top: 50px; */
font-size: 50px;
color: var(--heading_color);
font-weight: 700;
font-family: var(--heading_font);
/* margin-left: 0; */
/* padding-left: 1.2em; */
}
hr {
/* border: 0; */
/* border-top: 1px solid; */
text-align:center;
}
hr:after {
/* content: '⬥ ⬥ ⬥'; */
display: inline-block;
position: relative;
top: -13px;
padding: 0 3px;
/* background: #fff; */
/* color: #8c8c8c; */
font-size: 30px;
}
/* pre, code { */
/* font-family: Hack, */
/* monospace; */
/* /1* font-size: 15px; *1/ */
/* /1* padding: .8em .5em !important; *1/ */
/* } */
pre code.hljs {
display: block;
padding: 1em;
/* border-radius: 5px; */
}
code.hljs {
display: inline;
border-radius: 5px;
}
p code {
display: inline;
}
code {
font-size: 15px;
/* padding: 1.2em; */
margin: 30px 0;
/* padding: 10px !important; */
}
.published {
font-size: small;
color: var(--accent_color);
/* color: #0074D9; */
}
/* TODO support for heading effects */
.retroshadow {
color: #F6BB42;
background-color: #f7f7f7;
text-shadow: 4px 4px 0px #2E383F
}
/* TODO: add dinamically? */
/* h1:after { */
/* /1* width: 100%; *1/ */
/* /1* display:flex; *1/ */
/* /1* align-items: center; *1/ */
/* /1* justify-content: center; *1/ */
/* /1* display: block; *1/ */
/* /1* content: var(--unicode-flair); *1/ */
/* /1* /2* color: #A1A4BD; *2/ *1/ */
/* /1* color: rgb(72, 76, 127, 0.5) *1/ */
/* content: '_'; */
/* display: block; */
/* /1* border: 3px solid rgb(72, 76, 127, 0.5); *1/ */
/* /1* border: 3px solid rgb(246, 187, 66, 0.5); *1/ */
/* /1* border-radius:4px; *1/ */
/* /1* -webkit-border-radius:4px; *1/ */
/* /1* -moz-border-radius:4px; *1/ */
/* /1* box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05); *1/ */
/* /1* -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05); *1/ */
/* /1* -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05); *1/ */
/* /1* width: 50px; *1/ */
/* /1* margin-top: 30px; *1/ */
/* /1* text-align: center; *1/ */
/* } */
h2 {
/* color: rgb(72, 76, 127, 0.9) */
/* color: rgb(246, 187, 66, 0.9) */
}
a {
text-decoration: none;
border-bottom: 2px solid;
color: var(--text_color);
/* color: var(--link_color); */
border-bottom-color: var(--link_color);
/* border-bottom-color: var(--accent_color); */
/* border-bottom-color: var(--heading-color); */
/* display: inline-block; */
line-height: 1.2em;
}
a:hover {
/* border-bottom: none; */
color: var(--text_color);
/* -webkit-text-stroke: 0.8px var(--text_color); */
/* -webkit-text-stroke: 0.8px var(--heading_color); */
border-bottom-color: var(--text_color);
}
section {
max-width: 700px;
/* margin: var(--page_align); */
/* margin-left: calc(-50vw + 50%); */
/* margin-right: calc(-50vw + 50%); */
}
blockquote {padding: 5px 10px;margin: 0 0 0px;/* font-size: 17.5px; */border-left: 5px solid var(--accent_color);}
.glide__bullets {
bottom: 4rem !important;
}
ul {
list-style: none;
padding-inline-start: 10px;
}
li {
margin-bottom: 15px;
}
ul li::before {
content: "⦿";
color: var(--accent_color);
display: inline-block;
width: 1em;
/* margin-left: -1em; */
}
ol {
list-style: none;
counter-reset: my-awesome-counter;
padding-inline-start: 10px;
}
ol li {
counter-increment: my-awesome-counter;
}
ol li p {
display: inline;
}
ol li::before {
content: counter(my-awesome-counter) ".";
color: var(--accent_color);
font-weight: bold;
font-size: smaller;
margin-right: 8px;
}
/* ol { */
/* list-style-type: upper-roman; */
/* } */
/* li { */
/* padding-bottom: 18px; */
/* } */
/* list index for blog formatting */
#index {
/* padding-left: 0px; */
/* list-style: none; */
}
#index a {
font-weight: bold;
}
#index ul, .slider ul {
list-style: none;
}
#index li::before, .slider li::before{
display:none;
}
#index span {
font-size: smaller;
width: 120px;
/* display: block; */
/* float: left; */
/* margin-right: 10px; */
/* text-align: right; */
/* display: table-cell; */
/* vertical-align: middle; */
display: inline-block;
/* vertical-align: middle; */
/* line-height: 1em; */ /*set line height back to normal*/
/* border: 1px solid; */
text-align: right;
}
.slider li {
margin: auto;
}
ul.slider {
/* margin-left: calc(-50vw + 50%); */
/* margin-right: calc(-50vw + 50%); */
/* width: 100vw; */
/* position: relative; */
/* left: 0; */
}
@media screen and (min-width: 768px) {
section {
margin: var(--page_align);
/* text-align: center
/* margin: 0px 0px 50px 50px;;;; */ */;
}
figure img {
width: 100%;
/* width: 100vw; */
/* position: relative; */
/* left: calc(-50vw + 50%); */
}
}
@media screen and (min-width: 320px) and (max-width: 767px){
h1 {
margin: 0.47em 0 .47em 0;
}
figure img {
width: 100%;
/* position: relative; */
/* left: 50%; */
/* right: 50%; */
/* margin-left: -50vw; */
/* margin-right: -50vw; */
/* position: relative; */
/* left: calc(-50vw + 50%); */
/* margin-left: calc(-50vw + 50%); */
/* margin-right: calc(-50vw + 50%); */
}
p, span, ul, ol, tr, thead, td,th, figcaption, h1, h2, h3, h4, h5, h6 {
/* margin-right: 1.2em; */
/* padding-left: 1.2em; */
/* padding-right: 1.2em; */
/* margin-left: 1.2em; */
padding-left: 24px;
padding-right: 24px;
}
.embedForm p, .embedForm h4 {
padding-left: 0px !important;
}
h2 {
font-size: 1.2em;
}
h1 {
font-size: 42px;
}
}
/* body#banana { */
/* font-family: 'Roboto Mono', monospace; */
/* background: #f7f7f7; */
/* color: #2E383F; */
/* } */
/* #banana h1 { */
/* background-color: #F6BB42; */
/* padding: 0.3em; */
/* } */
/* #banana a { */
/* color: #2E383F; */
/* border-bottom-color: #F6BB42; */
/* } */
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}