1
1
/*!------------------------------------------------------------------
2
2
[MAIN STYLESHEET]
3
3
4
- PROJECT: Project Name
5
- VERSION: Versoin Number
4
+ PROJECT: Persian Hugo
5
+ VERSION: 1.0.0
6
+ AUTHOR: Themefisher
7
+ AUTHOR WEBSITE: https://themefisher.com
8
+
6
9
-------------------------------------------------------------------*/
7
10
/*------------------------------------------------------------------
8
11
[TABLE OF CONTENTS]
@@ -24,7 +27,7 @@ p, .paragraph {
24
27
font-family: "Playfair Display", sans-serif; }
25
28
26
29
h1, h2, h3, h4, h5, h6 {
27
- color: #555 ;
30
+ color: #333 ;
28
31
font-family: "Playfair Display", sans-serif;
29
32
font-weight: 500;
30
33
line-height: 1.2; }
@@ -63,20 +66,20 @@ h6, .h6 {
63
66
box-shadow: none !important; }
64
67
65
68
.btn-primary {
66
- background: #F6A623 ;
69
+ background: #222 ;
67
70
color: #fff;
68
- border-color: #F6A623 ; }
71
+ border-color: #222 ; }
69
72
.btn-primary:active, .btn-primary:hover, .btn-primary.focus, .btn-primary.active {
70
- background: #F6A623 !important;
71
- border-color: #F6A623 !important; }
73
+ background: #222 !important;
74
+ border-color: #222 !important; }
72
75
73
76
.btn-outline-primary {
74
77
background: transparent;
75
78
color: #555;
76
- border-color: #F6A623 ; }
79
+ border-color: #222 ; }
77
80
.btn-outline-primary:active, .btn-outline-primary:hover, .btn-outline-primary.focus, .btn-outline-primary.active {
78
- background: #F6A623 !important;
79
- border-color: #F6A623 !important;
81
+ background: #222 !important;
82
+ border-color: #222 !important;
80
83
color: #fff; }
81
84
82
85
.btn-link {
@@ -93,7 +96,7 @@ h6, .h6 {
93
96
.btn-link:active, .btn-link:hover, .btn-link.focus, .btn-link.active {
94
97
background: transparent !important;
95
98
border: 0 !important;
96
- color: #F6A623 ;
99
+ color: #222 ;
97
100
text-decoration: none; }
98
101
.btn-link:active i, .btn-link:hover i, .btn-link.focus i, .btn-link.active i {
99
102
margin-left: 15px; }
@@ -104,7 +107,7 @@ body {
104
107
transition: .2s ease; }
105
108
106
109
::selection {
107
- background: #f8ba54 ;
110
+ background: #3c3c3c ;
108
111
color: #fff; }
109
112
110
113
/* preloader */
@@ -143,7 +146,7 @@ select {
143
146
outline: 0; }
144
147
145
148
a:hover {
146
- color: #F6A623 ; }
149
+ color: #222 ; }
147
150
148
151
.slick-slide {
149
152
outline: 0; }
@@ -188,58 +191,70 @@ a:hover {
188
191
display: unset !important; }
189
192
190
193
.bg-primary {
191
- background: #F6A623 !important; }
194
+ background: #222 !important; }
192
195
193
196
.bg-black {
194
197
background: #000 !important; }
195
198
196
199
.text-primary {
197
- color: #F6A623 !important; }
200
+ color: #222 !important; }
198
201
199
- .zindex-1 {
200
- z-index: 1 ; }
202
+ .bg-light {
203
+ background-color: #fbfbfb !important ; }
201
204
202
205
.form-control {
203
206
width: 100%;
204
207
height: 50px;
205
208
border: 1px solid #eee;
206
209
background-color: transparent;
207
- color: #555 ; }
210
+ color: #333 ; }
208
211
.form-control:focus {
209
- border-color: #eee ;
212
+ border-color: #222 !important ;
210
213
color: inherit;
211
214
box-shadow: none;
212
215
background-color: transparent; }
213
216
214
217
.form-group {
215
218
margin-bottom: 20px; }
216
219
.form-group label {
217
- color: #555;
218
- font-size: 15px; }
220
+ color: #333;
221
+ margin-bottom: 10px;
222
+ display: block; }
219
223
.form-group .form-control {
220
224
border: 0;
221
- border-bottom : 1px solid #eee;
225
+ border: 1px solid #eee;
222
226
border-radius: 0;
223
- padding: 0;
224
- height: 40px;
225
- background-color: inherit; }
227
+ padding: 0 20px;
228
+ height: 50px;
229
+ background-color: inherit;
230
+ color: #333; }
226
231
.form-group .form-control::placeholder {
227
- font-size: 13px;
228
- opacity: .8; }
232
+ font-size: 15px;
233
+ opacity: 1;
234
+ color: #555; }
229
235
230
236
textarea.form-control {
231
- height: 100px !important; }
237
+ height: 150px !important;
238
+ padding: 20px !important; }
239
+
240
+ mark {
241
+ background-color: transparent;
242
+ color: #fff;
243
+ border: 1px solid #fff;
244
+ border-radius: 3px;
245
+ margin: 0 5px;
246
+ padding: 0 5px; }
232
247
233
248
.navigation {
234
249
position: relative;
235
250
padding: 50px 0; }
236
251
237
252
.navbar-light .navbar-nav .nav-link {
238
- color: #555 ;
253
+ color: #333 ;
239
254
text-transform: capitalize;
240
- font-size: 14px ; }
255
+ font-size: 18px ; }
241
256
.navbar-light .navbar-nav .nav-link:hover {
242
- color: #F6A623 ; }
257
+ color: #222 ; }
243
258
244
259
.navbar-expand-md .navbar-nav .nav-item {
245
260
margin: 0; }
@@ -258,7 +273,7 @@ textarea.form-control {
258
273
font-size: 14px;
259
274
padding: 7px 22px; }
260
275
.navbar-expand-md .navbar-nav .dropdown-menu .dropdown-item:hover {
261
- color: #F6A623 ; }
276
+ color: #222 ; }
262
277
263
278
/* search */
264
279
.search-btn {
@@ -328,14 +343,17 @@ textarea.form-control {
328
343
left: 0;
329
344
width: 100%;
330
345
height: 100%;
331
- background: linear-gradient(to bottom, rgba(56, 56, 56, 0.45 ), rgba(56, 56, 56, 0.25 ) 100%); }
346
+ background: linear-gradient(to bottom, rgba(56, 56, 56, 0.5 ), rgba(56, 56, 56, 0.3 ) 100%); }
332
347
.post-date {
333
348
color: #fff;
334
349
min-height: 75px;
335
350
width: 75px;
336
351
border-radius: 50%;
337
352
border: 1px solid #fff;
338
353
margin: 0 auto 20px; }
354
+ @media (max-width: 575px) {
355
+ .post-date {
356
+ zoom: .7; } }
339
357
.post-date span {
340
358
display: block;
341
359
text-transform: uppercase; }
@@ -345,6 +363,15 @@ textarea.form-control {
345
363
.post-title {
346
364
font-size: 4rem;
347
365
color: #fff; }
366
+ @media (max-width: 1200px) {
367
+ .post-title {
368
+ font-size: 3rem; } }
369
+ @media (max-width: 991px) {
370
+ .post-title {
371
+ font-size: 1.7rem; } }
372
+ @media (max-width: 575px) {
373
+ .post-title {
374
+ font-size: 1.2rem; } }
348
375
.post-title a {
349
376
color: inherit; }
350
377
.post-meta {
@@ -354,13 +381,38 @@ textarea.form-control {
354
381
.post-meta a {
355
382
text-transform: uppercase; }
356
383
.post-meta a:hover {
357
- color: #F6A623 ; }
384
+ color: #222 ; }
358
385
.post .post-meta i {
359
386
color: #fff; }
360
387
.post .post-meta a {
361
388
color: #fff; }
389
+ @media (max-width: 575px) {
390
+ .post .post-meta a {
391
+ font-size: 12px; } }
362
392
.post-sm .post-title {
363
393
font-size: 1.7rem; }
394
+ @media (max-width: 575px) {
395
+ .post-sm .post-title {
396
+ font-size: 1.2rem; } }
397
+ .author-img {
398
+ height: 100px;
399
+ width: 100px;
400
+ border-radius: 50%;
401
+ object-fit: cover;
402
+ transform: translateY(50px); }
403
+
404
+ .facts {
405
+ text-align: center; }
406
+ .facts h1, .facts h2, .facts h3 {
407
+ display: inline-block;
408
+ border-bottom: 1px solid #000;
409
+ margin-bottom: 20px; }
410
+ .facts li {
411
+ border-bottom: 1px solid #eee;
412
+ padding: 10px 0;
413
+ margin: 0 !important; }
414
+ .facts li::before {
415
+ display: none; }
364
416
365
417
.pagination {
366
418
margin-top: 30px; }
@@ -377,14 +429,14 @@ textarea.form-control {
377
429
border: 0;
378
430
color: #555; }
379
431
.pagination .page-item .page-link:hover {
380
- background: #F6A623 ;
432
+ background: #222 ;
381
433
color: #fff; }
382
434
.pagination .page-item .page-link:focus {
383
435
box-shadow: none; }
384
436
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {
385
437
border-radius: 50%; }
386
438
.pagination .page-item.active .page-link {
387
- background: #F6A623 ;
439
+ background: #222 ;
388
440
color: #fff; }
389
441
390
442
.content * {
@@ -409,7 +461,7 @@ textarea.form-control {
409
461
color: #555;
410
462
border-bottom: 1px dotted #eee; }
411
463
.content a:hover {
412
- color: #F6A623 ; }
464
+ color: #222 ; }
413
465
414
466
.content ol,
415
467
.content ul {
@@ -431,7 +483,7 @@ textarea.form-control {
431
483
height: 8px;
432
484
width: 8px;
433
485
border-radius: 50%;
434
- background: #F6A623 ;
486
+ background: #222 ;
435
487
left: 3px;
436
488
top: 8px; }
437
489
@@ -454,13 +506,13 @@ textarea.form-control {
454
506
font-weight: 500; }
455
507
456
508
.content thead {
457
- background: #eee ;
509
+ background: #fbfbfb ;
458
510
margin-bottom: 0; }
459
511
.content thead tr {
460
512
border-bottom: 1px solid #eee; }
461
513
462
514
.content tbody {
463
- background: #fbfbfb ;
515
+ background: white ;
464
516
margin-bottom: 0; }
465
517
466
518
.content .notices {
@@ -483,7 +535,7 @@ textarea.form-control {
483
535
484
536
.content .notices.note p {
485
537
border-top: 30px solid #6ab0de;
486
- background: #eee ; }
538
+ background: #fbfbfb ; }
487
539
488
540
.content .notices.note p::after {
489
541
content: 'Note';
@@ -494,7 +546,7 @@ textarea.form-control {
494
546
495
547
.content .notices.tip p {
496
548
border-top: 30px solid #78C578;
497
- background: #eee ; }
549
+ background: #fbfbfb ; }
498
550
499
551
.content .notices.tip p::after {
500
552
content: 'Tip';
@@ -505,7 +557,7 @@ textarea.form-control {
505
557
506
558
.content .notices.info p {
507
559
border-top: 30px solid #F0B37E;
508
- background: #eee ; }
560
+ background: #fbfbfb ; }
509
561
510
562
.content .notices.info p::after {
511
563
content: 'Info';
@@ -516,7 +568,7 @@ textarea.form-control {
516
568
517
569
.content .notices.warning p {
518
570
border-top: 30px solid #E06F6C;
519
- background: #eee ; }
571
+ background: #fbfbfb ; }
520
572
521
573
.content .notices.warning p::after {
522
574
content: 'Warning';
@@ -529,10 +581,10 @@ textarea.form-control {
529
581
font-size: 20px !important;
530
582
color: #555;
531
583
padding: 20px 40px;
532
- border-left: 2px solid #F6A623 ;
584
+ border-left: 2px solid #222 ;
533
585
margin: 40px 0;
534
586
font-weight: bold;
535
- background: #eee ; }
587
+ background: #fbfbfb ; }
536
588
.content blockquote p {
537
589
margin-bottom: 0 !important; }
538
590
@@ -545,3 +597,17 @@ textarea.form-control {
545
597
.content code {
546
598
margin-bottom: 0 !important;
547
599
font-size: 100%; }
600
+
601
+ .quote {
602
+ background-color: #fbfbfb;
603
+ display: flex;
604
+ padding: 20px;
605
+ margin-bottom: 20px; }
606
+ .quote i {
607
+ font-size: 24px;
608
+ color: #222;
609
+ margin-right: 10px; }
610
+ .quote p {
611
+ font-style: italic; }
612
+ .quote-by {
613
+ color: #222; }
0 commit comments