tonybtw.com

https://git.tonybtw.com/tonybtw.com.git git://git.tonybtw.com/tonybtw.com.git

13,482 bytes raw

/*
 * Globals
 */
:root {
  --tokyonight-bg: #1a1b26;
  --tokyonight-fg: #c0caf5;
  --tokyonight-blue: #7aa2f7;
  --tokyonight-green: #9ece6a;
  --tokyonight-red: #f7768e;
  --tokyonight-yellow: #e0af68;
  --tokyonight-comment: #565f89;
  --cyan:  #565f89;
  --bg:    #1a1b26; /* colors[0] */
  --fg:    #a9b1d6; /* colors[1] */
  --blk:   #32344a; /* colors[2] */
  --red:   #f7768e; /* colors[3] */
  --grn:   #9ece6a; /* colors[4] */
  --ylw:   #e0af68; /* colors[5] */
  --blu:   #7aa2f7; /* colors[6] */
  --mag:   #ad8ee6; /* colors[7] */
  --cyn:   #0db9d7; /* colors[8] */
  --brblk: #444b6a; /* colors[9] */
}

@font-face {
  font-family: "JetBrainsMono Nerd Font";
  src: url('/fonts/JetBrainsMonoNerdFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Jost";
  src: url('/fonts/Jost-500-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


::root {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  /* font-weight: bold; */
}


.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  max-width: 80rem;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 16px;
  }

  .logo {
    max-width: 200px;
  }

  .row .column:not(:last-child) {
    margin-bottom: 1rem;
  }

  .video {
    width: 100%;
  }

  .list-form {
    width: 90%;
  }

  .newsletter-text {
    font-size: 0.42em;
  }

  blockquote {
    margin: 1rem 0rem;
  }
  aside.content-panel {
    display: none;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    max-width: 100%;
  }
}

/* sm */
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }

  .logo {
    max-width: 200px;
  }

  .row {
    display: flex;
    flex-direction: row;
    padding: 0;
    width: 100%;
  }

  .row .column {
    display: block;
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  .row .column:not(:last-child) {
    margin-right: 10px;
  }

  .align-right {
    text-align: right;
  }

  .video {
    width: 70%;
  }

  .list-form {
    width: 60%;
  }

  .newsletter-text {
    font-size: 0.9em;
  }

  blockquote {
    margin: 1rem 2rem;
  }
}

/* md */
@media screen and (min-width: 992px) {
  html {
    font-size: 18px;
  }

  .logo {
    max-width: 300px;
  }

  blockquote {
    margin: 1rem 4rem;
  }
}

/* lg */
@media screen and (min-width: 2560px) {
  html {
    font-size: 18px;
  }
}

