diff options
-rw-r--r-- | sass/css/_colors.scss | 11 | ||||
-rw-r--r-- | sass/css/_fonts.scss | 7 | ||||
-rw-r--r-- | sass/css/yaroslavps.scss | 58 | ||||
-rw-r--r-- | static/img/star_pattern.jpg | bin | 0 -> 24283 bytes | |||
-rw-r--r-- | templates/base.html | 11 | ||||
-rw-r--r-- | templates/index.html | 11 | ||||
-rw-r--r-- | templates/weblog.html | 8 | ||||
-rw-r--r-- | templates/weblog_archive.html | 2 |
8 files changed, 70 insertions, 38 deletions
diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss index a24f933..6ce5373 100644 --- a/sass/css/_colors.scss +++ b/sass/css/_colors.scss @@ -1,7 +1,12 @@ $bg0: #000000; -$bg1: #1b1e25; +$bg1: #0a0a0f; $white: #e5e9f0; $gray: #a1a6b2; -$magenta: #9c6992; +$red: #b73030; +$red1: #c45c5c; +$yellow: #b2872f; +$blue: #3f6e90; +$blue1: #63a9cc; +$green: #7ea95a; $cyan: #7fac96; -$dark_cyan: #5b8277; +$cyan1: #5b8277; diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss index 686bc1b..f2d9a6d 100644 --- a/sass/css/_fonts.scss +++ b/sass/css/_fonts.scss @@ -1,8 +1,3 @@ -@font-face { - font-family: "IBM Plex Mono"; - src: url("/fonts/IBMPlexMono-Regular.ttf"); -} - $font_sans: Verdana, Geneva, sans-serif; $font_serif: Georgia, serif; -$font_mono: "IBM Plex Mono", monospace; +$font_mono: monospace; diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss index 93d87f9..46d22b0 100644 --- a/sass/css/yaroslavps.scss +++ b/sass/css/yaroslavps.scss @@ -6,6 +6,9 @@ html, body { width: 100%; min-height: 100vh; background-color: $bg1; + background-image: url("/img/star_pattern.jpg"); + background-attachment: fixed; + background-size: 25%; } h1, @@ -30,29 +33,42 @@ p { font-family: $font_sans; } -a, a:visited { - color: $cyan; - text-decoration: none; -} - -a:hover { - color: $dark_cyan; -} - -h1, h2, h3, h4, h5, h6, -h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-family: $font_serif; - font-weight: normal; + font-weight: 500; +} + +h2, +h3, +h4, +h5, +h6 { + color: $red1; +} + +a, a:visited { + color: $blue1; +} + +a:hover { + color: $blue; +} + +h1 { + color: $red; + font-family: $font_serif; + font-variant-caps: small-caps; + font-weight: 500; + font-size: 2.5em; } hr { @@ -65,6 +81,7 @@ pre { padding: 1em 0; overflow-x: auto; font-family: $font_mono; + color: $gray; } code { @@ -97,7 +114,7 @@ h2 > span.publish-date { display: grid; grid-template-columns: minmax(0, 5fr) 2fr; grid-template-rows: min-content auto; - max-width: 1080px; + max-width: 1180px; margin: 0 auto; min-height: 100vh; height: auto; @@ -139,6 +156,7 @@ h2 > span.publish-date { grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; + background-color: $bg1; } .sidebar-container span.icon { @@ -147,15 +165,20 @@ h2 > span.publish-date { } .sticky-wrapper { - padding: 1em; + padding: 1em 2em; position: sticky; top: 1em; + max-height: 100vh; } .links-container { text-align: center; } +.links-container a { + text-decoration: none; +} + .post-container { padding: 1em 2em; } @@ -172,12 +195,13 @@ h2 > span.publish-date { .paginator a { display: inline-block; padding: 0.5em; - background-color: $cyan; + background-color: $blue1; color: $bg0; + text-decoration: none; } .paginator a:hover { - background-color: $dark_cyan; + background-color: $blue; color: $white; } @@ -185,12 +209,14 @@ h2 > span.publish-date { .landing-page-container { font-size: 1em; } + .header-container, .content-container, .sidebar-container { grid-column-start: 1; grid-column-end: 3; } + .sidebar-container { grid-row-start: auto; grid-row-end: auto; diff --git a/static/img/star_pattern.jpg b/static/img/star_pattern.jpg Binary files differnew file mode 100644 index 0000000..bdcc773 --- /dev/null +++ b/static/img/star_pattern.jpg diff --git a/templates/base.html b/templates/base.html index c64b27d..f341e32 100644 --- a/templates/base.html +++ b/templates/base.html @@ -51,9 +51,6 @@ <a href="https://git.yaroslavps.com/yaroslav" title="Git server"> <span class="icon"><img src="/svg/icons/git.svg"/></span> </a> - <a href="/feed.xml" title="RSS feed"> - <span class="icon"><img src="/svg/icons/rss.svg"/></span> - </a> </div> <h3>Navigation</h3> <ul class="navigation-list"> @@ -69,8 +66,12 @@ </ul> </li> </ul> - <h3>Contact</h3> - <p>If you want to tell me something, you can contact me by email at:</p> + <h3>RSS Feeds</h3> + <ul class="rss-list"> + <li><a href="/weblog/feed.xml">Weblog RSS</a></li> + <li><a href="/food/feed.xml">Recipe book RSS</a></li> + </ul> + <h3>Email</h3> <a href="mailto:contact@yaroslavps.com">contact@yaroslavps.com</a> <h3>PGP</h3> <a href="https://www.yaroslavps.com/files/yaroslavpub.gpg">BD900E5D624046DC</a> diff --git a/templates/index.html b/templates/index.html index a9ef8c2..4dfd843 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,17 +13,22 @@ <a href="https://git.yaroslavps.com/yaroslav" title="Git server"> <span class="icon"><img src="/svg/icons/git.svg"/></span> </a> - <a href="/feed.xml" title="RSS feed"> - <span class="icon"><img src="/svg/icons/rss.svg"/></span> - </a> </div> <p>Welcome, my name is Yaroslav de la Peña Smirnov. 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. You can take a look around, maybe you'll find something interesting or useful.</p> + <h2>Getting in contact</h2> <p>If you want to contact me, you can do so by email at: <a href="mailto:contact@yaroslavps.com">contact@yaroslavps.com</a> </p> <p>Public PGP key: <a href="https://www.yaroslavps.com/files/yaroslavpub.gpg">BD900E5D624046DC</a></p> + <h2>RSS feeds</h2> + <p>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:</p> + <pre class="rss-links-list"> + https://www.yaroslavps.com/weblog/feed.xml + https://www.yaroslavps.com/food/feed.xml + </pre> </div> {% endblock %} diff --git a/templates/weblog.html b/templates/weblog.html index 06673ee..253f79e 100644 --- a/templates/weblog.html +++ b/templates/weblog.html @@ -35,12 +35,12 @@ {% if paginator.number_pagers > 1 %} <div class="paginator"> {% if paginator.previous %} - <a href="{{ paginator.first }}"><span class="icon"></span> First</a> - <a href="{{ paginator.previous }}"><span class="icon"></span> Page {{ paginator.current_index - 1 }}</a> + <a href="{{ paginator.first }}"><span class="icon">|←</span> First</a> + <a href="{{ paginator.previous }}"><span class="icon">←</span> Page {{ paginator.current_index - 1 }}</a> {% endif %} {% if paginator.next %} - <a href="{{ paginator.next }}">Page {{ paginator.current_index + 1 }} <span class="icon"></span></a> - <a href="{{ paginator.last }}">Last <span class="icon"></span></a> + <a href="{{ paginator.next }}">Page {{ paginator.current_index + 1 }} <span class="icon">→</span></a> + <a href="{{ paginator.last }}">Last <span class="icon">→|</span></a> {% endif %} </div> {% endif %} diff --git a/templates/weblog_archive.html b/templates/weblog_archive.html index b06bdb2..cd507ba 100644 --- a/templates/weblog_archive.html +++ b/templates/weblog_archive.html @@ -9,7 +9,7 @@ Weblog archive - Yaroslav's weblog {% set section = get_section(path="weblog/_index.md") %} <div class="post-container"> {% for year, posts in section.pages | group_by(attribute="year") %} - <h3>{{ year }}</h3> + <h2>{{ year }}</h2> <ul> {% for post in posts %} <li><span class="publish-date">{{ post.date | date }}</span> - <a href="{{ post.permalink }}">{{ post.title }}</a></li> |