From 0c7cb4486a89ec6fe9680e6569ef41d4b82d557d Mon Sep 17 00:00:00 2001 From: Christoph Cullmann Date: Thu, 18 Feb 2021 22:21:36 +0100 Subject: use maintained theme --- themes/CodeIT/assets/css/_core/_base.scss | 55 ++++++++++++++++++++ themes/CodeIT/assets/css/_core/_layout.scss | 15 ++++++ themes/CodeIT/assets/css/_core/_media.scss | 80 +++++++++++++++++++++++++++++ 3 files changed, 150 insertions(+) create mode 100644 themes/CodeIT/assets/css/_core/_base.scss create mode 100644 themes/CodeIT/assets/css/_core/_layout.scss create mode 100644 themes/CodeIT/assets/css/_core/_media.scss (limited to 'themes/CodeIT/assets/css/_core') diff --git a/themes/CodeIT/assets/css/_core/_base.scss b/themes/CodeIT/assets/css/_core/_base.scss new file mode 100644 index 0000000..510a103 --- /dev/null +++ b/themes/CodeIT/assets/css/_core/_base.scss @@ -0,0 +1,55 @@ +html { + font-family: $global-font-family; + font-weight: $global-font-weight; + font-display: swap; + font-size: $global-font-size; + line-height: $global-line-height; + width: 100%; +} + +/* scrollbar, only support webkit */ +::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; +} + +::-webkit-scrollbar-thumb { + background-color: $scrollbar-color; + + &:hover { + background-color: $scrollbar-hover-color; + } +} + +::selection { + background-color: $selection-color; + + [theme="dark"] & { + background-color: $selection-color-dark; + } +} + +body { + background-color: $global-background-color; + color: $global-font-color; + @include overflow-wrap(break-word); + scrollbar-color: auto; + + &[theme="dark"] { + color: $global-font-color-dark; + background-color: $global-background-color-dark; + } +} + +@include ms; +@include link(true, true); + +@import "../_partial/mask"; +@import "../_partial/icon"; +@import "../_partial/details"; +@import "../_partial/fixed-button"; +@import "../_partial/cookieconsent"; + +img { + @include object-fit(contain); +} diff --git a/themes/CodeIT/assets/css/_core/_layout.scss b/themes/CodeIT/assets/css/_core/_layout.scss new file mode 100644 index 0000000..154f3a6 --- /dev/null +++ b/themes/CodeIT/assets/css/_core/_layout.scss @@ -0,0 +1,15 @@ +/** Layout **/ +.wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + width: 100%; + + main { + flex: 1 0 auto; + + .container { + padding: 0 1rem; + } + } +} diff --git a/themes/CodeIT/assets/css/_core/_media.scss b/themes/CodeIT/assets/css/_core/_media.scss new file mode 100644 index 0000000..047fda5 --- /dev/null +++ b/themes/CodeIT/assets/css/_core/_media.scss @@ -0,0 +1,80 @@ +@media only screen and (max-width: 1440px) { + .page { + width: 56%; + } +} + +@media only screen and (max-width: 1200px) { + .page { + width: 52%; + } + + #header-desktop .header-wrapper { + padding-right: 1rem; + } + + .search-dropdown.desktop { + right: 1rem; + } +} + +@media only screen and (max-width: 960px) { + #toc-auto { + display: none; + } + + #toc-static { + display: block; + } + + .page { + width: 80%; + } + + #header-desktop .header-wrapper { + padding-left: 1rem; + } +} + +@media only screen and (max-width: 680px) { + #header-desktop { + display: none; + } + + #header-mobile { + display: block; + } + + body.blur { + overflow: hidden; + } + + .page { + width: 100%; + + [header-mobile] & { + padding-top: $header-height; + } + + [header-mobile="normal"] & { + padding-top: 0; + } + + .categories-card { + .card-item { + width: 100%; + } + } + } + + .copyright { + .copyright-line { + .icp-splitter { + display: none; + } + .icp-br { + display: block; + } + } + } +} -- cgit v1.2.3