Skip to content

Commit c4602a3

Browse files
maxi4329maxi4329
committed
Partially solves Bootstrap-Academy#143 
1 parent 21ca1be commit c4602a3

20 files changed

+507
-26
lines changed

‎assets/css/tailwind.css

+105-16
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
color: var(--color-info);
77
background-color: rgb(27, 42, 56);
88
} */
9-
:root {
9+
:root, .defaultTheme {
1010
--color-primary: #0b192e;
1111
--color-secondary: #182b45;
1212
--color-tertiary: #0b3341;
13+
--color-quaternary: #1c3250;
1314
--color-accent: #0cc9ab;
1415

1516
--color-black: #202121;
@@ -28,6 +29,52 @@
2829
--color-info: #177edc;
2930
}
3031

32+
@layer base {
33+
html[data-theme="accessibility"], .accessibilityTheme{
34+
--color-primary: #fff;
35+
--color-secondary: #f1f5f9;
36+
--color-tertiary: #e2e8f0;
37+
--color-quaternary: #cbd5e1;
38+
--color-accent: #055E4F; /* 7.04:1 contrast to #f1f5f9 */
39+
40+
--color-black: #fff;
41+
--color-dark: #000;
42+
/*--color-transparent: #fff;*/
43+
--color-light: lime;
44+
--color-white: #000;
45+
/* text*/
46+
--color-heading: #777;
47+
--color-subheading: #333;
48+
--color-body: #555;
49+
/*
50+
--color-error: #ff0000;
51+
--color-success: ;
52+
--color-info: ;
53+
--color-warning: ;
54+
*/
55+
56+
57+
* {
58+
font-family: "Lexend" !important;
59+
/* font-size: clamp(20px, 1em, 100px) !important; */
60+
line-height: 1.6 !important;
61+
letter-spacing: 2.5px !important;
62+
}
63+
p,a,label,h1,h2,h3,h4,h5,h6 {
64+
color: #000;
65+
}
66+
/*
67+
.text-heading-4, .text-body-1, .text-body-2, .text-subheading, .text-subheading-1, p, a, button {
68+
font-size: 20px !important;
69+
}
70+
*/
71+
:focus {
72+
outline: none;
73+
box-shadow: 0 0 0 5px #FFD700;
74+
}
75+
}
76+
}
77+
3178
/* ======================================================= Fonts */
3279
@font-face {
3380
font-family: "Ubuntu Mono";
@@ -51,6 +98,14 @@
5198
U+FEFF, U+FFFD;
5299
}
53100

101+
@font-face {
102+
font-family: "Lexend";
103+
src: url(~/public/fonts/Lexend/Lexend-Regular.ttf) format("truetype");
104+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
105+
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
106+
U+FEFF, U+FFFD;
107+
}
108+
54109
/* ======================================================= Transitions */
55110
.slide-up-enter-active,
56111
.slide-up-leave-active {
@@ -102,6 +157,7 @@
102157
/*** iPhone and iOS Form Input Zoom Fixes ***/
103158
/* Fix Input Zoom on devices older than iPhone 5: */
104159
@media screen and (device-aspect-ratio: 2/3) {
160+
105161
select,
106162
textarea,
107163
input[type="text"],
@@ -121,6 +177,7 @@
121177

122178
/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
123179
@media screen and (device-aspect-ratio: 40/71) {
180+
124181
select,
125182
textarea,
126183
input[type="text"],
@@ -140,6 +197,7 @@
140197

141198
/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */
142199
@media screen and (device-aspect-ratio: 375/667) {
200+
143201
select,
144202
textarea,
145203
input[type="text"],
@@ -160,6 +218,7 @@
160218

161219
/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */
162220
@media screen and (device-aspect-ratio: 9/16) {
221+
163222
select,
164223
textarea,
165224
input[type="text"],
@@ -184,18 +243,17 @@
184243
}
185244
}
186245

187-
@media (resolution > 1.5dppx) and (resolution <= 2dppx) {
188-
html {
189-
}
246+
@media (resolution > 1.5dppx) and (resolution <=2dppx) {
247+
html {}
190248
}
191249

192-
@media (resolution > 1dppx) and (resolution <= 1.5dppx) and (min-height: 550px) {
250+
@media (resolution > 1dppx) and (resolution <=1.5dppx) and (min-height: 550px) {
193251
html {
194252
font-size: 12px;
195253
}
196254
}
197255

198-
@media (resolution <= 1dppx) {
256+
@media (resolution <=1dppx) {
199257
body {
200258
/* @apply bg-warning; */
201259
}
@@ -206,6 +264,7 @@
206264
html {
207265
scroll-behavior: smooth;
208266
}
267+
209268
body {
210269
overflow-x: hidden;
211270
width: 100vw;
@@ -250,6 +309,7 @@
250309
-webkit-appearance: none;
251310
margin: 0;
252311
}
312+
253313
input::-webkit-outer-spin-button,
254314
input::-webkit-inner-spin-button {
255315
-webkit-appearance: none;
@@ -263,22 +323,27 @@
263323
*::-webkit-scrollbar {
264324
width: 5px;
265325
}
326+
266327
*::-webkit-scrollbar-thumb {
267328
background: var(--color-transparent);
268329
}
330+
269331
*:hover::-webkit-scrollbar-thumb {
270332
background: var(--color-accent);
271333
opacity: 0.6;
272334
border-radius: 20px;
273335
}
336+
274337
body:hover::-webkit-scrollbar-thumb {
275338
background: var(--color-tertiary);
276339
}
340+
277341
*:hover {
278342
-ms-overflow-style: var(--color-accent) !important;
279343
scrollbar-width: 5px !important;
280344
scrollbar-color: var(--color-accent);
281345
}
346+
282347
body:hover {
283348
-ms-overflow-style: var(--color-tertiary) !important;
284349
scrollbar-color: var(--color-tertiary);
@@ -289,15 +354,19 @@
289354
.markdown h1 {
290355
@apply text-heading-1;
291356
}
357+
292358
.markdown h2 {
293359
@apply text-heading-2;
294360
}
361+
295362
.markdown h3 {
296363
@apply text-heading-3;
297364
}
365+
298366
.markdown h4 {
299367
@apply text-heading-4;
300368
}
369+
301370
.markdown h5 {
302371
@apply text-heading-5;
303372
}
@@ -326,7 +395,7 @@
326395
@apply py-1 px-2 rounded w-fit bg-[#0d1117] text-white;
327396
}
328397

329-
.markdown pre > code {
398+
.markdown pre>code {
330399
@apply py-0 px-0 rounded-none w-fit bg-transparent;
331400
}
332401

@@ -337,9 +406,11 @@
337406
.form-submitting * {
338407
@apply opacity-70 pointer-events-none;
339408
}
409+
340410
.underline-link {
341411
@apply pb-2 relative cursor-pointer;
342412
}
413+
343414
.underline-link::after {
344415
content: "";
345416
position: absolute;
@@ -349,6 +420,7 @@
349420
bottom: 0;
350421
left: 0;
351422
}
423+
352424
.clamp {
353425
--n-lines: 1;
354426
margin: 0;
@@ -357,39 +429,49 @@
357429
text-overflow: ellipsis;
358430
display: -webkit-box;
359431
-webkit-box-orient: vertical;
360-
-webkit-line-clamp: var(--n-lines); /* number of lines to show */
432+
-webkit-line-clamp: var(--n-lines);
433+
/* number of lines to show */
361434
line-clamp: var(--n-lines);
362435
}
436+
363437
.clamp.line-1 {
364438
--n-lines: 1;
365439
}
440+
366441
.clamp.line-2 {
367442
--n-lines: 2;
368443
}
444+
369445
.clamp.line-3 {
370446
--n-lines: 3;
371447
}
448+
372449
.clamp.line-4 {
373450
--n-lines: 4;
374451
}
452+
375453
.h-screen-main {
376454
--bar-language-height: 28px;
377455
--bar-navigation-height: 79px;
378456
--total: calc(var(--bar-language-height) + var(--bar-navigation-height));
379457
--screen-height: calc(100vh - var(--total));
380458
height: var(--screen-height);
381459
}
460+
382461
.h-screen-main.min {
383462
height: 100%;
384463
min-height: var(--screen-height);
385464
}
465+
386466
.h-screen-main.max {
387467
height: fit-content;
388468
max-height: var(--screen-height);
389469
}
470+
390471
.mt-main {
391472
@apply mt-2 md:mt-4 lg:mt-6 xl:mt-8;
392473
}
474+
393475
.mb-main {
394476
@apply mb-6 sm:mb-10 md:mb-12 xl:mb-14;
395477
}
@@ -401,10 +483,12 @@
401483
--screen-height: calc(100vh - var(--total));
402484
height: var(--screen-height);
403485
}
486+
404487
.h-screen-inner.min {
405488
height: fit-content;
406489
min-height: var(--screen-height);
407490
}
491+
408492
.h-screen-inner.max {
409493
height: fit-content;
410494
max-height: var(--screen-height);
@@ -417,19 +501,25 @@
417501

418502
/* Hide scrollbar for IE, Edge and Firefox */
419503
.hide-scrollbar {
420-
-ms-overflow-style: none !important; /* IE and Edge */
421-
scrollbar-width: none !important; /* Firefox */
504+
-ms-overflow-style: none !important;
505+
/* IE and Edge */
506+
scrollbar-width: none !important;
507+
/* Firefox */
422508
overflow: auto !important;
423509
}
510+
424511
.modal-width-sm {
425512
@apply w-full sm:w-2/3 md:w-2/4 lg:w-2/6 xl:w-[28%];
426513
}
514+
427515
.modal-width-md {
428516
@apply w-[99%] md:w-[60%];
429517
}
518+
430519
.modal-width-lg {
431-
@apply w-[99%] md:w-[90%];
520+
@apply w-[99%] md:w-[90%];
432521
}
522+
433523
[data-tooltip] {
434524
--triangle-width: 15px;
435525
--spacing: 10px;
@@ -463,10 +553,9 @@
463553

464554
[data-tooltip]:hover::after {
465555
@apply box style-box bg-info text-white font-body absolute text-xs leading-[1.6];
466-
content: attr(data-tooltip); /* magic! */
467-
left: calc(
468-
100% + var(--spacing) + var(--triangle-width) + var(--triangle-width)
469-
);
556+
content: attr(data-tooltip);
557+
/* magic! */
558+
left: calc(100% + var(--spacing) + var(--triangle-width) + var(--triangle-width));
470559
top: -50%;
471560
z-index: 98;
472561
width: var(--tooltip-width);
@@ -493,4 +582,4 @@
493582
[data-tooltip=""]::after {
494583
display: none !important;
495584
}
496-
}
585+
}

‎components/Dialog.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323
</div>
2424

25-
<div class="card flex flex-wrap gap-card justify-end bg-[#1c3250]">
25+
<div class="card flex flex-wrap gap-card justify-end bg-[var(--color-quaternary)]">
2626
<Btn
2727
v-if="!!secondaryBtn.label"
2828
:bgColor="theme.bg"

‎components/Footer.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
class="container-fluid bg-tertiary flex flex-col items-center gap-7 pt-8 relative z-0"
44
>
55
<img
6-
src="/images/logo-text.png"
6+
:src="logoSrc"
77
:alt="t('AltAttributes.BootstrapAcademyLogo')"
88
class="w-40 mb-5 md:mt-2 block lg:hidden object-contain"
99
/>
@@ -59,6 +59,13 @@ import { defineComponent } from 'vue';
5959
import { useI18n } from 'vue-i18n';
6060
6161
export default defineComponent({
62+
computed: {
63+
logoSrc() {
64+
return document.documentElement.getAttribute('data-theme') === 'accessibility'
65+
? '/images/logo-black-text.png'
66+
: '/images/logo-text.png';
67+
}
68+
},
6269
setup() {
6370
const { t } = useI18n();
6471

‎components/Navbar.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<!-- START -->
44
<NuxtLink to="/" class="hidden lg:flex gap-card-sm items-center">
55
<img
6-
src="/images/logo-text.png"
6+
:src="logoSrc"
77
:alt="t('AltAttributes.BootstrapAcademyLogo')"
88
class="object-contain lg:w-28 xl:w-36 cursor-pointer"
99
/>
@@ -41,6 +41,13 @@ export default {
4141
links: { default: [] },
4242
authorized: { type: Boolean, default: false },
4343
},
44+
computed: {
45+
logoSrc() {
46+
return document.documentElement.getAttribute('data-theme') === 'accessibility'
47+
? '/images/logo-black-text.png'
48+
: '/images/logo-text.png';
49+
}
50+
},
4451
setup() {
4552
const { t } = useI18n();
4653

0 commit comments

Comments
 (0)