ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to ranged media with queries.

Browse source
This commit is contained in:
Fredrik Jonsson 2026-05-28 14:25:45 +02:00
commit 4de62e059b
8 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/_zen.css
View file

@ -81,7 +81,7 @@ aside {
article { article {
.submitted, .submitted,
.tags { .tags {
@media (min-width: 666px) { @media (width >= 666px) {
display: inline-block; display: inline-block;
padding-inline-end: 1rem; padding-inline-end: 1rem;
} }

4
assets/css/base/_header.css
View file

@ -10,7 +10,7 @@
gap: var(--header-gap); gap: var(--header-gap);
background-color: var(--color-header-bg); background-color: var(--color-header-bg);
@media (min-width: 666px) { @media (width >= 666px) {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
@ -49,7 +49,7 @@
/* Wrapper for any blocks placed in the header region. */ /* Wrapper for any blocks placed in the header region. */
.header__region { .header__region {
@media (min-width: 666px) { @media (width >= 666px) {
margin-inline-start: auto; margin-inline-start: auto;
} }
} }

6
assets/css/base/_images.css
View file

@ -5,7 +5,7 @@ img {
&.image { &.image {
--image-padding: 0.75rem; --image-padding: 0.75rem;
@media (min-width: 666px) { @media (width >= 666px) {
&.center { &.center {
margin-inline: auto; margin-inline: auto;
} }
@ -44,7 +44,7 @@ figure {
/* Nicer text wrap, e.g. no lone word on last line. */ /* Nicer text wrap, e.g. no lone word on last line. */
text-wrap: pretty; text-wrap: pretty;
@media (min-width: 666px) { @media (width >= 666px) {
padding-block-start: 0; padding-block-start: 0;
} }
@ -53,7 +53,7 @@ figure {
} }
} }
@media (min-width: 666px) { @media (width >= 666px) {
inline-size: fit-content; inline-size: fit-content;
&.left { &.left {

2
assets/css/components/_button.css
View file

@ -123,7 +123,7 @@ textarea {
} }
/* For forms on mobile with single field add space between it and the submit button. */ /* For forms on mobile with single field add space between it and the submit button. */
@media (min-width: 666px) { @media (width >= 666px) {
input:only-of-type { input:only-of-type {
&:has(+ [type='submit']) { &:has(+ [type='submit']) {
margin-inline-end: 0.5rem; margin-inline-end: 0.5rem;

2
assets/css/components/_flex-group.css
View file

@ -10,7 +10,7 @@
} }
} }
@media (min-width: 666px) { @media (width >= 666px) {
.flex-group--2 > * { .flex-group--2 > * {
flex-basis: calc(100% / 2 - var(--flex-gap)); flex-basis: calc(100% / 2 - var(--flex-gap));
flex-grow: 0; flex-grow: 0;

4
assets/css/components/_tables.css
View file

@ -1,7 +1,7 @@
.zebra-table { .zebra-table {
--table-cell-padding: 0.5rem; --table-cell-padding: 0.5rem;
@media (max-width: 666px) { @media (width < 666px) {
--table-cell-padding: 0.3rem; --table-cell-padding: 0.3rem;
} }
@ -32,7 +32,7 @@
.responsive-table { .responsive-table {
--table-gap: 0.5rem; --table-gap: 0.5rem;
@media (max-width: 666px) { @media (width < 666px) {
th { th {
display: none; display: none;
} }

6
assets/css/layouts/_layouts.css
View file

@ -4,7 +4,7 @@
.layout__page { .layout__page {
max-width: var(--max-page-width); max-width: var(--max-page-width);
@media (min-width: 666px) { @media (width >= 666px) {
margin-inline: auto; margin-inline: auto;
min-height: 100svh; min-height: 100svh;
} }
@ -27,7 +27,7 @@
.layout__navigation > * { .layout__navigation > * {
max-width: var(--max-content-width); max-width: var(--max-content-width);
@media (min-width: 666px) { @media (width >= 666px) {
margin-inline: auto; margin-inline: auto;
} }
} }
@ -86,7 +86,7 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@media (min-width: 999px) { @media (width >= 999px) {
.layout__page { .layout__page {
grid-template-rows: auto grid-template-rows: auto
auto auto

2
assets/css/reset/_reset.css
View file

@ -81,7 +81,7 @@ select {
} }
[type='search'] { [type='search'] {
@media (min-width: 666px) { @media (width >= 666px) {
/* Correct the odd appearance in Safari on desktop. */ /* Correct the odd appearance in Safari on desktop. */
-webkit-appearance: textfield; -webkit-appearance: textfield;
} }