Browse Source

Enhances the mobile header/menu layout (#663)

tags/stw2018
Michael Weimann 6 months ago
parent
commit
a28f198fe7
Signed by: max.mehl <max.mehl@fsfe.org> GPG Key ID: 2704E4AB371E2E92

+ 0
- 2
build/xslt/fsfe_pageheader.xsl View File

@@ -20,8 +20,6 @@
20 20
           <xsl:element name="a">
21 21
             <xsl:attribute name="href">#menu-list</xsl:attribute>
22 22
             <xsl:attribute name="id">direct-to-menu-list</xsl:attribute>
23
-            <xsl:attribute name="data-toggle">collapse</xsl:attribute>
24
-            <xsl:attribute name="data-target">#menu-list</xsl:attribute>
25 23
             <xsl:element name="i">
26 24
               <xsl:attribute name="class">fa fa-bars fa-lg</xsl:attribute>
27 25
             </xsl:element>

+ 2
- 2
look/fellowship.min.css
File diff suppressed because it is too large
View File


+ 257
- 327
look/fsfe.less View File

@@ -6,7 +6,6 @@ body {
6 6
     background: url(/graphics/fellowship/plussy_tile_03.png) top left fixed #F9F9F9;
7 7
     font-family: "Roboto", sans-serif;
8 8
 }
9
-
10 9
 .svg body {
11 10
     background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
12 11
 }
@@ -14,7 +13,6 @@ body {
14 13
 #logo {
15 14
     background: url(/graphics/logo_transparent.png) top left no-repeat;
16 15
 }
17
-
18 16
 .svg #logo {
19 17
     background: url(/graphics/logo_transparent.svg) top left no-repeat;
20 18
 }
@@ -29,8 +27,90 @@ body {
29 27
     height: 85px;
30 28
 }
31 29
 
30
+@media (max-width: @screen-sm) {
31
+
32
+    #link-home a {
33
+        height: 50px;
34
+    }
35
+
36
+    #top {
37
+        display: flex;
38
+        flex-direction: column;
39
+        margin: 0;
40
+        padding: 0;
41
+        position: relative;
42
+
43
+        #search {
44
+            display: none;
45
+        }
46
+    }
47
+
48
+    #masthead {
49
+        background-color: #fff;
50
+        order: 1;
51
+        min-height: 50px;
52
+        padding: 10px;
53
+
54
+        #logo {
55
+            background-position: left center;
56
+            background-repeat: no-repeat;
57
+            background-size: contain;
58
+            min-height: 50px;
59
+            min-width: 120px;
60
+        }
61
+    }
62
+
63
+    #menu {
64
+        background-color: #fff;
65
+        margin-left: 0;
66
+        order: 2;
67
+        padding: 10px;
68
+
69
+        #direct-links {
70
+            margin-bottom: 0;
71
+
72
+            #direct-to-menu-list {
73
+                font-size: 1.3em;
74
+            }
75
+
76
+            #direct-to-translations {
77
+                position: absolute;
78
+                top: 5px;
79
+                right: 85px;
80
+            }
81
+
82
+            #direct-to-login {
83
+                position: absolute;
84
+                top: 5px;
85
+                right: 10px;
86
+            }
87
+        }
88
+
89
+        #direct-to-home,
90
+        #direct-to-join {
91
+            display: none;
92
+        }
93
+    }
94
+
95
+    #menu-list {
96
+        display: block;
97
+        margin-top: 10px;
98
+        padding-bottom: 0;
99
+    }
100
+
101
+    #index-html {
102
+        #main {
103
+            padding-top: 0;
104
+        }
105
+    }
106
+
107
+    #bottom {
108
+        padding: 10px;
109
+    }
110
+}
111
+
32 112
 #menu {
33
-    @media (min-width: @screen-xs) {
113
+    @media (min-width: @screen-sm) {
34 114
         margin-left: 200px;
35 115
     }
36 116
 }
@@ -46,14 +126,14 @@ body {
46 126
 
47 127
 .svg #followup {
48 128
     @media (min-width: @screen-sm) {
49
-        background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg;
129
+        background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg; 
50 130
     }
51 131
 }
52 132
 
53 133
 #followup.join {
54
-    background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg;
134
+    background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg; 
55 135
     @media (min-width: @screen-sm) {
56
-        background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg;
136
+        background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg; 
57 137
     }
58 138
 }
59 139
 
@@ -116,7 +196,7 @@ img.signatory-logo {
116 196
             }
117 197
 
118 198
             p.text {
119
-                /*background: url('/graphics/fsfs.png') top center no-repeat transparent;
199
+                /*background: url('/graphics/fsfs.png') top center no-repeat transparent; 
120 200
                 background-size: contain; */
121 201
                 -moz-hyphens: manual;
122 202
                 -webkit-hyphens: manual;
@@ -355,6 +435,7 @@ img.signatory-logo {
355 435
 }
356 436
 
357 437
 
438
+
358 439
 #news {
359 440
     padding-bottom: 1.5em;
360 441
 
@@ -410,9 +491,14 @@ img.signatory-logo {
410 491
 }
411 492
 
412 493
 .newsdate {
413
-    font-size: .875em;
414
-    color: #888;
415
-    margin-right: 1ex;
494
+  font-size: .875em;
495
+  color: #888;
496
+  margin-right: 1ex;
497
+}
498
+
499
+[newsteaser="yes"] {
500
+	font-weight: bold;
501
+	font-size: 1.2em;
416 502
 }
417 503
 
418 504
 [newsteaser="yes"] {
@@ -433,7 +519,6 @@ img.signatory-logo {
433 519
         h3 {
434 520
             display: inline-block;
435 521
         }
436
-
437 522
         p.date {
438 523
             #news .dt-published;
439 524
             display: block;
@@ -443,7 +528,6 @@ img.signatory-logo {
443 528
             }
444 529
         }
445 530
     }
446
-
447 531
     a.learn-more {
448 532
         line-height: 2;
449 533
     }
@@ -455,7 +539,6 @@ img.signatory-logo {
455 539
         float: left;
456 540
         width: 69%;
457 541
     }
458
-
459 542
     #team {
460 543
         display: inline-block;
461 544
         float: left;
@@ -476,8 +559,6 @@ img.signatory-logo {
476 559
         display: block;
477 560
         margin: .5em 0;
478 561
     }
479
-
480
-    margin-bottom: 20px;
481 562
 }
482 563
 
483 564
 #feeds {
@@ -529,21 +610,13 @@ ul.archivetaglist li {
529 610
     padding: 0 0.25em;
530 611
 }
531 612
 
532
-ul.archivemeta li:first-child {
533
-    padding-left: 0;
534
-}
613
+ul.archivemeta li:first-child {padding-left: 0; }
535 614
 
536
-ul.archivemeta li a, ul.archivetaglist li a {
537
-    color: #999;
538
-}
615
+ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
539 616
 
540
-.archiveauthor {
541
-    margin: 0 0.25em;
542
-}
617
+.archiveauthor { margin: 0 0.25em; }
543 618
 
544
-ul.archivetaglist {
545
-    margin-left: 6%;
546
-}
619
+ul.archivetaglist { margin-left: 6%; }
547 620
 
548 621
 /* donate */
549 622
 
@@ -558,7 +631,6 @@ ul.archivetaglist {
558 631
             .form-control;
559 632
             max-width: 25em;
560 633
         }
561
-
562 634
         #donate-validate {
563 635
             .btn;
564 636
             .btn-lg;
@@ -592,12 +664,9 @@ ul.archivetaglist {
592 664
     @media (min-width: @screen-md) {
593 665
         position: absolute;
594 666
         margin-left: -200px;
595
-        margin-top: -10em;
596
-    }
597
-
598
-    img {
599
-        display: none;
667
+        margin-top:-10em;
600 668
     }
669
+    img {display: none;}
601 670
 }
602 671
 
603 672
 /* Valentine for ILOVEFS style */
@@ -606,27 +675,27 @@ ul.archivetaglist {
606 675
     #logo {
607 676
         background: url(/graphics/logov.png) top left no-repeat;
608 677
     }
609
-
610 678
     .svg #logo {
611 679
         background: url(/graphics/logov.svg) top left no-repeat;
612 680
     }