body {
  background-color: var(--tokyonight-bg);
  color: var(--tokyonight-fg);
  /* font-family: 'JetBrainsMono Nerd Font'; */
  font-family: 'Jost', sans-serif;
  margin: 0;
  line-height: 1.5;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

b {
  font-weight: 700;
}

blockquote {
  background-color: #232635;
  font-style: italic;
  border: 1px solid;
  border-radius: 4px;
  border-image: linear-gradient(45deg, #f78c6c, rgb(250,224,66)) 1;
  padding: 1.4rem 1.4rem 0.4rem 1.4rem;
}

blockquote p {
  margin-bottom: 0.6rem;
}

dt {
  font-weight: bold;
}

dd {
  border-left: 3px solid #89aaeb;
  margin: 10px 40px;
  padding-left: 10px;
}


.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.subnav {
  background-color: #232635;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-weight: bold;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-top: 0.05rem solid #c3e88d;
  border-bottom: 0.05rem solid #c3e88d;
}

.subnav a {  /* margin-top: 2rem; */
  /* margin-bottom: 2rem; */

  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--tokyonight-blue);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.3rem;
  margin-bottom: 0.5rem;
}

h1 {
  color: var(--tokyonight-blue);
  font-size: 1.3rem;
  font-family: 'Jost', sans-serif;
}

h2 {
  color: var(--cyn);
  line-height: 1.2;
  font-family: 'Jost', sans-serif;
}

h3 {
  color: var(--tokyonight-blue);
  line-height: 1.1;
}

h4 {
  line-height: 1.0;
  color: #c3e88d;
}

a {
  color: var(--tokyonight-blue);
}

a:hover,
a:focus {
  text-decoration: underline;
  color: #82aaff;
}

.anchor {
  color: #292d3e;
  float: left;
  padding-right: 4px;
  margin-left: -23px;
}

.anchor:hover {
  text-decoration: none;
}

h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor {
  color: inherit;
}

kbd {
  font-family: "JetBrainsMono Nerd Font";
  font-weight: 200;
}

pre {
  border: 1px solid var(--tokyonight-blue);
  background-color: #232635;
  padding: 1em;
  overflow-x: scroll;
  max-width: 100%;
  box-sizing: border-box;
}


code {
  color: var(--mag);
  word-break: break-word;
  white-space: pre-wrap;
}

pre, code {
  /* font-size: 0.75em; */
  font-family: "JetBrainsMono Nerd Font";
}

strong {
  font-weight: 700;
}

.content {
  margin-top:
}


.logo {
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Nav links */
.nav-link {
  position: relative;
  padding: 0rem;
  font-size: 1.1rem;
  margin: 0.4rem 0.8rem 0.4rem 0rem;
  font-weight: bold;
  color: #cdddeb;
}
.nav-link:hover,
.nav-link:focus {
  color: #fff;
  background-color: transparent;
}

/* Active state gets a caret at the bottom */
.nav-link.active {
  color: #fff;
  font-weight: bolder;
}

.nav-icon {
  float: right;
}

.nav-icons {
  width: auto;
}

.site-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  
  font-weight: bold;
  /* background-image: url("/img/header_bg.png"); */
  /* background-image: url("/img/samarkand-bg.png"); */
  /* background-image: url("/img/castle-bg.png"); */
  background-image: url("/img/forrest-1-bg.png");
  /* background-image: url("/img/forrest-2-bg.png"); */
  /* background-image: url("/img/mountain-3-bg.png"); */
  /* background-image: url("/img/mountain-as-is-bg.png"); */
  /* background-image: url("/img/mountain-bg.png"); */
  background-size: cover;
  background-position: center;
  color: #1a1b26;
  border-bottom: 1px solid #292d3e;


  min-height: 160px;
  padding: 0; 
}

.site-masthead {
  font-family: sans-serif;
  font-weight: bold;
  margin-bottom: 0; 
  background-color: rgba(28, 31, 38, 0.5);
  border-bottom: 0.05rem solid var(--cyn);
  -webkit-box-shadow: inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.1);
}

.site-title {
  margin-bottom: 0rem;
  font-size: 2rem;
  font-weight: bold;
  color: #82aaff;
}
.site-description {
  font-size: 1.5rem;
  color: #999;
}

@media (max-width: 40em) {
  .site-description {
    margin-bottom: 1rem;
  }
}

/*
 * Site pages
 */

.site-post {
  margin-bottom: 2rem;
}

.site-post-title {
  font-size: 2.2rem;
}

.site-post-meta {
  color: #AAA;
}

.site-post-tags {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
  color: #999;
}

/*
 * Footer
 */

.site-footer {
  padding: 1.3rem 0;
  margin-top: 1rem;
  color: #cdddeb;
  font-size: 0.8rem;
  background-color: #232635;
  border-top: 0.05rem solid #c3e88d;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer-right {
  text-align: right;
}

.site-footer-line {
 margin-bottom: 0.4rem;
}

.video {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bold {
  font-weight: bold;
}

hr {
  border-bottom: 0.05rem solid #c3e88d;
}

.video::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

.cta {
  width: 80%;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #f78c6c;
  border-radius: 4px;
  background-color: #232635;
}

.cta p {
  margin: 5px;
}

.stream-time {
  width: 80%;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #c792ea;
  border-radius: 4px;
  background-color: #232635;
}

.list-form {
  font-size: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #c3e88d;
  border-radius: 4px;
  background-color: #232635;
}

.list-form-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #c3e88d;
}

.list-form-label {
  margin-top: 0.8rem;
  font-weight: bold;
}

.list-form input[type="text"] {
  width: 100%;
  padding: 7px 7px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #c3e88d;
  border-radius: 4px;
  background-color: #232635;
  color: #eeffff;
}

.list-form input[type="submit"] {
  width: 50%;
  padding: 10px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #89aaeb;
  border-radius: 4px;
  background-color: #89aaeb;
  color: #232635;
}

.newsletter-text {
}

.register-button {
  width: 60%;
  padding: 10px 10px;
  border: 1px solid #89aaeb;
  border-radius: 4px;
  background-color: #89aaeb;
  color: #232635;
}

a:hover.register-button,
a:focus.register-button {
  color: #232635;
}

aside.content-panel {
  margin-top: 0.75rem;
  background-color: #232635;
  border: 1px solid #565f89;
  border-radius: 6px;
  padding: 1rem;
  font-size: 0.9rem;
}

