hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Make stuff look good on as many browser versions as possible

Browse Source 
Rejoice iPhone users, you'll have pretty CRT now as well!
This commit is contained in:
daudix
2024-01-23 09:47:59 +03:00
parent 5939a6681f
commit f8efb69e6c
7 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/_buttons.scss
View File

@ -12,7 +12,7 @@
color: var(--fg-color);
display: inline-block;
font-size: 0.9rem;
padding: 0.4rem 1rem;
padding: 0.5rem 1rem;
text-decoration: none;
transition: var(--transition);

4
sass/_comments.scss
View File

@ -199,7 +199,7 @@ section#comments {
footer {
display: flex;
gap: 0.4rem;
gap: 0.5rem;
grid-area: interactions;
margin-top: 1rem;
@ -209,7 +209,7 @@ section#comments {
font-size: 1rem;
font-variant-numeric: tabular-nums;
font-weight: 400;
padding: 0.4rem 1rem;
padding: 0.5rem 1rem;
text-decoration: none;
transition: var(--transition);

12
sass/_crt.scss
View File

@ -1,13 +1,11 @@
.crt {
margin: 1rem 0 1rem;
border-radius: var(--rounded-corner);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 5%, transparent),
0 2px 6px 2px color-mix(in srgb, var(--primary-color) 5%, transparent),
0 4px 24px 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
background-image: radial-gradient(
color-mix(in srgb, var(--primary-color) 20%, black),
color-mix(in srgb, var(--primary-color) 10%, black)
);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)),
var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-color-alpha),
0 2px 6px 2px var(--primary-color-alpha),
0 4px 24px 4px var(--primary-color-alpha);
pre {
color: var(--primary-color);

10
sass/_main.scss
View File

@ -29,7 +29,7 @@ body {
font-family: InterVariable, sans-serif;
line-height: 1.6;
color: var(--fg-color);
background-color: var(--bg-color);
background: var(--bg-color);
// Put footer at the bottom for short pages, such as the 404
display: grid;
min-height: 100vh;
@ -38,7 +38,7 @@ body {
// Style text selection to use primary color
::selection {
color: var(--bg-color);
color: var(--fg-color);
background-color: var(--primary-color);
}
@ -183,7 +183,7 @@ kbd {
}
code:not(pre code) {
padding: 2px 6px;
padding: 0.125rem 0.375rem;
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-2);
color: var(--red-fg);
@ -236,7 +236,7 @@ kbd {
display: inline-block;
font-size: 0.8rem;
line-height: normal;
padding: 2px 6px;
padding: 0.125rem 0.375rem;
transition: var(--transition);
// Small nice thingy, keys can be pressed!
&:active {
@ -247,7 +247,7 @@ kbd {
}
mark {
padding: 2px 6px;
padding: 0.125rem 0.375rem;
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
color: var(--primary-color);

6
sass/_nav.scss
View File

@ -2,7 +2,7 @@
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-bg);
border-radius: 28px;
border-radius: 26px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0px 12px 24px -16px rgba(0, 0, 0, 0.5);
margin: 1rem auto;
@ -33,7 +33,7 @@
ul {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
gap: 0.25rem;
justify-content: center;
margin: 0;
padding: 0;
@ -48,7 +48,7 @@
border-radius: 999px;
color: var(--fg-muted-4);
font-weight: 400;
padding: 0.45rem 1rem;
padding: 0.325rem 0.75rem;
text-decoration: none;
transition: var(--transition);

2
sass/_tags.scss
View File

@ -5,7 +5,7 @@
li {
display: inline-block;
margin: 0 0.2rem 0.4rem 0;
margin: 0 0.25rem 0.5rem 0;
transition: var(--transition);
&:active {

4
sass/_variables.scss
View File

@ -19,8 +19,8 @@
// VARIABLES
--active: 0.9;
--bg-color-l: color-mix(in srgb, var(--primary-color) 20%, white);
--bg-color-d: color-mix(in srgb, var(--primary-color) 10%, black);
--bg-color-l: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color);
--bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color);
--content-width: 720px;
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));