all repos

olexsmir.xyz @ d34979b

my site, yes, i like lua

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",
  },
}