#tableOfContentContainer nav {
  padding-left: 0;
}

#tableOfContentContainer nav ul,
#tableOfContentContainer nav ol {
  list-style: none;
  padding-left: 0;
}

#tableOfContentContainer nav ol li > ol,
#tableOfContentContainer nav ul li > ul {
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 1px solid #444b6a;
}

#tableOfContentContainer nav li {
  margin-bottom: 0.5rem;
}

#tableOfContentContainer nav a {
  color: var(--tokyonight-blue);
  text-decoration: none;
}

#tableOfContentContainer nav a:hover {
  text-decoration: underline;
}

.row {
  flex-wrap: wrap;
}

.row .column {
  min-width: 0;
  box-sizing: border-box;
}

.post-hero {
  margin: 1.5rem 0;
  text-align: center;
}

.post-hero img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #3b4261; /* optional tokyonight border */
}


.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* max of 3 */
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 1024px) {
  .tutorial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tutorial-grid {
    grid-template-columns: 1fr;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: grid;
  }

  .tutorial-card {
    scroll-snap-align: start;
  }
}

/* .tutorial-grid { */
/*   display: grid; */
/*   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
/*   gap: 2rem; */
/*   max-width: 1280px; */
/*   margin: 0 auto; */
/*   padding: 0 1rem; */
/* } */

.tutorial-card-title {
  font-size: 1.2rem;
  color: #7aa2f7;
  margin-bottom: 0.5rem;
}

.tutorial-card-title a {
  text-decoration: none;
  color: inherit;
}

.tutorial-card-title a:hover {
  text-decoration: underline;
}

.tutorial-card-date {
  font-size: 0.875rem;
  color: #565f89;
  margin-bottom: 0.5rem;
}

.tutorial-card-description {
  font-size: 0.95rem;
  color: #c0caf5;
}

.tutorial-card {
  width: 426px;
  /* max-width: 480px; */
  background-color: var(--blk);
  border: 1px solid var(--blu);
  border-radius: 8px;
  padding: 1rem;
  color: #c0caf5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .tutorial-card {
    width: 100%;
  }
}

.tutorial-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--blu);
  border-radius: 4px;
  margin-bottom: 1rem;
  background-color: #16161e;
  box-sizing: border-box;
}

.btn-primary {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--blu);
  color: var(--blu);
  text-decoration: none;
  border-radius: 0.25rem;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--blu);
  color: #000;
}

.btn-outline {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--cyn);
  color: var(--cyn);
  text-decoration: none;
  border-radius: 0.25rem;
  font-weight: 600;
}

.btn-outline-secondary {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--mag);
  color: var(--mag);
  text-decoration: none;
  border-radius: 0.25rem;
  font-weight: 600;
}

.btn-outline-secondary:hover {
  background-color: var(--mag);
  color: #000;
}

.btn-outline:hover {
  background-color: var(--cyn);
  color: #000;
}

.recent-tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

