From 6f5b37029d04e765629acbd2131fc2f2431ccf5b Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Sun, 18 Dec 2022 13:48:49 +0100 Subject: [PATCH] imporvement: better layout --- components/preview-grid.php | 8 + components/preview-list.php | 30 +-- components/previews.php | 27 +++ home.php | 2 +- index.php | 2 +- scss/_drawing.scss | 2 +- scss/_global.scss | 3 +- scss/components/_previews.scss | 12 +- scss/custom/_global.scss | 11 +- scss/custom/_previews.scss | 79 ++++++++ scss/definitions/_sizing.scss | 2 +- scss/utils/_sizing.scss | 4 +- style.css | 328 ++++++++++----------------------- 13 files changed, 232 insertions(+), 278 deletions(-) create mode 100644 components/preview-grid.php create mode 100644 components/previews.php create mode 100644 scss/custom/_previews.scss diff --git a/components/preview-grid.php b/components/preview-grid.php new file mode 100644 index 0000000..ae7acb3 --- /dev/null +++ b/components/preview-grid.php @@ -0,0 +1,8 @@ + +
+ +
+
+ +
+ diff --git a/components/preview-list.php b/components/preview-list.php index 8ade6bf..bfe210c 100644 --- a/components/preview-list.php +++ b/components/preview-list.php @@ -1,32 +1,6 @@ -
- - - +
+
diff --git a/components/previews.php b/components/previews.php new file mode 100644 index 0000000..327c5f8 --- /dev/null +++ b/components/previews.php @@ -0,0 +1,27 @@ + +
+
+ + + +
+
+

+ +
+
+ " . $category[0]->cat_name . ""; + } + ?> +
+
+ +
+
+
+
+
+ \ No newline at end of file diff --git a/home.php b/home.php index 77354d2..29d1edd 100644 --- a/home.php +++ b/home.php @@ -14,7 +14,7 @@ } ?>

Publications

- + diff --git a/index.php b/index.php index bf4b915..06f1341 100644 --- a/index.php +++ b/index.php @@ -1,7 +1,7 @@

Publications

