From 9bf76a22492f5eef0bba148c16b4e4ccb546237b Mon Sep 17 00:00:00 2001 From: Kody Date: Tue, 19 Sep 2023 10:59:31 +0200 Subject: [PATCH] Add UTC in popular; Change CSS to make table Having the last line not horizontally centered bothers me. So let's use flexbox this time! --- css/styles.css | 2 +- css/styles.css.map | 2 +- css/styles.scss | 36 +++++++++++++++++++++--------------- index.php | 9 +++++---- routing.php | 2 +- 5 files changed, 29 insertions(+), 22 deletions(-) diff --git a/css/styles.css b/css/styles.css index 3a18308..9724912 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1 @@ -body{background-color:#efefef;color:#000;font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;margin:0 auto;max-width:900px}header{background:#fff;border-radius:10px;margin:1rem .5rem 0;padding:1rem 1.5rem}header h1{font-size:1.5rem;margin:0}@media screen and (min-width: 500px){header h1{font-size:2rem}}header a{color:inherit;text-decoration:none}main{padding:1rem 2rem}main h2{font-size:1.5rem;margin:1rem 0;text-align:center}main h2 span{font-size:1.2rem}main form{line-height:2rem}main button{cursor:pointer}main .tz-table{column-gap:1rem;display:grid;grid-template-columns:repeat(1, 1fr);row-gap:1rem;text-align:center}@media screen and (min-width: 440px){main .tz-table{grid-template-columns:repeat(2, 1fr)}}@media screen and (min-width: 630px){main .tz-table{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 820px){main .tz-table{grid-template-columns:repeat(4, 1fr)}}footer{color:gray;font-size:.7rem;margin-top:1rem;padding:1rem;text-align:center}@media screen and (prefers-color-scheme: dark){body{background-color:#111;color:#fff}header{background:#000}}/*# sourceMappingURL=styles.css.map */ +body{background-color:#efefef;color:#000;font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;margin:0 auto;max-width:900px}header{background:#fff;border-radius:10px;margin:1rem .5rem 0;padding:1rem 1.5rem}header h1{font-size:1.5rem;margin:0}@media screen and (min-width: 500px){header h1{font-size:2rem}}header a{color:inherit;text-decoration:none}main{padding:1rem 2rem}main h2{font-size:1.5rem;margin:1rem 0;text-align:center}main h2 span{font-size:1.2rem}main form{line-height:2rem}main button{cursor:pointer}main .tz-table{display:flex;flex-wrap:wrap;justify-content:center;text-align:center}main .tz-table .tz-table-element{flex:0 0 calc(100% - 1rem);margin:1rem .5rem}@media screen and (min-width: 440px){main .tz-table .tz-table-element{flex:0 0 calc(50% - 1rem)}}@media screen and (min-width: 630px){main .tz-table .tz-table-element{flex:0 0 calc(33% - 1rem)}}@media screen and (min-width: 820px){main .tz-table .tz-table-element{flex:0 0 calc(25% - 1rem)}}footer{color:gray;font-size:.7rem;margin-top:1rem;padding:1rem;text-align:center}@media screen and (prefers-color-scheme: dark){body{background-color:#111;color:#fff}header{background:#000}}/*# sourceMappingURL=styles.css.map */ diff --git a/css/styles.css.map b/css/styles.css.map index e093412..0266b58 100644 --- a/css/styles.css.map +++ b/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA,KACE,yBACA,WACA,gGACA,cACA,gBAGF,OACE,gBACA,mBACA,oBACA,oBAEA,UACE,iBACA,SAEA,qCAJF,UAKI,gBAIJ,SACE,cACA,qBAIJ,KACE,kBAEA,QACE,iBACA,cACA,kBAEA,aACE,iBAIJ,UACE,iBAGF,YACE,eAGF,eACE,gBACA,aACA,qCACA,aACA,kBAEA,qCAPF,eAQI,sCAGF,qCAXF,eAYI,sCAGF,qCAfF,eAgBI,sCAKN,OACE,WACA,gBACA,gBACA,aACA,kBAGF,+CACE,KACE,sBACA,WAGF,OACE","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA,KACE,yBACA,WACA,gGACA,cACA,gBAGF,OACE,gBACA,mBACA,oBACA,oBAEA,UACE,iBACA,SAEA,qCAJF,UAKI,gBAIJ,SACE,cACA,qBAIJ,KACE,kBAEA,QACE,iBACA,cACA,kBAEA,aACE,iBAIJ,UACE,iBAGF,YACE,eAGF,eACE,aACA,eACA,uBACA,kBAIA,iCACE,2BACA,kBAEA,qCAJF,iCAKI,2BAGF,qCARF,iCASI,2BAGF,qCAZF,iCAaI,2BAMR,OACE,WACA,gBACA,gBACA,aACA,kBAGF,+CACE,KACE,sBACA,WAGF,OACE","file":"styles.css"} \ No newline at end of file diff --git a/css/styles.scss b/css/styles.scss index 02b612f..743cd95 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -49,22 +49,28 @@ main { } .tz-table { - column-gap: 1rem; - display: grid; - grid-template-columns: repeat(1, 1fr); - row-gap: 1rem; + display: flex; + flex-wrap: wrap; + justify-content: center; text-align: center; - - @media screen and (min-width: 440px) { - grid-template-columns: repeat(2, 1fr); - } - - @media screen and (min-width: 630px) { - grid-template-columns: repeat(3, 1fr); - } - - @media screen and (min-width: 820px) { - grid-template-columns: repeat(4, 1fr); + + $vertical-spacing: 1rem; + + .tz-table-element { + flex: 0 0 calc(100% - $vertical-spacing); + margin: 1rem calc($vertical-spacing / 2); + + @media screen and (min-width: 440px) { + flex: 0 0 calc(50% - $vertical-spacing); + } + + @media screen and (min-width: 630px) { + flex: 0 0 calc(33% - $vertical-spacing); + } + + @media screen and (min-width: 820px) { + flex: 0 0 calc(25% - $vertical-spacing); + } } } } diff --git a/index.php b/index.php index f150021..4345fe0 100644 --- a/index.php +++ b/index.php @@ -18,7 +18,8 @@ $popTZ = [ 'Asia/Dubai', 'Asia/Bangkok', 'Asia/Tokyo', - 'Australia/Sydney' + 'Australia/Sydney', + 'UTC' ]; // Micro-routing @@ -93,7 +94,7 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {

In popular time zones

-
+
() @@ -121,13 +122,13 @@ if (isset($_POST['datetime']) && isset($_POST['timezone'])) {

- Fill out this form to make a page that shows a set date and time in the visitor's time zone. + Fill out this form to make a page that shows a set date and time in the visitor's time zone.
It will also show the time in other popular time zones.

  - +
diff --git a/routing.php b/routing.php index 9b08595..7c22335 100644 --- a/routing.php +++ b/routing.php @@ -1,5 +1,5 @@