From 4c3fc4ab3f012afc48be15193595c6b945496288 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sat, 12 Jun 2021 00:56:45 +0200 Subject: Use SCSS for stylesheets --- theme/admin/rsrc/css/import/_font-awesome.scss | 138 +++++++++++++++++++++++++ theme/admin/rsrc/css/import/_fonts.scss | 32 ++++++ theme/admin/rsrc/css/import/_responsive.scss | 80 ++++++++++++++ 3 files changed, 250 insertions(+) create mode 100644 theme/admin/rsrc/css/import/_font-awesome.scss create mode 100644 theme/admin/rsrc/css/import/_fonts.scss create mode 100644 theme/admin/rsrc/css/import/_responsive.scss (limited to 'theme/admin/rsrc/css/import') diff --git a/theme/admin/rsrc/css/import/_font-awesome.scss b/theme/admin/rsrc/css/import/_font-awesome.scss new file mode 100644 index 0000000..448491f --- /dev/null +++ b/theme/admin/rsrc/css/import/_font-awesome.scss @@ -0,0 +1,138 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Main +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa { + font: normal normal normal 14px/1 "FontAwesome"; + font-size: inherit; + speak: none; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# FontAwesome Icons +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +.fa-bug:before { + content: "\f188"; +} + +.fa-key:before { + content: "\f084"; +} + +.fa-link:before { + content: "\f0c1"; +} + +.fa-bold:before { + content: "\f032"; +} + +.fa-code:before { + content: "\f121"; +} + +.fa-user:before { + content: "\f007"; +} + +.fa-book:before { + content: "\f02d"; +} + +.fa-italic:before { + content: "\f033"; +} + +.fa-header:before { + content: "\f1dc"; +} + +.fa-search:before { + content: "\f002"; +} + +.fa-trash-o:before { + content: "\f014"; +} + +.fa-sign-in:before { + content: "\f090"; +} + +.fa-clock-o:before { + content: "\f017"; +} + +.fa-list-ul:before { + content: "\f0ca"; +} + +.fa-list-ol:before { + content: "\f0cb"; +} + +.fa-database:before { + content: "\f1c0"; +} + +.fa-language:before { + content: "\f1ab"; +} + +.fa-sign-out:before { + content: "\f08b"; +} + +.fa-dashboard:before { + content: "\f0e4"; +} + +.fa-picture-o:before { + content: "\f03e"; +} + +.fa-envelope-o:before { + content: "\f003"; +} + +.fa-arrow-left:before { + content: "\f060"; +} + +.fa-quote-right:before { + content: "\f10e"; +} + +.fa-user-secret:before { + content: "\f21b"; +} + +.fa-file-text-o:before { + content: "\f0f6"; +} + +.fa-newspaper-o:before { + content: "\f1ea"; +} + +.fa-arrow-right:before { + content: "\f061"; +} + +.fa-external-link:before { + content: "\f08e"; +} + +.fa-github-square:before { + content: "\f092"; +} + +.fa-pencil-square-o:before { + content: "\f044"; +} + +.fa-exclamation-triangle:before { + content: "\f071"; +} diff --git a/theme/admin/rsrc/css/import/_fonts.scss b/theme/admin/rsrc/css/import/_fonts.scss new file mode 100644 index 0000000..2145065 --- /dev/null +++ b/theme/admin/rsrc/css/import/_fonts.scss @@ -0,0 +1,32 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Font Awesome" [4.7.0] (by Fontello): SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "FontAwesome"; + font-weight: 400; + src: url("../font/font-awesome-fontello.woff2") format("woff2"); +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Kadwa": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Kadwa"; + font-weight: 400; + src: url("../font/kadwa-n-400.woff2") format("woff2"); +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Font "Ruda": SIL Open Font License (OFL) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@font-face { + font-family: "Ruda"; + font-weight: 400; + src: url("../font/ruda-n-400.woff2") format("woff2"); +} + +@font-face { + font-family: "Ruda"; + font-weight: 700; + src: url("../font/ruda-n-700.woff2") format("woff2"); +} diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss new file mode 100644 index 0000000..a8275bf --- /dev/null +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -0,0 +1,80 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #1 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 50em) { + html { + font-size: 1.125rem; /*18px*/ + background-image: none !important; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #2 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 37.5em) { + .flex.flex-responsive { + display: block; + width: auto; + + > .flex-item { + width: 100%; + + + .flex-item { + border-top: 0.05rem solid #AAA; + } + } + } + + #main-navi { + font-size: 1rem; + + li { + span { + display: none; + } + + .fa { + margin-right: 0; + } + } + + a { + padding: 0.5rem; + } + } + + .flex-emoticons { + display: none; + } + + .actions { + float: none; + display: flex; + width: 100%; + flex-grow: 1; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + + li { + flex-grow: 1; + + + li { + border-left: none; + } + } + } + + .actions-before { + float: none; + } + + .arguments { + font-size: 0.5rem; + line-height: 0.75rem; + } + + main { + padding: 0.5rem; + } +} -- cgit v1.2.3 From e5da1f532334a265e1b1c88d2a942e92654370d6 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sun, 13 Jun 2021 00:14:38 +0200 Subject: Replace the flex layout in favor of a grid layout This commit replaces the initial CSS flexbox layout for forms of the admin theme with a more elegant approach called "grid layout". :) Some interesting information: https://www.w3schools.com/css/css_grid.asp https://blog.logrocket.com/flexbox-vs-css-grid/ --- theme/admin/html/auth.php | 26 ++++--- theme/admin/html/database.php | 6 +- theme/admin/html/page/form.php | 86 +++++++++++---------- theme/admin/html/page/search.php | 6 +- theme/admin/html/post/form.php | 86 +++++++++++---------- theme/admin/html/post/search.php | 6 +- theme/admin/html/user/form.php | 98 +++++++++++++----------- theme/admin/rsrc/css/import/_responsive.scss | 19 ++--- theme/admin/rsrc/css/main.css | 108 +++++++++++---------------- theme/admin/rsrc/css/main.css.map | 2 +- theme/admin/rsrc/css/main.scss | 99 ++++++++++++------------ 11 files changed, 265 insertions(+), 277 deletions(-) (limited to 'theme/admin/rsrc/css/import') diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php index c1dedda..a7b8b74 100644 --- a/theme/admin/html/auth.php +++ b/theme/admin/html/auth.php @@ -14,21 +14,23 @@
-
-
-
-
-
+
+ + +
+
-
-
-
-
-
-
+ + + +
+
-
+ +
diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php index 5062ae1..b661a28 100644 --- a/theme/admin/html/database.php +++ b/theme/admin/html/database.php @@ -14,17 +14,17 @@
-
+
-
+
-
+
diff --git a/theme/admin/html/page/form.php b/theme/admin/html/page/form.php index d26b207..eee61bf 100644 --- a/theme/admin/html/page/form.php +++ b/theme/admin/html/page/form.php @@ -12,49 +12,55 @@ -
-
-
-
-
id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
+
+ + +
+ id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
-
-
-
-
- -
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
+ +
  • @@ -70,23 +76,23 @@
-
+
    $explanation):?>
