From 8acb898a2f2730e2a853c844f0e8b9bb2d690f49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yaroslav=20de=20la=20Pe=C3=B1a=20Smirnov?= Date: Fri, 24 Dec 2021 03:32:22 +0300 Subject: Huge html+css revamp * Plus added links to new photo gallery and donate page. * Title fix --- config.toml | 24 +++++ sass/css/_colors.scss | 3 +- sass/css/yaroslavps.scss | 117 +++++++++++++++++++----- static/img/paypal.png | Bin 0 -> 457 bytes static/img/snowfall.gif | Bin 0 -> 5386 bytes static/img/star_pattern.jpg | Bin 15186 -> 0 bytes static/img/stars.jpg | Bin 0 -> 15186 bytes static/svg/icons/srht.svg | 3 + templates/base.html | 106 ++++++++-------------- templates/donate.html | 30 +++--- templates/index.html | 216 ++++++++++++++++++++++++++++++-------------- 11 files changed, 323 insertions(+), 176 deletions(-) create mode 100644 static/img/paypal.png create mode 100644 static/img/snowfall.gif delete mode 100644 static/img/star_pattern.jpg create mode 100644 static/img/stars.jpg create mode 100644 static/svg/icons/srht.svg diff --git a/config.toml b/config.toml index 0e2bcea..e472624 100644 --- a/config.toml +++ b/config.toml @@ -28,6 +28,14 @@ published_on = "on" edited = "Last edited" also_read = "This text is also available in other languages: " not_published = "This text is a draft and will be published soon to the index page of " +whats_here="In this site" +weblog="Weblog" +recipes="Recipe book" +photos="Photo gallery" +other_links="Other links" +see_more="See more..." +homepage="Home page" +archive="Archive" [languages.es] generate_feed = false @@ -42,6 +50,14 @@ published_on = "en:" edited = "Última edición: " also_read = "Este texto está disponible en otros idiomas: " not_published = "Este texto es un borrador y pronto será publicado a la página principal del " +whats_here="En este sitio" +weblog="Weblog" +recipes="Recetario" +photos="Galería de fotos" +other_links="Otros vínculos" +see_more="Ver más..." +homepage="Inicio" +archive="Archivo" [languages.ru] generate_feed = false @@ -56,4 +72,12 @@ published_on = "в: " edited = "Отредакировано: " also_read = "Данный текст также доступен на других языках: " not_published = "Текст является черновиком и вскоре будет опубликован на заглавной странице " +whats_here="В этом сайте" +weblog="Веб-журнал" +recipes="Книга рецептов" +photos="Фотогалерея" +other_links="Другие ссылки" +see_more="Смотреть больше..." +homepage="Главная" +archive="Архив" diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss index 6ce5373..72adc47 100644 --- a/sass/css/_colors.scss +++ b/sass/css/_colors.scss @@ -2,11 +2,12 @@ $bg0: #000000; $bg1: #0a0a0f; $white: #e5e9f0; $gray: #a1a6b2; +$gray1: #33333a; $red: #b73030; $red1: #c45c5c; $yellow: #b2872f; $blue: #3f6e90; $blue1: #63a9cc; -$green: #7ea95a; +$green: #6d974b; $cyan: #7fac96; $cyan1: #5b8277; diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss index 8f6e89b..6f134e9 100644 --- a/sass/css/yaroslavps.scss +++ b/sass/css/yaroslavps.scss @@ -11,17 +11,12 @@ html, body { padding: 0; width: 100%; min-height: 100vh; - background-color: $bg1; - background-image: url("/img/star_pattern.jpg"); - background-size: 25%; + background-color: #000; + background-image: url("/img/snowfall.gif"); + font-size: 14px; + /*background-size: 25%;*/ } -h1, -h2, -h3, -h4, -h5, -h6, ul, ol, li, @@ -37,7 +32,7 @@ li, a, p { line-height: 1.4; - font-family: $font_sans; + font-family: $font_mono; } h2, @@ -63,13 +58,15 @@ h6 { } a, a:visited { - color: $blue1; + color: $cyan1; } -a:hover { - color: $blue; +a:hover, +a:hover:visited { + color: $cyan; } +.new-year, h1 { color: $red; font-family: $font_serif; @@ -90,6 +87,7 @@ hr { border-style: solid; border-color: $white; border-width: 1px 0 0 0; + margin: 2em 0; } pre { @@ -97,6 +95,7 @@ pre { overflow-x: auto; font-family: $font_mono; color: $gray; + background-color: $bg0; } code { @@ -106,7 +105,7 @@ code { figcaption { color: $gray; - font-family: $font_sans; + font-family: $font_mono; text-align: center; } @@ -114,8 +113,26 @@ video { max-width: 90%; } +span.extra-link { + color: $gray; +} + +h2 > span.extra-link { + font-size: 0.7em; +} + +span.extra-link > a ~ a::before { + display: inline-block; + color: $white; + content: "|"; + margin: 0 0.2em; + text-decoration: none; +} + span.icon { + display: inline-block; height: 1em; + text-decoration: none; } span.icon > img { @@ -125,7 +142,7 @@ span.icon > img { .publish-date { color: $gray; - font-family: $font_sans; + font-family: $font_mono; font-weight: normal; font-style: italic; } @@ -140,16 +157,18 @@ h2 > span.publish-date { grid-template-columns: minmax(0, 5fr) 2fr; grid-template-rows: min-content auto; max-width: 1180px; - margin: 0 auto; - min-height: 100vh; + margin: 1em auto; + min-height: 90vh; height: auto; - background-color: $bg0; + background-color: $bg1; + padding: 1px; + border: 2px solid $gray1; } .landing-page-container { grid-column-start: 1; grid-column-end: 3; - padding: 2em 4em; + padding: 2em 2em; } .landing-page-container > h1 { @@ -175,12 +194,57 @@ h2 > span.publish-date { padding: 0 2em; } +.landing-page-container, +.content-container, +.sidebar-container { + border: 2px solid $gray; +} + +.new-year { + text-align: center; + color: $green; + font-size: 2em; +} + +.nav-container { + text-align: center; +} + +.nav-container > a ~ a::before { + display: inline-block; + color: $white; + content: " · "; + margin: 0 0.4em; + text-decoration: none; +} + +.content-container { + min-height: 90vh; +} + +.album-container { + padding: 1em 2em; +} + +.album-container a { + text-decoration: none; +} + +.album-container a img { + max-height: 180px; +} + +a.see-more { + display: inline-block; + text-align: center; + font-weight: bold; +} + .sidebar-container { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; - background-color: $bg1; } .sidebar-container span.icon { @@ -246,14 +310,14 @@ h2 > span.publish-date { .paginator a { display: inline-block; padding: 0.5em; - background-color: $blue1; + background-color: $cyan1; color: $bg0; text-decoration: none; } .paginator a:hover { - background-color: $blue; - color: $white; + background-color: $cyan; + color: $bg0; } .cryptoqr { @@ -276,7 +340,6 @@ h2 > span.publish-date { .sidebar-container { grid-row-start: auto; grid-row-end: auto; - background-color: #00000000; } } @@ -309,6 +372,12 @@ h2 > span.publish-date { text-decoration: none; } + .main-container, + .header-container, + .content-container { + border: none; + } + .sidebar-container { display: none; } diff --git a/static/img/paypal.png b/static/img/paypal.png new file mode 100644 index 0000000..8409c7a Binary files /dev/null and b/static/img/paypal.png differ diff --git a/static/img/snowfall.gif b/static/img/snowfall.gif new file mode 100644 index 0000000..98df140 Binary files /dev/null and b/static/img/snowfall.gif differ diff --git a/static/img/star_pattern.jpg b/static/img/star_pattern.jpg deleted file mode 100644 index 2c5728e..0000000 Binary files a/static/img/star_pattern.jpg and /dev/null differ diff --git a/static/img/stars.jpg b/static/img/stars.jpg new file mode 100644 index 0000000..2c5728e Binary files /dev/null and b/static/img/stars.jpg differ diff --git a/static/svg/icons/srht.svg b/static/svg/icons/srht.svg new file mode 100644 index 0000000..f4c6264 --- /dev/null +++ b/static/svg/icons/srht.svg @@ -0,0 +1,3 @@ + diff --git a/templates/base.html b/templates/base.html index 908e93c..efb1e7d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -11,7 +11,7 @@ {% block title %} - {{ config.title }} + Yaroslav de la Peña Smirnov {% endblock %} @@ -23,26 +23,18 @@
{% block page %} -
- {% block header %} -

