mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
Rejig highlights page
This commit is contained in:
Tom
parent
1090f40418
commit
90e4ba94c3
@ -23,8 +23,10 @@
|
||||
</a>
|
||||
|
||||
<section>
|
||||
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
|
||||
<section class="title-date-container">
|
||||
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: '%b %Y' }}</time>
|
||||
</section>
|
||||
<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@ -8,8 +8,10 @@
|
||||
</a>
|
||||
|
||||
<section>
|
||||
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<!-- <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time> -->
|
||||
<section class="title-date-container">
|
||||
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<time class="dt-modified" datetime="{{ post.last_modified_at | date_to_xmlschema }}">{{ page.last_modified_at | date: '%b %Y' }}</time>
|
||||
</section>
|
||||
<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
|
||||
</section>
|
||||
</article>
|
||||
@ -12,6 +12,7 @@
|
||||
@import "model_viewer"; //Styles for the 3D model viewer
|
||||
@import "mastodon_timeline";
|
||||
@import "night_mode_toggle";
|
||||
@import "highlights";
|
||||
|
||||
// The syntax highlighting css
|
||||
// generated with rougify style bw > code_style_bw.scss
|
||||
@ -34,6 +35,7 @@
|
||||
--theme-subtle-outline: oklch(90% 0 50);
|
||||
--theme-highlight-color: hsl(338, 75%, 60%);
|
||||
--theme-highlight-color-transparent: hsla(338, 75%, 60%, 33%);
|
||||
--theme-subtle-text-color: #606984;
|
||||
|
||||
// constrain width and center
|
||||
--body-max-width: 900px;
|
||||
@ -114,6 +116,19 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
// Used for both blog and project summaries
|
||||
section.title-date-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
// flex-wrap: wrap;
|
||||
time {
|
||||
font-size: 0.75em;
|
||||
text-align: right;
|
||||
color: var(--theme-subtle-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, .text-balance) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
@ -263,9 +278,9 @@ body:not(.has-wc) .has-wc {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
// h1 {
|
||||
// font-size: 1.5em !important;
|
||||
// }
|
||||
.MathJax {
|
||||
font-size: 0.8em !important;
|
||||
overflow-x: auto;
|
||||
|
||||
@ -1,81 +1,56 @@
|
||||
h2.blogroll-title {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr.blogroll {
|
||||
border: 0px solid rgba(128, 128, 128, 0.2);
|
||||
width: 66%;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
border: 0px solid rgba(128, 128, 128, 0.2);
|
||||
width: 66%;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
article.draft {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
section.highlights {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.highlights-more {
|
||||
margin-left: $left_pad;
|
||||
}
|
||||
|
||||
h1.highlights {
|
||||
font-size: 1.75rem;
|
||||
margin-left: $left_pad;
|
||||
margin-bottom: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
article.blogroll {
|
||||
padding-bottom: 0px;
|
||||
display: flex;
|
||||
padding-bottom: 0px;
|
||||
display: flex;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
time {
|
||||
display: block;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 14px;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-right: 1em;
|
||||
width: $thumbnail_image_size;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
margin: 0 1em 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
margin: 0;
|
||||
max-width: $thumbnail_image_size;
|
||||
max-height: $thumbnail_image_size;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
figure {
|
||||
margin-right: 1em;
|
||||
width: $thumbnail_image_size;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
margin: 0 1em 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
margin: 0;
|
||||
max-width: $thumbnail_image_size;
|
||||
max-height: $thumbnail_image_size;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (max-width: $horizontal_breakpoint),
|
||||
only screen and (max-height: $vertical_breakpoint)
|
||||
{
|
||||
hr.blogroll {border-width: 1px}
|
||||
article.blogroll {
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@media only screen and (max-width: $horizontal_breakpoint),
|
||||
only screen and (max-height: $vertical_breakpoint) {
|
||||
hr.blogroll {
|
||||
border-width: 1px;
|
||||
}
|
||||
article.blogroll {
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
a.highlights-more {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
a.highlights-more {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
43
_sass/highlights.scss
Normal file
43
_sass/highlights.scss
Normal file
@ -0,0 +1,43 @@
|
||||
section.highlights {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a.highlights-more {
|
||||
margin-left: $left_pad;
|
||||
}
|
||||
|
||||
h1.highlights {
|
||||
font-size: 1.75rem;
|
||||
// margin-left: $left_pad;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
a.heading {
|
||||
text-decoration: none;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
hr.heading {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2em;
|
||||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
hr.blogroll {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $horizontal_breakpoint),
|
||||
only screen and (max-height: $vertical_breakpoint) {
|
||||
a.highlights-more {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
1
blog.md
1
blog.md
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Blog
|
||||
layout: default
|
||||
permalink: /blog/
|
||||
excerpt: |
|
||||
I'm Tom Hodson. Welcome to my little home on the web! There's a blog, a cv and some projects to look at.
|
||||
mathjax: false
|
||||
|
||||
@ -3,12 +3,11 @@ title: Home
|
||||
layout: default
|
||||
excerpt: |
|
||||
Hi, I'm Tom Hodson. Welcome to my little home on the web.
|
||||
permalink: /highlights
|
||||
permalink: /
|
||||
mathjax: false
|
||||
img:
|
||||
src: /assets/images/avatar.jpeg
|
||||
alt: A picture of me.
|
||||
permalink: /
|
||||
head: |
|
||||
<link rel="stylesheet" href="/node_modules/@idotj/mastodon-embed-timeline/dist/mastodon-timeline.min.css">
|
||||
<script src="/node_modules/@idotj/mastodon-embed-timeline/dist/mastodon-timeline.umd.js"></script>
|
||||
@ -18,7 +17,8 @@ head: |
|
||||
Welcome to my little home on the web! Below you'll find recent blog posts, projects and mastodon toots. You'll also find links to the web version of my thesis <a href = "/thesis/4_Amorphous_Kitaev_Model/4.2_AMK_Methods.html#:~:text=Figure 1:,on the torus.">(with animations!)</a> and my <a href="/cv/">CV</a>.
|
||||
|
||||
<section class = "highlights">
|
||||
<h1 class = "highlights">Posts</h1>
|
||||
<a href = "/blog/" class="heading"><h1 class = "highlights">Posts</h1></a>
|
||||
<hr class="heading">
|
||||
{% for post in site.posts limit:5 %}
|
||||
{% include post_summary.html %}
|
||||
{% endfor %}
|
||||
@ -27,7 +27,8 @@ Welcome to my little home on the web! Below you'll find recent blog posts, proje
|
||||
</section>
|
||||
|
||||
<section class = "highlights">
|
||||
<h1 class = "highlights">Projects</h1>
|
||||
<a href = "/projects/" class = "heading"><h1 class = "highlights">Projects</h1></a>
|
||||
<hr class="heading">
|
||||
{% for post in site.projects limit:5 %}
|
||||
{% include project_summary.html %}
|
||||
{% endfor %}
|
||||
@ -35,7 +36,8 @@ Welcome to my little home on the web! Below you'll find recent blog posts, proje
|
||||
</section>
|
||||
|
||||
<section class = "highlights">
|
||||
<h1 class = "highlights">Toots</h1>
|
||||
<a href = "https://tech.lgbt/@Tomhodson" class = "heading"><h1 class = "highlights">Toots</h1></a>
|
||||
<hr class="heading">
|
||||
<div id="mt-container" class="mt-container">
|
||||
<div class="mt-body" role="feed">
|
||||
<div class="mt-loading-spinner"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user