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); color: var(--fg-color);
display: inline-block; display: inline-block;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.4rem 1rem; padding: 0.5rem 1rem;
text-decoration: none; text-decoration: none;
transition: var(--transition); transition: var(--transition);

4
sass/_comments.scss
View File

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

12
sass/_crt.scss
View File

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

10
sass/_main.scss
View File

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

6
sass/_nav.scss
View File

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

2
sass/_tags.scss
View File

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

4
sass/_variables.scss
View File

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