613 681
 
614 682
     #followup {
615
-        background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg;
683
+        background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg; 
616 684
 
617 685
         @media (min-width: @screen-sm) {
618
-            background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
686
+            background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg; 
619 687
         }
620 688
     }
621 689
 }
622 690
 
623 691
 .svg .valentine-ilovefs #followup {
624 692
     @media (min-width: @screen-sm) {
625
-        background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
693
+        background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg; 
626 694
     }
627 695
 }
628 696
 
629 697
 
698
+
630 699
 /* Planet style */
631 700
 
632 701
 .planet #motto {
@@ -647,10 +716,9 @@ ul.archivetaglist {
647 716
 
648 717
 #planet-posts {
649 718
     .daygroup {
650
-        h2:first-child {
719
+    	h2:first-child {
651 720
             color: @brand-strong;
652 721
         }
653
-
654 722
         .blogitem {
655 723
             padding-bottom: 3em;
656 724
             margin-bottom: 3em;
@@ -666,9 +734,9 @@ ul.archivetaglist {
666 734
 
667 735
 .wiki #direct-links {
668 736
     visibility: visible;
669
-
737
+    
670 738
     a {
671
-        display: inline-block;
739
+        display:inline-block;
672 740
     }
673 741
 }
674 742
 
@@ -682,371 +750,233 @@ ul.archivetaglist {
682 750
 /* PDFreaders buglist */
683 751
 
684 752
 tr.highlighted {
685
-    background-color: rgb(208, 244, 0);
753
+  background-color: rgb(208,244,0);
686 754
 }
687 755
 
688 756
 
689 757
 /* FSFE Shop (/order) */
690 758
 
691 759
 table.merchandise tr {
692
-    border-bottom: 1px solid #ddd;
760
+  border-bottom: 1px solid #ddd;
693 761
 }
694
-
695 762
 table.merchandise tr:last-child {
696
-    border-bottom: medium none;
763
+  border-bottom: medium none;
697 764
 }
698
-
699 765
 table.merchandise td {
700
-    padding: 10px 0;
766
+  padding: 10px 0;
701 767
 }
702
-
703 768
 table.merchandise .image {
704
-    width: 25%;
705
-    min-width: 250px;
769
+  width: 25%;
770
+  min-width: 250px;
706 771
 }
707
-
708 772
 table.merchandise .image img {
709
-    max-height: 120px;
710
-    margin: 5px;
773
+  max-height: 120px;
774
+  margin: 5px;
711 775
 }
712
-
713 776
 table.merchandise .description {
714
-    width: 60%;
777
+  width: 60%;
715 778
 }
716
-
717 779
 table.merchandise .quantity {
718
-    text-align: right;
719
-    width: 15%;
720
-    min-width: 100px
780
+  text-align: right;
781
+  width: 15%;
782
+  min-width: 100px
721 783
 }
722
-
723 784
 @media only screen and (max-device-width: 700px) {
724
-    table.merchandise .image {
725
-        min-width: 125px;
726
-    }
785
+  table.merchandise .image {
786
+    min-width: 125px;
787
+  }
727 788
 }
728
-
729 789
 @media only screen and (max-device-width: 400px) {
730
-    table.merchandise .quantity {
731
-        min-width: 0px;
732
-    }
733
-
734
-    table.merchandise .image img {
735
-        max-width: 110px;
736
-    }
790
+  table.merchandise .quantity {
791
+    min-width: 0px;
792
+  }
793
+  table.merchandise .image img {
794
+    max-width: 110px;
795
+  }
737 796
 }
738
-
739 797
 table.order-form {
740
-    width: 100%;
798
+  width: 100%;
741 799
 }
742
-
743 800
 table.order-form .order-left {
744
-    min-width: 65px;
745
-    width: 10%;
801
+  min-width: 65px;
802
+  width: 10%;
746 803
 }
747
-
748
-table.order-form .order-right input, textarea {
749
-    max-width: 400px;
750
-    width: 90%;
804
+table.order-form .order-right input,textarea {
805
+  max-width: 400px;
806
+  width: 90%;
751 807
 }
752
-
753 808
 table.order-form #order-submit {
754
-    width: auto;
809
+  width: auto;
755 810
 }
756
-
757 811
 form.thankyou {
758
-    margin-bottom: 10px;
812
+  margin-bottom: 10px;
759 813
 }
760 814
 
761
-.share-top-buttons-label {
762
-    margin-right: 1rem;
763
-}
764 815
 
765 816
 /* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
766 817
 .share-buttons.bottom {
767
-    margin: 4em 0 -2em 0;
768
-}
769
-
770
-.share-buttons-top {
771
-    align-items: center;
772
-    display: flex;
773
-    flex-wrap: wrap;
774
-}
775
-
776
-.share-buttons-sidebar {
777
-    padding-left: 2rem;
818
+  margin: 4em 0 -2em 0;
819
+  font-size: 0.7em;
778 820
 }
779
-
780
-.share-button-top,
781
-.share-button-sidebar,
782 821
 .share-buttons.bottom button.button,
783 822
 .share-buttons.bottom label.button {
784
-    display: inline-block;
785
-    margin: 2.5px 5px 2.5px 0;
786
-    color: #fff;
787
-    font-weight: normal;
788
-    font-size: 1em;
789
-    line-height: normal;
790
-    text-align: center;
791
-    text-decoration: none;
792
-    padding: 7px 7px 7px 20px;
793
-    width: 19%;
794
-    min-width: 100px;
795
-    max-width: 110px;
796
-    border: none;
797
-    border-radius: 3px;
798
-    background-position: left 5px center;
799
-    background-repeat: no-repeat;
800
-    background-size: 20px auto;
801
-    opacity: 0.9;
802
-    vertical-align: top;
823
+  display: inline-block;
824
+  margin: 2.5px 5px 2.5px 0;
825
+  color: #fff;
826
+  font-weight: normal;
827
+  font-size: 1em;
828
+  line-height: normal;
829
+  text-align: center;
830
+  text-decoration: none;
831
+  padding: 7px 7px 7px 20px;
832
+  width: 19%;
833
+  min-width: 100px;
834
+  max-width: 110px;
835
+  border: none;
836
+  border-radius: 3px;
837
+  background-position: left 5px center;
838
+  background-repeat: no-repeat;
839
+  background-size: 20px auto;
840
+  opacity: 0.9;
841
+  vertical-align: top;
842
+}
843
+.share-buttons.bottom a:hover {
844
+  text-decoration: none;
845
+}
846
+
847
+.share-buttons.bottom .share-facebook {
848
+  background-color: #3b5998;
849
+  background-image: url("/graphics/services/facebook_white.png");
850
+}
851
+.share-buttons.bottom .share-facebook:hover {
852
+  background-color: #143271 !important;
853
+}
854
+.share-buttons.bottom .share-twitter {
855
+  background-color: #55acee;
856
+  background-image: url("/graphics/services/twitter_white.png");
857
+}
858
+.share-buttons.bottom .share-twitter:hover {
859
+  background-color: #338acc !important;
803 860
 }
804
-
805
-.share-button-top,
806
-.share-buttons.bottom,
807
-.share-buttons-sidebar {
808
-    font-size: .7em;
809
-}
810
-
811
-.share-buttons-top,
812
-.share-buttons-sidebar,
813
-.share-buttons.bottom {
814
-
815
-    a:hover {
816
-        text-decoration: none;
817
-    }
818
-
819
-    .share-rss {
820
-        background-color: #f4a000;
821
-        background-image: url("/graphics/services/rss_white.png");
822
-    }
823
-
824
-    .share-rss:hover {
825
-        background-color: #f78200 !important;
826
-    }
827
-
828
-    .share-mail {
829
-        background-color: #6e6e6e;
830
-        background-image: url("/graphics/services/mail_white.png");
831
-    }
832
-
833
-    .share-mail:hover {
834
-        background-color: #272727 !important;
835
-    }
836
-
837
-    .share-mastodon {
838
-        background-color: #2b90d9;
839
-        background-image: url("/graphics/services/mastodon_white.png");
840
-    }
841
-
842
-    .share-mastodon:hover {
843
-        background-color: #1060a9 !important;
844
-    }
845
-
846
-    .share-diaspora {
847
-        background-color: #404040;
848
-        background-image: url("/graphics/services/diaspora_white.png");
849
-    }
850
-
851
-    .share-diaspora:hover {
852
-        background-color: #101010 !important;
853
-    }
854
-
855
-    .share-facebook {
856
-        background-color: #3b5998;
857
-        background-image: url("/graphics/services/facebook_white.png");
858
-    }
859
-
860
-    .share-facebook:hover {
861
-        background-color: #143271 !important;
862
-    }
863
-
864
-    .share-twitter {
865
-        background-color: #55acee;
866
-        background-image: url("/graphics/services/twitter_white.png");
867
-    }
868
-
869
-    .share-twitter:hover {
870
-        background-color: #338acc !important;
871
-    }
872
-
873
-    .share-support {
874
-        background-color: #202d79;
875
-        background-image: url("/graphics/services/fsfe_white.png");
876
-        padding-left: 25px;
877
-
878
-        &:hover {
879
-            background-color: #0a1763 !important;
880
-        }
881
-    }
882
-}
883
-
884 861
 .share-buttons.bottom .share-gplus {
885
-    background-color: #d34836;
886
-    background-image: url("/graphics/services/gplus_white.png");
862
+  background-color: #d34836;
863
+  background-image: url("/graphics/services/gplus_white.png");
887 864
 }
888
-
889 865
 .share-buttons.bottom .share-gplus:hover {
890
-    background-color: #b12614 !important;
866
+  background-color: #b12614 !important;
867
+}
868
+.share-buttons.bottom .share-diaspora {
869
+  background-color: #404040;
870
+  background-image: url("/graphics/services/diaspora_white.png");
871
+}
872
+.share-buttons.bottom .share-diaspora:hover {
873
+  background-color: #101010 !important;
891 874
 }
892
-
893 875
 .share-buttons.bottom .share-flattr {
894
-    background-color: #7ea352;
895
-    background-image: url("/graphics/services/flattr_white.png");
876
+  background-color: #7ea352;
877
+  background-image: url("/graphics/services/flattr_white.png");
896 878
 }
897
-
898 879
 .share-buttons.bottom .share-flattr:hover {
899
-    background-color: #5a7f2e !important;
880
+  background-color: #5a7f2e !important;
881
+}
882
+.share-buttons.bottom .share-support {
883
+  background-color: #202d79;
884
+  background-image: url("/graphics/services/fsfe_white.png");
885
+}
886
+.share-buttons.bottom .share-support:hover {
887
+  background-color: #0a1763 !important;
900 888
 }
901
-
902 889
 .share-buttons.bottom .share-reddit {
903
-    background-color: #ff5700;
904
-    background-image: url("/graphics/services/reddit_white.png");
890
+  background-color: #ff5700;
891
+  background-image: url("/graphics/services/reddit_white.png");
905 892
 }
906
-
907 893
 .share-buttons.bottom .share-reddit:hover {
908
-    background-color: #dd3500 !important;
894
+  background-color: #dd3500 !important;
909 895
 }
910
-
911 896
 .share-buttons.bottom .share-gnusocial {
912
-    background-color: #a22430;
913
-    background-image: url("/graphics/services/gnusocial_white.png");
897
+  background-color: #a22430;
898
+  background-image: url("/graphics/services/gnusocial_white.png");
914 899
 }
915
-
916 900
 .share-buttons.bottom .share-gnusocial:hover {
917
-    background-color: #850713 !important;
901
+  background-color: #850713 !important;
902
+}
903
+.share-buttons .share-mastodon {
904
+  background-color: #2b90d9;
905
+  background-image: url("/graphics/services/mastodon_white.png");
906
+}
907
+.share-buttons .share-mastodon:hover {
908
+  background-color: #1060a9 !important;
918 909
 }
919
-
920 910
 .share-buttons.bottom .share-hnews {
921
-    background-color: #ff6600;
922
-    background-image: url("/graphics/services/hackernews_white.png");
911
+  background-color: #ff6600;
912
+  background-image: url("/graphics/services/hackernews_white.png");
923 913
 }
924
-
925 914
 .share-buttons.bottom .share-hnews:hover {
926
-    background-color: #dd3500 !important;
915
+  background-color: #dd3500 !important;
916
+}
917
+.share-buttons.bottom .share-rss {
918
+  background-color: #f4a000;
919
+  background-image: url("/graphics/services/rss_white.png");
920
+}
921
+.share-buttons.bottom .share-rss:hover {
922
+  background-color: #f78200 !important;
923
+}
924
+.share-buttons.bottom .share-mail {
925
+  background-color: #6e6e6e;
926
+  background-image: url("/graphics/services/mail_white.png");
927
+}
928
+.share-buttons.bottom .share-mail:hover {
929
+  background-color: #272727 !important;
927 930
 }
928 931
 
929 932
 /* Share buttons form layout and behaviour hacks */
930 933
 .share-buttons input[type="radio"],
931 934
 .share-buttons input[type="radio"] + span,
932 935
 .share-buttons input[type="checkbox"],
933
-.share-buttons input[type="checkbox"] + span {
934
-    display: none;
935
-}
936
-
936
+.share-buttons input[type="checkbox"] + span {display: none;}
937 937
 .share-buttons input[type="radio"]:checked + span,
938 938
 .share-buttons input[type="checkbox"]:checked + span {
939
-    position: absolute;
940
-    margin-top: 3.5em;
941
-    margin-left: -10em;
942
-    padding: .5em;
943
-    z-index: 3;
944
-    background-color: #333;
945
-    border-radius: .5em;
946
-    display: inline-block;
939
+  position: absolute;
940
+  margin-top: 3.5em; margin-left: -10em;
941
+  padding: .5em;
942
+  z-index: 3;
943
+  background-color: #333;
944
+  border-radius: .5em;
945
+  display: inline-block;
947 946
 }
948
-
949 947
 .share-buttons input[type="radio"]:checked + span:before,
950 948
 .share-buttons input[type="checkbox"]:checked + span:before {
951
-    content: '';
952
-    position: absolute;
953
-    top: -1em;
954
-    height: 0em;
955
-    width: 0em;
956
-    border-bottom: 1em solid #333;
957
-    border-left: 1em solid transparent;
958
-    border-right: 1em solid transparent;
959
-    z-index: 3;
960
-}
961
-
962
-.share-buttons input[type="radio"] + span > * {
963
-    vertical-align: middle;
964
-}
965
-
949
+  content: '';
950
+  position: absolute;
951
+  top: -1em;
952
+  height: 0em; width: 0em;
953
+  border-bottom: 1em solid #333;
954
+  border-left: 1em solid transparent;
955
+  border-right: 1em solid transparent;
956
+  z-index: 3;
957
+}
958
+.share-buttons input[type="radio"] + span > *{ vertical-align: middle; }
966 959
 .share-buttons input[type="radio"] + span > button {
967
-    margin: 2.5px 0 2.5px 5px;
968
-    min-width: 4em;
969
-    padding: .25em;
970
-    font-weight: normal;
971
-    font-size: 1em;
972
-    line-height: normal;
960
+  margin: 2.5px 0 2.5px 5px;
961
+  min-width: 4em;
962
+  padding: .25em;
963
+  font-weight: normal;
964
+  font-size: 1em;
965
+  line-height: normal;
973 966
 }
974
-
975 967
 .share-buttons input[type="radio"] + span > label {
976
-    position: fixed;
977
-    top: 0;
978
-    left: 0;
979
-    right: 0;
980
-    bottom: 0;
981
-    z-index: -1;
982
-    background-color: rgba(0, 0, 0, .5);
968
+  position: fixed;
969
+  top: 0; left: 0; right: 0; bottom: 0;
970
+  z-index: -1;
971
+  background-color: rgba(0, 0, 0, .5);
983 972
 }
984 973
 
985 974
 /* Separate share buttons form from possibly floating content */
986 975
 form.share-buttons {
987
-    clear: both;
976
+  clear: both;
988 977
 }
989 978
 
990 979
 /* Free Your Andoid pages */
991 980
 video#freeyourandroid {
992
-    max-width: 500px;
993
-}
994
-
995
-.news-sidebar {
996
-    // there is no sidebar on mobile
997
-    display: none;
998
-}
999
-
1000
-@media (min-width: @screen-md-min) {
1001
-    .news-sidebar {
1002
-        display: block;
1003
-        padding-top: 5.1rem;
1004
-    }
1005
-
1006
-    .news-follow-us {
1007
-        display: none;
1008
-    }
1009
-}
1010
-
1011
-.more-news {
1012
-    display: flex;
1013
-    justify-content: space-between;
1014
-    margin-top: 2rem;
1015
-
1016
-    a.learn-more {
1017
-        font-size: 1.3em;
1018
-        font-weight: bold;
1019
-        white-space: nowrap;
1020
-    }
1021
-}
1022
-
1023
-#formnl {
1024
-
1025
-    #submit {
1026
-        .btn;
1027
-        .btn-lg;
1028
-        .btn-block;
1029
-        .btn-primary;
1030
-        font-size: 1.4em;
1031
-        margin-bottom: 5px;
1032
-    }
1033
-
1034
-}
1035
-
1036
-.home-order-image-container {
1037
-    display: block;
1038
-    margin-bottom: 10px;
1039
-    text-align: center;
1040
-
1041
-    .home-order-image {
1042
-        width: 80%;
1043
-    }
1044
-}
1045
-
1046
-.home-shop-block {
1047
-    margin-bottom: 50px;
1048
-}
1049
-
1050
-.home-newsletter-label {
1051
-    margin-top: 30px;
981
+  max-width:500px;
1052 982
 }

+ 8
- 0
look/fsfe.min.css
File diff suppressed because it is too large
View File


+ 3
- 3
look/style.less View File

@@ -152,7 +152,7 @@ div#subpages, .grid-row {
152 152
 }
