1
2/* ---- responsive ------ */
3
4@media screen and (max-width: 1000px) {
5  .contentarea, .padfurther, .pane { width: 100% !important; }
6  .padfurther {
7  padding: 0px !important;
8  margin: 0px !important;
9}
10
11}
12
13@media screen and (max-width: 851px) {
14  .colourblock {
15    width: 30%;
16    margin: 0px 0.85em;
17  }
18}
19
20@media screen and (max-width: 700px) {
21  .titlewrapper { padding-left: 1em; } .descriptionwrapper { padding-left: 2em; }
22
23  .colourblock {
24    width: 32%;
25    margin: 0px;
26  }
27  .centerwrapper, .descriptionwrapper { width: 100%; }
28
29  .contentrow .statcol { float: none; }
30  .maincontentrow .statcol { width: 100% !important; }
31  .ddblueblockmenu li a { padding-left: 0px; }
32
33    /* rearrange elements * /
34  /*
35  https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
36  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
37  https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
38  */
39  .maincontentrow {
40    display: grid !important;
41    grid-template-columns: repeat(1);
42  }
43  .right { order: 2; float: none !important; }
44  .left { order: 3; float: none !important; }
45  /* /////_______//// */
46}
47
48
49
50
51@media screen and (max-width: 600px) {
52	.contentarea, .padfurther, .statcol, .pane { width: 100% !important; }
53	.statcol { display: block !important; clear: both;}
54	.padfurther { box-sizing: border-box; }
55}
56
57@media screen and (max-width: 500px) {
58  .headerpane p { margin: 0px; }
59  .divider { /*display: none; */ background-color: transparent; }
60  .descriptionwrapper { padding: 0.85em 0px 0.85em 2em; height: unset; min-height: 40px; }
61  .headerpane { height: unset; min-height: 72px; }
62  h2 { font-size: 1em; }
63  h3.post-title, .comments h4 { font-size: 1.85em; }
64  .contentarea { font-size: 1.15em; margin-top: 0px; }
65  .ddblueblockmenu { font-size: 1.15em; }
66  .ddblueblockmenu li { margin: 0.85em 0px; }
67
68  /* rearrange elements * /
69  /*
70  https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
71  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
72  https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
73  */
74  .contentarea {
75    display: grid !important;
76    grid-template-rows: none;
77    /*grid-template-columns: repeat(1);*/
78  }
79  .cbr { order: 2; float: none !important; }
80  .maincontentrow { order: 1; float: none !important; }
81  /* /////_______//// */
82  .colourblock:first-child { margin-left: 0px; }
83
84}
85
86#mediamanager__page .file dl dd, #mediamanager__page .file dl dt {
87  background-color: transparent;
88}
89
90/* media manager and config manager for mobile */
91@media screen and (max-width: 480px){
92  fieldset,
93  #mediamanager__page,
94  #mediamanager__page .filelist{
95    max-width: 100%; min-width: unset;
96  }
97  #mediamanager__page .file,
98  #mediamanager__page .namespaces,
99  #mediamanager__page .panel {
100    width: 100%; clear: both; float: none;
101  }
102  /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/
103  #config__manager tr { }
104  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 75%;  }
105
106  .dokuwiki fieldset { width: unset; }
107  #config__manager fieldset { width: 100%; box-sizing: border-box; }
108
109     /* make <select> not exceed it's parent div's width */
110    /* https://stackoverflow.com/q/44810056/337306 */
111    div.input { display: flex; } select { width: 100%; flex-shrink: 1; }
112
113  #config__manager fieldset td.value { width: unset; }
114
115  #config__manager td .input,
116  #config__manager fieldset td.value,
117  #config__manager td input.edit {
118    max-width: 100%;
119    width: unset;
120  }
121}