styled google search result list to multi-columns
Per
/* ==UserStyle==
@name Google Multi-Columns Style
@name:zh-CN Google 多列样式
@namespace doufu.ru
@version 1.0.0
@description styled google search result list to multi-columns
@description:zh-CN Google 搜索结果多列展示
@author Ryan
@license gpl-3.0
@preprocessor stylus
@var number maxColumns "Max Columns" [2,2,3]
==/UserStyle== */
@-moz-document regexp("https?://(www.?)google.com/search.*") {
#searchform {
display: flex;
justify-content: center;
gap: 8px;
}
#searchform form.tsf {
margin-right: 25px;
}
#hdtb,
#slim_appbar {
display: flex;
justify-content: center;
}
#hdtb-msb > div:first-child > div:first-child,
#appbar,
#center_col {
margin-left: 0 !important;
}
#result-stats {
width: 100%;
text-align: center;
}
#rcnt {
width: 100%;
max-width: unset;
justify-content: center;
}
#rhs {
display: none;
}
@media (min-width: 1065px) {
#center_col {
width: 960px;
}
#rso {
display: flex;
flex-wrap: wrap;
}
#rso > div {
width: 50%;
}
#rso > div > div {
margin: 8px;
overflow: hidden;
width: calc(100% - 16px) !important;
}
#rso > div > div > div > h2 + div {
width: 100%;
}
}
@media (min-width: 1280px) {
#center_col {
width: 1280px;
}
}
@media (min-width: 1536px) {
#center_col {
width: 1480px;
min-width: unset;
}
#rso > div {
--max-columns: maxColumns;
width: calc(100% / max(2, var(--max-columns)));
}
}
}