diff --git a/assets/scss/_article.scss b/assets/scss/_article.scss index e7d9b04..466df2f 100644 --- a/assets/scss/_article.scss +++ b/assets/scss/_article.scss @@ -41,7 +41,7 @@ @mixin sections { margin-block-start: 10px; - >.section { + .section { display: flex; flex-direction: column; align-self: center; diff --git a/assets/scss/_copy.scss b/assets/scss/_copy.scss index faf1e0f..961514a 100644 --- a/assets/scss/_copy.scss +++ b/assets/scss/_copy.scss @@ -1,3 +1,4 @@ +// EXTERNAL @mixin copy{ .tooltip { position: relative; diff --git a/assets/scss/_form.scss b/assets/scss/_form.scss new file mode 100644 index 0000000..503b1e7 --- /dev/null +++ b/assets/scss/_form.scss @@ -0,0 +1,16 @@ +@use "inputs" as in; + +@mixin main { + display: flex; + flex-direction: column; + padding: 3%; + + &.centered { + label { + text-align: center; + align-self: center; + } + } + + @include in.moderncss; +} \ No newline at end of file diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index f63587c..71d09ff 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -5,6 +5,10 @@ align-items: center; justify-content: left; + &.centered { + justify-content: center; + } + padding: 0px 10px; min-height: 60px; @@ -19,4 +23,10 @@ margin-top:5px; padding:auto; } + + h1.centered { + align-self: center; + margin:0px; + } + } \ No newline at end of file diff --git a/assets/scss/_inputs.scss b/assets/scss/_inputs.scss new file mode 100644 index 0000000..563ffa5 --- /dev/null +++ b/assets/scss/_inputs.scss @@ -0,0 +1,52 @@ +// EXTERNAL: https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/ + +@use "colors" as c; + +@mixin moderncss { + *, + *::before, + *::after { + box-sizing: border-box; + } + + .input { + font-size: 16px; + font-size: max(16px, 1em); + font-family: inherit; + padding: 0.25em 0.5em; + background-color: c.$text; + border: 2px solid c.$dark; + border-radius: 4px; + + &:focus { + border-color: c.$light; + box-shadow: 0 0 0 3px c.$dark; + transition: 180ms box-shadow ease-in-out; + outline: 3px solid transparent; + } + + // Extra + &:not(textarea) { + line-height: 1; + height: 2.25rem; + } + + &[type="file"] { + font-size: 0.9em; + padding-top: 0.35rem; + } + + &[readonly] { + border-style: dotted; + cursor: not-allowed; + color: #777; + } + + &[disabled] { + --input-border: #ccc; + + background-color: #eee; + cursor: not-allowed; + } + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 2253cdd..44e5adc 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -10,6 +10,8 @@ @use "article" as a; @use "footer" as f; +@use "form" as form; + .HIDDEN { display: none; } @@ -45,6 +47,10 @@ body { @include a.main; + form { + @include form.main; + } + &.plain { @include a.plain; } @@ -82,7 +88,7 @@ body { } } - .main-scrollable{ + .main-scrollable { height: 100%; overflow-y: auto; @include util.hide-scroll;