https://cznwiki.com/index.php?action=history&feed=atom&title=Template%3ABentoGrid%2Fstyles.css 2026-04-17T15:45:20Z Revision history for this page on the wiki MediaWiki 1.45.3 https://cznwiki.com/index.php?title=Template:BentoGrid/styles.css&diff=11&oldid=prev 2026-04-17T11:47:00Z

<p>Created page with &quot;.bento-grid { display: grid; gap: 16px; max-width: 1000px; } .bento-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .bento-grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .bento-grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .bento-grid-cols-5 { grid-template-columns: repeat(5, 1fr); } .bento-grid-cols-6 { grid-template-columns: repeat(6, 1fr); } .bento-box { position: relative; overflow: hidden; border: 1px solid #333338;...&quot;</p> <p><b>New page</b></p><div>.bento-grid {<br /> display: grid;<br /> gap: 16px;<br /> max-width: 1000px;<br /> }<br /> <br /> .bento-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }<br /> .bento-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }<br /> .bento-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }<br /> .bento-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }<br /> .bento-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }<br /> <br /> .bento-box {<br /> position: relative;<br /> overflow: hidden;<br /> border: 1px solid #333338;<br /> background-color: #1a1a1c;<br /> min-height: 120px;<br /> transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;<br /> }<br /> <br /> .bento-box:hover {<br /> border-color: #ff540c;<br /> transform: translateY(-2px);<br /> box-shadow: 0 8px 20px rgba(255, 84, 12, 0.1);<br /> }<br /> <br /> .bento-box::after {<br /> content: &#039;&#039;;<br /> position: absolute;<br /> bottom: -1px;<br /> right: -1px;<br /> width: 10px;<br /> height: 10px;<br /> border-bottom: 2px solid #888891;<br /> border-right: 2px solid #888891;<br /> transition: border-color 0.3s;<br /> z-index: 2;<br /> }<br /> <br /> .bento-box:hover::after {<br /> border-color: #ff540c;<br /> }<br /> <br /> .bento-box-bg {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> right: 0;<br /> bottom: 0;<br /> background-size: cover;<br /> background-position: center;<br /> opacity: 0.4;<br /> z-index: 0;<br /> }<br /> <br /> .bento-box-content {<br /> position: relative;<br /> z-index: 1;<br /> padding: 20px;<br /> display: flex;<br /> flex-direction: column;<br /> justify-content: flex-start;<br /> height: 100%;<br /> }<br /> <br /> .bento-box-link {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> right: 0;<br /> bottom: 0;<br /> z-index: 5;<br /> }<br /> <br /> .bento-box-link a {<br /> display: block;<br /> width: 100%;<br /> height: 100%;<br /> color: transparent !important;<br /> text-decoration: none !important;<br /> }<br /> <br /> .bento-box-title {<br /> font-size: 1.2rem;<br /> font-weight: bold;<br /> color: #ffffff;<br /> margin-bottom: 4px;<br /> }<br /> <br /> .bento-box-subtitle {<br /> font-size: 0.7rem;<br /> color: #ff540c;<br /> text-transform: uppercase;<br /> letter-spacing: 1px;<br /> }<br /> <br /> .bento-box-subtitle-tag {<br /> background: #ff540c;<br /> color: #fff;<br /> padding: 2px 8px;<br /> display: inline-block;<br /> width: fit-content;<br /> }<br /> <br /> .bento-colspan-1 { grid-column: span 1; }<br /> .bento-colspan-2 { grid-column: span 2; }<br /> .bento-colspan-3 { grid-column: span 3; }<br /> .bento-colspan-4 { grid-column: span 4; }<br /> .bento-colspan-5 { grid-column: span 5; }<br /> .bento-colspan-6 { grid-column: span 6; }<br /> <br /> .bento-rowspan-1 { grid-row: span 1; }<br /> .bento-rowspan-2 { grid-row: span 2; }<br /> .bento-rowspan-3 { grid-row: span 3; }<br /> <br /> .bento-h-sm { min-height: 100px; }<br /> .bento-h-md { min-height: 120px; }<br /> .bento-h-lg { min-height: 200px; }<br /> .bento-h-xl { min-height: 260px; }<br /> <br /> .bento-valign-start .bento-box-content { justify-content: flex-start; }<br /> .bento-valign-center .bento-box-content { justify-content: center; align-items: center; text-align: center; }<br /> .bento-valign-end .bento-box-content { justify-content: flex-end; }<br /> <br /> .bento-pad-sm .bento-box-content { padding: 12px; }<br /> .bento-pad-md .bento-box-content { padding: 20px; }<br /> .bento-pad-lg .bento-box-content { padding: 30px; }<br /> <br /> .bento-title-sm .bento-box-title { font-size: 1rem; }<br /> .bento-title-md .bento-box-title { font-size: 1.2rem; }<br /> .bento-title-lg .bento-box-title { font-size: 1.6rem; }<br /> .bento-title-xl .bento-box-title { font-size: 2rem; }<br /> <br /> .bento-has-image .bento-box-title {<br /> text-shadow: 2px 2px 0 #000;<br /> }<br /> <br /> .bento-style-accent {<br /> background-color: rgba(255, 84, 12, 0.08);<br /> border-color: #ff540c;<br /> }<br /> <br /> .bento-style-accent:hover {<br /> background-color: #ff540c;<br /> }<br /> <br /> .bento-style-accent:hover .bento-box-title {<br /> color: #0f0f11;<br /> }<br /> <br /> .bento-style-accent:hover .bento-box-subtitle {<br /> color: #0f0f11;<br /> }<br /> <br /> .bento-style-dark {<br /> background-color: #111113;<br /> }<br /> <br /> .bento-bg-opacity-20 .bento-box-bg { opacity: 0.2; }<br /> .bento-bg-opacity-40 .bento-box-bg { opacity: 0.4; }<br /> .bento-bg-opacity-60 .bento-box-bg { opacity: 0.6; }<br /> .bento-bg-opacity-80 .bento-box-bg { opacity: 0.8; }<br /> <br /> @media (max-width: 768px) {<br /> .bento-grid-cols-4,<br /> .bento-grid-cols-5,<br /> .bento-grid-cols-6 {<br /> grid-template-columns: repeat(2, 1fr);<br /> }<br /> <br /> .bento-colspan-3,<br /> .bento-colspan-4,<br /> .bento-colspan-5,<br /> .bento-colspan-6 {<br /> grid-column: span 2;<br /> }<br /> <br /> .bento-title-xl .bento-box-title {<br /> font-size: 1.4rem;<br /> }<br /> <br /> .bento-h-xl {<br /> min-height: 180px;<br /> }<br /> }<br /> <br /> @media (max-width: 480px) {<br /> .bento-grid {<br /> grid-template-columns: 1fr !important;<br /> }<br /> <br /> .bento-colspan-1,<br /> .bento-colspan-2,<br /> .bento-colspan-3,<br /> .bento-colspan-4,<br /> .bento-colspan-5,<br /> .bento-colspan-6 {<br /> grid-column: span 1;<br /> }<br /> <br /> .bento-h-xl {<br /> min-height: 140px;<br /> }<br /> <br /> .bento-title-xl .bento-box-title {<br /> font-size: 1.2rem;<br /> }<br /> }</div>

律Rhyme