olexsmir.xyz/lua/blog/styles.lua(view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
local text_mutted = "color-mix(in srgb, var(--text-color) 70%, var(--background-color))"
return {
[":root"] = {
["--background-color"] = "#131418",
["--heading-color"] = "#eaeaea",
["--text-color"] = "#babdc4",
["--text-mutted"] = text_mutted,
["--link-color"] = "#82aee3",
["--code-background-color"] = "#2d2d2d",
},
["[data-theme='light']"] = {
["--background-color"] = "#fff",
["--heading-color"] = "#0d122b",
["--text-color"] = "#434648",
["--text-mutted"] = text_mutted,
["--link-color"] = "#003fff",
["--code-background-color"] = "#d8dbe2",
},
["#theme-toggle"] = {
all = "unset",
padding = "4px 8px",
border_radius = "10px",
cursor = "pointer",
["&:hover"] = { background = "rgba(0,0,0,0.09)" },
},
-- HEADER
header = { padding_bottom = "0.3rem" },
[".visual-hidden:not(:focus)"] = {
position = "absolute",
bottom = "100%",
},
["nav a"] = { margin_right = "0.9rem" },
["nav p"] = { margin_bottom = "0px" },
-- GENERAL
body = {
max_width = "66ch",
margin = "0 auto",
padding = "0.6rem 1.7rem 3.1rem",
font_family = 'system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif',
font_size = "1rem",
background_color = "var(--background-color)",
color = "var(--text-color)",
line_height = "1.5",
letter_spacing = "0.005em",
overflow_wrap = "anywhere",
},
a = {
color = "var(--link-color)",
cursor = "pointer",
text_decoration = "none",
["&:hover"] = { text_decoration = "underline" },
},
main = {
padding_top = "1.3rem",
line_height = "1.6",
a = {
color = "var(--text-color)",
text_decoration = "underline",
["&:hover"] = { color = "var(--link-color)" },
},
},
-- POSTS LIST
[".recent-posts"] = {
padding_top = "0.5rem",
["& span"] = {},
},
["ul.blog-posts"] = {
list_style_type = "none",
padding = "unset",
["& li"] = { display = "flex" },
["& li span"] = { flex = "0 0 130px" },
["& a"] = {
text_decoration = "none",
color = "var(--link-color)",
["&:hover"] = { text_decoration = "underline" },
["&:visited"] = { color = "var(--link-color)" },
},
},
time = {
color = "var(--text-mutted)",
font_family = "monospace",
font_style = "normal",
font_size = "0.95rem",
},
-- POST
[".blog-title"] = {
p = { margin_top = "0px" },
h1 = {
margin_top = "0px",
margin_bottom = "0px",
},
},
["h1, h2, h3, h4, h5, h6"] = {
font_family = "var(--font-main)",
color = "var(--heading-color)",
},
i = { font_style = "italic" },
img = {
max_width = "100%",
display = "block",
justify_self = "center",
},
table = { width = "100%" },
["strong, b"] = { color = "var(--heading-color)" },
button = {
margin = "0",
cursor = "pointer",
},
hr = {
border = "0",
border_top = "1px dashed",
},
pre = {
padding = "10px",
border_radius = "6px",
code = {
padding = "0",
border_radius = "0",
},
},
code = {
font_family = "monospace",
background_color = "var(--code-background-color)",
white_space = "pre-wrap",
padding = "0 0.3em",
},
}
|