aboutsummaryrefslogtreecommitdiffstats
path: root/theme/admin/rsrc/css
diff options
context:
space:
mode:
Diffstat (limited to 'theme/admin/rsrc/css')
-rw-r--r--theme/admin/rsrc/css/import/_responsive.scss46
-rw-r--r--theme/admin/rsrc/css/main.css71
-rw-r--r--theme/admin/rsrc/css/main.scss36
3 files changed, 109 insertions, 44 deletions
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;
+ }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 20:07:57 +0000