Cambiada la intro de la pagina y los estilos un poco :3

This commit is contained in:
2020-11-23 01:14:39 -03:00
parent f3a67784c5
commit 0d88381104
6 changed files with 105 additions and 111 deletions

View File

@@ -6,7 +6,6 @@
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), url(https://static.danielcortes.xyz/fonts/SourceCodePro/SourceCodePro-Regular.woff2) format('woff2');
font-display: swap
}
@font-face {
@@ -14,7 +13,6 @@
font-style: normal;
font-weight: 700;
src: local('Source Code Pro'), url(https://static.danielcortes.xyz/fonts/SourceCodePro/SourceCodePro-Bold.woff2) format('woff2');
font-display: swap
}
@font-face {
@@ -29,7 +27,6 @@
font-style: normal;
font-weight: 700;
src: local('Source Serif Pro'), url(https://static.danielcortes.xyz/fonts/SourceSerifPro/SourceSerifPro-Bold.woff2) format('woff2');
font-display: swap
}
@font-face {
@@ -37,7 +34,6 @@
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), url(https://static.danielcortes.xyz/fonts/SourceSansPro/SourceSansPro-Regular.woff2) format('woff2');
font-display: swap
}
@font-face {
@@ -45,5 +41,4 @@
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro'), url(https://static.danielcortes.xyz/fonts/SourceSansPro/SourceSansPro-Bold.woff2) format('woff2');
font-display: swap
}
}

9
src/assets/script.js Normal file
View File

@@ -0,0 +1,9 @@
function makeImagesClickeable() {
document.querySelectorAll("img").forEach(img => {
img.addEventListener("click", e => window.open(e.target.src))
});
}
window.addEventListener('load', (event) => {
makeImagesClickeable();
});

View File

@@ -1,76 +1,68 @@
/******************************************************************************
=> MAIN STYLES
*******************************************************************************/
=> MAIN STYLES
*******************************************************************************/
:root {
--background-color: hsl(10, 20%, 98%);
--foreground-color: hsl(10, 10%, 13%);
--primary-color: hsl(200, 90%, 40%);
--highlight-color: hsl(290, 86%, 43%);
--light-color: hsl(10, 10%, 40%);
--background-color: hsl(10, 20%, 98%);
--foreground-color: hsl(10, 10%, 13%);
--light-color: hsl(10, 10%, 40%);
--primary-color: hsl(290, 86%, 43%);
--highlight-color: hsl(200, 90%, 40%);
--sans-font: "Source Sans Pro";
--mono-font: "Source Code Pro";
}
html {
margin: 2em;
}
body {
background-color: var(--background-color);
color: var(--foreground-color);
overflow-y: scroll;
background-color: var(--background-color);
font-family: Source Sans Pro;
font-size: 1em;
font-family: var(--sans-font), "sans-serif";
font-size: 14pt;
color: var(--foreground-color);
}
overflow-y: scroll;
@media only screen and (max-width: 800px) {
body {
font-size: 1em;
}
}
.container {
max-width: 80ch;
padding: 2em 0;
margin: auto;
}
h1 {
margin: 0;
}
time {
color: var(--light-color);
}
p {
line-height: 1.5em;
text-align: justify;
}
a,
a:visited {
color: var(--highlight-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
cursor: pointer;
max-width: 100ch;
padding: 0 0 20em;
margin: auto;
}
code {
font-family: Source Code Pro;
font-size: 1em;
font-family: "Source Code Pro", "monospace";
}
h1, h2 { margin: 0 0 .3em 0; }
h1 { font-size: 3em; }
h2 { font-size: 1.875em; }
time { color: var(--light-color); }
p {
margin: 0 0 1em 0;
line-height: 1.5em;
text-align: justify;
}
a, a:visited {
font-weight: 600;
color: var(--primary-color);
}
a:hover { color: var(--highlight-color); }
img {
max-width: 100%;
cursor: pointer;
}
.container {
}
.codehilite {
border: none;
border-radius: 5px;
overflow-x: auto;
}
.codehilite pre {
margin: 1em;
overflow-x: auto;
padding: .7em 2em;
}