org-lms/canvas-styles.css at master · titaniumbones/org-lms · 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
/* Inline image float helpers — use #+ATTR_HTML: :class float-right (or float-left)
   on a standalone image paragraph. juice inlines these as style= attributes. */
.figure.float-right {
  float: right;
  margin: 0 0 1em 1.5em;
  max-width: 35%; }

.figure.float-left {
  float: left;
  margin: 0 1.5em 1em 0;
  max-width: 35%; }

.figure.float-right img,
.figure.float-left img {
  width: 100%;
  height: auto;
  display: block; }

/* ============================================================
   Two-column layouts: text+image side by side.
   Uses flexbox (inlined by juice, preserved by Canvas).

   USAGE — text left, image right:
     #+BEGIN_canvas-2col
     #+BEGIN_canvas-col
     Weekly text, readings, etc.
     #+END_canvas-col
     #+BEGIN_canvas-col
     [[./photo.jpg]]
     #+END_canvas-col
     #+END_canvas-2col

   Image left, text right: just swap the order of the two
   #+BEGIN_canvas-col blocks above.

   Unequal widths: use canvas-col-wide (2/3) + canvas-col-narrow (1/3)
   instead of canvas-col.
   ============================================================ */

.canvas-2col {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  align-items: flex-start;
  margin-bottom: 1.5em;
  clear: both; }

/* equal columns */
.canvas-2col > .canvas-col {
  flex: 1 1 40%;
  min-width: 0; }

/* wide column ~2/3 */
.canvas-2col > .canvas-col-wide {
  flex: 2 1 55%;
  min-width: 0; }

/* narrow column ~1/3 */
.canvas-2col > .canvas-col-narrow {
  flex: 1 1 25%;
  min-width: 0; }

/* images inside columns fill the column width */
.canvas-2col .figure {
  margin: 0; }

.canvas-2col .figure img {
  width: 100%;
  height: auto;
  display: block; }

.mygrid {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.mygrid > h1, .mygrid > h2 {
  grid-column: 1/-1;
  margin-left: auto;
  margin-right: auto; }

.colflow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* This is better for small screens, once min() is better supported */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /* This is the standardized property now, but has slightly less support */
  /* gap: 1rem */ }

table {
  font-size: 1.2em;
  border-spacing: 0 0;
  border-collapse: separate;
  border: 1px solid grey;
  /* zebra striping */ }
  table thead {
    background-color: #002a5c;
    color: white; }
  table tbody tr:nth-child(odd) {
    background-color: #dce6ff; }
  table tbody tr:nth-child(even) {
    background-color: #76b4ff; }
  table tbody tr td {
    padding-left: 1em;
    padding-right: 1em; }
  table a {
    color: #7700ee; }

#outline-container-course-schedule .outline-3 {
  border-radius: 10px;
  border: rgba(51, 51, 51, 0.75) 2px solid;
  padding-left: 1em;
  margin-bottom: 10px; }
  #outline-container-course-schedule .outline-3 .outline-4 {
    border: grey solid 1px;
    border-radius: 10px;
    padding: 1em;
    margin-right: 1em;
    margin-bottom: 1em; }

.content-box {
  background-color: var(--ic-brand-primary);
  color: #ffffff; }

section.outline-2 h2.content-box {
  margin-top: 0.25em;
  margin-bottom: 0.25em; }

#contents-course-schedule h5 {
  font-weight: bold; }

/*# sourceMappingURL=canvas-styles.css.map */