asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

chore: optimize the layout of main content and search input

Browse source
This commit is contained in:
Cotes Chung 2022-06-08 22:35:13 +08:00
parent 35cadf969d
commit fd0f983bbe
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
5 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/footer.html
View file

@ -1,6 +1,6 @@
<!-- The Footer --> <!-- The Footer -->
<footer class="row"> <footer class="row pl-3 pr-3">
<div class="col-12 d-flex justify-content-between align-items-center text-muted pl-0 pr-0"> <div class="col-12 d-flex justify-content-between align-items-center text-muted pl-0 pr-0">
<div class="footer-left"> <div class="footer-left">
<p class="mb-0"> <p class="mb-0">

2
_layouts/default.html
View file

@ -26,7 +26,7 @@ layout: compress
{% include topbar.html %} {% include topbar.html %}
<div id="main-wrapper" class="d-flex justify-content-center"> <div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container"> <div id="main" class="container pl-xl-4 pr-xl-4">
{{ content }} {{ content }}

4
_layouts/page.html
View file

@ -9,7 +9,7 @@ layout: default
<div class="row"> <div class="row">
<!-- core --> <!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-5"> <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
<div class="post pl-1 pr-1 pl-md-2 pr-md-2"> <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
{% capture _content %} {% capture _content %}
@ -54,7 +54,7 @@ layout: default
<!-- tail --> <!-- tail -->
{% if layout.tail_includes %} {% if layout.tail_includes %}
<div class="row"> <div class="row">
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-4 pr-4 pr-xl-5"> <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4">
{% for _include in layout.tail_includes %} {% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %} {% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} %} {% include {{ _include_path }} %}

11
_sass/addon/commons.scss
View file

@ -1377,7 +1377,7 @@ $sidebar-display: "sidebar-display";
} }
#search-wrapper { #search-wrapper {
max-width: 210px; max-width: $search-max-width;
} }
#search-result-wrapper { #search-result-wrapper {
@ -1541,11 +1541,20 @@ $sidebar-display: "sidebar-display";
left: $sidebar-width-large; left: $sidebar-width-large;
} }
#search-wrapper {
margin-right: calc(#{$main-content-max-width} * 0.25 - #{$search-max-width});
}
#topbar, #topbar,
#main { #main {
max-width: $main-content-max-width; max-width: $main-content-max-width;
} }
#core-wrapper,
#tail-wrapper {
padding-right: 4.5rem !important;
}
#back-to-top { #back-to-top {
right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem); right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem);
} }

4
_sass/addon/variables.scss
View file

@ -20,10 +20,12 @@ $cursor-width: 2px !default; /* the cursor width of the selected tab */
$topbar-height: 3rem !default; $topbar-height: 3rem !default;
$search-max-width: 210px !default;
$footer-height: 5rem !default; $footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */ $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
$main-content-max-width: 1200px !default; $main-content-max-width: 1250px !default;
$bottom-min-height: 35rem !default; $bottom-min-height: 35rem !default;