Skip to content

Commit 487a38e

Browse files
mbrignallmbrignall
committed
amended css to test new config
1 parent 42e375e commit 487a38e

2 files changed

Lines changed: 130 additions & 159 deletions

File tree

‎assets/stylesorg.css‎

Lines changed: 109 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,228 +1,191 @@
1-
/* Base Styles */
2-
html, body {
3-
background-color: #1c1e26;
4-
font-size: 14px;
5-
line-height: 1.5;
6-
color: #dcdccc;
1+
/* --- Variables --- */
2+
:root {
3+
--bg-primary: #1c1e26;
4+
--bg-secondary: #2e3440;
5+
--bg-tertiary: #3b4252;
6+
--text-primary: #dcdccc;
7+
--text-secondary: #616e88;
8+
--text-link: #7ec98f;
9+
--accent-red: #e79686;
10+
--accent-green: #a3be8c;
11+
--accent-purple: #a89bb9;
12+
--accent-yellow: #ebcb8b;
13+
--accent-blue: #81a1c1;
14+
--border-color: #4c566a;
15+
--blockquote-border: #78C0A8;
16+
}
17+
18+
/* --- Base & Responsive Styles --- */
19+
html {
20+
font-size: 16px; /* A better default for accessibility */
21+
}
22+
23+
body {
24+
background-color: var(--bg-primary);
25+
color: var(--text-primary);
726
font-family: 'Fira Mono', monospace;
27+
line-height: 1.6;
28+
width: 90%;
29+
margin: 0 auto;
30+
padding: 15px;
831
}
932

10-
/* For Larger Screens */
11-
@media screen and (min-width: 680px) {
33+
@media screen and (min-width: 768px) {
1234
body {
1335
width: 48rem;
14-
margin: 0 auto;
1536
padding: 20px;
1637
}
1738
}
1839

19-
/* For Mobile */
20-
@media screen and (max-width: 430px) {
21-
body {
22-
width: 90%;
23-
margin: 0 auto;
24-
padding: 10px;
25-
}
40+
/* --- Typography --- */
41+
h1, h2, h3, h4 {
42+
margin-top: 1.5em;
43+
margin-bottom: 0.5em;
2644
}
2745

28-
/* Headings */
2946
h1 {
30-
color: #e79686;
47+
color: var(--accent-red);
3148
font-size: 2em;
3249
text-align: center;
3350
margin-bottom: 0;
3451
}
3552

36-
h2 {
37-
color: #7ec98f;
38-
font-size: 1.5em;
39-
margin-top: 20px;
40-
margin-bottom: 10px;
41-
border-bottom: 1px solid #7ec98f;
53+
h2, h3 {
4254
display: flex;
4355
justify-content: space-between;
56+
border-bottom: 1px solid;
57+
}
58+
59+
h2 {
60+
color: var(--text-link);
61+
font-size: 1.5em;
62+
border-bottom-color: var(--text-link);
4463
}
4564

4665
h3 {
47-
color: #a89bb9;
66+
color: var(--accent-purple);
4867
font-size: 1.2em;
49-
margin-top: 10px;
50-
margin-bottom: 5px;
51-
border-bottom: 1px solid #a89bb9;
52-
display: flex;
53-
justify-content: space-between;
68+
border-bottom-color: var(--accent-purple);
5469
}
5570

5671
h4 {
57-
color: #a89bb9;
58-
font-size: 1.2em;
59-
margin-top: 10px;
60-
margin-bottom: 5px;
72+
color: var(--accent-purple);
73+
font-size: 1.1em;
6174
}
6275

63-
/* Paragraphs and Lists */
6476
p {
6577
text-align: justify;
66-
margin-bottom: 1.5em;
78+
margin-bottom: 1em;
6779
}
6880

6981
ul {
7082
padding-left: 30px;
7183
}
7284

73-
/* Links */
7485
a {
75-
color: #7ec98f;
86+
color: var(--text-link);
87+
text-decoration: none;
7688
}
7789

7890
a:hover {
7991
text-decoration: underline;
8092
}
8193

82-
/* Centering Elements */
83-
.center {
84-
text-align: center;
85-
}
86-
87-
/* Block Quote */
88-
89-
blockquote{
90-
font-size: 0.6em;
91-
width: 90%;
92-
/* margin: 30px auto; */
93-
font-style: italic;
94-
color: #555555;
95-
padding: 1em 15px 1em 50px;
96-
border-left: 8px solid #78C0A8 ;
97-
line-height: 1;
98-
position: relative;
99-
background: #a89bb9;
94+
/* --- Blockquote --- */
95+
blockquote {
96+
font-size: 0.9em; /* Increased for readability */
97+
width: 90%;
98+
margin: 2em auto;
99+
font-style: italic;
100+
color: var(--text-primary);
101+
padding: 1em 15px 1em 50px;
102+
border-left: 8px solid var(--blockquote-border);
103+
line-height: 1.4;
104+
position: relative;
105+
background: var(--bg-secondary);
100106
}
101107

102-
blockquote::before{
103-
content: "\201C";
104-
color: #78C0A8;
105-
font-size: 4em;
106-
position: absolute;
107-
left: 10px;
108-
top: 10px;
108+
blockquote::before {
109+
content: "\201C";
110+
color: var(--blockquote-border);
111+
font-size: 4em;
112+
position: absolute;
113+
left: 10px;
114+
top: 0px;
109115
}
110116

111-
blockquote::after{
112-
content: '';
117+
blockquote span {
118+
display: block;
119+
color: var(--text-primary);
120+
font-style: normal;
121+
font-weight: bold;
122+
margin-top: 1em;
113123
}
114124

115-
blockquote span{
116-
display: block;
117-
color: #333333;
118-
font-style: normal;
119-
font-weight: bold;
120-
margin-top: 1em;
125+
/* --- Code Blocks --- */
126+
code, pre {
127+
background-color: var(--bg-secondary);
128+
color: var(--text-primary);
129+
font-family: 'Fira Mono', monospace;
130+
border-radius: 4px;
121131
}
122132

123-
/* Code Block - Inline Code */
124133
code {
125-
background-color: #2e3440;
126-
color: #dcdccc;
127134
padding: 2px 4px;
128-
border-radius: 4px;
129-
font-family: 'Fira Mono', monospace;
130135
}
131136

132-
/* Block Code - Preformatted Code Block */
133137
pre {
134-
background-color: #2e3440;
135-
color: #dcdccc;
136-
padding: 10px;
138+
padding: 1em;
137139
border-radius: 8px;
138-
overflow: auto;
139-
font-family: 'Fira Mono', monospace;
140+
overflow-x: auto;
140141
font-size: 0.9em;
141142
line-height: 1.4;
142143
}
143144

144-
/* Highlighted Code Block */
145145
pre.src {
146-
background-color: #3b4252;
147-
border: 1px solid #4c566a;
148-
padding: 10px;
149-
border-radius: 8px;
150-
overflow: auto;
151-
white-space: pre-wrap;
152-
word-wrap: break-word;
146+
background-color: var(--bg-tertiary);
147+
border: 1px solid var(--border-color);
153148
}
154149

155-
pre {
156-
overflow-x: auto;
157-
}
158-
159-
/* Org-mode Syntax Highlighting for src blocks */
160-
pre.src span {
161-
color: #dcdccc;
162-
}
163-
164-
pre.src .org-keyword {
165-
color: #81a1c1;
166-
}
167-
168-
pre.src .org-comment {
169-
color: #616e88;
170-
}
171-
172-
pre.src .org-string {
173-
color: #a3be8c;
174-
}
175-
176-
pre.src .org-constant {
177-
color: #ebcb8b;
178-
}
150+
/* Org-mode Syntax Highlighting */
151+
pre.src .org-keyword { color: var(--accent-blue); }
152+
pre.src .org-comment { color: var(--text-secondary); }
153+
pre.src .org-string { color: var(--accent-green); }
154+
pre.src .org-constant{ color: var(--accent-yellow); }
179155

180-
/* Org-mode SRC container */
156+
/* --- Org-mode Specific Elements --- */
181157
.org-src-container {
182-
margin-bottom: 1em;
158+
margin-bottom: 1.5em;
183159
}
184160

185-
/* Postamble styling */
186-
.postamble {
161+
.center, .postamble {
187162
text-align: center;
188-
font-size: 1em;
189163
}
190164

191-
.tag span {
192-
background-color: #ebcb8b;
193-
color: #3b4252;
194-
border: 1px solid #dcdccc;
195-
padding: 1px;
165+
/* Base class for all tags/todos */
166+
.tag-base {
167+
color: var(--bg-tertiary);
168+
border: 1px solid var(--text-primary);
169+
padding: 2px 5px;
196170
border-radius: 4px;
197-
font-size: 0.6em;
171+
font-size: 0.7em;
172+
font-weight: bold;
173+
text-transform: uppercase;
174+
}
175+
176+
/* Modifier classes for colors */
177+
.tag span {
178+
background-color: var(--accent-yellow);
198179
}
199180

200181
.todo.TODO {
201-
background-color: #e79686;
202-
color: #3b4252;
203-
font-weight: bold;
204-
border: 1px solid #dcdccc;
205-
padding: 1px;
206-
border-radius: 4px;
207-
font-size: 0.6em;
182+
background-color: var(--accent-red);
208183
}
209184

210185
.todo.STARTED {
211-
background-color: #ebcb8b;
212-
color: #3b4252;
213-
font-weight: bold;
214-
border: 1px solid #dcdccc;
215-
padding: 1px;
216-
border-radius: 4px;
217-
font-size: 0.6em;
186+
background-color: var(--accent-yellow);
218187
}
219188

220189
.todo.DONE {
221-
background-color: #a3be8c;
222-
color: #3b4252;
223-
font-weight: bold;
224-
border: 1px solid #dcdccc;
225-
padding: 1px;
226-
border-radius: 4px;
227-
font-size: 0.6em;
190+
background-color: var(--accent-green);
228191
}

0 commit comments

Comments
 (0)