colors and titles
This commit is contained in:
parent
ae238c90f8
commit
b56167a703
5 changed files with 53 additions and 8 deletions
|
@ -1,5 +1,7 @@
|
|||
:root {
|
||||
--fg: rgb(240, 240, 240);
|
||||
--blue: rgb(110, 194, 240);
|
||||
--title: rgb(110, 194, 240);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
@ -41,9 +43,8 @@ header {
|
|||
}
|
||||
|
||||
.index {
|
||||
padding-top: 16px;
|
||||
.item {
|
||||
border-bottom: 1px solid blueviolet;
|
||||
//border-bottom: 1px solid blueviolet;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
|
@ -51,7 +52,14 @@ header {
|
|||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
h1 {
|
||||
color: var(--title);
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
}
|
||||
h2 {
|
||||
border-bottom: 1px solid pink;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
|
@ -77,6 +85,7 @@ header {
|
|||
}
|
||||
.archive {
|
||||
text-align: center;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
&.archive {
|
||||
h2.week {
|
||||
|
@ -95,6 +104,10 @@ header {
|
|||
}
|
||||
}
|
||||
.item {
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: initial;
|
||||
}
|
||||
.comments {
|
||||
text-align: right;
|
||||
padding-right: 4px;
|
||||
|
@ -104,6 +117,18 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
@media(max-width:768px) {
|
||||
.index {
|
||||
.item {
|
||||
a {
|
||||
h1, h2 {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.overlay {
|
||||
position: absolute;
|
||||
|
|
|
@ -20,7 +20,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: rgb(128, 128, 255)
|
||||
color: var(--blue)
|
||||
}
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
|
@ -38,12 +38,19 @@ video, .poster {
|
|||
min-height: 100vh;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.item-title {
|
||||
color: var(--title);
|
||||
text-decoration: underline;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.title {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14pt;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid pink;
|
||||
text-wrap: balance;
|
||||
|
@ -58,6 +65,7 @@ video, .poster {
|
|||
padding-bottom: 0px;
|
||||
}
|
||||
@media(max-width:768px) {
|
||||
.item-title,
|
||||
.title,
|
||||
.byline {
|
||||
padding-left: 4px;
|
||||
|
|
|
@ -3,7 +3,8 @@ function renderItemInfo(data) {
|
|||
div = document.createElement('div')
|
||||
div.className = "content"
|
||||
div.innerHTML = `
|
||||
<div class="title">${data.title}</div>
|
||||
<h1 class="item-title">${item.title}</h1>
|
||||
<h2 class="title">${data.title}</h2>
|
||||
<div class="byline">${data.byline}</div>
|
||||
<figure>
|
||||
<img src="${data.icon}">
|
||||
|
@ -12,6 +13,9 @@ function renderItemInfo(data) {
|
|||
<a href="${data.link}">Open on ${data.site}</a>
|
||||
</div>
|
||||
`
|
||||
if (!item.title) {
|
||||
div.querySelector('item-title').remove()
|
||||
}
|
||||
document.querySelector(".content").replaceWith(div)
|
||||
}
|
||||
|
||||
|
@ -25,7 +29,8 @@ function renderItem(data) {
|
|||
div = document.createElement('div')
|
||||
div.className = "content"
|
||||
div.innerHTML = `
|
||||
<div class="title">${data.title}</div>
|
||||
<h1 class="item-title">${item.title}</h1>
|
||||
<h2 class="title">${data.title}</h2>
|
||||
<div class="byline">${data.byline}</div>
|
||||
<div class="player">
|
||||
<div class="video"></div>
|
||||
|
@ -38,6 +43,9 @@ function renderItem(data) {
|
|||
<a href="${data.link}">Open on ${data.site}</a>
|
||||
</div>
|
||||
`
|
||||
if (!item.title) {
|
||||
div.querySelector('item-title').remove()
|
||||
}
|
||||
|
||||
if (window.renderComments) {
|
||||
renderComments(div.querySelector('.comments'), data)
|
||||
|
|
|
@ -52,6 +52,10 @@
|
|||
<script>
|
||||
var comments = {{ comments }};
|
||||
var user = {{ user }};
|
||||
var item = {
|
||||
id: {{ item.id }},
|
||||
title: '{{ item.title|escapejs }}'
|
||||
};
|
||||
</script>
|
||||
{% compress js file m %}
|
||||
<script src="/static/js/utils.js"></script>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<a href="{{ item.get_absolute_url }}">
|
||||
<div class="info">
|
||||
<h1>{{ item.title }}</h1>
|
||||
{{ item.data.title }}
|
||||
<h2>{{ item.data.title }}</h2>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src={{ item.data.thumbnail }}>
|
||||
|
|
Loading…
Reference in a new issue