-
+
-
+
-
+
diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php index a48f604..6506d34 100644 --- a/theme/admin/html/page/search.php +++ b/theme/admin/html/page/search.php @@ -2,10 +2,10 @@

text('search_page_desc')?>

-
+
-
+
@@ -14,4 +14,4 @@ -
\ No newline at end of file +
diff --git a/theme/admin/html/post/form.php b/theme/admin/html/post/form.php index e6966ea..58ac122 100644 --- a/theme/admin/html/post/form.php +++ b/theme/admin/html/post/form.php @@ -12,49 +12,55 @@ -
-
-
-
-
id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
+
+ + +
+ id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
-
-
-
-
- -
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
+ +
  • @@ -70,23 +76,23 @@
-
+
    $explanation):?>
-
+
-
+
-
+
diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php index 4476786..1289879 100644 --- a/theme/admin/html/post/search.php +++ b/theme/admin/html/post/search.php @@ -2,10 +2,10 @@

text('search_post_desc')?>

-
+
-
+
@@ -14,4 +14,4 @@ -
\ No newline at end of file +
diff --git a/theme/admin/html/user/form.php b/theme/admin/html/user/form.php index 970a6d9..7e370e5 100644 --- a/theme/admin/html/user/form.php +++ b/theme/admin/html/user/form.php @@ -12,55 +12,65 @@ -
-
-
-
-
id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
+
+ + +
+ id="form_id" name="id" type="number" placeholder="AUTO_INCREMENT" value="" />
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
-
-
-
-
-
+ + + +
+
-
-
-
-
+ + + +
+
-
+ +
  • @@ -76,23 +86,23 @@
