From 00c93d2fb70dbf2d22e9f5b027c999e0f9e6ad2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 18 Jun 2022 19:53:09 +0800 Subject: [PATCH] :lipstick: Fixed some display padding & margin in mobile. --- assets/css/_common/outline/footer/index.scss | 8 + assets/css/_mixins.scss | 2 +- assets/css/_schemes/Pisces/_sidebar.scss | 2 +- assets/css/main.scss | 184 +++++++++---------- exampleSite/config.yaml | 2 +- 5 files changed, 103 insertions(+), 95 deletions(-) diff --git a/assets/css/_common/outline/footer/index.scss b/assets/css/_common/outline/footer/index.scss index 154186c..9f475d4 100644 --- a/assets/css/_common/outline/footer/index.scss +++ b/assets/css/_common/outline/footer/index.scss @@ -21,6 +21,14 @@ @include flex-column(); @include main-container(); + @include mobile() { + font-size: $font-size-smaller; + } + + @include mobile-small() { + font-size: $font-size-smallest; + } + @if $footer_vendors_enable { .vendors-list { a { diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss index 9e435a8..10b2ebe 100644 --- a/assets/css/_mixins.scss +++ b/assets/css/_mixins.scss @@ -64,7 +64,7 @@ } @mixin sidebar-inline-links-item() { - margin: 5px 0 0; + margin: 5px 0; a { box-sizing: border-box; diff --git a/assets/css/_schemes/Pisces/_sidebar.scss b/assets/css/_schemes/Pisces/_sidebar.scss index c8a5715..4d6e9b1 100644 --- a/assets/css/_schemes/Pisces/_sidebar.scss +++ b/assets/css/_schemes/Pisces/_sidebar.scss @@ -75,7 +75,7 @@ @if $links_settings_layout == 'inline' { display: inline-block; max-width: 100%; - @include sidebar-inline-links-item(); + margin: 5px; } } diff --git a/assets/css/main.scss b/assets/css/main.scss index b214e0a..d73b24c 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,136 +1,136 @@ -// CSS Style Guide: https://codeguide.co/#css +// CSS Style Guide : https://codeguide.co/#css // All variables from site's config content. {{- $P := .Site.Params }} // Base -$scheme: {{ $P.scheme }}; -$darkmode: {{ $P.darkmode }}; +$scheme : {{ $P.scheme }}; +$darkmode : {{ $P.darkmode }}; -$body_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }}; -$body_scrollbar_stable: {{ $P.bodyScrollbar.stable }}; -$mermaid_enable: {{ $P.mermaid.enable }}; -$mobile_layout_economy: {{ $P.mobileLayoutEconomy }}; -$theme_color_dark: {{ $P.themeColor.dark }}; -$theme_color_light: {{ $P.themeColor.light }}; +$body_scrollbar_overlay : {{ $P.bodyScrollbar.overlay }}; +$body_scrollbar_stable : {{ $P.bodyScrollbar.stable }}; +$mermaid_enable : {{ $P.mermaid.enable }}; +$mobile_layout_economy : {{ $P.mobileLayoutEconomy }}; +$theme_color_dark : {{ $P.themeColor.dark }}; +$theme_color_light : {{ $P.themeColor.light }}; // Header -$bookmark_color: {{ $P.bookmark.color }}; -$bookmark_enable: {{ $P.bookmark.enable }}; -$github_banner_enable: {{ $P.githubBanner.enable }}; -$menu_settings_badges: {{ $P.menuSets.badges }}; +$bookmark_color : {{ $P.bookmark.color }}; +$bookmark_enable : {{ $P.bookmark.enable }}; +$github_banner_enable : {{ $P.githubBanner.enable }}; +$menu_settings_badges : {{ $P.menuSets.badges }}; // Footer -$footer_icon_color: {{ $P.footer.icon.color }}; -$footer_icon_animated: {{ $P.footer.icon.animated }}; -$footer_beian_enable: {{ $P.footer.beian.enable }}; -$footer_vendors_enable: {{ isset $P.footer "vendors" }}; +$footer_icon_color : {{ $P.footer.icon.color }}; +$footer_icon_animated : {{ $P.footer.icon.animated }}; +$footer_beian_enable : {{ $P.footer.beian.enable }}; +$footer_vendors_enable : {{ isset $P.footer "vendors" }}; // Counter -$busuanzi_enable: {{ $P.busuanzi.enable }}; -$busuanzi_visitors: {{ $P.busuanzi.visitors }}; -$busuanzi_views: {{ $P.busuanzi.views }}; -$busuanzi_post_views: {{ $P.busuanzi.postViews }}; +$busuanzi_enable : {{ $P.busuanzi.enable }}; +$busuanzi_visitors : {{ $P.busuanzi.visitors }}; +$busuanzi_views : {{ $P.busuanzi.views }}; +$busuanzi_post_views : {{ $P.busuanzi.postViews }}; // Font -$font_enable: {{ $P.font.enable }}; -$font_global_size: {{ default $P.font.global.size 1 }}; -$font_headings_size: {{ default $P.font.headings.size 1.625 }}; -$font_title_size: {{ default $P.font.title.size 1.375 }}; +$font_enable : {{ $P.font.enable }}; +$font_global_size : {{ default $P.font.global.size 1 }}; +$font_headings_size : {{ default $P.font.headings.size 1.625 }}; +$font_title_size : {{ default $P.font.title.size 1.375 }}; // Code & Code blocks // TODO find the configure variable -$highlight_dark_background: #000; -$highlight_dark_foreground: #222; -$highlight_light_background: #000; -$highlight_light_foreground: #222; +$highlight_dark_background : #000; +$highlight_dark_foreground : #222; +$highlight_light_background : #000; +$highlight_light_foreground : #222; -$codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }}; +$codeblock_copy_btn_style : {{ $P.codeblock.copyBtn.style }}; // Sidebar -$sidebar_offset: {{ $P.sidebar.offset }}; -$sidebar_padding: {{ $P.sidebar.padding }}; -$sidebar_position: {{ $P.sidebar.position }}; -$sidebar_width: {{ $P.sidebar.width }}; +$sidebar_offset : {{ $P.sidebar.offset }}; +$sidebar_padding : {{ $P.sidebar.padding }}; +$sidebar_position : {{ $P.sidebar.position }}; +$sidebar_width : {{ $P.sidebar.width }}; -$motion_enable: {{ $P.motion.enable }}; -$motion_transition_sidebar: {{ $P.motion.transition.sidebar }}; +$motion_enable : {{ $P.motion.enable }}; +$motion_transition_sidebar : {{ $P.motion.transition.sidebar }}; -$back2top_enable: {{ $P.backTop.enable }}; -$back2top_scrollpercent: {{ $P.backTop.scrollpercent }}; -$back2top_sidebar: {{ $P.backTop.sidebar }}; +$back2top_enable : {{ $P.backTop.enable }}; +$back2top_scrollpercent : {{ $P.backTop.scrollpercent }}; +$back2top_sidebar : {{ $P.backTop.sidebar }}; -$avatar_rotated: {{ $P.avatar.rotated }}; -$avatar_rounded: {{ $P.avatar.rounded }}; -$avatar_rounded: {{ $P.avatar.rounded }}; -$site_state: {{ $P.siteState }}; -$social_icons_only: {{ $P.socialIcons.iconsOnly }}; -$social_icons_transition: {{ $P.socialIcons.transition }}; -$links_settings_layout: {{ $P.linksSets.layout }}; -$toc_enable: {{ $P.toc.enable }}; -$toc_expand_all: {{ $P.toc.expandAll }}; -$toc_wrap: {{ $P.toc.wrap }}; +$avatar_rotated : {{ $P.avatar.rotated }}; +$avatar_rounded : {{ $P.avatar.rounded }}; +$avatar_rounded : {{ $P.avatar.rounded }}; +$site_state : {{ $P.siteState }}; +$social_icons_only : {{ $P.socialIcons.iconsOnly }}; +$social_icons_transition : {{ $P.socialIcons.transition }}; +$links_settings_layout : {{ $P.linksSets.layout }}; +$toc_enable : {{ $P.toc.enable }}; +$toc_expand_all : {{ $P.toc.expandAll }}; +$toc_wrap : {{ $P.toc.wrap }}; // Posts -$creative_commons_post: {{ $P.creativeCommons.post }}; -$follow_me: {{ isset $P "followme" }}; -$motion_trans_coll_header: {{ $P.motion.transition.collHeader }}; -$motion_trans_post_block: {{ $P.motion.transition.postBlock }}; -$motion_trans_post_body: {{ $P.motion.transition.postBody }}; -$motion_trans_post_header: {{ $P.motion.transition.postHeader }}; -$post_edit_enable: {{ $P.postEdit.enable }}; -$post_meta_item_text: {{ $P.postMeta.itemText }}; -$reward_settings_animation: {{ $P.rewardSets.animation }}; -$post_end_tag_icon: {{ $P.postFooter.tagIcon }}; +$creative_commons_post : {{ $P.creativeCommons.post }}; +$follow_me : {{ isset $P "followme" }}; +$motion_trans_coll_header : {{ $P.motion.transition.collHeader }}; +$motion_trans_post_block : {{ $P.motion.transition.postBlock }}; +$motion_trans_post_body : {{ $P.motion.transition.postBody }}; +$motion_trans_post_header : {{ $P.motion.transition.postHeader }}; +$post_edit_enable : {{ $P.postEdit.enable }}; +$post_meta_item_text : {{ $P.postMeta.itemText }}; +$reward_settings_animation : {{ $P.rewardSets.animation }}; +$post_end_tag_icon : {{ $P.postFooter.tagIcon }}; // TODO find the paramters -$text_align_desktop: justify; -$text_align_mobile: justify; +$text_align_desktop : {{ $P.textAlign.desktop }}; +$text_align_mobile : {{ $P.textAlign.mobile }}; // Note -$note_icons: {{ $P.note.icons }}; -$note_light_bg_offset: {{ $P.note.lightBgOffset }}; -$note_style: {{ $P.note.style }}; +$note_icons : {{ $P.note.icons }}; +$note_light_bg_offset : {{ $P.note.lightBgOffset }}; +$note_style : {{ $P.note.style }}; // Tabs -$tabs_transition_labels: {{ $P.tabs.transition.labels }}; -$tabs_transition_tabs: {{ $P.tabs.transition.tabs }}; +$tabs_transition_labels : {{ $P.tabs.transition.labels }}; +$tabs_transition_tabs : {{ $P.tabs.transition.tabs }}; // Reading progress bar -$reading_progress_start: {{ $P.readingProgress.start }}; -$reading_progress_color: {{ $P.readingProgress.color }}; -$reading_progress_enable: {{ $P.readingProgress.enable }}; -$reading_progress_height: {{ $P.readingProgress.height }}; -$reading_progress_position: {{ $P.readingProgress.position }}; -$reading_progress_reversed: {{ $P.readingProgress.reversed }}; +$reading_progress_start : {{ $P.readingProgress.start }}; +$reading_progress_color : {{ $P.readingProgress.color }}; +$reading_progress_enable : {{ $P.readingProgress.enable }}; +$reading_progress_height : {{ $P.readingProgress.height }}; +$reading_progress_position : {{ $P.readingProgress.position }}; +$reading_progress_reversed : {{ $P.readingProgress.reversed }}; // Thirdparty -$math_mathjax_enable: {{ $P.math.mathjax.enable }}; -$related_posts_enable: {{ $P.relatedPosts.enable }}; -$pdf_enable: {{ $P.pdf.enable }}; -$pdf_height: {{ $P.pdf.height }}; +$math_mathjax_enable : {{ $P.math.mathjax.enable }}; +$related_posts_enable : {{ $P.relatedPosts.enable }}; +$pdf_enable : {{ $P.pdf.enable }}; +$pdf_height : {{ $P.pdf.height }}; // Search engine -$algolia_search_enable: {{ $P.algoliaSearch.enable }}; -$local_search_enable: {{ $P.localSearch.enable }}; +$algolia_search_enable : {{ $P.algoliaSearch.enable }}; +$local_search_enable : {{ $P.localSearch.enable }}; // Online IM -$gitalk_enable: {{ $P.gitalk.enable }}; -$gitter_enable: {{ $P.gitter.enable }}; +$gitalk_enable : {{ $P.gitalk.enable }}; +$gitter_enable : {{ $P.gitter.enable }}; // Comment -$disqusjs_enable: {{ $P.disqusjs.enable }}; -$livere_enable: {{ $P.livere.enable }}; -$utterances_enable: {{ $P.utterances.enable }}; -$waline_enable: {{ $P.waline.enable }}; +$disqusjs_enable : {{ $P.disqusjs.enable }}; +$livere_enable : {{ $P.livere.enable }}; +$utterances_enable : {{ $P.utterances.enable }}; +$waline_enable : {{ $P.waline.enable }}; {{- with .Site.Params.comments }} -{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }} -$two_comments_enable: {{ $tce }}; +{{- $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }} +$two_comments_enable : {{ $tce }}; {{- if $tce }} -{{- $sortNav := sort .nav "weight" }} -$two_comments_actived: {{ .active }}; -$first_comment_color: {{ (index $sortNav 0).color }}; -$first_comment_name: {{ lower (index $sortNav 0).name }}; -$second_comment_color: {{ (index $sortNav 1).color }}; -$second_comment_name: {{ lower (index $sortNav 1).name }}; +{{- $sortNav := sort .nav "weight" }} +$two_comments_actived : {{ .active }}; +$first_comment_color : {{ (index $sortNav 0).color }}; +$first_comment_name : {{ lower (index $sortNav 0).name }}; +$second_comment_color : {{ (index $sortNav 1).color }}; +$second_comment_name : {{ lower (index $sortNav 1).name }}; {{- end }} {{- end }} diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index a4a71ba..077ce67 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -483,7 +483,7 @@ params: mobile: justify # Reduce padding / margin indents on devices with narrow width. - mobileLayoutEconomy: false + mobileLayoutEconomy: true # Browser header panel color. themeColor: