Braid-Group-Visualizations/style.css at main · lufreitas0000/Braid-Group-Visualizations · GitHub

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
/* General Body Styling */
body {
    font-family: 'Segoe UI', 'Inter', 'Roboto', sans-serif;
    background-color: oklch(38.05% 0.03 255.3);
    color: oklch(95.27% 0.01 240);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Main Container */
.container {
    width: 100%;
    max-width: 900px; /* Increased width for the new layout */
    text-align: left;
    background-color: oklch(42.5% 0.03 255.3);
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Header Styling */
header h1 {
    font-weight: 500;
    margin-bottom: 2rem; /* Increased bottom margin */
    color: oklch(100% 0 0);
    text-align: center;
    font-size: 2.5rem;
}

/* Content Section Styling (for text) */
.content-section {
    max-width: 700px;
    margin: 0 auto 2.5rem auto; /* Center the text sections */
    text-align: left;
}

.content-section h2 {
    font-weight: 500;
    margin-bottom: 1rem;
    border-bottom: 1px solid oklch(95.27% 0.01 240 / 0.2);
    padding-bottom: 0.5rem;
}

.content-section p {
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: oklch(81.16% 0.01 240);
}

/* Grid for the animation cards */
.animations-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to a single column */
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* A single animation card */
.animation-card {
    background-color: oklch(38.05% 0.03 255.3 / 0.5);
    padding: 1.5rem;
    border-radius: 10px;
}

.animation-card h3 {
    text-align: center;
    margin-bottom: 0.5rem;
}
.animation-card p {
    text-align: center;
    font-size: 0.9em;
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
}

/* Wrapper for the canvas and slider */
.animation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#braid-canvas {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    background-color: oklch(95.27% 0.01 240);
    border-radius: 10px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

#t-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 400px;
    height: 10px;
    background: oklch(38.05% 0.03 255.3);
    outline: none;
    border-radius: 5px;
    margin-top: 30px;
}

/* Placeholder Styling */
.animation-card.placeholder {
    opacity: 0.6;
}

.placeholder-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 3 / 4; /* Same aspect ratio as the real animation */
    background-color: oklch(42.5% 0.03 255.3 / 0.5);
    border: 2px dashed oklch(95.27% 0.01 240 / 0.3);
    border-radius: 10px;
    font-size: 1.5rem;
    color: oklch(95.27% 0.01 240 / 0.5);
}

/* ... Slider thumb styles (no changes) ... */
#t-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: oklch(66.5% 0.16 245); cursor: pointer; border-radius: 50%; border: 3px solid oklch(95.27% 0.01 240); box-shadow: 0 0 5px oklch(66.5% 0.16 245 / 0.5); }
#t-slider::-moz-range-thumb { width: 22px; height: 22px; background: oklch(66.5% 0.16 245); cursor: pointer; border-radius: 50%; border: 3px solid oklch(95.27% 0.01 240); box-shadow: 0 0 5px oklch(66.5% 0.16 245 / 0.5); }