commit deae23c47ed17ab6d87cf6ddfbf1357dfb3eed38
parent ec2b4623593a7dee7e05861ab65c081ef279b8c7
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Thu, 3 Oct 2024 17:32:59 +0200
feat: add style adjustments for mobile view
Diffstat:
4 files changed, 55 insertions(+), 2 deletions(-)
diff --git a/Makefile b/Makefile
@@ -3,6 +3,20 @@ all:
make user-css
minify-css:
+ cat css/mobile.css | \
+ sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
+ tr -d '\t' | \
+ tr -d '\n' | \
+ tr -s ' ' ' ' | \
+ sed -E \
+ -e 's/\s*;\s*/;/g' \
+ -e 's/\s*:\s*/:/g' \
+ -e 's/\s*\{\s*/{/g' \
+ -e 's/\s*\}\s*/}/g' \
+ -e 's/\s*,\s*/,/g' \
+ -e 's/\s*>\s*/>/g' \
+ -e 's/\s*<\s*/</g' | \
+ tee css/mobile.min.css > /dev/null
cat css/desktop.css | \
sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
tr -d '\t' | \
@@ -33,7 +47,11 @@ minify-css:
tee css/dark.min.css > /dev/null
user-css:
- printf "/* Desktop Rules */\n" | tee css/user.css > /dev/null
+ printf "/* selfoss-tweaks all-in-one user style sheet */\n " | \
+ tee css/user.css > /dev/null
+ printf "/* Mobile Rules */\n" | tee --append css/user.css > /dev/null
+ cat css/mobile.min.css | tee --append css/user.css > /dev/null
+ printf "/* Desktop Rules */\n" | tee --append css/user.css > /dev/null
cat css/desktop.min.css | tee --append css/user.css > /dev/null
printf "\n/* Dark Mode Rules */\n" | tee --append css/user.css > /dev/null
cat css/dark.min.css | tee --append css/user.css > /dev/null
diff --git a/css/mobile.css b/css/mobile.css
@@ -0,0 +1,31 @@
+@media screen and (max-width: 641px) {
+
+ #nav-filter-title, #nav-filter, #nav-tags-title, #nav-sources-title {
+ font-size: 1.2em;
+ }
+ #nav-tags, #nav-sources {
+ font-size: 1.5em;
+ }
+ #search > input[type="search"], #search-button {
+ width: 100%;
+ margin-left: 10px; /* only necessary for search-button */
+ }
+
+ .entry-title {
+ font-size: 1.5em;
+ }
+ .entry-tags, .entry-source, .entry-separator, .entry-author, .entry-datetime, .entry-readtime {
+ font-size: 1.2em;
+ }
+ .entry-content {
+ font-size: 1.15em;
+}
+
+ /* makes the toolbar come up on mouse hover */
+ .entry:not(.expanded) .entry-toolbar {
+ display: block;
+ border-bottom: 2px solid grey;
+ border-top: none;
+ }
+
+}
diff --git a/css/mobile.min.css b/css/mobile.min.css
@@ -0,0 +1 @@
+@media screen and (max-width:641px){#nav-filter-title,#nav-filter,#nav-tags-title,#nav-sources-title{font-size:1.2em;}#nav-tags,#nav-sources{font-size:1.5em;}#search>input[type="search"],#search-button{width:100%;margin-left:10px;}.entry-title{font-size:1.5em;}.entry-tags,.entry-source,.entry-separator,.entry-author,.entry-datetime,.entry-readtime{font-size:1.2em;}.entry-content{font-size:1.15em;}.entry:not(.expanded) .entry-toolbar{display:block;border-bottom:2px solid grey;border-top:none;}}
+\ No newline at end of file
diff --git a/css/user.css b/css/user.css
@@ -1,4 +1,6 @@
-/* Desktop Rules */
+/* selfoss-tweaks all-in-one user style sheet */
+ /* Mobile Rules */
+@media screen and (max-width:641px){#nav-filter-title,#nav-filter,#nav-tags-title,#nav-sources-title{font-size:1.2em;}#nav-tags,#nav-sources{font-size:1.5em;}#search>input[type="search"],#search-button{width:100%;margin-left:10px;}.entry-title{font-size:1.5em;}.entry-tags,.entry-source,.entry-separator,.entry-author,.entry-datetime,.entry-readtime{font-size:1.2em;}.entry-content{font-size:1.15em;}.entry:not(.expanded) .entry-toolbar{display:block;border-bottom:2px solid grey;border-top:none;}}/* Desktop Rules */
@media screen and (min-width:641px){.entry:not(.expanded) .entry-toolbar{display:block;padding:0px;background:inherit;border:0;margin-top:-2px;opacity:0.0;}.entry:not(.expanded):hover .entry-toolbar{opacity:1.0;}}
/* Dark Mode Rules */
@media (prefers-color-scheme:dark){html,body,#content>.entry.expanded.selected{color:#fff;background-color:#2e3436;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');}#content>.entry.expanded.selected>.entry-title{color:#fff;}#nav-open{padding:10px;border:none;border-radius:2px;background-color:#272325;cursor:pointer;margin-left:15px;margin-right:15px;margin-top:5px;font-size:0.9em;text-align:center;}a,.entry-content a{color:#8af2ea;}button{color:white;}.entry.unread .entry-title{color:#eeeeec;}.entry-title{color:#999999;}.source-edit-form{color:#cececc;}.source-title{color:#eeeeec;}.source-add{color:inherit;}.entry,.source{background:#2e343666;border:1px solid #fff0;}.entry.selected{background:#0D1211;border-color:#444F4E;}.entry-toolbar{border-top-color:#444F4E;background-color:#0D1211;}.entry-smartphone-share button,.entry-toolbar button,.entry-toolbar a{color:#fff;}.refresh-source,#nav-toolbar,#nav-refresh,#nav-settings,#nav-logout{color:#fff;}#fullscreen-entry{background:transparent;}.source-showparams.saved color:white !important;}}
\ No newline at end of file