-
+
    $explanation):?>
-
+
-
+
-
+
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index a8275bf..2d3d62a 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -12,19 +12,6 @@ # Responsive Level #2 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { - .flex.flex-responsive { - display: block; - width: auto; - - > .flex-item { - width: 100%; - - + .flex-item { - border-top: 0.05rem solid #AAA; - } - } - } - #main-navi { font-size: 1rem; @@ -43,10 +30,14 @@ } } - .flex-emoticons { + #emoticon-list-wrapper { display: none; } + .form-grid { + grid-template-columns: auto auto; + } + .actions { float: none; display: flex; diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css index d440684..2677f19 100644 --- a/theme/admin/rsrc/css/main.css +++ b/theme/admin/rsrc/css/main.css @@ -476,79 +476,63 @@ table, td { } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form flex-box +# Grids ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -form { - border: 0.05rem solid #AAA; -} - -.flex { - display: flex; - width: 100%; - justify-content: center; - overflow: hidden; - box-sizing: border-box; -} -.flex + .flex { - border-top: 0.05rem solid #AAA; -} - -.flex > .flex-item { - border-right: 0.05rem solid #AAA; - display: flex; - width: 100%; +.form-grid { + display: grid; + grid-template-columns: 8rem auto 8rem auto; + border-left: 0.05rem solid #AAA; + border-bottom: 0.05rem solid #AAA; } -.flex > .flex-item:last-child { - border-right: none; +.form-grid.two-columns { + grid-template-columns: auto auto; } -.flex > .flex-item > div { +.form-grid > label { display: flex; align-items: center; - padding: 0.5rem; - box-sizing: border-box; + background: #DDD; } -.flex > .flex-item > div + div { - border-left: 0.05rem solid #AAA; +.form-grid > label .fa { + margin-left: 0.5rem; + margin-right: 1rem; } - -.flex.flex-responsive > .flex-item { - width: 50%; -} - -.form-icon-flex { - background: #DDD; - width: 10%; - justify-content: center; +.form-grid-item, +.form-grid > label { + padding: 0.5rem; + border-top: 0.05rem solid #AAA; + border-right: 0.05rem solid #AAA; } -.form-label-flex { - background: #DDD; - width: 30%; - border-left: none !important; +.form-border-box { + border: 0.05rem solid #AAA; } - -.form-field-flex { - width: 60%; +.form-border-box.padding { + padding: 0.5rem; } - -.background { +.form-border-box.background { background: #DDD; } - -.flex-padding { - padding: 0.5rem; +.form-border-box.nobordertop { + border-top: none; } - -.flex-direction-column { - flex-direction: column; +.form-border-box + .form-border-box { + border-top: none; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form buttons ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#emoticon-list-wrapper { + display: flex; + width: 100%; + justify-content: center; + box-sizing: border-box; +} + #button-list-wrapper { border-bottom: 0.05rem solid #AAA; background: #EEE; + overflow: hidden; } .button-list { @@ -585,6 +569,9 @@ form { border: none; margin: 0; } +#content-editor-wrapper { + border-top: none; +} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form elements @@ -606,7 +593,7 @@ input:focus, select:focus, textarea:focus { textarea { font-family: "Kadwa", "sans-serif"; box-sizing: border-box; - display: inline-block; + display: block; resize: vertical; min-height: 15rem; line-height: 1.2rem; @@ -692,17 +679,6 @@ label:after { # Responsive Level #2 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { - .flex.flex-responsive { - display: block; - width: auto; - } - .flex.flex-responsive > .flex-item { - width: 100%; - } - .flex.flex-responsive > .flex-item + .flex-item { - border-top: 0.05rem solid #AAA; - } - #main-navi { font-size: 1rem; } @@ -716,10 +692,14 @@ label:after { padding: 0.5rem; } - .flex-emoticons { + #emoticon-list-wrapper { display: none; } + .form-grid { + grid-template-columns: auto auto; + } + .actions { float: none; display: flex; diff --git a/theme/admin/rsrc/css/main.css.map b/theme/admin/rsrc/css/main.css.map index 4f2ac93..3c7b8ab 100644 --- a/theme/admin/rsrc/css/main.css.map +++ b/theme/admin/rsrc/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AC5tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;AC7EF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["main.scss","import/_responsive.scss","import/_font-awesome.scss","import/_fonts.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAIC;EACC;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACG;EACA;EACA;;;AAIJ;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAIC;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAKH;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;;AAKH;AAAA;AAAA;AAGA;EACC;EACA;EAEA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;AAAA;EAEC;EACA;EACA;;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;;;AC9tBD;AAAA;AAAA;AAGA;EACC;IACC;AAAqB;IACrB;;;AAIF;AAAA;AAAA;AAGA;EACC;IACC;;EAGC;IACC;;EAGD;IACC;;EAIF;IACC;;;EAIF;IACC;;;EAGD;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAEA;IACC;;;EAKH;IACC;;;EAGD;IACC;IACA;;;EAGD;IACC;;;ACpEF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACxID;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss index c60f354..e00c60a 100644 --- a/theme/admin/rsrc/css/main.scss +++ b/theme/admin/rsrc/css/main.scss @@ -527,83 +527,72 @@ table, td { } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Form flex-box +# Grids ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -form { - border: 0.05rem solid #AAA; -} - -.flex { - display: flex; - width: 100%; - justify-content: center; - overflow: hidden; - box-sizing: border-box; +.form-grid { + display: grid; + grid-template-columns: 8rem auto 8rem auto; - + .flex { - border-top: 0.05rem solid #AAA; - } -} - -.flex > .flex-item { - border-right: 0.05rem solid #AAA; - display: flex; - width: 100%; + border-left: 0.05rem solid #AAA; + border-bottom: 0.05rem solid #AAA; - &:last-child { - border-right: none; + &.two-columns { + grid-template-columns: auto auto; } - > div { + > label { display: flex; align-items: center; - padding: 0.5rem; - box-sizing: border-box; + background: #DDD; - + div { - border-left: 0.05rem solid #AAA; + .fa { + margin-left: 0.5rem; + margin-right: 1rem; } } -} -.flex.flex-responsive > .flex-item { - width: 50%; -} - -.form-icon-flex { - background: #DDD; - width: 10%; - justify-content: center; + &-item, + > label { + padding: 0.5rem; + border-top: 0.05rem solid #AAA; + border-right: 0.05rem solid #AAA; + } } -.form-label-flex { - background: #DDD; - width: 30%; - border-left: none !important; -} +.form-border-box { + border: 0.05rem solid #AAA; -.form-field-flex { - width: 60%; -} + &.padding { + padding: 0.5rem; + } -.background { - background: #DDD; -} + &.background { + background: #DDD; + } -.flex-padding { - padding: 0.5rem; -} + &.nobordertop { + border-top: none; + } -.flex-direction-column { - flex-direction: column; + +.form-border-box { + border-top: none; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Form buttons ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +#emoticon-list-wrapper { + display: flex; + width: 100%; + justify-content: center; + box-sizing: border-box; +} + #button-list-wrapper { border-bottom: 0.05rem solid #AAA; background: #EEE; + overflow: hidden; } .button-list { @@ -641,6 +630,10 @@ form { #content-editor { border: none; margin: 0; + + &-wrapper { + border-top: none; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -664,7 +657,7 @@ input, select, textarea { textarea { font-family: "Kadwa", "sans-serif"; box-sizing: border-box; - display: inline-block; + display: block; resize: vertical; min-height: 15rem; line-height: 1.2rem; -- cgit v1.2.3 From d3b109fae0e246d01b0c73afd828347bcf5d2e86 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sun, 13 Jun 2021 19:46:34 +0200 Subject: Use grid layout for items in administration area Introduce a new 1/2/3-column CSS grid layout in the administration area for items on overview pages and in the search results. The column count of the grid depends on the users viewport width. In addition, the default value of the following configuration settings has been changed to 12 because 12 can also be divided by 2 and 3 which is useful for the 1/2/3-column grid layout. ADMIN.PAGE.LIST_SIZE = 12 ADMIN.POST.LIST_SIZE = 12 --- core/application.php | 4 +- theme/admin/html/403.php | 2 + theme/admin/html/404.php | 2 + theme/admin/html/auth.php | 2 + theme/admin/html/database.php | 2 + theme/admin/html/home.php | 3 +- theme/admin/html/main.php | 8 ++-- theme/admin/html/page/delete.php | 4 +- theme/admin/html/page/index.php | 6 ++- theme/admin/html/page/insert.php | 4 +- theme/admin/html/page/search.php | 4 +- theme/admin/html/page/update.php | 4 +- theme/admin/html/post/delete.php | 4 +- theme/admin/html/post/index.php | 6 ++- theme/admin/html/post/insert.php | 4 +- theme/admin/html/post/search.php | 4 +- theme/admin/html/post/update.php | 4 +- theme/admin/html/user/delete.php | 4 +- theme/admin/html/user/index.php | 4 +- theme/admin/html/user/insert.php | 4 +- theme/admin/html/user/update.php | 4 +- theme/admin/rsrc/css/import/_responsive.scss | 46 +++++++++++++----- theme/admin/rsrc/css/main.css | 71 ++++++++++++++++++++-------- theme/admin/rsrc/css/main.scss | 36 ++++++++++---- 24 files changed, 168 insertions(+), 68 deletions(-) (limited to 'theme/admin/rsrc/css/import') diff --git a/core/application.php b/core/application.php index be70f92..3c431f8 100644 --- a/core/application.php +++ b/core/application.php @@ -95,8 +95,8 @@ foreach($configuration as $name => $value) { # Set default configuration (for admin prefixes) #=============================================================================== foreach([ - 'ADMIN.PAGE.LIST_SIZE' => Application::get('PAGE.LIST_SIZE'), - 'ADMIN.POST.LIST_SIZE' => Application::get('POST.LIST_SIZE'), + 'ADMIN.PAGE.LIST_SIZE' => 12, # for 1/2/3-column grid layout + 'ADMIN.POST.LIST_SIZE' => 12, # for 1/2/3-column grid layout 'ADMIN.USER.LIST_SIZE' => Application::get('USER.LIST_SIZE'), 'ADMIN.PAGE.LIST_SORT' => Application::get('PAGE.LIST_SORT'), 'ADMIN.POST.LIST_SORT' => Application::get('POST.LIST_SORT'), diff --git a/theme/admin/html/403.php b/theme/admin/html/403.php index f9a0afd..7f23212 100644 --- a/theme/admin/html/403.php +++ b/theme/admin/html/403.php @@ -1,2 +1,4 @@ +

