From c8dcc1367557e64677a803ab323c08df5d30f599 Mon Sep 17 00:00:00 2001 From: francisco-solis99 Date: Thu, 10 Mar 2022 16:10:14 -0600 Subject: [PATCH 1/2] [Agregar] estilos a las imagenes del post para centrarlas --- assets/scripts/article/article.js | 19 +++++++++++++ .../styles/pages/article/article-desktop.css | 7 ++++- assets/styles/pages/article/article.css | 27 +++++++++++++++++++ views/pages/article.php | 4 ++- 4 files changed, 55 insertions(+), 2 deletions(-) diff --git a/assets/scripts/article/article.js b/assets/scripts/article/article.js index c7f35ae..9b45018 100644 --- a/assets/scripts/article/article.js +++ b/assets/scripts/article/article.js @@ -25,3 +25,22 @@ post.addEventListener("click", () => { heart.classList.remove("beat"); }, 1200); }); + + +// Fix some styles for the content post +const imagesPost = document.querySelectorAll('.post__copy img'); + +// Get the media query +const mediaQuery = window.matchMedia('(min-width: 768px)'); +mediaQuery.addEventListener('change',handleDeviceChange); + +//handle the event when changes the size and get the media query +function handleDeviceChange(e){ + imagesPost.forEach(image => { + image.parentElement.classList.toggle('post__container-img') + }); +} + +// execute for the fisrt time when the page load and apply the changes +handleDeviceChange(); + diff --git a/assets/styles/pages/article/article-desktop.css b/assets/styles/pages/article/article-desktop.css index 6b3c037..b8c59d0 100644 --- a/assets/styles/pages/article/article-desktop.css +++ b/assets/styles/pages/article/article-desktop.css @@ -103,9 +103,14 @@ header:hover { width: initial; } */ +/* Estilos generales para el contenido del articulo */ + +.post__copy img { + width: 50%; +} - +/* Estilos para la seccion de popular posts */ .popular-posts { width: 100%; background-color: initial; diff --git a/assets/styles/pages/article/article.css b/assets/styles/pages/article/article.css index 432a0fb..eca8f24 100644 --- a/assets/styles/pages/article/article.css +++ b/assets/styles/pages/article/article.css @@ -293,6 +293,12 @@ header::before { height: 100%; object-fit: cover; } + +/* Acomodar las imagenes en medio, se agrega esta clasea al contenedor de la imagen desde JS */ +.post__container-img { + text-align: center; +} + /* Estilos para los enlaces */ .post__copy a { color: var(--color-black); @@ -314,6 +320,27 @@ header::before { display: inline; } +/* Estilos para el codigo incrustado */ +.post__copy pre { + tab-width: 4; +} + +.post__copy pre[data-lang]::before { + content: attr(data-lang); + display: block; +} + +.post__copy pre code { + display: block; + background: none; + white-space: pre; + -webkit-overflow-scrolling: touch; + overflow-x: scroll; + max-width: 100%; + min-width: 100px; + padding: 0; +} + /* Estilos de la sección de otros post para mostrar */ .popular-posts { diff --git a/views/pages/article.php b/views/pages/article.php index 820fcb7..e40d599 100644 --- a/views/pages/article.php +++ b/views/pages/article.php @@ -37,12 +37,12 @@ +
@@ -159,3 +159,5 @@ + + \ No newline at end of file From 00cb33cdbdba8930033d41b576976cf35a9a4358 Mon Sep 17 00:00:00 2001 From: francisco-solis99 Date: Thu, 10 Mar 2022 18:02:21 -0600 Subject: [PATCH 2/2] [Agregar] estilos al codigo incrustado --- assets/highlight/dracula.css | 81 +++++++++++++++++++ assets/scripts/article/article.js | 7 +- .../styles/pages/article/article-desktop.css | 5 ++ assets/styles/pages/article/article.css | 19 +++-- views/pages/article.php | 10 ++- 5 files changed, 112 insertions(+), 10 deletions(-) create mode 100644 assets/highlight/dracula.css diff --git a/assets/highlight/dracula.css b/assets/highlight/dracula.css new file mode 100644 index 0000000..087149f --- /dev/null +++ b/assets/highlight/dracula.css @@ -0,0 +1,81 @@ +/* Dracula Theme v1.2.5 + * + * https://github.com/dracula/highlightjs + * + * Copyright 2016-present, All rights reserved + * + * Code licensed under the MIT license + * + * @author Denis Ciccale + * @author Zeno Rocha + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282a36; +} + +.hljs-built_in, +.hljs-selector-tag, +.hljs-section, +.hljs-link { + color: #8be9fd; +} + +.hljs-keyword { + color: #ff79c6; +} + +.hljs, +.hljs-subst { + color: #f8f8f2; +} + +.hljs-title, +.hljs-attr, +.hljs-meta-keyword { + font-style: italic; + color: #50fa7b; +} + +.hljs-string, +.hljs-meta, +.hljs-name, +.hljs-type, +.hljs-symbol, +.hljs-bullet, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #f1fa8c; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: #6272a4; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-literal, +.hljs-number { + color: #bd93f9; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/assets/scripts/article/article.js b/assets/scripts/article/article.js index 9b45018..d26457c 100644 --- a/assets/scripts/article/article.js +++ b/assets/scripts/article/article.js @@ -15,6 +15,10 @@ * junto con este programa. De lo contrario, consulte . */ +// ---------------------- Init the hightlight functionality ------------------ +hljs.highlightAll(); + +// ---------------------- Animation heart ------------------ const post = document.querySelector('.post__copy'); const heart = document.querySelector('.icon'); @@ -26,8 +30,7 @@ post.addEventListener("click", () => { }, 1200); }); - -// Fix some styles for the content post +// ---------------------- Fix images for the content post ------------------ const imagesPost = document.querySelectorAll('.post__copy img'); // Get the media query diff --git a/assets/styles/pages/article/article-desktop.css b/assets/styles/pages/article/article-desktop.css index b8c59d0..d31ec1f 100644 --- a/assets/styles/pages/article/article-desktop.css +++ b/assets/styles/pages/article/article-desktop.css @@ -109,6 +109,11 @@ header:hover { width: 50%; } +/* Estilos para el codigo incrustado */ +.post__copy pre code { + font-size: 1.2rem; +} + /* Estilos para la seccion de popular posts */ .popular-posts { diff --git a/assets/styles/pages/article/article.css b/assets/styles/pages/article/article.css index eca8f24..2db2fcc 100644 --- a/assets/styles/pages/article/article.css +++ b/assets/styles/pages/article/article.css @@ -260,6 +260,7 @@ header::before { .post__copy h4, .post__copy h5, .post__copy h6 { + margin: 0; margin-top: 2.2rem; } @@ -321,8 +322,14 @@ header::before { } /* Estilos para el codigo incrustado */ +.hljs { + background: transparent; +} + .post__copy pre { - tab-width: 4; + padding: 20px; + background-color: #383A59; + color: white; } .post__copy pre[data-lang]::before { @@ -331,14 +338,14 @@ header::before { } .post__copy pre code { - display: block; - background: none; - white-space: pre; - -webkit-overflow-scrolling: touch; - overflow-x: scroll; max-width: 100%; min-width: 100px; padding: 0; + display: block; + white-space: pre; + overflow-x: auto; + font-size: 0.8rem; + -webkit-overflow-scrolling: touch; } /* Estilos de la sección de otros post para mostrar */ diff --git a/views/pages/article.php b/views/pages/article.php index e40d599..2dc9abd 100644 --- a/views/pages/article.php +++ b/views/pages/article.php @@ -40,9 +40,10 @@ ) ?> + - +
@@ -83,6 +84,11 @@
+ 
+            
+                const hi = 2;
+            
+
@@ -159,5 +165,5 @@ - + \ No newline at end of file