]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blobdiff - templates/base.html
new donation page with basic styling.
[people/shoehn/ipfire.org.git] / templates / base.html
index b75940567f042d0142e805c73e432b591f9a297d..ab3431c520ca509cd046c15c40111c3b8337a51e 100644 (file)
@@ -12,6 +12,7 @@
                <meta name="description" content="{{ _("IPFire is a free firewall distribution based on Linux.") }}" />
 
                <!-- styling stuff -->
+               <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                <link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" />
 
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                {% end %}
                
                <script src="{{ static_url("js/jquery.js") }}"></script>
+               <script src="{{ static_url("js/jquery.easing.js") }}"></script>
+               <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+               <script src="{{ static_url("js/site.js") }}"></script>
                <script src="{{ static_url("js/circle-progress.min.js") }}"></script>
        </head>
 
-       <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+       <body id="page-top" class="{% block title %}{% end block %}">
                
                <div class="fixed-top">
                        <div class="container d-flex justify-content-between">
                                <nav class="navbar navbar-toggleable-md align-items-md-start">
-                                       <button class="navbar-toggler navbar-toggler-left pt-4" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                                       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="slide-collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                                <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
                                                <div class="visible-md-up menu-text">Menu</div>
                                        </button>
                                                {% end %}
                                        </a>
                                        
-                                       <div id="navbarSupportedContent" class="navbar-collapse collapse d-lg-flex justify-content-lg-end pt-lg-2">
+                                       <div id="navbarSupportedContent" class="d-lg-flex justify-content-lg-end">
                                                {% block menu %}
                                                        {% module Menu() %}
                                                {% end block %}
                                        </div>
                                </nav>
-                               <div class="align-self-start hidden-md-down">
-                                       <a class="btn btn-red900 btn-sm mt-5" href="/donate">
+                               <div class="align-self-start hidden-xs-down">
+                                       <a class="btn btn-red900 btn-sm btn-donate" href="/donate">
                                                <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
-                                               <small style="vertical-align: .30rem;">{{ _("Donate") }}</small>
+                                               {{ _("Donate") }}
                                        </a>
                                </div>
                        </div>
@@ -74,7 +78,7 @@
                        <footer class="footer">
                                <div class="container pb-3">
                                        <div class="row mb-6">
-                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
+                                               <div class="col-6 col-sm-5 offset-sm-2 col-md-3 offset-md-0 col-lg-2 mb-5">
                                                        <h4>{{ _("About") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -93,7 +97,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
+                                               <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("Support") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
+                                               <div class="col-6 col-sm-5 offset-sm-2 col-md-3 offset-md-0 col-lg-2 mb-5">
                                                        <h4>{{ _("Community") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2 mb-6">
+                                               <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-6">
                                                        <h4>{{ _("Development") }}</h4>
 
                                                        <ul class="list-unstyled">
                                                        </ul>
                                                </div>
 
-                                               <div class="col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
+                                               <div class="col-sm-8 offset-sm-2 col-md-12 offset-md-0 col-lg-4 pt-md-6 pt-lg-1 text-center">
                                                        <a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
                                                                <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
                                                                {{ _("Donate") }}
 
                                                        <div class="btn-toolbar justify-content-around col-md-6 offset-md-3">
                                                                <a class="btn btn-sm" href="http://www.ipfire.org/news.rss">
-                                                                       <svg class="icon i_rss"><use xlink:href="#rss""/></svg>
+                                                                       <svg class="icon i_rss"><use xlink:href="#rss"/></svg>
                                                                </a>
                                                                <a class="btn btn-sm" href="https://twitter.com/ipfire">
                                                                        <svg class="icon i_twitter"><use xlink:href="#twitter"/></svg>
                                                        </p>
                                                {% end %}
        
-                                               <p><small>&copy; {{ year }} - {{ _("IPFire is free software written by the IPFire Project") }}</small></p>
+                                               <p>&copy; {{ year }} - {{ _("IPFire is free software written by the IPFire Project") }}</p>
                                        </div>
                                </div>
                        </footer>
+                       <div id="mask"></div>
                {% end block %}
-
-               <script src="{{ static_url("js/jquery.easing.js") }}"></script>
-               <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-               <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
-               <script src="{{ static_url("js/site.js") }}"></script>
                
                <!-- Hidden icon data -->
                <svg aria-hidden="true" style="display:none">
                        
                        <symbol id="couch" viewBox="0 0 24 24">
                                <defs><path id="a" d="M0 0h24v24H0z"/></defs><g><mask id="b"><use xlink:href="#a"/></mask><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" mask="url(#b)"/></g>
-                       </symbol>               
+                       </symbol>       
                </svg>
        </body>
 </html>