text('403_heading_text')?>

text('403_heading_desc')?>

+
diff --git a/theme/admin/html/404.php b/theme/admin/html/404.php index d53d1bc..7fb06d8 100644 --- a/theme/admin/html/404.php +++ b/theme/admin/html/404.php @@ -1,2 +1,4 @@ +

text('404_heading_text')?>

text('404_heading_desc')?>

+
diff --git a/theme/admin/html/auth.php b/theme/admin/html/auth.php index a7b8b74..45b7e14 100644 --- a/theme/admin/html/auth.php +++ b/theme/admin/html/auth.php @@ -1,3 +1,4 @@ +

text('authentication_text')?>

text('authentication_desc')?>

@@ -34,3 +35,4 @@
+ diff --git a/theme/admin/html/database.php b/theme/admin/html/database.php index b661a28..da41e68 100644 --- a/theme/admin/html/database.php +++ b/theme/admin/html/database.php @@ -1,3 +1,4 @@ +

text('overview_database_text')?>

text('overview_database_desc')?>

@@ -28,3 +29,4 @@
+ diff --git a/theme/admin/html/home.php b/theme/admin/html/home.php index 083ae30..5331fa8 100644 --- a/theme/admin/html/home.php +++ b/theme/admin/html/home.php @@ -1,3 +1,4 @@ +

