diff --git a/app/javascript/flavours/glitch/styles/single-column.scss b/app/javascript/flavours/glitch/styles/single-column.scss new file mode 100644 index 000000000..17da8dbc1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/single-column.scss @@ -0,0 +1,3 @@ +@import 'variables'; +@import 'index'; +@import 'single-column/diff'; diff --git a/app/javascript/flavours/glitch/styles/single-column/diff.scss b/app/javascript/flavours/glitch/styles/single-column/diff.scss new file mode 100644 index 000000000..680ce739a --- /dev/null +++ b/app/javascript/flavours/glitch/styles/single-column/diff.scss @@ -0,0 +1,48 @@ +// components.scss + +/* One Column */ +:root { // Overrides .wide stylings for mobile view + @media screen and (min-width: 631px) { + .columns-area { + width: 80%; + margin: -60px auto auto; + } + + .tabs-bar { + display: flex; + width: calc(80% - 315px); + margin: 10px 0 0 calc(10% + 305px); + z-index: 1; + } + + .tabs-bar > a:nth-child(5), + .drawer--header > a:nth-child(1), + .drawer--header > a:nth-child(2) { + display: none; + } + + .tabs-bar > a { + text-align: left; + } + + .tabs-bar > a > span { + display: inline; + } + + .column { + display: none; + } + + .column:last-child { + display: flex; + min-width: calc(100% - 300px); + margin-top: 58px; + } + + .search__input, + .autosuggest-textarea__textarea { + font-size: 16px; + } + + } +} diff --git a/app/javascript/skins/glitch/single-column/common.scss b/app/javascript/skins/glitch/single-column/common.scss new file mode 100644 index 000000000..cbbfcbd6b --- /dev/null +++ b/app/javascript/skins/glitch/single-column/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/single-column'; diff --git a/app/javascript/skins/glitch/single-column/names.yml b/app/javascript/skins/glitch/single-column/names.yml new file mode 100644 index 000000000..30f59e166 --- /dev/null +++ b/app/javascript/skins/glitch/single-column/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + single-column: Single-column