Skip to content

Commit f3c0af1

Browse files
author
james
committed
docs: tweak css to improve reponsive behaviour
1 parent 3e98773 commit f3c0af1

File tree

2 files changed

+103
-34
lines changed
  • docs/ql-documentation/ql-training-rst

2 files changed

+103
-34
lines changed

‎docs/ql-documentation/ql-training-rst/_static-training/slides-semmle-2/static/theme/css/default.css‎

Lines changed: 102 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,6 @@ slides > slide {
140140
display: block;
141141
position: absolute;
142142
overflow: hidden;
143-
left: 50%;
144-
top: 50%;
145143
-moz-box-sizing: border-box;
146144
-webkit-box-sizing: border-box;
147145
box-sizing: border-box;
@@ -239,13 +237,9 @@ body {
239237
/* line 62, ../scss/default.scss */
240238
slides > slide {
241239
display: none;
242-
font-family: 'Open Sans', Arial, sans-serif;
243-
font-size: 26px;
240+
font-family: 'Lato', sans-serif;
241+
font-size: 2em;
244242
color: #797979;
245-
width: 900px;
246-
height: 700px;
247-
margin-left: -450px;
248-
margin-top: -350px;
249243
padding: 40px 60px;
250244
-moz-border-radius: 5px;
251245
-webkit-border-radius: 5px;
@@ -254,6 +248,7 @@ slides > slide {
254248
-o-transition: all 0.6s ease-in-out;
255249
-webkit-transition: all 0.6s ease-in-out;
256250
transition: all 0.6s ease-in-out;
251+
overflow: auto;
257252
}
258253
/* line 83, ../scss/default.scss */
259254
slides > slide.far-past {
@@ -296,7 +291,7 @@ slides > slide.dark {
296291
}
297292
/* line 135, ../scss/default.scss */
298293
slides > slide:not(.nobackground):before {
299-
font-size: 12pt;
294+
font-size: 1em;
300295
content: "";
301296
position: absolute;
302297
bottom: 20px;
@@ -311,11 +306,11 @@ slides > slide:not(.nobackground):before {
311306
}
312307
/* line 147, ../scss/default.scss */
313308
slides > slide:not(.nobackground):after {
314-
font-size: 12pt;
309+
font-size: 1em;
315310
content: attr(data-slide-num) "/" attr(data-total-slides);
316-
position: absolute;
311+
position: fixed;
317312
bottom: 20px;
318-
right: 60px;
313+
right: 20px;
319314
line-height: 1.9;
320315
}
321316
/* line 158, ../scss/default.scss */
@@ -372,8 +367,8 @@ slides.layout-faux-widescreen > slide {
372367
/* line 212, ../scss/default.scss */
373368
slides.layout-widescreen > slide,
374369
slides.layout-faux-widescreen > slide {
375-
margin-left: -620px;
376-
width: 1240px;
370+
width: 100%;
371+
overflow: auto;
377372
}
378373
/* line 217, ../scss/default.scss */
379374
slides.layout-widescreen > slide.far-past,
@@ -456,19 +451,19 @@ h1, h2, h3 {
456451
}
457452

458453
h1 {
459-
font-size: 50px;
454+
font-size: 3em;
460455
}
461456
/* line 280, ../scss/default.scss */
462457
h2 {
463-
font-size: 45px;
458+
font-size: 2em;
464459
line-height: 45px;
465460
letter-spacing: -2px;
466461
color: #515151;
467462
}
468463

469464
/* line 287, ../scss/default.scss */
470465
h3 {
471-
font-size: 30px;
466+
font-size: 1.6em;
472467
letter-spacing: -1px;
473468
line-height: 2;
474469
font-weight: inherit;
@@ -524,15 +519,15 @@ ul ul {
524519
/* line 337, ../scss/default.scss */
525520
pre {
526521
font-family: 'consolas', 'Courier New', monospace;
527-
font-size: 20px;
528-
line-height: 28px;
522+
font-size: 1em;
523+
line-height: 1.2em;
529524
padding: 10px 10px 10px 10px;
530525
margin-bottom: 20px;
531526
background-color: #e6e6e6;
532527
-moz-box-sizing: border-box;
533528
-webkit-box-sizing: border-box;
534529
box-sizing: border-box;
535-
/*overflow: hidden;*/
530+
overflow: auto;
536531
}
537532
/* line 351, ../scss/default.scss */
538533
pre[data-lang]:after {
@@ -541,7 +536,7 @@ pre[data-lang]:after {
541536
right: 0;
542537
top: 0;
543538
position: absolute;
544-
font-size: 16pt;
539+
font-size: 1em;
545540
color: white;
546541
padding: 2px 25px;
547542
text-transform: uppercase;
@@ -735,7 +730,7 @@ table tr:nth-child(odd) {
735730
/* line 488, ../scss/default.scss */
736731
table th {
737732
color: white;
738-
font-size: 18px;
733+
font-size: 1em;
739734
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiM0Mzg3ZmQiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzJhN2NkZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') no-repeat;
740735
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #4387fd), color-stop(80%, #2a7cdf)) no-repeat;
741736
background: -moz-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
@@ -744,7 +739,7 @@ table th {
744739
}
745740
/* line 494, ../scss/default.scss */
746741
table td, table th {
747-
font-size: 18px;
742+
font-size: 1em;
748743
padding: 1em 0.5em;
749744
}
750745
/* line 499, ../scss/default.scss */
@@ -764,7 +759,7 @@ table.rows {
764759

765760
/* line 510, ../scss/default.scss */
766761
q {
767-
font-size: 45px;
762+
font-size: 2em;
768763
line-height: 72px;
769764
}
770765
/* line 514, ../scss/default.scss */
@@ -901,7 +896,7 @@ article.smaller q:before, article.smaller q:after {
901896

902897
/* line 622, ../scss/default.scss */
903898
.note {
904-
position: absolute;
899+
position: fixed;
905900
z-index: 100;
906901
width: 100%;
907902
height: 100%;
@@ -1298,7 +1293,7 @@ aside.gdbar img {
12981293
}
12991294
/* line 891, ../scss/default.scss */
13001295
.title-slide hgroup h1 {
1301-
font-size: 65px;
1296+
font-size: 3em;
13021297
line-height: 1.4;
13031298
letter-spacing: -3px;
13041299
color: white;
@@ -1307,13 +1302,13 @@ aside.gdbar img {
13071302
}
13081303
/* line 898, ../scss/default.scss */
13091304
.title-slide hgroup h2 {
1310-
font-size: 34px;
1305+
font-size: 2em;
13111306
color: #a9a9a9;
13121307
font-weight: inherit;
13131308
}
13141309
/* line 904, ../scss/default.scss */
13151310
.title-slide hgroup p {
1316-
font-size: 20px;
1311+
font-size: 1.5em;
13171312
color: #797979;
13181313
line-height: 1.3;
13191314
margin-top: 2em;
@@ -1398,16 +1393,16 @@ em {
13981393
slide {
13991394
background-image: url("../../normal-slide.svg");
14001395
background-size: cover;
1401-
}
1396+
width: 100%;
1397+
height: 100%;
1398+
overflow: auto;
1399+
}
14021400

14031401
.end-slide {
14041402
background-image: url("../../end-slide.svg");
1405-
background-size: cover;
1403+
background-size: 100% 100%;
1404+
background-color: #5c31ff;
14061405
}
1407-
.agenda-slide {
1408-
background-image: url("../../agenda-slide.svg");
1409-
background-size: cover;
1410-
}
14111406

14121407
.background2 {
14131408
background-image: url("../../not-normal-slide.svg");
@@ -1459,6 +1454,7 @@ slide {
14591454

14601455
p {
14611456
color: #2c2a8a;
1457+
font-size: 1em;
14621458
}
14631459

14641460
/* James admonition changes */
@@ -1471,6 +1467,8 @@ p.first.admonition-title {
14711467
text-align: left;
14721468
font-size: initial;
14731469
width: 100%;
1470+
overflow: scroll;
1471+
border: 1px solid black;
14741472
}
14751473

14761474
.admonition.note pre {
@@ -1567,3 +1565,73 @@ p.first.admonition-title {
15671565
font-family: monospace !important;
15681566
}
15691567
}
1568+
1569+
@media (max-width: 480px) {
1570+
html {
1571+
height: 100%;
1572+
overflow: auto;
1573+
position: fixed;
1574+
width: 100%;
1575+
font-size: 40%;
1576+
}
1577+
1578+
body {
1579+
margin: 0;
1580+
padding: 0;
1581+
}
1582+
1583+
.column-left, .column-right {
1584+
width: 100%;
1585+
height: auto;
1586+
}
1587+
1588+
img {
1589+
transform: scale(0.6) translate(-20%, 0);
1590+
}
1591+
1592+
article {
1593+
position: absolute;
1594+
top: 20%;
1595+
left: 10%;
1596+
right: 10%;
1597+
}
1598+
}
1599+
1600+
@media (min-width: 481px) and (max-width: 1024px) {
1601+
html {
1602+
height: 100%;
1603+
overflow: auto;
1604+
position: fixed;
1605+
width: 100%;
1606+
font-size: 70%;
1607+
}
1608+
1609+
body {
1610+
margin: 0;
1611+
padding: 0;
1612+
}
1613+
1614+
.column-left, .column-right {
1615+
width: 100%;
1616+
height: auto;
1617+
}
1618+
1619+
img {
1620+
transform: scale(0.75)
1621+
}
1622+
}
1623+
1624+
@media (min-width: 1025px) and (max-width: 1800px) {
1625+
html {
1626+
height: 100%;
1627+
overflow: auto;
1628+
position: fixed;
1629+
width: 100%;
1630+
font-size: 80%;
1631+
}
1632+
1633+
body {
1634+
margin: 0;
1635+
padding: 0;
1636+
}
1637+
}

‎docs/ql-documentation/ql-training-rst/index.rst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.. toctree::
22
:glob:
3+
:hidden:
34

45
./intro-to-ql/*
56
./*

0 commit comments

Comments
 (0)