text('overview_dashboard_text')?>

text('overview_dashboard_desc')?>

@@ -43,4 +44,4 @@

text('home_no_users')?>

- +
diff --git a/theme/admin/html/main.php b/theme/admin/html/main.php index 874ae81..699a742 100644 --- a/theme/admin/html/main.php +++ b/theme/admin/html/main.php @@ -38,11 +38,9 @@
-
-
- -
-
+ + +
  • Releases
    • diff --git a/theme/admin/html/page/delete.php b/theme/admin/html/page/delete.php index ccc569f..006090e 100644 --- a/theme/admin/html/page/delete.php +++ b/theme/admin/html/page/delete.php @@ -1,4 +1,6 @@ +

    text('delete_page')?>

    text('delete_page_desc')?>

    - \ No newline at end of file + +
    diff --git a/theme/admin/html/page/index.php b/theme/admin/html/page/index.php index 7067c40..bdc7f94 100644 --- a/theme/admin/html/page/index.php +++ b/theme/admin/html/page/index.php @@ -1,3 +1,4 @@ +

    text('page_overview')?>

    text('overview_page_desc')?>

    -
    +
    - \ No newline at end of file + +
    diff --git a/theme/admin/html/page/insert.php b/theme/admin/html/page/insert.php index 7442200..a77e47f 100644 --- a/theme/admin/html/page/insert.php +++ b/theme/admin/html/page/insert.php @@ -1,4 +1,6 @@ +

    text('insert_page')?>

    text('insert_page_desc')?>

    - \ No newline at end of file + +
    diff --git a/theme/admin/html/page/search.php b/theme/admin/html/page/search.php index 6506d34..145b0f9 100644 --- a/theme/admin/html/page/search.php +++ b/theme/admin/html/page/search.php @@ -1,3 +1,4 @@ +
    >

    text('title_page_search')?>

    text('search_page_desc')?>

    @@ -10,8 +11,9 @@
