From 0bdbb3c70f53e5b5c064300a9ce44acf9062bad7 Mon Sep 17 00:00:00 2001 From: Segundo Fdez Date: Thu, 10 Mar 2022 12:19:27 +0100 Subject: [PATCH] fix magins, add svg for web, fix pre, fix pagination margins, fix img on safari --- TODO.md | 3 +- src/content/sections/about.md | 92 +++++++++++++++++-- ...s_abdeb689137b085b8cf50bb0fe96e360.content | 35 ++++--- .../oscar/assets/css/modules/header.css | 4 +- .../oscar/assets/css/modules/pagination.css | 2 +- src/themes/oscar/assets/css/modules/posts.css | 15 ++- src/themes/oscar/layouts/index.html | 84 +++++++++++------ 7 files changed, 173 insertions(+), 62 deletions(-) diff --git a/TODO.md b/TODO.md index a9f4ef3..96987de 100644 --- a/TODO.md +++ b/TODO.md @@ -1,5 +1,6 @@ # TODO - [ ] Emphasize -- [ ] Take a look to the li margin-bottom +- [X] Take a look to the li margin-bottom - [ ] About, social section, maybe something similar to the index page could fit better +- [ ] Review in metas.html. ItΒ΄s necessary? \ No newline at end of file diff --git a/src/content/sections/about.md b/src/content/sections/about.md index ef23df7..0a9d8ff 100644 --- a/src/content/sections/about.md +++ b/src/content/sections/about.md @@ -10,16 +10,88 @@ I've been working in different areas: sysadmin, web development, front-end and b If you would like to get in touch, you can send an email to **x@x.x**. + ## Colophon *This page is under construction for ever. Some data may be outdated*. - -## Social - -- πŸ”΄ [Youtube Principal](https://www.youtube.com/c/oscarmlage) -- πŸ”΄ [Youtube VODs](https://www.youtube.com/channel/UCXOWqIc9Qh8nEBoxBVNnjyQ) -- 🟣 [Twitch](https://twitch.tv/oscarmlag) -- 🟑 [Github](https://github.com/oscarmlage) -- πŸ”΅ [Twitter](https://twitter.com/oscarmlage) -- 🟠 [Instagram](https://instagram.com/oscarmlage) -- 🟒 [Web](https://oscarmlage.com) diff --git a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content index 84877d8..999010a 100644 --- a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content +++ b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content @@ -542,13 +542,16 @@ i, em { } .hero .hero-img img { width: 100%; + aspect-ratio: 1; + border-radius: 50%; mix-blend-mode: overlay; } +.post .social, .social { margin-top: var(--spacing-7); margin-bottom: calc(var(--spacing-8) * 2); } -.social ul { +.post .social ul, .social ul { list-style-type: none; padding: 0; margin: 0; @@ -556,10 +559,10 @@ i, em { flex-wrap: wrap; gap: var(--spacing-3); } -.social ul li { +.post .social ul li, .social ul li { flex-shrink: 0; } -.social span { +.post .social span, .social span { /* position:absolute; left:-10000px; top:auto; @@ -572,22 +575,21 @@ i, em { width: min-content; margin-inline: auto; } -.social a { +.post .social a, .social a { display: block; text-align: center; } -.social a:hover svg > * { +.post .social a:hover svg > *, .social a:hover svg > * { fill: var(--color-main); stroke: var(--color-main); stroke-width: 1px; } -.social svg { +.post .social svg, .social svg { vertical-align: middle; - transition: all ease-in-out 250ms; vertical-align: middle; margin: 0 auto; } -.social svg > * { +.post .social svg > *, .social svg > * { fill: none; stroke: var(--color-link); stroke-width: 1px; @@ -643,9 +645,11 @@ i, em { } .post-detail pre { overflow-x: scroll; - border: 1px solid var(--color-main-medium); + /* border: 1px solid var(--color-main-medium); */ + /* box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3); */ padding: var(--spacing-3); border-radius: 4px; + background-color: red; } .post-detail ul { padding-left: 1rem; @@ -660,24 +664,27 @@ i, em { font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4)); margin-bottom: 0; } -.post-detail p, .post-detail li { +.post-detail p{ margin-bottom: var(--spacing-3); } +.post-detail li { + margin-bottom: var(--spacing-1); + } /* Archive */ .post h2 { - font: var(--font-heading); margin: 0; display: flex; - aling-items: center; + align-items: center; border-bottom: 1px solid var(--color-main-dark); padding-bottom: var(--spacing-1); } .post h2 span { - font: var(--font-heading); + font: var(--font-body); color: var(--color-main-medium); vertical-align: middle; } .post h2 span:first-child { + font: var(--font-heading); margin-right: var(--spacing-2); color: var(--color-main); } @@ -698,7 +705,7 @@ i, em { display: flex; align-items: center; flex-wrap: wrap; - gap: var(--spacing-3); + gap: 0 var(--spacing-3); } .pagination a { font: var(--font-heading); diff --git a/src/themes/oscar/assets/css/modules/header.css b/src/themes/oscar/assets/css/modules/header.css index 4e0316d..eb602a1 100644 --- a/src/themes/oscar/assets/css/modules/header.css +++ b/src/themes/oscar/assets/css/modules/header.css @@ -60,11 +60,13 @@ overflow: hidden; img { width: 100%; + aspect-ratio: 1; + border-radius: 50%; mix-blend-mode: overlay; } } } - +.post .social, .social { margin-top: var(--spacing-7); margin-bottom: calc(var(--spacing-8) * 2); diff --git a/src/themes/oscar/assets/css/modules/pagination.css b/src/themes/oscar/assets/css/modules/pagination.css index 388aee5..cbcbe6d 100644 --- a/src/themes/oscar/assets/css/modules/pagination.css +++ b/src/themes/oscar/assets/css/modules/pagination.css @@ -5,7 +5,7 @@ display: flex; align-items: center; flex-wrap: wrap; - gap: var(--spacing-3); + gap: 0 var(--spacing-3); a { font: var(--font-heading); } diff --git a/src/themes/oscar/assets/css/modules/posts.css b/src/themes/oscar/assets/css/modules/posts.css index f7669ca..16f0c4f 100644 --- a/src/themes/oscar/assets/css/modules/posts.css +++ b/src/themes/oscar/assets/css/modules/posts.css @@ -53,9 +53,11 @@ } pre { overflow-x: scroll; - border: 1px solid var(--color-main-medium); + /* border: 1px solid var(--color-main-medium); */ + /* box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3); */ padding: var(--spacing-3); border-radius: 4px; + background-color: red; } ul { padding-left: 1rem; @@ -70,25 +72,28 @@ font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4)); margin-bottom: 0; } - p, li { + p{ margin-bottom: var(--spacing-3); } + li { + margin-bottom: var(--spacing-1); + } } /* Archive */ .post { h2 { - font: var(--font-heading); margin: 0; display: flex; - aling-items: center; + align-items: center; border-bottom: 1px solid var(--color-main-dark); padding-bottom: var(--spacing-1); span { - font: var(--font-heading); + font: var(--font-body); color: var(--color-main-medium); vertical-align: middle; &:first-child { + font: var(--font-heading); margin-right: var(--spacing-2); color: var(--color-main); } diff --git a/src/themes/oscar/layouts/index.html b/src/themes/oscar/layouts/index.html index 9fa47be..deb2b58 100644 --- a/src/themes/oscar/layouts/index.html +++ b/src/themes/oscar/layouts/index.html @@ -15,7 +15,8 @@