Move news styles into `#news > style`

This way it'll use the CSS defined for the HTML its using.
main
Isaiah Odhner 2019-10-10 00:02:55 -04:00
parent 5d7d135ed8
commit 4b074f6cc4
4 changed files with 53 additions and 21 deletions

View File

@ -101,6 +101,28 @@
Also: paste a URL to an image, and JS Paint will load it, as an alternative to <b>File > Load from URL</b>.
</p>
</article>
<style>
.news-entry {
background: white;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
max-width: 30em;
margin: 10px;
}
.news-entry > h1 {
font-size: 1.3em;
margin: 0;
margin-bottom: 0.5em;
}
.news-entry > time {
font-size: 1.3em;
color: gray;
}
.news-entry .new {
color: green;
}
</style>
</div>
<script

View File

@ -590,6 +590,10 @@ function show_news(){
// console.log("LATEST MEWS:", $latest_news);
// console.log("LATEST ENTRY:", latest_entry);
$latest_news_style = $latest_news.find("style");
$this_version_news.find("style").remove();
$latest_news.append($latest_news_style); // in case $this_version_news is $latest_news
$news_window.$content.append($latest_news.removeAttr("hidden"));
$news_window.center();

View File

@ -399,24 +399,3 @@ html, body, .jspaint {
max-height: calc(100vh - 50px);
}
}
.news-entry {
background: white;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
max-width: 30em;
margin: 10px;
}
.news-entry > h1 {
font-size: 1.3em;
margin: 0;
margin-bottom: 0.5em;
}
.news-entry > time {
font-size: 1.3em;
color: gray;
}
.news-entry .new {
color: green;
}

View File

@ -12,4 +12,31 @@
Anyway, as I've said before, the JS no longer stands for JavaScript, it's Jarvis's Spectre Paint,
named after the AI that helps maintain this project.
</article>
<style>
#news {
background: black;
color: lime;
}
.news-entry {
background: rgba(0, 255, 0, 0.2);
color: lime;
border-radius: 5px;
border: 1px solid green;
padding: 10px;
max-width: 30em;
margin: 10px;
}
.news-entry > h1 {
font-size: 1.3em;
margin: 0;
margin-bottom: 0.5em;
}
.news-entry > time {
font-size: 1.3em;
color: green;
}
.news-entry .new {
color: yellow;
}
</style>
</div>