From 3385d057b869ee762302a288246c9f4827b821a3 Mon Sep 17 00:00:00 2001 From: Bauke Date: Sat, 21 Jul 2018 01:56:22 +0200 Subject: [PATCH] Mobile/responsive changes: Added meta:viewport Changed divs to semantic tags Added #TOC and td style for <500px screens --- src/index.pug | 13 +++++++------ src/posts/june-2018.pug | 19 ++++++++++--------- src/posts/may-2018.pug | 19 ++++++++++--------- src/posts/template.pug | 19 ++++++++++--------- src/sass/_responsive.sass | 13 +++++++++++++ src/sass/post.sass | 4 +++- 6 files changed, 53 insertions(+), 34 deletions(-) diff --git a/src/index.pug b/src/index.pug index 4b10366..0c4db93 100644 --- a/src/index.pug +++ b/src/index.pug @@ -1,6 +1,7 @@ html(lang="en") head + meta(name="viewport", content="width=device-width, initial-scale=1.0") title Tildes Issue Log link(rel="stylesheet", href="css/common.css") link(rel="stylesheet", href="css/index.css") @@ -11,17 +12,17 @@ html(lang="en") div(id="wrapper") h1 Tildes Issue Log - div(id="posts") + section(id="posts") h1 Posts - div(class="post") + article(class="post") h2: a(href="posts/june-2018.html") June 2018 - div(class="post") + article(class="post") h2: a(href="posts/may-2018.html") May 2018 - div(class="post") + article(class="post") h2: a(href="posts/template.html") Post Template (for devs/writers) - div(id="footer") - h3: a(href="../index.html") Home + footer(id="footer") + h3: a(href="index.html") Home h3: a(href="#") To Top h3: a(href="https://tildes.net") Tildes h3 Built with diff --git a/src/posts/june-2018.pug b/src/posts/june-2018.pug index 2aae3b9..26728d2 100644 --- a/src/posts/june-2018.pug +++ b/src/posts/june-2018.pug @@ -1,6 +1,7 @@ html(lang="en") head + meta(name="viewport", content="width=device-width, initial-scale=1.0") title June 2018 link(rel="stylesheet", href="../css/common.css") link(rel="stylesheet", href="../css/post.css") @@ -11,8 +12,8 @@ html(lang="en") div(id="wrapper") h1 June 2018 - div(id="post") - div(id="toc") + section(id="post") + article(id="toc") h2 Table Of Contents ul li: a(href="#about") About @@ -33,11 +34,11 @@ html(lang="en") li: a(href="#opened") Opened li: a(href="#closed") Closed - div(id="about") + article(id="about") h2 About p The Tildes Issue Log is a monthly recurring post about the changes and progression that Tildes has made. Highlighting some of the newest additions and changes, as well as a complete table of every issue opened and closed in that month, along with some interesting statistics so you can get a look into the development process and a quick grasp of anything you may have missed. - div(id="feedback") + article(id="feedback") h2 Feedback p If anything is incorrect or you have anything that you'd like to see changed or added please | @@ -50,7 +51,7 @@ html(lang="en") | or comment on the posted topic on Tildes. p If you'd like to write a highlight section or want to contribute in any other way, feel free to do so. Like Tildes, this will remain entirely open-source. - div(id="highlights") + article(id="highlights") h2 Highlights h3(id="new-groups") New Groups p The first change to Tildes in June was the addition of 5 new groups: @@ -188,7 +189,7 @@ html(lang="en") a(href="https://tildes.net/user/Bauke") Bauke p Written Date: 2018-06-24 - div(id="statistics") + article(id="statistics") h2 Statistics p In the month of June 51 issues were opened and 19 issues were closed. p An average of 1.70 issues were opened and 0.63 issues were closed each day. @@ -285,7 +286,7 @@ html(lang="en") | : | 5 times. - div(id="daily-discussions") + article(id="daily-discussions") h2 Daily Discussions //- Table format should be like this: table @@ -400,7 +401,7 @@ html(lang="en") td Allowing user to post anonymously? td: a(href="https://tildes.net/~tildes.official/2x3") Click - div(id="issue-table") + article(id="issue-table") h2 Issue Table h3(id="opened") Opened table @@ -844,7 +845,7 @@ html(lang="en") td 2018/06/13 19:34:56 td 2018/06/14 09:20:19 - div(id="footer") + footer(id="footer") h3: a(href="../index.html") Home h3: a(href="#") To Top h3: a(href="https://tildes.net") Tildes diff --git a/src/posts/may-2018.pug b/src/posts/may-2018.pug index d94634d..e75ea84 100644 --- a/src/posts/may-2018.pug +++ b/src/posts/may-2018.pug @@ -1,6 +1,7 @@ html(lang="en") head + meta(name="viewport", content="width=device-width, initial-scale=1.0") title May 2018 link(rel="stylesheet", href="../css/common.css") link(rel="stylesheet", href="../css/post.css") @@ -11,8 +12,8 @@ html(lang="en") div(id="wrapper") h1 May 2018 - div(id="post") - div(id="toc") + section(id="post") + article(id="toc") h2 Table Of Contents ul li: a(href="#about") About @@ -27,7 +28,7 @@ html(lang="en") li: a(href="#opened") Opened li: a(href="#closed") Closed - div(id="about") + article(id="about") h2 About p I thought some people might be interested in seeing the progression of Tildes in a nice, digestible way. So I thought a "dev blog" of sorts would be a good way to do this. This is just a test post to see find out what you guys think about it. p I'd also like to say this was entirely inspired by @@ -41,7 +42,7 @@ html(lang="en") | . | As I love reading through those about the progress osu! is making, which is one of my favorite games. - div(id="feedback") + article(id="feedback") h2 Feedback p If anything is incorrect or you have anything that you'd like to see changed or added please | @@ -54,20 +55,20 @@ html(lang="en") | or comment on the posted topic on Tildes. p If you'd like to write a highlight section or want to contribute in any other way, feel free to do so. Like Tildes, this will remain entirely open-source. - div(id="highlights") + article(id="highlights") h2 Highlights p I wasn't around in the month of May, so I wouldn't really know where to start by summarizing some highlights of what happened but for June I wouldn't mind trying to do this. This would be the most interesting part of the post and would feature some important stuff that happened and notable changes. - div(id="statistics") + article(id="statistics") h2 Statistics p In May, a total of 91 issues were opened and 27 were closed. p I plan on adding more statistics, such as average time to close, but for now there's not much else as I just want to get this out there before I work on much more. - div(id="daily-discussions") + article(id="daily-discussions") h2 Daily Discussions p The Daily Discussions weren't collected for May. - div(id="issue-table") + article(id="issue-table") h2 Issue Table h3(id="opened") Opened table @@ -799,7 +800,7 @@ html(lang="en") td 2018/05/31 23:12:06 td 2018/05/31 23:15:52 - div(id="footer") + footer(id="footer") h3: a(href="../index.html") Home h3: a(href="#") To Top h3: a(href="https://tildes.net") Tildes diff --git a/src/posts/template.pug b/src/posts/template.pug index 52430df..bfcbe8f 100644 --- a/src/posts/template.pug +++ b/src/posts/template.pug @@ -1,6 +1,7 @@ html(lang="en") head + meta(name="viewport", content="width=device-width, initial-scale=1.0") title Month Year link(rel="stylesheet", href="../css/common.css") link(rel="stylesheet", href="../css/post.css") @@ -11,8 +12,8 @@ html(lang="en") div(id="wrapper") h1 Month Year - div(id="post") - div(id="toc") + section(id="post") + article(id="toc") h2 Table Of Contents ul li: a(href="#about") About @@ -30,11 +31,11 @@ html(lang="en") li: a(href="#opened") Opened li: a(href="#closed") Closed - div(id="about") + article(id="about") h2 About p The Tildes Issue Log is a monthly recurring post about the changes and progression that Tildes has made. Highlighting some of the newest additions and changes, as well as a complete table of every issue opened and closed in that month, along with some interesting statistics so you can get a look into the development process and a quick grasp of anything you may have missed. - div(id="feedback") + article(id="feedback") h2 Feedback p If anything is incorrect or you have anything that you'd like to see changed or added please | @@ -47,7 +48,7 @@ html(lang="en") | or comment on the posted topic on Tildes. p If you'd like to write a highlight section or want to contribute in any other way, feel free to do so. Like Tildes, this will remain entirely open-source. - div(id="highlights") + article(id="highlights") h2 Highlights //- User written highlights of what happened with development and any notable changes, if applicable. @@ -83,12 +84,12 @@ html(lang="en") a(href="https://tildes.net/user/Bauke") Bauke p Written Date: 2018-07-16 - div(id="statistics") + article(id="statistics") h2 Statistics //- Any statistics that would be fun/interesting to read about, more info: issue #1 //- These are automatically generated, see the README. - div(id="daily-discussions") + article(id="daily-discussions") h2 Daily Discussions //- Table format should be like this: table @@ -103,11 +104,11 @@ html(lang="en") td Title of the discussion, excluding the "Daily Tildes Discussion" part. td: a(href="https://tildes.net/~tildes.official") Click - div(id="issue-table") + article(id="issue-table") h2 Issue Table //- These are automatically generated, see the README. - div(id="footer") + footer(id="footer") h3: a(href="../index.html") Home h3: a(href="#") To Top h3: a(href="https://tildes.net") Tildes diff --git a/src/sass/_responsive.sass b/src/sass/_responsive.sass index c86e1fc..a1ec032 100644 --- a/src/sass/_responsive.sass +++ b/src/sass/_responsive.sass @@ -1,3 +1,16 @@ @media screen and (max-width: 1350px) #wrapper width: 95vw + +@media screen and (max-width: 500px) + #post > #toc + float: none + margin: 0 + width: auto + background-color: rgba(0, 0, 0, 0.25) + + td + overflow: scroll + white-space: nowrap + text-overflow: clip + max-width: 20px diff --git a/src/sass/post.sass b/src/sass/post.sass index 55b4471..43ae085 100644 --- a/src/sass/post.sass +++ b/src/sass/post.sass @@ -41,7 +41,7 @@ padding-right: 0.5em padding-left: 0.5em - > div:not(#toc) + > *:not(#toc) padding: 1em 1em background-color: rgba(0, 0, 0, 0.25) @@ -122,3 +122,5 @@ &:nth-child(odd) > td background-color: $background + +@import '_responsive.sass'