diff --git a/src/styles/main.scss b/src/styles/main.scss index f812cbf..40ba36e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -49,6 +49,11 @@ $device-s-width: 600px; // Elements +a, a:visited { + color: var(--text-500); + font-weight: 400; +} + code { font-size: 90%; } @@ -175,6 +180,7 @@ button, select { border: none; background: none; + color: var(--text-500); appearance: none; font-family: inherit; @@ -366,8 +372,8 @@ body { gap: 0.75rem; - @media screen and (max-width: $device-s-width) and (orientation: portrait), - screen and (max-height: $device-s-width) and (orientation: landscape) { + @media screen and (max-width: $device-s-width), + (pointer: coarse) { display: none; } } @@ -677,8 +683,8 @@ body { border-top: 1px solid var(--border-500); - @media screen and (max-width: $device-s-width) and (orientation: portrait), - screen and (max-height: $device-s-width) and (orientation: landscape) { + @media screen and (max-width: $device-s-width), + (pointer: coarse) { writing-mode: vertical-lr; } @@ -897,8 +903,8 @@ body { // not on mobile -@media screen and (min-width: $device-s-width) and (orientation: portrait), - screen and (min-height: $device-s-width) and (orientation: landscape) { +@media screen and (min-width: $device-s-width) and + (pointer: fine) { .mobile { display: none; } @@ -910,8 +916,8 @@ body { // on mobile -@media screen and (max-width: $device-s-width) and (orientation: portrait), - screen and (max-height: $device-s-width) and (orientation: landscape) { +@media screen and (max-width: $device-s-width), + (pointer: coarse) { .toolbar { padding: 0.75rem 1rem 0.75rem 0.75rem; }