Yaroslav de la Peña Smirnov

- {% endblock %} -
+
+ {% block header %} +

Yaroslav de la Peña Smirnov

+ {% endblock %} +
{% block content %} {% endblock %}
-

- {% if lang == "ru" %} - Навигация - {% elif lang == "es" %} - En este sitio - {% else %} - Navigation - {% endif %} -

+

{{ trans(key="whats_here", lang=lang) }}

  • {% if lang == "ru" %} @@ -50,19 +42,19 @@ {% elif lang == "es" %} Inicio {% else %} - Home page + Home {% endif %} -
      + [ {% if lang != "en" %} -
    • English
      • - {% endif %} - {% if lang != "es" %} -
    • Español
      • + en {% endif %} {% if lang != "ru" %} -
    • Русский
      • + ru + {% endif %} + {% if lang != "es" %} + es {% endif %} -
    + ]
  • {% if lang == "ru" %} @@ -72,6 +64,17 @@ {% else %} Weblog {% endif %} + [ + {% if lang != "en" %} + en + {% endif %} + {% if lang != "ru" %} + ru + {% endif %} + {% if lang != "es" %} + es + {% endif %} + ]
    • {% if lang == "ru" %} @@ -92,6 +95,17 @@ {% else %} Recipe book {% endif %} + [ + {% if lang != "en" %} + en + {% endif %} + {% if lang != "ru" %} + ru + {% endif %} + {% if lang != "es" %} + es + {% endif %} + ]
      • {% if lang == "ru" %} @@ -105,58 +119,12 @@
    -

    - {% if lang == "ru" %} - RSS-лента - {% elif lang == "es" %} - RSS - {% else %} - RSS feeds - {% endif %} -

    -

    Email

    yps@yaroslavps.com

    PGP

    BD900E5D624046DC -

    - {% if lang == "ru" %} - Другие ссылки - {% elif lang == "es" %} - Otros vínculos - {% else %} - Other stuff - {% endif %} -

    -
    - - - - - - -
    {% if lang == "ru" %}

    Это русскоязычная версия сайта. Если вам интересно diff --git a/templates/donate.html b/templates/donate.html index 3c5df03..18cab1d 100644 --- a/templates/donate.html +++ b/templates/donate.html @@ -10,31 +10,29 @@ Yaroslav's tip page {% endif %} - - {% if lang == "ru" %} - Вернуться на главную - {% elif lang == "es" %} - Regresar a la página de inicio - {% else %} - Go back to home page - {% endif %} - + {% if lang == "ru" %} +

    вернуться на главную страницу Ярослава

    + {% elif lang == "es" %} +

    regresar a la página de inicio de Yaroslav

    + {% else %} +

    back to Yaroslav's homepage

    + {% endif %}

    {% if lang == "ru" %} Если вам нравится мой сайт или то, чем я занимаюсь, вы можете мне - отправить пожертвование. У меня временно проблемы с Paypal'ом, - поэтому пока только принимаю пожертвования на Биткойн и Monero. + отправить пожертвование. {% elif lang == "es" %} Si te gusta mi sitio web o lo que hago en general, puedes dejarme - una propina. Por el momento tengo problemas con Paypal, por lo tanto - sólo estoy recibiendo donaciones a través de Bitcoin y Monero. + una propina. {% else %} If you like my site or any of the things that I do, you can leave me - a tip. Currently I am having some troubles with Paypal, so Bitcoin - and Monero are the only two methods available at the moment for - receiving donations. + a tip. {% endif %}

    +

    Paypal

    + +
    + https://paypal.me/yaroslavps

    diff --git a/templates/index.html b/templates/index.html index 91cce73..a47e545 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,53 +1,139 @@ {% extends "base.html" %} {% block page %} + {% if lang != "en" %} + {% set weblog_path = "weblog/_index." ~ lang ~ ".md" %} + {% set recipes_path = "food/_index." ~ lang ~ ".md" %} + {% else %} + {% set weblog_path = "weblog/_index.md" %} + {% set recipes_path = "food/_index.md" %} + {% endif %} + {% set weblog = get_section(path=weblog_path) %} + {% set recipes = get_section(path=recipes_path) %}

    {{ trans(key="full_name", lang=lang) }}

    -
    - {% if lang == "ru" %} - Веб-журнал - Книга рецептов - {% elif lang == "es" %} - Weblog - Recetario - {% else %} - Weblog - Recipe book +
    + {% if lang != "en" %} + 🇺🇸 English + {% endif %} + {% if lang != "ru" %} + 🇷🇺 Русский + {% endif %} + {% if lang != "es" %} + 🇲🇽 Español {% endif %}
    -
    - - - - - - -
    +

    {% if lang == "ru" %} - Здравствуйте! Меня зовут Ярослав и это мой сайт. Здесь я пишу о том что - я думаю или делаю, или чтобы напомнить себе как что-то делать, будь это - настроить сервер или приготовить блюдо. Возможно вы найдёте что-нибудь - интересного. Большая часть того что я пишу, на - английском. Но, бывает иногда пишу или перевожу то, что - пишу, на русский и/или испанский языки. + Добро пожаловать в мой уголок интернета. Чувствуйте себя как дома. + Иногда пишу на русском, но по большей части пишу на английском. Что + можно найти на моём сайте: + {% elif lang == "es" %} + Bienvenido a mi pequeño rincón de internet. Siéntete libre de echar una + mirada. A veces escribo en español, pero la mayor parte del contenido + está en inglés. Esto es lo que puedes encontrar en mi sitio: + {% else %} + Welcome to my little corner of the internet. Feel free to take a look + around. This is what you can find on my website: + {% endif %} +

    + +

    + {% if lang == "ru" %} + С Новым 2022 Годом и Рождеством! {% elif lang == "es" %} - Buenas y bienvenidos sean. Mi nombre es Yaroslav y éste es mi sitio. - Aquí escribo lo que pienso o hago, o simplemente para acordarme luego de - como hacer ciertas cosas, sea configurar un servidor, o cocinar una - receta. Echa una mirada, a lo mejor encuentras algo interestante o útil. - Escribo en su mayoría en inglés, pero a veces también - escribo o traduzco lo que escribo al español y/o al - ruso. + ¡Feliz Navidad y Año Nuevo 2022! {% else %} - Welcome, my name is Yaroslav. I keep this site to sometimes write about - what I do or think on my weblog, or to remind myself of how to do - certain things, be it set up a server or how to make some dishes. You - can take a look around, maybe you'll find something interesting or - useful. Most of the time I write in English, but sometimes I might also - write or translate what I write in Spanish or - Russian. + A Merry Christmas and a Happy New Year 2022! + {% endif %} +

    + +

    {{ trans(key="weblog", lang=lang) }}

    + {% set latest_weblog = weblog.pages[0] %} +

    + {% if lang == "en" %} + My thoughts on different matters and some things that I would like to + remember. + {% elif lang == "es" %} + Mis pensamientos acerca de diferentes temas y ciertas cosas que quisiera + recordar. + {% elif lang == "ru" %} + Мои мысли о разных предметах и то, что мне бы хотелось запомнить. + {% endif %} +

    +
    +

    + {{ latest_weblog.title }} + {% if latest_weblog.date %} + {{ latest_weblog.date | date }} + {% endif %} +

    + {% if latest_weblog.summary %} + {{ latest_weblog.summary | safe }} + {% endif %} +
    +
    + {{ trans(key="see_more", lang=lang) }} + {{ trans(key="archive", lang=lang) }} + RSS +
    + +

    {{ trans(key="recipes", lang=lang) }}

    + {% set latest_recipe = recipes.pages[0] %} +

    + {% if lang == "en" %} + A collection of my favorite recipes that I often cook. + {% elif lang == "es" %} + Una colección de mis recetas favoritas que cocino con frecuencia. + {% elif lang == "ru" %} + Набор моих любимых рецептов, которые часто готовлю. {% endif %}

    +
    +

    + {{ latest_recipe.title }} + {% if latest_recipe.date %} + {{ latest_recipe.date | date }} + {% endif %} +

    + {% if latest_recipe.summary %} + {{ latest_recipe.summary | safe }} + {% endif %} +
    +
    + {{ trans(key="see_more", lang=lang) }} + {{ trans(key="archive", lang=lang) }} + RSS +
    + +

    {{ trans(key="photos", lang=lang) }}

    +

    + {% if lang == "en" %} + A gallery with some photographs I've taken on my free time. + {% elif lang == "es" %} + Una galería de fotografías que he tomado en mi tiempo libre. + {% elif lang == "ru" %} + Галерея с фотографиями сняты в моё свободное время. + {% endif %} +

    +
    + + + + + + + + + + + + +
    +
    + {{ trans(key="see_more", lang=lang) }} +
    +

    {% if lang == "ru" %} Связаться @@ -89,40 +175,38 @@

    {% if lang == "ru" %} - Публичный PGP-ключ: + PGP-ключ: {% elif lang == "es" %} - Llave pública de PGP: + Llave de PGP: {% else %} - Public PGP key: + PGP key: {% endif %} BD900E5D624046DC

    -

    RSS feeds

    -

    - {% if lang == "ru" %} - Если вам хочеться следить за тем что я здесь публикую, вы можете - добавить эти RSS/Atom-ссылки в свой любимый RSS-ридер: +

    {{ trans(key="other_links", lang=lang) }}

    +
    + {% if lang == "en" %} + Leave a tip {% elif lang == "es" %} - Si te interesa estar al tanto de lo que publico aquí, cuan seguido - yo publique, puedes agregar estas direcciones de RSS/Atom a tu - lector RSS de preferencia: - {% else %} - If you are interested in following what I may publish here (however - often it may be), you can add these RSS/Atom urls to your favorite - RSS reader: + Dejar propinar + {% elif lang == "ru" %} + Оставить чайвые {% endif %} -

    - 
    -			{% if lang == "ru" %}
-https://www.yaroslavps.com/ru/weblog/feed.xml
-https://www.yaroslavps.com/ru/food/feed.xml
-			{% elif lang == "es" %}
-https://www.yaroslavps.com/es/weblog/feed.xml
-https://www.yaroslavps.com/es/food/feed.xml
-			{% else %}
-https://www.yaroslavps.com/weblog/feed.xml
-https://www.yaroslavps.com/food/feed.xml
-			{% endif %}
-
    + Git server + Github + sourcehut +
    +
    +
    +

    + The text content in this site is + CC BY-SA 4.0, + the photos are under + CC BY-NC-SA 4.0. +

    +

    + © 2018—2021 Yaroslav de la Peña Smirnov. +

    +
    {% endblock %} -- cgit v1.2.3