153 153
 
154 154
 #menu {
155
-    @media (min-width: @screen-xs) {
155
+    @media (min-width: @screen-sm) {
156 156
         .pull-right;
157 157
         text-align: right;
158 158
     }
@@ -176,7 +176,7 @@ div#subpages, .grid-row {
176 176
         }
177 177
     }
178 178
 
179
-    @media (min-width: @screen-xs) {
179
+    @media (min-width: @screen-sm) {
180 180
         #direct-to-menu-list {
181 181
             visibility: hidden;
182 182
             display: none;
@@ -954,7 +954,7 @@ div#subpages, .grid-row {
954 954
         margin: 1em 0 0;
955 955
 
956 956
         li {
957
-            .make-xs-column(6);
957
+            .make-xs-column(12);
958 958
             .make-sm-column(4);
959 959
             .make-md-column(2);
960 960
             margin-top: 1em;

+ 2
- 2
look/valentine.min.css
File diff suppressed because it is too large
View File


+ 20
- 0
scripts/bootstrap-3.0.3.custom.js View File

@@ -335,3 +335,23 @@
335 335
   })
336 336
 
337 337
 }(jQuery);
338
+
339
+/**
340
+ * FSFE custom slide toggle for the mobile menu.
341
+ */
342
+$(document).ready(function() {
343
+    if ($(window).width() < 768) {
344
+        $('#menu-list').hide();
345
+    }
346
+
347
+    $('#direct-to-menu-list').on('click', function(e) {
348
+        e.preventDefault();
349
+        $('#menu-list').stop(true, true).slideToggle();
350
+    });
351
+
352
+    $(window).on('resize', function() {
353
+        if ($(window).width() >= 768) {
354
+            $('#menu-list').show();
355
+        }
356
+    });
357
+});

Loading…
Cancel
Save