matthias
/
WhisperMaPhone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move colors to settings, style tweaks 

* Drastically decreased the line width
* Add vertical margin above the time stamp
* Change the Permalink button to Link
* Move the link button to the right of the timestamp
*
This commit is contained in:
MatthiasSaihttam 2021-10-21 15:44:14 -04:00
parent ef4f7d7aca
commit db607ec4b1
5 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
main/settings_context_processor.py Normal file
View File

@ -0,0 +1,8 @@
from django.conf import settings
def add_settings(request):
return {
"settings": {
"COLORS": settings.COLORS
}
}

30
main/static/main/main.css
View File

@ -1,24 +1,3 @@
:root {
/*Green and light pink (default light)*/
--background-color: #3E4B39;
--text-color: #F0EFEE;
--accent-color: #F9E2D6;
}
@media (prefers-color-scheme: dark) {
:root {
/*Background and text colors from Atom One Dark*/
--background-color: #23252E;
/*C9CED5*/
--text-color: #C5CBD3;
/*A lot of accent colors work with this one*/
/*Old, og: #78916e; AA compliant: #7F9875; AAA compliant: #96BD86 */
--accent-color: #7F9875;
/* Pink Official Green Forest Lime Dark theme-green Yellow Muted yellow */
/* #D787FF #5FAF87, #286546 #75a98a #78916e, #968540 #9a9168 */
}
}
html {
padding: 0;
margin: 0;
@ -46,7 +25,7 @@ body {
}
.main-wrap {
max-width: 900px;
max-width: 36em;
margin: 20px 30px;
}
@ -166,6 +145,7 @@ a {
overflow: auto;
font-size: 14px;
color: var(--accent-color);
margin-top: 16px;
}
.thought hr {
@ -179,17 +159,17 @@ a {
}
.permalink {
margin-right: 6px;
margin-left: 6px;
color: var(--text-color)
}
.permalink .button, .permalink .button:visited {
color: var(--accent-color);
margin-right: 4px;
margin-left: 2px;
}
.permalink .button:hover {
text-decoration: underline;
}
.permalink::after {
.permalink::before {
content: "•"
}

6
main/templates/whispermaphone/index.html
View File

@ -56,6 +56,9 @@
{% endif %}
{% endwith %}
<div class="thought-end">
<span class="permalink">
<a class="button" href="/?show={{thought.uuid}}">Link</a>
</span>
<span class="timestamp">
{% timezone thought.get_timezone %}
{{ thought.posted|time:"g:i a" }}
@ -65,9 +68,6 @@
{{ thought.get_season }}
{% endtimezone %}
</span>
<span class="permalink">
<a class="button" href="/?show={{thought.uuid}}">Permalink</a>
</span>
</div>
<hr>
</div>

16
main/templates/whispermaphone/page.html
View File

@ -17,6 +17,22 @@
.hidden {
display: none;
}
:root {
--background-color: {{ settings.COLORS.0 }};
--text-color: {{ settings.COLORS.1 }};
--accent-color: {{ settings.COLORS.2 }};
}
{% if settings.COLORS.3 %}
@media (prefers-color-scheme: dark) {
:root {
--background-color: {{ settings.COLORS.3 }};
--text-color: {{ settings.COLORS.4 }};
--accent-color: {{ settings.COLORS.5 }};
}
}
{% endif %}
</style>
</head>
<body>

7
whispermaphone/settings.py
View File

@ -33,6 +33,12 @@ ALLOWED_HOSTS = ["thoughts.learnerpages.com"]
if DEBUG:
ALLOWED_HOSTS = ["*"]
def split_string(string):
return string.split(",")
# A list of colors, background-color, accent-color, text-color. If there are six, first 3 are light and second 3 are dark
# DO NOT USE THE COLORS I USE. These values right here are black and white, if you're lazy, keep them
COLORS = config("COLORS", default="#FEFEFE,#222222,#999999", cast=split_string)
INSTALLED_APPS = [
"django.contrib.contenttypes",
@ -70,6 +76,7 @@ TEMPLATES = [
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
"main.settings_context_processor.add_settings"
],
},
},