-
+
+ diff --git a/theme/admin/html/page/update.php b/theme/admin/html/page/update.php index 77a7eb2..ce51d2a 100644 --- a/theme/admin/html/page/update.php +++ b/theme/admin/html/page/update.php @@ -1,4 +1,6 @@ +

text('update_page')?>

text('update_page_desc')?>

- \ No newline at end of file + +
diff --git a/theme/admin/html/post/delete.php b/theme/admin/html/post/delete.php index 6654377..ed82197 100644 --- a/theme/admin/html/post/delete.php +++ b/theme/admin/html/post/delete.php @@ -1,4 +1,6 @@ +

text('delete_post')?>

text('delete_post_desc')?>

- \ No newline at end of file + +
diff --git a/theme/admin/html/post/index.php b/theme/admin/html/post/index.php index f884b05..83dd5dc 100644 --- a/theme/admin/html/post/index.php +++ b/theme/admin/html/post/index.php @@ -1,3 +1,4 @@ +

text('post_overview')?>

text('overview_post_desc')?>

-
+
- \ No newline at end of file + +
diff --git a/theme/admin/html/post/insert.php b/theme/admin/html/post/insert.php index dc32c24..9b7c588 100644 --- a/theme/admin/html/post/insert.php +++ b/theme/admin/html/post/insert.php @@ -1,4 +1,6 @@ +

text('insert_post')?>

text('insert_post_desc')?>

- \ No newline at end of file + +
diff --git a/theme/admin/html/post/search.php b/theme/admin/html/post/search.php index 1289879..00bd016 100644 --- a/theme/admin/html/post/search.php +++ b/theme/admin/html/post/search.php @@ -1,3 +1,4 @@ +
>

