~emersion/alps-dev

1

[PATCH 1/3] - Alps Theme: Begin to make friendly for medium-sized screens

Zach DeCook
Details
Message ID
<20200728125612.16632-1-zdecook@ccel.org>
DKIM signature
missing
Download raw message
Patch: +6 -2
---
 themes/alps/assets/style.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index f91a271..ae49f18 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -78,7 +78,7 @@ select {
}
/** { box-sizing: content-box; }*/
body { font-family: arial,sans-serif; font-size: 13px; padding: 0; margin: 0;
  min-width: 1024px; min-height: 100vh; display: flex; flex-direction: column;
  min-height: 100vh; display: flex; flex-direction: column;
}

input[type="text"],
@@ -127,6 +127,10 @@ footer { text-align: right; }


aside { flex: 0 0 180px; }
@media only screen and (max-width: 767px) {
  /* TODO: Make this accessible */
  aside { display: none; }
}
aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
aside a.active { font-weight: bold; color: black; text-decoration: none; }
aside img { display: block; }
@@ -440,7 +444,7 @@ main table tfoot {

.message-grid {
  display: grid;
  grid-template-columns: auto 1fr 10fr auto;
  grid-template-columns: auto minmax(100px, 2fr) 10fr auto;
  grid-template-rows: auto;
}

-- 
2.27.0

[PATCH 2/3] * Alps Theme Mobile: Use checkbox to show menu

Zach DeCook
Details
Message ID
<20200728125612.16632-2-zdecook@ccel.org>
In-Reply-To
<20200728125612.16632-1-zdecook@ccel.org> (view parent)
DKIM signature
missing
Download raw message
Patch: +10 -3
---
Javascript free, automatically hides the menu for medium-sized screens.

 themes/alps/assets/style.css | 10 ++++++++--
 themes/alps/mailbox.html     |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index ae49f18..d431f06 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -126,10 +126,16 @@ footer { text-align: right; }
.container { flex: 1 auto; display: flex; flex-direction: column; flex-wrap: nowrap; min-width: 0; }


aside { flex: 0 0 180px; }
aside {
  flex: 0 0 180px;
  max-width: 180px;
  transition: max-width .2s ease-in-out;
}
input.menuToggler { display: none; }
@media only screen and (max-width: 767px) {
  /* TODO: Make this accessible */
  aside { display: none; }
  input.menuToggler:not(:checked) ~ aside.autohide { max-width: 0; }
  input.menuToggler { display: block; }
}
aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
aside a.active { font-weight: bold; color: black; text-decoration: none; }
diff --git a/themes/alps/mailbox.html b/themes/alps/mailbox.html
index 0c70385..b52a635 100644
--- a/themes/alps/mailbox.html
+++ b/themes/alps/mailbox.html
@@ -2,7 +2,8 @@
{{template "nav.html" .}}

<div class="page-wrap">
  <aside>
  <input type="checkbox" class="menuToggler">
  <aside class='autohide'>
    <!-- the logo image, dimensions 200x32 may be present or not -->
    <a href="/compose" class="new">Compose&nbsp;Mail</a>
    {{range .Mailboxes}}
-- 
2.27.0
Reply to thread Export thread (mbox)