- +
diff --git a/scss/_drawing.scss b/scss/_drawing.scss index f246888..a385021 100644 --- a/scss/_drawing.scss +++ b/scss/_drawing.scss @@ -13,5 +13,5 @@ @import 'components/menus'; @import 'components/toasts'; @import 'components/tables'; -@import 'components/previews'; +//@import 'components/previews'; @import 'components/sidebar'; diff --git a/scss/_global.scss b/scss/_global.scss index 0fa95e3..76c43b7 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -2,4 +2,5 @@ * Styles that are custom to this particular theme **/ -@import 'custom/global'; \ No newline at end of file +@import 'custom/global'; +@import 'custom/previews'; \ No newline at end of file diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss index 88dcb9a..593b9b1 100644 --- a/scss/components/_previews.scss +++ b/scss/components/_previews.scss @@ -8,20 +8,24 @@ $preview-content-height:165px; $comment-peek-height:0px; $comment-height:30px; -.previews-section { +.preview-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: $lineheight; padding-bottom: $lineheight; - - @include xl() { + + @include md() { grid-template-columns: 1fr 1fr; } - @include xxl() { + @include xl() { grid-template-columns: 1fr 1fr 1fr; } + + @include xxl() { + grid-template-columns: 1fr 1fr 1fr 1fr; + } } .preview-container { diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss index d5ca535..7c7ad77 100644 --- a/scss/custom/_global.scss +++ b/scss/custom/_global.scss @@ -14,7 +14,7 @@ @mixin container-big() { padding-left: $lineheight; padding-right: $lineheight; - max-width: 1600px; + max-width: $container-size; margin:auto; } @@ -42,7 +42,7 @@ header h1 { font-style:oblique; padding:1.5rem; line-height: 1rem; - max-width: 1600px; + max-width: $container-size; margin: auto; text-align:center; @@ -98,7 +98,7 @@ header h1 { "main" "side"; - @include lg() { + @include xl() { grid-template-columns: auto 360px; grid-template-areas: "main side"; } @@ -216,8 +216,3 @@ footer { } } } - -.container-article { - margin:auto; - width:800px; -} diff --git a/scss/custom/_previews.scss b/scss/custom/_previews.scss new file mode 100644 index 0000000..1ed4da9 --- /dev/null +++ b/scss/custom/_previews.scss @@ -0,0 +1,79 @@ +.preview-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: $lineheight; + padding-bottom: $lineheight; + + @include md() { + grid-template-columns: 1fr 1fr; + } + + @include xl() { + grid-template-columns: 1fr 1fr 1fr; + } + + @include xxl() { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + +.preview-list { + @include sm() { + .preview-thumbnail a { + width: 240px; + margin-right: $lineheight /2; + } + + .preview { + display: flex; + align-items: center; + margin-bottom: $lineheight; + } + } + @include lg() { + .preview-thumbnail a { + width: 320px; + } + } +} + +.preview { + font-size: 0.8rem; +} + +.preview-thumbnail a { + display:block; + width: 100%; + background-color:transparent; + margin:auto; + object-fit: cover; + padding:0; + line-height:0; + img { + width:100%; + object-fit: cover; + height: auto; + aspect-ratio: 16/9; + border-radius: $card-radius; + } +} + +.preview h2 { + font-size:1.25rem; + line-height: 1.5rem; + font-family: $titlefont; + font-weight: 800; + height:3rem; + a { + background-color:transparent!important; + color:$color-font; + } +} + +.preview-excerpt { + margin-top: $lineheight / 2; + font-size:0.8rem; + line-height:1.25rem; + color:transparentize($color-font, 0.2); +} \ No newline at end of file diff --git a/scss/definitions/_sizing.scss b/scss/definitions/_sizing.scss index eb0b786..618de7c 100644 --- a/scss/definitions/_sizing.scss +++ b/scss/definitions/_sizing.scss @@ -30,5 +30,5 @@ $screen-xl-min: 1200px; $screen-xxl-min: 1600px; // Containers size -$container-size: $screen-xxl-min; +$container-size: $screen-xl-min; $container-size-large: $screen-xxl-min; diff --git a/scss/utils/_sizing.scss b/scss/utils/_sizing.scss index 89619c6..0db0ce6 100644 --- a/scss/utils/_sizing.scss +++ b/scss/utils/_sizing.scss @@ -48,14 +48,14 @@ .m { @include addmargins("half", $lineheight * .5); - @for $i from 1 through 4 { + @for $i from 0 through 4 { @include addmargins($i, $lineheight*$i) } } .p { @include addpaddings("half", $lineheight * .5); - @for $i from 1 through 4 { + @for $i from 0 through 4 { @include addpaddings($i, $lineheight*$i) } } diff --git a/style.css b/style.css index b9f97b2..e12ac23 100644 --- a/style.css +++ b/style.css @@ -537,7 +537,7 @@ code { .container, .container-onecolumn { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1600px; + max-width: 1200px; margin: auto; } .columns { @@ -1501,228 +1501,6 @@ th, td { th { font-weight: 800; } -/* - * 4. Previews - * Special style for previews cards - * -*/ -.previews-section { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto; - grid-gap: 1.6rem; - padding-bottom: 1.6rem; } - @media (min-width: 1200px) { - .previews-section { - grid-template-columns: 1fr 1fr; } } - @media (min-width: 1600px) { - .previews-section { - grid-template-columns: 1fr 1fr 1fr; } } -.preview-container { - width: 100%; } - -@media (min-width: 992px) { - .prev-col-2 .preview-container { - width: 50%; } - .prev-col-3 .preview-container { - width: 33%; } - .prev-col-4 .preview-container { - width: 25%; } } - -.card-preview { - padding: 0; - width: 100%; - margin: auto; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); } - -.preview-link { - padding: 0; - background-color: transparent; - margin: 0 !important; } - -.preview-item { - height: 12.8rem; - font-size: 0.9rem; - line-height: 1.6rem !important; - text-align: justify; - background-color: rgba(0, 0, 0, 0); - color: rgba(33, 37, 41, 0.4); - position: relative; - display: flex; - -ms-flex-align: center !important; - align-items: center !important; - justify-content: center; } - .preview-item .preview-overlay { - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - padding-top: 0px; - backdrop-filter: none; - transition: background-color 0.3s; - border-radius: 8px 8px 8px 8px; } - .preview-item .preview-overlay h1, .preview-item .preview-overlay h2, .preview-item .preview-overlay h3, .preview-item .preview-overlay h4, .preview-item .preview-overlay h5, .preview-item .preview-overlay h6 { - color: #fefefe; - font-size: 1rem; - line-height: 1.6rem; - font-weight: 300; } - .preview-item .preview-overlay .card-header { - font-family: Open Sans, sans-serif; - font-size: 1rem; - font-size: 1.1em; - font-weight: 300; - padding: 0.4rem; - padding-left: 1.6rem; - padding-right: 1.6rem; - padding-bottom: 0.4rem !important; - margin: 0px; - margin-bottom: 0.8rem; - margin-top: 0.8rem; - line-height: 1.6rem; - white-space: nowrap; - position: relative; - left: 0px; - width: 100%; - border: 0px solid rgba(0, 0, 0, 0.3); - border-radius: 4px 4px 4px 4px; - background-color: transparent; - border-radius: 0; - background-color: #e33d22; - color: #fefefe; - font-weight: 300; - margin-top: 0px; } - .preview-item .preview-overlay .card-header:first-child { - border-top-left-radius: 8px; - border-top-right-radius: 8px; } - .preview-item .preview-overlay .card-header:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; } - .preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 { - font-family: Open Sans, sans-serif; - font-size: 1rem; - padding: 0px; - margin: 0px; - color: #fefefe; - font-weight: 300; - line-height: 1.6rem; } - .preview-item:hover .preview-overlay { - backdrop-filter: blur(2px); - background-color: rgba(0, 0, 0, 0.4); } - .preview-item:hover .preview-overlay .metadata-pills { - opacity: .9; - transition: opacity .5s, height .5s; - height: 135px; } - -.preview-content { - max-height: 12.8rem; - overflow: hidden; - background-size: cover; - min-height: 100%; - min-width: 100%; - border-radius: 8px 8px 8px 8px; - font-size: 0.85rem; - line-height: 1.25rem; } - .preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 { - margin-bottom: 0px; - max-width: 100%; - display: none; } - .preview-content > p { - width: 100%; - margin: auto; } - .preview-content > p > img { - max-width: 100%; - height: auto; - vertical-align: middle; - margin: auto; - text-align: center; } - .preview-content > p.p-img { - text-align: center; - margin: auto; - padding: auto; - display: block; - width: 100%; } - -.preview-metadata { - color: #fefefe; - height: 165px; - overflow: hidden; - border-radius: 8px 8px 8px 8px; } - .preview-metadata .metadata-pills { - height: 165px; - opacity: 0; - transition: opacity .3s, height .3s; - display: flex; - justify-content: space-between; - padding-left: 0.8rem; - padding-right: 0.8rem; - font-size: 0.9em; } - -.card-preview.head-info .comment-text { - background-color: #343a40; } - -.card-preview.card-grey .comment-text { - background-color: #adb5bd; } - -.comment-text { - color: #fefefe; - background-color: #e33d22; - text-align: center; } - -.card-preview time { - margin-bottom: 0.4em; - display: block; } - -.author-area { - display: flex; } - .author-area img.author-avatar, .author-area img.avatar { - display: block; - height: 4.8rem; - width: auto; - border-radius: 100%; - padding: 0; - margin: 0; - margin-right: 1.6rem; } - .author-area .author-metadata { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; } - .author-area .author-date { - font-style: italic; } - .author-area:not(:last-child) { - margin-bottom: 1.6rem; } - -.pigimg { - display: block; - max-width: 100%; - height: auto; - margin: auto; } - -.avatar { - background: transparent; } - -.mwarea { - padding-bottom: 1.6rem; } - .mwarea .avatar { - width: 80%; - height: auto; - display: block; - margin: auto; } - -.cover { - width: 100%; - height: auto; - border-radius: 8px 8px 8px 8px; } - -@media (min-width: 768px) { - .roman { - width: 80%; - position: relative; - top: -240px; - margin: auto; } } - .sidebar-container { width: 100%; display: grid; @@ -2565,6 +2343,21 @@ th { .mt-half { margin-top: 0.8rem; } +.m-0 { + margin: 0rem; } + +.mb-0 { + margin-bottom: 0rem; } + +.mr-0 { + margin-right: 0rem; } + +.ml-0 { + margin-left: 0rem; } + +.mt-0 { + margin-top: 0rem; } + .m-1 { margin: 1.6rem; } @@ -2640,6 +2433,21 @@ th { .pt-half { padding-top: 0.8rem; } +.p-0 { + padding: 0rem; } + +.pb-0 { + padding-bottom: 0rem; } + +.pr-0 { + padding-right: 0rem; } + +.pl-0 { + padding-left: 0rem; } + +.pt-0 { + padding-top: 0rem; } + .p-1 { padding: 1.6rem; } @@ -2759,7 +2567,7 @@ header h1 { font-style: oblique; padding: 1.5rem; line-height: 1rem; - max-width: 1600px; + max-width: 1200px; margin: auto; text-align: center; } header h1 img { @@ -2793,13 +2601,13 @@ header h1 { .container-big { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1600px; + max-width: 1200px; margin: auto; } .container-blog { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1600px; + max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr; @@ -2807,7 +2615,7 @@ header h1 { row-gap: 1.6rem; column-gap: 3rem; grid-template-areas: "main" "side"; } - @media (min-width: 992px) { + @media (min-width: 1200px) { .container-blog { grid-template-columns: auto 360px; grid-template-areas: "main side"; } } @@ -2830,7 +2638,7 @@ ul.tag-list { .container-preview { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1600px; + max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr; @@ -2850,7 +2658,7 @@ ul.tag-list { .container-personnage { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1600px; + max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(6, 1fr); @@ -2906,6 +2714,64 @@ footer { footer .columns a:visited:visited { color: #fefefe; } -.container-article { +.preview-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: 1.6rem; + padding-bottom: 1.6rem; } + @media (min-width: 768px) { + .preview-grid { + grid-template-columns: 1fr 1fr; } } + @media (min-width: 1200px) { + .preview-grid { + grid-template-columns: 1fr 1fr 1fr; } } + @media (min-width: 1600px) { + .preview-grid { + grid-template-columns: 1fr 1fr 1fr 1fr; } } +@media (min-width: 576px) { + .preview-list .preview-thumbnail a { + width: 240px; + margin-right: 0.8rem; } + .preview-list .preview { + display: flex; + align-items: center; + margin-bottom: 1.6rem; } } + +@media (min-width: 992px) { + .preview-list .preview-thumbnail a { + width: 320px; } } + +.preview { + font-size: 0.8rem; } + +.preview-thumbnail a { + display: block; + width: 100%; + background-color: transparent; margin: auto; - width: 800px; } + object-fit: cover; + padding: 0; + line-height: 0; } + .preview-thumbnail a img { + width: 100%; + object-fit: cover; + height: auto; + aspect-ratio: 16/9; + border-radius: 8px; } + +.preview h2 { + font-size: 1.25rem; + line-height: 1.5rem; + font-family: Teko, sans-serif; + font-weight: 800; + height: 3rem; } + .preview h2 a { + background-color: transparent !important; + color: #212529; } + +.preview-excerpt { + margin-top: 0.8rem; + font-size: 0.8rem; + line-height: 1.25rem; + color: rgba(33, 37, 41, 0.8); }