1/////////////////
2// Semantic.gs // for LESS: http://lesscss.org/
3/////////////////
4
5// Defaults which you can freely override
6@column-width: 60;
7@gutter-width: 20;
8@columns: 12;
9
10// Utility variable — you should never need to modify this
11@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;
12
13// Set @total-width to 100% for a fluid layout
14@total-width: @gridsystem-width;
15
16// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
17// @min-width: 960;
18// @correction: 0.5 / @min-width * 100 * 1%;
19
20// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
21.clearfix() {
22	*zoom:1;
23
24	&:before,
25	&:after {
26	    content:"";
27	    display:table;
28	}
29	&:after {
30	    clear:both;
31	}
32}
33
34
35//////////
36// GRID //
37//////////
38
39body {
40	width: 100%;
41	.clearfix;
42}
43
44.row(@columns:@columns) {
45	display: block;
46	width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
47	margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
48	// *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
49	// *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
50	.clearfix;
51}
52.column(@x,@columns:@columns) {
53	display: inline;
54	float: left;
55	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
56	margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
57	// *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
58	// *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
59}
60.push(@offset:1) {
61	margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
62}
63.pull(@offset:1) {
64	margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
65}
66
67
68/* fixed.less has been moved here for dokuwiki 2020 */
69//@import 'semanticgridsystem.less';
70
71//////////
72// GRID //
73//////////
74
75// Specify the number of columns and set column and gutter widths
76@columns: 12;
77@column-width: 60;
78@gutter-width: 20;
79
80// Uncomment the definition below for a percentage-based layout
81// @total-width: 100%;
82
83
84////////////
85// LAYOUT //
86////////////
87
88// center the contents
89div.container {
90	max-width: @ini_site_width;
91	margin: 0 auto;
92	overflow: hidden;
93	background-color: #E3DEA6;
94	padding: 16px;
95}
96
97header {
98	//.column(12);
99}
100
101.footer {
102	width: 100%;
103}
104
105// main and sidebar
106#maincolumn {
107	.column(9);
108
109}
110
111#sidebar {
112	.column(3);
113}
114
115/* ______ */
116.flex { display: flex !important; }
117.sparewidth { flex-grow: 100; }
118/* make column fill spare remaining width of container
119		https://stackoverflow.com/a/40447261/337306 */
120
121		.makehigh{ display: table; }
122        .makehigh .column { display: table-cell; float: none; }
123        /* all columns same height */
124        /* https://www.w3schools.com/howto/howto_css_equal_height.asp */
125
126/* _______ */
127
128@media screen and (max-width: 1100px) {
129	/*body { background-color: green; } .container { background-color: red !important; }*/
130	#sidebar, #maincolumn { box-sizing: border-box; }
131}
132
133@media screen and (max-width: 700px) {
134	/*body, .container { background-color: purple !important; }*/
135    div.center { padding: 0px; width: 100%; }
136    header#top { margin: 0px; }
137
138    .flex { display: table-row !important; }
139
140	#maincolumn,
141	#sidebar,
142	.footer {
143		.column(12);
144		width: 100%;
145	}
146
147	#maincolumn, #sidebar { margin: 0px; }
148	.footer { margin: 20px 0px !important; }
149
150	.secondlevel { margin-left: 24px; }
151}