💄 Fixed some display padding & margin in mobile.
This commit is contained in:
凡梦星尘
parent
3a46e83146
commit
00c93d2fb7
@ -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 {
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
@mixin sidebar-inline-links-item() {
|
||||
margin: 5px 0 0;
|
||||
margin: 5px 0;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
@if $links_settings_layout == 'inline' {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
@include sidebar-inline-links-item();
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 }};
|
||||
$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 }}
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user