text('title_post_search')?>

text('search_post_desc')?>

@@ -10,8 +11,9 @@
-
+
+ diff --git a/theme/admin/html/post/update.php b/theme/admin/html/post/update.php index a577bec..aa3835d 100644 --- a/theme/admin/html/post/update.php +++ b/theme/admin/html/post/update.php @@ -1,4 +1,6 @@ +

text('update_post')?>

text('update_post_desc')?>

- \ No newline at end of file + +
diff --git a/theme/admin/html/user/delete.php b/theme/admin/html/user/delete.php index 01927b2..b500a12 100644 --- a/theme/admin/html/user/delete.php +++ b/theme/admin/html/user/delete.php @@ -1,6 +1,8 @@ +

text('delete_user')?>

text('delete_user_desc')?>

text('delete_user_warning')?>

- \ No newline at end of file + +
diff --git a/theme/admin/html/user/index.php b/theme/admin/html/user/index.php index aae8ee8..7e1d794 100644 --- a/theme/admin/html/user/index.php +++ b/theme/admin/html/user/index.php @@ -1,3 +1,4 @@ +

text('user_overview')?>

text('overview_user_desc')?>

    @@ -10,4 +11,5 @@
- \ No newline at end of file + + diff --git a/theme/admin/html/user/insert.php b/theme/admin/html/user/insert.php index 5cbdd06..7c7aba2 100644 --- a/theme/admin/html/user/insert.php +++ b/theme/admin/html/user/insert.php @@ -1,4 +1,6 @@ +

text('insert_user')?>

text('insert_user_desc')?>

- \ No newline at end of file + +
diff --git a/theme/admin/html/user/update.php b/theme/admin/html/user/update.php index e023925..ad12677 100644 --- a/theme/admin/html/user/update.php +++ b/theme/admin/html/user/update.php @@ -1,4 +1,6 @@ +

text('update_user')?>

text('update_user_desc')?>

- \ No newline at end of file + +
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index 2d3d62a..e387c98 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -1,17 +1,34 @@ -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 50em) { +@media only screen and (max-width: 90em /*1440px*/) { + .item-container.grid { + grid-template-columns: auto auto; + } +} + +@media only screen and (min-width: 62.5em /*1000px*/) { + #main-content { + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + } +} + +@media only screen and (max-width: 62.5em /*1000px*/) { + .item-container.grid { + grid-template-columns: auto; + } +} + +@media only screen and (max-width: 50em /*800px*/) { html { font-size: 1.125rem; /*18px*/ - background-image: none !important; } } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 37.5em) { +@media only screen and (max-width: 37.5em /*600px*/) { + #main-content { + padding: 0.5rem; + } + #main-navi { font-size: 1rem; @@ -34,6 +51,13 @@ display: none; } + .item-container.grid { + grid-column-gap: 0.75rem; + grid-row-gap: 0.75rem; + column-gap: 0.75rem; + row-gap: 0.75rem; + } + .form-grid { grid-template-columns: auto auto; } @@ -64,8 +88,4 @@ font-size: 0.5rem; line-height: 0.75rem; } - - main { - padding: 0.5rem; - } } diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css index 2677f19..f3a39c1 100644 --- a/theme/admin/rsrc/css/main.css +++ b/theme/admin/rsrc/css/main.css @@ -22,7 +22,7 @@ a:focus { # Headings ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ h1, h2, h3, h4, h5, h6 { - margin: 0; + margin-bottom: 0; text-transform: uppercase; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { @@ -33,6 +33,7 @@ h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa { } h1 { + margin-top: 0; font-size: 0.8rem; } @@ -81,10 +82,6 @@ body { flex-direction: column; } -main { - padding: 0.75rem; -} - /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Main content ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -93,9 +90,10 @@ main { width: 100%; background: #FFF; box-sizing: border-box; - border: 0.05rem solid #AAA; - border-top: none; - border-bottom: none; + padding: 0.75rem; +} +#main-content.wide { + max-width: 90rem; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -230,6 +228,7 @@ main { display: flex; box-sizing: border-box; justify-content: space-between; + margin-top: 0.75rem; } #site-navi > div { display: flex; @@ -387,9 +386,9 @@ table, td { # Item Element ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .item { - display: block; + display: flex; + flex-direction: column; border: 0.05rem solid #AAA; - margin-bottom: 1rem; clear: both; } .item header { @@ -398,6 +397,9 @@ table, td { position: sticky; top: 0; } +.item header h2 { + margin-top: 0; +} .item footer { border-top: 0.05rem solid #AAA; } @@ -430,6 +432,7 @@ table, td { padding: 0.75rem; overflow: hidden; font-family: inherit; + flex-grow: 1; } .item blockquote p { margin-bottom: 0; @@ -448,6 +451,15 @@ table, td { background: #EEE; border: 0.05rem solid #AAA; } +.item-container.grid { + width: 100%; + display: grid; + grid-template-columns: auto auto auto; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + column-gap: 1rem; + row-gap: 1rem; +} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Argument list @@ -665,20 +677,34 @@ label:after { margin-bottom: 1rem; } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 90em) { + .item-container.grid { + grid-template-columns: auto auto; + } +} +@media only screen and (min-width: 62.5em) { + #main-content { + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + } +} +@media only screen and (max-width: 62.5em) { + .item-container.grid { + grid-template-columns: auto; + } +} @media only screen and (max-width: 50em) { html { font-size: 1.125rem; /*18px*/ - background-image: none !important; } } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { + #main-content { + padding: 0.5rem; + } + #main-navi { font-size: 1rem; } @@ -696,6 +722,13 @@ label:after { display: none; } + .item-container.grid { + grid-column-gap: 0.75rem; + grid-row-gap: 0.75rem; + column-gap: 0.75rem; + row-gap: 0.75rem; + } + .form-grid { grid-template-columns: auto auto; } @@ -724,10 +757,6 @@ label:after { font-size: 0.5rem; line-height: 0.75rem; } - - main { - padding: 0.5rem; - } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # FontAwesome Main diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss index e00c60a..0397754 100644 --- a/theme/admin/rsrc/css/main.scss +++ b/theme/admin/rsrc/css/main.scss @@ -22,7 +22,7 @@ a { # Headings ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ h1, h2, h3, h4, h5, h6 { - margin: 0; + margin-bottom: 0; text-transform: uppercase; +p { @@ -35,6 +35,7 @@ h1, h2, h3, h4, h5, h6 { } h1 { + margin-top: 0; font-size: 0.80rem; } @@ -83,10 +84,6 @@ body { flex-direction: column; } -main { - padding: 0.75rem; -} - /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Main content ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @@ -95,9 +92,12 @@ main { width: 100%; background: #FFF; box-sizing: border-box; - border: 0.05rem solid #AAA; - border-top: none; - border-bottom: none; + padding: 0.75rem; + // border definition in _responsive.scss + + &.wide { + max-width: 90rem; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -249,6 +249,7 @@ main { display: flex; box-sizing: border-box; justify-content: space-between; + margin-top: 0.75rem; > div { display: flex; @@ -422,9 +423,9 @@ table, td { # Item Element ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .item { - display: block; + display: flex; + flex-direction: column; border: 0.05rem solid #AAA; - margin-bottom: 1rem; clear: both; header { @@ -432,6 +433,10 @@ table, td { border-bottom: 0.05rem solid #AAA; position: sticky; top: 0; + + h2 { + margin-top: 0; + } } footer { @@ -473,6 +478,7 @@ table, td { padding: 0.75rem; overflow: hidden; font-family: inherit; + flex-grow: 1; p { margin-bottom: 0; @@ -494,6 +500,16 @@ table, td { background: #EEE; border: 0.05rem solid #AAA; } + + &-container.grid { + width: 100%; + display: grid; + grid-template-columns: auto auto auto; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + column-gap: 1rem; + row-gap: 1rem; + } } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -- cgit v1.2.3