diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss index 54c509ef9..ca6efbbe1 100644 --- a/resources/sass/_blocks.scss +++ b/resources/sass/_blocks.scss @@ -6,6 +6,7 @@ @include lightDark(background-color, #FFF, #222); box-shadow: $bs-card; border-radius: 3px; + break-inside: avoid; .body, p.empty-text { padding: $-m; } diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss index b4691bc4d..f52b61992 100644 --- a/resources/sass/styles.scss +++ b/resources/sass/styles.scss @@ -184,6 +184,14 @@ $loadingSize: 10px; z-index: 150; } +@include between($s, $m) { + #home-default > .grid.third { + display: block; + columns: 2; + column-gap: $-l !important; + } +} + .list-sort-container { display: inline-block; form { diff --git a/resources/views/home/default.blade.php b/resources/views/home/default.blade.php index 46015354d..2d71e37f6 100644 --- a/resources/views/home/default.blade.php +++ b/resources/views/home/default.blade.php @@ -2,23 +2,19 @@ @section('body') - <div class="container px-xl py-s"> - <div class="grid half"> - <div> - <div class="icon-list inline block"> - @include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details']) - </div> - </div> - <div class="text-m-right"> - <div class="icon-list inline block"> - @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link']) - </div> + <div class="container px-xl py-s flex-container-row gap-l wrap justify-space-between"> + <div class="icon-list inline block"> + @include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details']) + </div> + <div> + <div class="icon-list inline block"> + @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link']) </div> </div> </div> <div class="container" id="home-default"> - <div class="grid third gap-xxl no-row-gap" > + <div class="grid third gap-x-xxl no-row-gap"> <div> @if(count($draftPages) > 0) <div id="recent-drafts" class="card mb-xl">