diff --git a/app/components/youtube-link.gjs b/app/components/youtube-link.gjs new file mode 100644 index 0000000..619400f --- /dev/null +++ b/app/components/youtube-link.gjs @@ -0,0 +1,22 @@ +import { LinkTo } from '@ember/routing'; + +function href(youtubeID) { + return `https://www.youtube.com/watch?v=${youtubeID}`; +} + +function thumbnail(youtubeID) { + return `https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`; +} + + diff --git a/app/styles/app.css b/app/styles/app.css index e73d3b0..7fc751f 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -121,3 +121,31 @@ blockquote p:last-child { color: var(--text-light); font-size: 1rem; } + +.link-list { + display: grid; + + gap: 50px; + margin-top: 50px; + margin-bottom: 50px; +} + +.link-list>div { + border: 1px solid var(--accent); + padding: 4px 12px; +} + +.link-list .header { + grid-column: 1 / 3; + display: grid; + grid-template-columns: 3fr 1fr; + + /* color: #000; */ + font-weight: bold; + /* padding: 4px; */ + margin-bottom: 6px; +} + +.link-list .header .talk-date { + justify-self: end; +} diff --git a/app/templates/application.gjs b/app/templates/application.gjs index fb1f523..39f429c 100644 --- a/app/templates/application.gjs +++ b/app/templates/application.gjs @@ -19,6 +19,7 @@ class MyRouteComponent extends Component { {{!-- Projects --}} | Microblog + Code diff --git a/app/templates/talks.gjs b/app/templates/talks.gjs index 60f89a0..c879b1f 100644 --- a/app/templates/talks.gjs +++ b/app/templates/talks.gjs @@ -1,10 +1,15 @@ import RouteTemplate from 'ember-route-template'; +import YoutubeLink from '../components/youtube-link'; export default RouteTemplate( );