th, td {
  border: 1px solid #444;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

th {
  background-color: #1a1b26; /* or your Tokyonight bg */
  color: #c0caf5;            /* Tokyonight fg */
}

td {
  background-color: #24283b; /* Slightly lighter bg */
  color: #a9b1d6;
}

@media screen and (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  tr {
    margin-bottom: 1rem;
  }

  th {
    display: none;
  }

  td {
    border: none;
    position: relative;
    padding-left: 1.5rem;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #7aa2f7;
  }
}

1	`/*`
2	`* Globals`
3	`*/`
4	`:root {`
5	`--tokyonight-bg: #1a1b26;`
6	`--tokyonight-fg: #c0caf5;`
7	`--tokyonight-blue: #7aa2f7;`
8	`--tokyonight-green: #9ece6a;`
9	`--tokyonight-red: #f7768e;`
10	`--tokyonight-yellow: #e0af68;`
11	`--tokyonight-comment: #565f89;`
12	`--cyan: #565f89;`
13	`--bg: #1a1b26; /* colors[0] */`
14	`--fg: #a9b1d6; /* colors[1] */`
15	`--blk: #32344a; /* colors[2] */`
16	`--red: #f7768e; /* colors[3] */`
17	`--grn: #9ece6a; /* colors[4] */`
18	`--ylw: #e0af68; /* colors[5] */`
19	`--blu: #7aa2f7; /* colors[6] */`
20	`--mag: #ad8ee6; /* colors[7] */`
21	`--cyn: #0db9d7; /* colors[8] */`
22	`--brblk: #444b6a; /* colors[9] */`
23	`}`
24
25	`@font-face {`
26	`font-family: "JetBrainsMono Nerd Font";`
27	`src: url('/fonts/JetBrainsMonoNerdFont-Regular.ttf') format('truetype');`
28	`font-weight: normal;`
29	`font-style: normal;`
30	`}`
31
32	`@font-face {`
33	`font-family: "Jost";`
34	`src: url('/fonts/Jost-500-Medium.ttf') format('truetype');`
35	`font-weight: normal;`
36	`font-style: normal;`
37	`}`
38
39
40	`::root {`
41	`box-sizing: border-box;`
42	`}`
43
44	`html {`
45	`font-size: 16px;`
46	`/* font-weight: bold; */`
47	`}`
48
49
50	`.container {`
51	`margin-right: auto;`
52	`margin-left: auto;`
53	`padding-right: 0.75rem;`
54	`padding-left: 0.75rem;`
55	`max-width: 80rem;`
56	`}`
57
58	`@media screen and (max-width: 767px) {`
59	`html {`
60	`font-size: 16px;`
61	`}`
62
63	`.logo {`
64	`max-width: 200px;`
65	`}`
66
67	`.row .column:not(:last-child) {`
68	`margin-bottom: 1rem;`
69	`}`
70
71	`.video {`
72	`width: 100%;`
73	`}`
74
75	`.list-form {`
76	`width: 90%;`
77	`}`
78
79	`.newsletter-text {`
80	`font-size: 0.42em;`
81	`}`
82
83	`blockquote {`
84	`margin: 1rem 0rem;`
85	`}`
86	`aside.content-panel {`
87	`display: none;`
88	`}`
89
90	`.container {`
91	`margin-right: auto;`
92	`margin-left: auto;`
93	`padding-right: 1rem;`
94	`padding-left: 1rem;`
95	`max-width: 100%;`
96	`}`
97	`}`
98
99	`/* sm */`
100	`@media screen and (min-width: 768px) {`
101	`html {`
102	`font-size: 16px;`
103	`}`
104
105	`.logo {`
106	`max-width: 200px;`
107	`}`
108
109	`.row {`
110	`display: flex;`
111	`flex-direction: row;`
112	`padding: 0;`
113	`width: 100%;`
114	`}`
115
116	`.row .column {`
117	`display: block;`
118	`flex: 1 1 auto;`
119	`max-width: 100%;`
120	`width: 100%;`
121	`}`
122
123	`.row .column:not(:last-child) {`
124	`margin-right: 10px;`
125	`}`
126
127	`.align-right {`
128	`text-align: right;`
129	`}`
130
131	`.video {`
132	`width: 70%;`
133	`}`
134
135	`.list-form {`
136	`width: 60%;`
137	`}`
138
139	`.newsletter-text {`
140	`font-size: 0.9em;`
141	`}`
142
143	`blockquote {`
144	`margin: 1rem 2rem;`
145	`}`
146	`}`
147
148	`/* md */`
149	`@media screen and (min-width: 992px) {`
150	`html {`
151	`font-size: 18px;`
152	`}`
153
154	`.logo {`
155	`max-width: 300px;`
156	`}`
157
158	`blockquote {`
159	`margin: 1rem 4rem;`
160	`}`
161	`}`
162
163	`/* lg */`
164	`@media screen and (min-width: 2560px) {`
165	`html {`
166	`font-size: 18px;`
167	`}`
168	`}`
169
170	`body {`
171	`background-color: var(--tokyonight-bg);`
172	`color: var(--tokyonight-fg);`
173	`/* font-family: 'JetBrainsMono Nerd Font'; */`
174	`font-family: 'Jost', sans-serif;`
175	`margin: 0;`
176	`line-height: 1.5;`
177	`}`
178
179	`p {`
180	`margin-top: 0;`
181	`margin-bottom: 1rem;`
182	`}`
183
184	`b {`
185	`font-weight: 700;`
186	`}`
187
188	`blockquote {`
189	`background-color: #232635;`
190	`font-style: italic;`
191	`border: 1px solid;`
192	`border-radius: 4px;`
193	`border-image: linear-gradient(45deg, #f78c6c, rgb(250,224,66)) 1;`
194	`padding: 1.4rem 1.4rem 0.4rem 1.4rem;`
195	`}`
196
197	`blockquote p {`
198	`margin-bottom: 0.6rem;`
199	`}`
200
201	`dt {`
202	`font-weight: bold;`
203	`}`
204
205	`dd {`
206	`border-left: 3px solid #89aaeb;`
207	`margin: 10px 40px;`
208	`padding-left: 10px;`
209	`}`
210
211
212	`.nav {`
213	`display: flex;`
214	`flex-wrap: wrap;`
215	`justify-content: center;`
216	`}`
217
218	`.subnav {`
219	`background-color: #232635;`
220	`display: flex;`
221	`flex-wrap: wrap;`
222	`justify-content: center;`
223	`margin-top: 2rem;`
224	`margin-bottom: 2rem;`
225	`font-weight: bold;`
226	`padding-top: 0.75rem;`
227	`padding-bottom: 0.75rem;`
228	`border-top: 0.05rem solid #c3e88d;`
229	`border-bottom: 0.05rem solid #c3e88d;`
230	`}`
231
232	`.subnav a { /* margin-top: 2rem; */`
233	`/* margin-bottom: 2rem; */`
234
235	`margin-left: 0.5rem;`
236	`margin-right: 0.5rem;`
237	`}`
238
239	`h1,`
240	`h2,`
241	`h3,`
242	`h4,`
243	`h5,`
244	`h6 {`
245	`color: var(--tokyonight-blue);`
246	`font-weight: 600;`
247	`line-height: 1.3;`
248	`margin-top: 1.3rem;`
249	`margin-bottom: 0.5rem;`
250	`}`
251
252	`h1 {`
253	`color: var(--tokyonight-blue);`
254	`font-size: 1.3rem;`
255	`font-family: 'Jost', sans-serif;`
256	`}`
257
258	`h2 {`
259	`color: var(--cyn);`
260	`line-height: 1.2;`
261	`font-family: 'Jost', sans-serif;`
262	`}`
263
264	`h3 {`
265	`color: var(--tokyonight-blue);`
266	`line-height: 1.1;`
267	`}`
268
269	`h4 {`
270	`line-height: 1.0;`
271	`color: #c3e88d;`
272	`}`
273
274	`a {`
275	`color: var(--tokyonight-blue);`
276	`}`
277
278	`a:hover,`
279	`a:focus {`
280	`text-decoration: underline;`
281	`color: #82aaff;`
282	`}`
283
284	`.anchor {`
285	`color: #292d3e;`
286	`float: left;`
287	`padding-right: 4px;`
288	`margin-left: -23px;`
289	`}`
290
291	`.anchor:hover {`
292	`text-decoration: none;`
293	`}`
294
295	`h2:hover .anchor,`
296	`h3:hover .anchor,`
297	`h4:hover .anchor {`
298	`color: inherit;`
299	`}`
300
301	`kbd {`
302	`font-family: "JetBrainsMono Nerd Font";`
303	`font-weight: 200;`
304	`}`
305
306	`pre {`
307	`border: 1px solid var(--tokyonight-blue);`
308	`background-color: #232635;`
309	`padding: 1em;`
310	`overflow-x: scroll;`
311	`max-width: 100%;`
312	`box-sizing: border-box;`
313	`}`
314
315
316	`code {`
317	`color: var(--mag);`
318	`word-break: break-word;`
319	`white-space: pre-wrap;`
320	`}`
321
322	`pre, code {`
323	`/* font-size: 0.75em; */`
324	`font-family: "JetBrainsMono Nerd Font";`
325	`}`
326
327	`strong {`
328	`font-weight: 700;`
329	`}`
330
331	`.content {`
332	`margin-top:`
333	`}`
334
335
336	`.logo {`
337	`display: block;`
338	`padding-top: 0.5rem;`
339	`padding-bottom: 0.5rem;`
340	`margin-left: auto;`
341	`margin-right: auto;`
342	`text-align: center;`
343	`}`
344
345	`/* Nav links */`
346	`.nav-link {`
347	`position: relative;`
348	`padding: 0rem;`
349	`font-size: 1.1rem;`
350	`margin: 0.4rem 0.8rem 0.4rem 0rem;`
351	`font-weight: bold;`
352	`color: #cdddeb;`
353	`}`
354	`.nav-link:hover,`
355	`.nav-link:focus {`
356	`color: #fff;`
357	`background-color: transparent;`
358	`}`
359
360	`/* Active state gets a caret at the bottom */`
361	`.nav-link.active {`
362	`color: #fff;`
363	`font-weight: bolder;`
364	`}`
365
366	`.nav-icon {`
367	`float: right;`
368	`}`
369
370	`.nav-icons {`
371	`width: auto;`
372	`}`
373
374	`.site-header {`
375	`display: flex;`
376	`flex-direction: column;`
377	`justify-content: flex-end;`
378	`font-weight: bold;`
379	`/* background-image: url("/img/header_bg.png"); */`
380	`/* background-image: url("/img/samarkand-bg.png"); */`
381	`/* background-image: url("/img/castle-bg.png"); */`
382	`background-image: url("/img/forrest-1-bg.png");`
383	`/* background-image: url("/img/forrest-2-bg.png"); */`
384	`/* background-image: url("/img/mountain-3-bg.png"); */`
385	`/* background-image: url("/img/mountain-as-is-bg.png"); */`
386	`/* background-image: url("/img/mountain-bg.png"); */`
387	`background-size: cover;`
388	`background-position: center;`
389	`color: #1a1b26;`
390	`border-bottom: 1px solid #292d3e;`
391
392
393	`min-height: 160px;`
394	`padding: 0;`
395	`}`
396
397	`.site-masthead {`
398	`font-family: sans-serif;`
399	`font-weight: bold;`
400	`margin-bottom: 0;`
401	`background-color: rgba(28, 31, 38, 0.5);`
402	`border-bottom: 0.05rem solid var(--cyn);`
403	`-webkit-box-shadow: inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.1);`
404	`box-shadow: inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.1);`
405	`}`
406
407	`.site-title {`
408	`margin-bottom: 0rem;`
409	`font-size: 2rem;`
410	`font-weight: bold;`
411	`color: #82aaff;`
412	`}`
413	`.site-description {`
414	`font-size: 1.5rem;`
415	`color: #999;`
416	`}`
417
418	`@media (max-width: 40em) {`
419	`.site-description {`
420	`margin-bottom: 1rem;`
421	`}`
422	`}`
423
424	`/*`
425	`* Site pages`
426	`*/`
427
428	`.site-post {`
429	`margin-bottom: 2rem;`
430	`}`
431
432	`.site-post-title {`
433	`font-size: 2.2rem;`
434	`}`
435
436	`.site-post-meta {`
437	`color: #AAA;`
438	`}`
439
440	`.site-post-tags {`
441	`margin-top: 3rem;`
442	`margin-bottom: 1.25rem;`
443	`font-size: 1.1rem;`
444	`color: #999;`
445	`}`
446
447	`/*`
448	`* Footer`
449	`*/`
450
451	`.site-footer {`
452	`padding: 1.3rem 0;`
453	`margin-top: 1rem;`
454	`color: #cdddeb;`
455	`font-size: 0.8rem;`
456	`background-color: #232635;`
457	`border-top: 0.05rem solid #c3e88d;`
458	`}`
459
460	`.site-footer p:last-child {`
461	`margin-bottom: 0;`
462	`}`
463
464	`.site-footer-right {`
465	`text-align: right;`
466	`}`
467
468	`.site-footer-line {`
469	`margin-bottom: 0.4rem;`
470	`}`
471
472	`.video {`
473	`position: relative;`
474	`overflow: hidden;`
475	`margin-left: auto;`
476	`margin-right: auto;`
477	`text-align: center;`
478	`}`
479
480	`.center {`
481	`display: block;`
482	`margin-left: auto;`
483	`margin-right: auto;`
484	`text-align: center;`
485	`}`
486
487	`.bold {`
488	`font-weight: bold;`
489	`}`
490
491	`hr {`
492	`border-bottom: 0.05rem solid #c3e88d;`
493	`}`
494
495	`.video::after {`
496	`display: block;`
497	`content: "";`
498	`padding-top: 56.25%;`
499	`}`
500
501	`.video iframe {`
502	`position: absolute;`
503	`top: 0;`
504	`left: 0;`
505	`border: 0;`
506	`width: 100%;`
507	`height: 100%;`
508	`}`
509
510	`.cta {`
511	`width: 80%;`
512	`padding: 1rem;`
513	`margin-top: 1rem;`
514	`margin-bottom: 1rem;`
515	`border: 1px solid #f78c6c;`
516	`border-radius: 4px;`
517	`background-color: #232635;`
518	`}`
519
520	`.cta p {`
521	`margin: 5px;`
522	`}`
523
524	`.stream-time {`
525	`width: 80%;`
526	`padding: 1rem;`
527	`margin-top: 1rem;`
528	`margin-bottom: 1rem;`
529	`border: 1px solid #c792ea;`
530	`border-radius: 4px;`
531	`background-color: #232635;`
532	`}`
533
534	`.list-form {`
535	`font-size: 0.8rem;`
536	`padding: 1rem;`
537	`margin-bottom: 1rem;`
538	`border: 1px solid #c3e88d;`
539	`border-radius: 4px;`
540	`background-color: #232635;`
541	`}`
542
543	`.list-form-title {`
544	`font-weight: 600;`
545	`font-size: 1.1rem;`
546	`margin-bottom: 0.5rem;`
547	`color: #c3e88d;`
548	`}`
549
550	`.list-form-label {`
551	`margin-top: 0.8rem;`
552	`font-weight: bold;`
553	`}`
554
555	`.list-form input[type="text"] {`
556	`width: 100%;`
557	`padding: 7px 7px;`
558	`margin: 8px 0;`
559	`box-sizing: border-box;`
560	`border: 1px solid #c3e88d;`
561	`border-radius: 4px;`
562	`background-color: #232635;`
563	`color: #eeffff;`
564	`}`
565
566	`.list-form input[type="submit"] {`
567	`width: 50%;`
568	`padding: 10px 10px;`
569	`margin: 8px 0;`
570	`box-sizing: border-box;`
571	`border: 1px solid #89aaeb;`
572	`border-radius: 4px;`
573	`background-color: #89aaeb;`
574	`color: #232635;`
575	`}`
576
577	`.newsletter-text {`
578	`}`
579
580	`.register-button {`
581	`width: 60%;`
582	`padding: 10px 10px;`
583	`border: 1px solid #89aaeb;`
584	`border-radius: 4px;`
585	`background-color: #89aaeb;`
586	`color: #232635;`
587	`}`
588
589	`a:hover.register-button,`
590	`a:focus.register-button {`
591	`color: #232635;`
592	`}`
593
594	`aside.content-panel {`
595	`margin-top: 0.75rem;`
596	`background-color: #232635;`
597	`border: 1px solid #565f89;`
598	`border-radius: 6px;`
599	`padding: 1rem;`
600	`font-size: 0.9rem;`
601	`}`
602
603	`#tableOfContentContainer nav {`
604	`padding-left: 0;`
605	`}`
606
607	`#tableOfContentContainer nav ul,`
608	`#tableOfContentContainer nav ol {`
609	`list-style: none;`
610	`padding-left: 0;`
611	`}`
612
613	`#tableOfContentContainer nav ol li > ol,`
614	`#tableOfContentContainer nav ul li > ul {`
615	`margin-left: 1rem;`
616	`padding-left: 0.5rem;`
617	`border-left: 1px solid #444b6a;`
618	`}`
619
620	`#tableOfContentContainer nav li {`
621	`margin-bottom: 0.5rem;`
622	`}`
623
624	`#tableOfContentContainer nav a {`
625	`color: var(--tokyonight-blue);`
626	`text-decoration: none;`
627	`}`
628
629	`#tableOfContentContainer nav a:hover {`
630	`text-decoration: underline;`
631	`}`
632
633	`.row {`
634	`flex-wrap: wrap;`
635	`}`
636
637	`.row .column {`
638	`min-width: 0;`
639	`box-sizing: border-box;`
640	`}`
641
642	`.post-hero {`
643	`margin: 1.5rem 0;`
644	`text-align: center;`
645	`}`
646
647	`.post-hero img {`
648	`width: 100%;`
649	`max-width: 100%;`
650	`height: auto;`
651	`border-radius: 8px;`
652	`border: 1px solid #3b4261; /* optional tokyonight border */`
653	`}`
654
655
656	`.tutorial-grid {`
657	`display: grid;`
658	`grid-template-columns: repeat(3, 1fr); /* max of 3 */`
659	`gap: 2rem;`
660	`max-width: 1280px;`
661	`margin: 0 auto;`
662	`padding: 0 1rem;`
663	`}`
664
665	`@media (max-width: 1024px) {`
666	`.tutorial-grid {`
667	`grid-template-columns: repeat(2, 1fr);`
668	`}`
669	`}`
670
671	`@media (max-width: 600px) {`
672	`.tutorial-grid {`
673	`grid-template-columns: 1fr;`
674	`overflow-x: auto;`
675	`scroll-snap-type: x mandatory;`
676	`display: grid;`
677	`}`
678
679	`.tutorial-card {`
680	`scroll-snap-align: start;`
681	`}`
682	`}`
683
684	`/* .tutorial-grid { */`
685	`/* display: grid; */`
686	`/* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */`
687	`/* gap: 2rem; */`
688	`/* max-width: 1280px; */`
689	`/* margin: 0 auto; */`
690	`/* padding: 0 1rem; */`
691	`/* } */`
692
693	`.tutorial-card-title {`
694	`font-size: 1.2rem;`
695	`color: #7aa2f7;`
696	`margin-bottom: 0.5rem;`
697	`}`
698
699	`.tutorial-card-title a {`
700	`text-decoration: none;`
701	`color: inherit;`
702	`}`
703
704	`.tutorial-card-title a:hover {`
705	`text-decoration: underline;`
706	`}`
707
708	`.tutorial-card-date {`
709	`font-size: 0.875rem;`
710	`color: #565f89;`
711	`margin-bottom: 0.5rem;`
712	`}`
713
714	`.tutorial-card-description {`
715	`font-size: 0.95rem;`
716	`color: #c0caf5;`
717	`}`
718
719	`.tutorial-card {`
720	`width: 426px;`
721	`/* max-width: 480px; */`
722	`background-color: var(--blk);`
723	`border: 1px solid var(--blu);`
724	`border-radius: 8px;`
725	`padding: 1rem;`
726	`color: #c0caf5;`
727	`box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);`
728	`box-sizing: border-box;`
729	`}`
730
731	`@media (max-width: 768px) {`
732	`.tutorial-card {`
733	`width: 100%;`
734	`}`
735	`}`
736
737	`.tutorial-card-image {`
738	`width: 100%;`
739	`aspect-ratio: 16 / 9;`
740	`border: 1px solid var(--blu);`
741	`border-radius: 4px;`
742	`margin-bottom: 1rem;`
743	`background-color: #16161e;`
744	`box-sizing: border-box;`
745	`}`
746
747	`.btn-primary {`
748	`display: inline-block;`
749	`padding: 0.5rem 1.25rem;`
750	`border: 2px solid var(--blu);`
751	`color: var(--blu);`
752	`text-decoration: none;`
753	`border-radius: 0.25rem;`
754	`font-weight: 600;`
755	`}`
756
757	`.btn-primary:hover {`
758	`background-color: var(--blu);`
759	`color: #000;`
760	`}`
761
762	`.btn-outline {`
763	`display: inline-block;`
764	`padding: 0.5rem 1.25rem;`
765	`border: 2px solid var(--cyn);`
766	`color: var(--cyn);`
767	`text-decoration: none;`
768	`border-radius: 0.25rem;`
769	`font-weight: 600;`
770	`}`
771
772	`.btn-outline-secondary {`
773	`display: inline-block;`
774	`padding: 0.5rem 1.25rem;`
775	`border: 2px solid var(--mag);`
776	`color: var(--mag);`
777	`text-decoration: none;`
778	`border-radius: 0.25rem;`
779	`font-weight: 600;`
780	`}`
781
782	`.btn-outline-secondary:hover {`
783	`background-color: var(--mag);`
784	`color: #000;`
785	`}`
786
787	`.btn-outline:hover {`
788	`background-color: var(--cyn);`
789	`color: #000;`
790	`}`
791
792	`.recent-tutorials-grid {`
793	`display: grid;`
794	`grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));`
795	`gap: 2rem;`
796	`max-width: 1280px;`
797	`margin: 0 auto;`
798	`padding: 0 1rem;`
799	`}`
800
801	`table {`
802	`border-collapse: collapse;`
803	`width: 100%;`
804	`margin: 1.5rem 0;`
805	`font-size: 0.95rem;`
806	`}`
807
808	`th, td {`
809	`border: 1px solid #444;`
810	`padding: 0.5rem 0.75rem;`
811	`text-align: left;`
812	`}`
813
814	`th {`
815	`background-color: #1a1b26; /* or your Tokyonight bg */`
816	`color: #c0caf5; /* Tokyonight fg */`
817	`}`
818
819	`td {`
820	`background-color: #24283b; /* Slightly lighter bg */`
821	`color: #a9b1d6;`
822	`}`
823
824	`@media screen and (max-width: 768px) {`
825	`table, thead, tbody, th, td, tr {`
826	`display: block;`
827	`}`
828
829	`tr {`
830	`margin-bottom: 1rem;`
831	`}`
832
833	`th {`
834	`display: none;`
835	`}`
836
837	`td {`
838	`border: none;`
839	`position: relative;`
840	`padding-left: 1.5rem;`
841	`}`
842
843	`td::before {`
844	`content: attr(data-label);`
845	`position: absolute;`
846	`left: 0;`
847	`top: 0;`
848	`font-weight: bold;`
849	`color: #7aa2f7;`
850	`}`
851	`}`