css/layout.sass
Copying Source is Forbidden
644 lines of code
1
/////////////////////////////////////////////////////////////
2
3
body {
4
//border: 1px solid red;
5
color: var(--body-clr);
6
background-color: var(--bg-clr);
7
-[BODY-BG-IMAGE]-
8
9
@include padding(5px, 7px, 5px, 5px);
10
11
[GRID]
12
@include grid(grid, 1fr, -[BODY_ROWS]-);
13
14
[LOGGEDIN]
15
grid-template-areas: "header"
16
"nav"
17
"container"
18
"footer";
19
[/LOGGEDIN]
20
21
[NOTLOGGEDIN]
22
grid-template-areas: "header"
23
"container"
24
"footer";
25
[/NOTLOGGEDIN]
26
[/GRID]
27
28
&::-webkit-scrollbar {
29
background-color: var(--bg-clr);
30
width: 10px;
31
32
@include rounded;
33
}
34
35
&::-webkit-scrollbar-thumb {
36
background-color: var(--body-clr);
37
38
@include rounded;
39
}
40
41
[GRID]
42
// so ... now we need to accommodate mobile devices
43
// i'm simple, so let's just keep it simple, too!
44
@include mq {
45
@include grid(grid, 1fr, -[BRM]-);
46
}
47
[/GRID]
48
}
49
50
/////////////////////////////////////////////////////////////
51
52
.head {
53
//border: 1px solid random_clr();
54
grid-area: header;
55
56
@include grid(grid, 25% 50% 25%, min-content, 3px);
57
grid-template-areas: "logo msgs login";
58
59
.head-logo {
60
display: flex;
61
align-items: center;
62
//border: 1px solid random_clr();
63
grid-area: logo;
64
@include subnavbar;
65
66
width: min-content;
67
cursor: pointer;
68
color: getval($vars, link-clr);
69
font-style: italic;
70
}
71
72
.head-msgs {
73
//border: 1px solid random_clr();
74
grid-area: msgs;
75
white-space: nowrap;
76
text-align: center;
77
78
@include centered;
79
}
80
81
.head-login {
82
grid-area: login;
83
width: min-content;
84
justify-self: end;
85
86
@include subnavbar;
87
@include mq(370px) {
88
button {
89
border-width: 3px;
90
border-style: outset;
91
border-radius: 10px;
92
font-size: var(--normal-font-size);
93
padding: 18px 8px 18px 8px;
94
}
95
}
96
}
97
98
[LOGGEDIN]
99
@include mq {
100
@include grid(grid, min-content 1fr, min-content min-content, 3px);
101
grid-template-areas: "logo login"
102
"msgs msgs";
103
104
.head-logo {
105
@include centered-left;
106
}
107
108
.head-msgs {
109
@include centered;
110
}
111
}
112
113
@include mq(420px) {
114
.head-logo {
115
.title {
116
font-size: var(--large-font-size);
117
}
118
}
119
}
120
[/LOGGEDIN]
121
122
[NOTLOGGEDIN]
123
@include mq(600px) {
124
@include grid(grid, 1fr, repeat(3, min-content), 3px);
125
grid-template-areas: "logo"
126
"msgs"
127
"login";
128
.head-logo, .head-login { @include centered; }
129
}
130
[/NOTLOGGEDIN]
131
}
132
133
/////////////////////////////////////////////////////////////
134
135
.navi {
136
//border: 1px solid random_clr();
137
grid-area: nav;
138
@include grid(grid, 1fr min-content, 1fr);
139
grid-template-areas: "menu search";
140
141
.navi-menu {
142
//border: 1px solid random_clr();
143
grid-area: menu;
144
//@include centered-top;
145
}
146
147
.navi-search {
148
//border: 1px solid random_clr();
149
grid-area: search;
150
//@include centered-right;
151
@include grid(grid, repeat(7, min-content), min-content);
152
153
grid-template-areas: "age gender city country seeking search advanced";
154
155
.age { grid-area: age; }
156
.gender { grid-area: gender; }
157
.city { grid-area: city; }
158
.country { grid-area: country; }
159
.seeking { grid-area: seeking; }
160
.search { grid-area: search; }
161
.advanced { grid-area: advanced; padding-left: 3px; }
162
163
@include mq(750px) {
164
#gendersDropdown {
165
@include mini-select(/images/site/sex\.png);
166
}
167
}
168
169
@include mq(685px) {
170
#citiesDropdown {
171
@include mini-select(/images/brown/house\.png);
172
}
173
174
#countriesDropdown {
175
@include mini-select(/images/red/flag_canada\.png);
176
}
177
}
178
179
@include mq(525px) {
180
column-gap: 1px; // why the fuck ain't this workin!?
181
select { margin: 2px; }
182
183
#agesDropdown {
184
@include mini-select(/images/red/date\.png);
185
}
186
}
187
188
@include mq(500px) {
189
#seekingDropdown {
190
@include mini-select(/images/orange/party_hat\.png);
191
}
192
}
193
}
194
}
195
196
/////////////////////////////////////////////////////////////
197
198
.content {
199
//border: 1px solid random_clr();
200
grid-area: container;
201
202
[NOTLOGGEDIN]
203
@include centered;
204
[/NOTLOGGEDIN]
205
206
[LOGGEDIN]
207
@include grid(grid, 250px 1fr 250px, 1fr);
208
grid-template-areas: "sidebar main chat";
209
210
.content-sidebar { grid-area: sidebar; }
211
.content-main { grid-area: main; }
212
.content-chat { grid-area: chat; }
213
214
.content-sidebar {
215
//border: 1px solid random_clr();
216
@include grid(grid, 250px, 37vh 37vh);
217
grid-template-areas: "fmas"
218
"bdays";
219
220
.fmas { grid-area: fmas; }
221
.bdays { grid-area: bdays; }
222
223
.fmas, .bdays {
224
@include subnavbar;
225
}
226
227
@include mq(835px) {
228
@include grid(grid, 1fr 1fr, min-content);
229
grid-template-areas: "fmas bdays";
230
}
231
232
@include mq(420px) {
233
@include centered;
234
@include grid(grid, 250px, minmax(116px, min-content) minmax(116px, min-content));
235
grid-template-areas: "fmas"
236
"bdays";
237
}
238
}
239
240
.content-main {
241
//border: 1px solid random_clr();
242
@include centered;
243
@include grid(grid, 1fr, min-content 1fr);
244
grid-template-areas: "title"
245
"content";
246
247
.content-main-title {
248
grid-area: title;
249
font-size: var(--giant-font-size);
250
251
@include centered;
252
}
253
254
.content-main-content {
255
//border: 1px solid random_clr();
256
grid-area: content;
257
258
@include centered-top;
259
}
260
261
@include mq(450px) {
262
.content-main-title {
263
font-size: var(--normal-font-size);
264
}
265
}
266
}
267
268
@include mq(835px) {
269
@include grid(grid, 1fr min-content, min-content 1fr);
270
grid-template-areas: "main chat"
271
"sidebar sidebar";
272
}
273
274
@include mq(640px) {
275
@include grid(grid, 1fr, 1fr min-content min-content);
276
grid-template-areas: "main"
277
"sidebar"
278
"chat";
279
280
.content-chat {
281
@include centered;
282
}
283
}
284
[/LOGGEDIN]
285
}
286
287
/////////////////////////////////////////////////////////////
288
289
.foot {
290
//border: 1px solid random_clr();
291
grid-area: footer;
292
margin-top: 10px;
293
justify-content: center;
294
295
[BETA]
296
@include grid(flex, -[FOOT_COLS]-, min-content);
297
grid-template-areas: "footnav footbeta";
298
[/BETA]
299
300
[LOGGEDIN]
301
.foot-nav {
302
grid-area: footnav;
303
justify-self: end;
304
}
305
306
.foot-beta {
307
grid-area: footbeta;
308
justify-self: start;
309
}
310
311
[BETA]
312
@include mq(560px) {
313
@include grid(grid, 1fr, min-content min-content);
314
grid-template-areas: "footbeta"
315
"footnav";
316
317
.foot-beta {
318
justify-self: center;
319
}
320
321
.foot-nav {
322
justify-self: center;
323
}
324
}
325
[/BETA]
326
327
[NOTBETA]
328
@include mq {
329
grid-template-areas: "footnav";
330
@include grid(grid, 1fr, min-content);
331
332
.foot-nav {
333
justify-self: normal;
334
}
335
}
336
[/NOTBETA]
337
[/LOGGEDIN]
338
339
[NOTLOGGEDIN]
340
.footer {
341
grid-area: footnav;
342
@include centered;
343
344
padding-bottom: 5px;
345
}
346
[/NOTLOGGEDIN]
347
348
@include centered;
349
}
350
351
/////////////////////////////////////////////////////////////
352
353
.profile {
354
@include grid(grid, min-content min-content, min-content);
355
grid-template-areas: "card photos";
356
357
.card-extended { grid-area: card; width: 350px; }
358
.card { grid-area: card; width: 250px; }
359
.photos { grid-area: photos; height: 100%; }
360
361
@include mq(980px) {
362
@include grid(grid, min-content, min-content min-content);
363
grid-template-areas: "card" "photos";
364
}
365
}
366
367
/////////////////////////////////////////////////////////////
368
369
.settings-nav {
370
grid-area: settings-nav;
371
@include grid(grid, repeat(3, 1fr), repeat(3, min-content), 3px, 3px);
372
grid-template-areas: "bio vitals loc "
373
"desc password theme "
374
"membership coins blocks";
375
376
.vitals-nav { grid-area: vitals; }
377
.bio-nav { grid-area: bio; }
378
.loc-nav { grid-area: loc; }
379
.desc-nav { grid-area: desc; }
380
.password-nav { grid-area: password; }
381
.theme-nav { grid-area: theme; }
382
.membership-nav { grid-area: membership; }
383
.coins-nav { grid-area: coins; }
384
.blocks-nav { grid-area: blocks; }
385
}
386
387
/////////////////////////////////////////////////////////////
388
389
.friends-list, .search-list {
390
@include flex;
391
}
392
393
/////////////////////////////////////////////////////////////
394
395
.login-container {
396
@include grid(grid, repeat(3, min-content), min-content min-content, 0, 0);
397
grid-template-areas: "login-name login-password login-button"
398
"login-create login-forgot login-stayin";
399
400
.login-name { grid-area: login-name; }
401
.login-password { grid-area: login-password; }
402
.login-button { grid-area: login-button; @include centered; }
403
.login-create { grid-area: login-create; @include centered-right; }
404
.login-forgot { grid-area: login-forgot; @include centered-right; }
405
.login-stayin { grid-area: login-stayin; @include centered-right; }
406
407
@include mq(370px) {
408
//border: 1px solid red;
409
@include grid(grid, repeat(2, 1fr), repeat(4, min-content), 0, 0);
410
grid-template-areas: "login-name login-button"
411
"login-create login-button"
412
"login-password login-button"
413
"login-forgot login-stayin";
414
415
.login-button { align-content: end; justify-content: right; }
416
}
417
}
418
419
/////////////////////////////////////////////////////////////
420
421
.about-container {
422
@include grid(grid, 1fr min-content, repeat(2, min-content), 10px, 15px);
423
grid-template-areas: "promise credits"
424
"blurb blurb";
425
426
.about-promise { grid-area: promise; }
427
.about-credits { grid-area: credits; max-height: 385px; }
428
.about-blurb { grid-area: blurb; }
429
430
@include mq() {
431
@include grid(grid, 1fr, repeat(3, min-content));
432
grid-template-areas: "promise"
433
"blurb"
434
"credits";
435
}
436
}
437
438
/////////////////////////////////////////////////////////////
439
440
.signup-container {
441
@include grid(grid, 1fr min-content, min-content);
442
grid-template-areas: "account beta";
443
444
.signup-beta { grid-area: beta; }
445
.signup-account { grid-area: account; }
446
447
@include mq {
448
@include grid(grid, 1fr, min-content min-content);
449
grid-template-areas: "beta"
450
"account";
451
}
452
}
453
454
/////////////////////////////////////////////////////////////
455
456
.pics { @include flex($as: start); }
457
458
/////////////////////////////////////////////////////////////
459
460
.homepage {
461
@include centered;
462
@include grid(grid, min-content, min-content);
463
464
.phrase, .mail, .fbr, .browse {
465
text-align: center;
466
}
467
468
.mail { @include centered; }
469
470
.top10s {
471
@include grid(grid, 1fr 1fr, min-content);
472
grid-template-areas: "top10members top10matches";
473
474
@include mq(1050px) {
475
@include grid(grid, 1fr, min-content min-content);
476
grid-template-areas: "top10members"
477
"top10matches";
478
}
479
}
480
}
481
482
/////////////////////////////////////////////////////////////
483
484
.server_error_msg {
485
//border: 1px solid random_clr();
486
height: calc(100vh - 5px);
487
488
@include centered;
489
@include grid(grid, min-content min-content, 1fr);
490
grid-template-areas: "logo msg";
491
492
.logo { grid-area: logo; }
493
.msg { grid-area: msg; }
494
495
.error {
496
max-width: 190px;
497
word-wrap: break-word;
498
}
499
500
@include mq() {
501
@include grid(grid, min-content, 0.5fr 0.5fr); // is 0.5fr valid? works like i expect it to...
502
grid-template-areas: "msg" "logo";
503
}
504
}
505
506
/////////////////////////////////////////////////////////////
507
508
.stats-container {
509
//border: 1px solid random_clr();
510
height: 222px;
511
width: 100%;
512
//@include centered;
513
@include grid(grid, 1fr, 1fr min-content);
514
grid-template-areas: "divs"
515
"buttons";
516
517
.stats-divs {
518
//border: 1px solid random_clr();
519
@include centered;
520
grid-area: divs;
521
max-width: 100%;
522
}
523
524
.stats-buttons {
525
//border: 1px solid random_clr();
526
grid-area: buttons;
527
width: 100%;
528
}
529
}
530
531
/////////////////////////////////////////////////////////////
532
533
.album { @include flex(); }
534
.flex-container { @include flex(); }
535
.flex-container-top { @include flex($as: start); }
536
537
/////////////////////////////////////////////////////////////
538
539
.source-list {
540
//border: 1px solid random_clr();
541
white-space: nowrap;
542
543
@include flex();
544
545
.title {
546
width: 100%;
547
text-align: center;
548
}
549
550
.file {
551
//border: 1px solid random_clr();
552
@include side-padding();
553
554
&::after {
555
//border: 1px solid random_clr();
556
content: ' -';
557
padding-left: 5px;
558
}
559
}
560
}
561
562
.source {
563
//border: 1px solid red;
564
white-space: nowrap;
565
566
@include flex(column);
567
568
.file {
569
//border: 1px solid red;
570
@include side-padding();
571
572
&::after {
573
//border: 1px solid red;
574
content: ' -';
575
padding-left: 5px;
576
}
577
}
578
579
.title {
580
//border: 1px solid red;
581
width: 100%;
582
text-align: center;
583
}
584
585
.count {
586
color: var(--bold-clr);
587
font-weight: bold;
588
@include text-shadow;
589
}
590
591
.code {
592
@include sunken(1);
593
@include scrolling(vertical);
594
//border: 1px solid red;
595
596
max-height: 280px;
597
max-width: 780px;
598
min-height: 280px;
599
min-width: 180px;
600
padding: 8px;
601
602
td {
603
border-bottom: 0;
604
border-top: 0;
605
606
&.linenum {
607
background-color: blue;
608
border-left: 1px solid white;
609
border-right: 1px solid white;
610
color: white;
611
text-align: right;
612
padding-left: 2px;
613
padding-right: 2px;
614
}
615
}
616
617
tr:hover {
618
background-color: var(--bg-clr);
619
}
620
}
621
}
622
623
/////////////////////////////////////////////////////////////
624
625
.small-footer {
626
font-size: var(--small-font-size);
627
@include mq() {
628
font-size: var(--tiny-font-size);
629
}
630
}
631
632
/////////////////////////////////////////////////////////////
633
634
.ueditor_navbar {
635
//border: 1px solid random_clr();
636
display: flex;
637
flex-direction: row;
638
flex-wrap: wrap;
639
justify-content: space-between;
640
align-items: flex-start;
641
align-content: space-between;
642
width: 72%;
643
padding-bottom: 4px;
644
}