first commit

This commit is contained in:
poolitzer 2024-01-03 12:02:46 +01:00
commit f997cccb89
64 changed files with 7592 additions and 0 deletions

19
LICENSE-CODE.txt Normal file
View File

@ -0,0 +1,19 @@
Copyright 2024 NewPipe e. V.
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

429
LICENSE-CONTENT.txt Normal file
View File

@ -0,0 +1,429 @@
Attribution-ShareAlike 4.0 International
=======================================================================
Creative Commons Corporation ("Creative Commons") is not a law firm and
does not provide legal services or legal advice. Distribution of
Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related
information available on an "as-is" basis. Creative Commons gives no
warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons
disclaims all liability for damages resulting from their use to the
fullest extent possible.
Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and
conditions that creators and other rights holders may use to share
original works of authorship and other material subject to copyright
and certain other rights specified in the public license below. The
following considerations are for informational purposes only, are not
exhaustive, and do not form part of our licenses.
Considerations for licensors: Our public licenses are
intended for use by those authorized to give the public
permission to use material in ways otherwise restricted by
copyright and certain other rights. Our licenses are
irrevocable. Licensors should read and understand the terms
and conditions of the license they choose before applying it.
Licensors should also secure all rights necessary before
applying our licenses so that the public can reuse the
material as expected. Licensors should clearly mark any
material not subject to the license. This includes other CC-
licensed material, or material used under an exception or
limitation to copyright. More considerations for licensors:
wiki.creativecommons.org/Considerations_for_licensors
Considerations for the public: By using one of our public
licenses, a licensor grants the public permission to use the
licensed material under specified terms and conditions. If
the licensor's permission is not necessary for any reason--for
example, because of any applicable exception or limitation to
copyright--then that use is not regulated by the license. Our
licenses grant only permissions under copyright and certain
other rights that a licensor has authority to grant. Use of
the licensed material may still be restricted for other
reasons, including because others have copyright or other
rights in the material. A licensor may make special requests,
such as asking that all changes be marked or described.
Although not required by our licenses, you are encouraged to
respect those requests where reasonable. More considerations
for the public:
wiki.creativecommons.org/Considerations_for_licensees
=======================================================================
Creative Commons Attribution-ShareAlike 4.0 International Public
License
By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons
Attribution-ShareAlike 4.0 International Public License ("Public
License"). To the extent this Public License may be interpreted as a
contract, You are granted the Licensed Rights in consideration of Your
acceptance of these terms and conditions, and the Licensor grants You
such rights in consideration of benefits the Licensor receives from
making the Licensed Material available under these terms and
conditions.
Section 1 -- Definitions.
a. Adapted Material means material subject to Copyright and Similar
Rights that is derived from or based upon the Licensed Material
and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring
permission under the Copyright and Similar Rights held by the
Licensor. For purposes of this Public License, where the Licensed
Material is a musical work, performance, or sound recording,
Adapted Material is always produced where the Licensed Material is
synched in timed relation with a moving image.
b. Adapter's License means the license You apply to Your Copyright
and Similar Rights in Your contributions to Adapted Material in
accordance with the terms and conditions of this Public License.
c. BY-SA Compatible License means a license listed at
creativecommons.org/compatiblelicenses, approved by Creative
Commons as essentially the equivalent of this Public License.
d. Copyright and Similar Rights means copyright and/or similar rights
closely related to copyright including, without limitation,
performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or
categorized. For purposes of this Public License, the rights
specified in Section 2(b)(1)-(2) are not Copyright and Similar
Rights.
e. Effective Technological Measures means those measures that, in the
absence of proper authority, may not be circumvented under laws
fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international
agreements.
f. Exceptions and Limitations means fair use, fair dealing, and/or
any other exception or limitation to Copyright and Similar Rights
that applies to Your use of the Licensed Material.
g. License Elements means the license attributes listed in the name
of a Creative Commons Public License. The License Elements of this
Public License are Attribution and ShareAlike.
h. Licensed Material means the artistic or literary work, database,
or other material to which the Licensor applied this Public
License.
i. Licensed Rights means the rights granted to You subject to the
terms and conditions of this Public License, which are limited to
all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
j. Licensor means the individual(s) or entity(ies) granting rights
under this Public License.
k. Share means to provide material to the public by any means or
process that requires permission under the Licensed Rights, such
as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material
available to the public including in ways that members of the
public may access the material from a place and at a time
individually chosen by them.
l. Sui Generis Database Rights means rights other than copyright
resulting from Directive 96/9/EC of the European Parliament and of
the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially
equivalent rights anywhere in the world.
m. You means the individual or entity exercising the Licensed Rights
under this Public License. Your has a corresponding meaning.
Section 2 -- Scope.
a. License grant.
1. Subject to the terms and conditions of this Public License,
the Licensor hereby grants You a worldwide, royalty-free,
non-sublicensable, non-exclusive, irrevocable license to
exercise the Licensed Rights in the Licensed Material to:
a. reproduce and Share the Licensed Material, in whole or
in part; and
b. produce, reproduce, and Share Adapted Material.
2. Exceptions and Limitations. For the avoidance of doubt, where
Exceptions and Limitations apply to Your use, this Public
License does not apply, and You do not need to comply with
its terms and conditions.
3. Term. The term of this Public License is specified in Section
6(a).
4. Media and formats; technical modifications allowed. The
Licensor authorizes You to exercise the Licensed Rights in
all media and formats whether now known or hereafter created,
and to make technical modifications necessary to do so. The
Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications
necessary to exercise the Licensed Rights, including
technical modifications necessary to circumvent Effective
Technological Measures. For purposes of this Public License,
simply making modifications authorized by this Section 2(a)
(4) never produces Adapted Material.
5. Downstream recipients.
a. Offer from the Licensor -- Licensed Material. Every
recipient of the Licensed Material automatically
receives an offer from the Licensor to exercise the
Licensed Rights under the terms and conditions of this
Public License.
b. Additional offer from the Licensor -- Adapted Material.
Every recipient of Adapted Material from You
automatically receives an offer from the Licensor to
exercise the Licensed Rights in the Adapted Material
under the conditions of the Adapter's License You apply.
c. No downstream restrictions. You may not offer or impose
any additional or different terms or conditions on, or
apply any Effective Technological Measures to, the
Licensed Material if doing so restricts exercise of the
Licensed Rights by any recipient of the Licensed
Material.
6. No endorsement. Nothing in this Public License constitutes or
may be construed as permission to assert or imply that You
are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by,
the Licensor or others designated to receive attribution as
provided in Section 3(a)(1)(A)(i).
b. Other rights.
1. Moral rights, such as the right of integrity, are not
licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to
the extent possible, the Licensor waives and/or agrees not to
assert any such rights held by the Licensor to the limited
extent necessary to allow You to exercise the Licensed
Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this
Public License.
3. To the extent possible, the Licensor waives any right to
collect royalties from You for the exercise of the Licensed
Rights, whether directly or through a collecting society
under any voluntary or waivable statutory or compulsory
licensing scheme. In all other cases the Licensor expressly
reserves any right to collect such royalties.
Section 3 -- License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the
following conditions.
a. Attribution.
1. If You Share the Licensed Material (including in modified
form), You must:
a. retain the following if it is supplied by the Licensor
with the Licensed Material:
i. identification of the creator(s) of the Licensed
Material and any others designated to receive
attribution, in any reasonable manner requested by
the Licensor (including by pseudonym if
designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of
warranties;
v. a URI or hyperlink to the Licensed Material to the
extent reasonably practicable;
b. indicate if You modified the Licensed Material and
retain an indication of any previous modifications; and
c. indicate the Licensed Material is licensed under this
Public License, and include the text of, or the URI or
hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any
reasonable manner based on the medium, means, and context in
which You Share the Licensed Material. For example, it may be
reasonable to satisfy the conditions by providing a URI or
hyperlink to a resource that includes the required
information.
3. If requested by the Licensor, You must remove any of the
information required by Section 3(a)(1)(A) to the extent
reasonably practicable.
b. ShareAlike.
In addition to the conditions in Section 3(a), if You Share
Adapted Material You produce, the following conditions also apply.
1. The Adapter's License You apply must be a Creative Commons
license with the same License Elements, this version or
later, or a BY-SA Compatible License.
2. You must include the text of, or the URI or hyperlink to, the
Adapter's License You apply. You may satisfy this condition
in any reasonable manner based on the medium, means, and
context in which You Share Adapted Material.
3. You may not offer or impose any additional or different terms
or conditions on, or apply any Effective Technological
Measures to, Adapted Material that restrict exercise of the
rights granted under the Adapter's License You apply.
Section 4 -- Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
to extract, reuse, reproduce, and Share all or a substantial
portion of the contents of the database;
b. if You include all or a substantial portion of the database
contents in a database in which You have Sui Generis Database
Rights, then the database in which You have Sui Generis Database
Rights (but not its individual contents) is Adapted Material,
including for purposes of Section 3(b); and
c. You must comply with the conditions in Section 3(a) if You Share
all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights.
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
c. The disclaimer of warranties and limitation of liability provided
above shall be interpreted in a manner that, to the extent
possible, most closely approximates an absolute disclaimer and
waiver of all liability.
Section 6 -- Term and Termination.
a. This Public License applies for the term of the Copyright and
Similar Rights licensed here. However, if You fail to comply with
this Public License, then Your rights under this Public License
terminate automatically.
b. Where Your right to use the Licensed Material has terminated under
Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided
it is cured within 30 days of Your discovery of the
violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any
right the Licensor may have to seek remedies for Your violations
of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the
Licensed Material under separate terms or conditions or stop
distributing the Licensed Material at any time; however, doing so
will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
License.
Section 7 -- Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different
terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the
Licensed Material not stated herein are separate from and
independent of the terms and conditions of this Public License.
Section 8 -- Interpretation.
a. For the avoidance of doubt, this Public License does not, and
shall not be interpreted to, reduce, limit, restrict, or impose
conditions on any use of the Licensed Material that could lawfully
be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is
deemed unenforceable, it shall be automatically reformed to the
minimum extent necessary to make it enforceable. If the provision
cannot be reformed, it shall be severed from this Public License
without affecting the enforceability of the remaining terms and
conditions.
c. No term or condition of this Public License will be waived and no
failure to comply consented to unless expressly agreed to by the
Licensor.
d. Nothing in this Public License constitutes or may be interpreted
as a limitation upon, or waiver of, any privileges and immunities
that apply to the Licensor or You, including from the legal
processes of any jurisdiction or authority.
=======================================================================
Creative Commons is not a party to its public
licenses. Notwithstanding, Creative Commons may elect to apply one of
its public licenses to material it publishes and in those instances
will be considered the “Licensor.” The text of the Creative Commons
public licenses is dedicated to the public domain under the CC0 Public
Domain Dedication. Except for the limited purpose of indicating that
material is shared under a Creative Commons public license or as
otherwise permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the
public licenses.
Creative Commons may be contacted at creativecommons.org.

23
README.txt Normal file
View File

@ -0,0 +1,23 @@
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
A somewhat unusual but interesting responsive site template. I did this one to test out a
new pattern set I put together and I think it really came together well. As for use cases
it's kind of unspecific so hey, use it for whatever.
Feedback, bug reports, and comments are not only welcome, but strongly encouraged :)
AJ
aj@lkn.io | @ajlkn
Credits:
Demo Images:
Unsplash (unsplash.com)
Other:
jQuery (jquery.com)
Responsive Tools (github.com/ajlkn/responsive-tools)

158
about.html Normal file
View File

@ -0,0 +1,158 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.&nbsp;V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-9 col-12-medium">
<section>
<header>
<h2>About us</h2>
</header>
<p>
NewPipe e.&nbsp;V. is a non-profit organization which supports technology (especially free and open source one), which enables using digital media and improves access to it.
</p>
<div>
We want to realize this goal through the following means:
<ul style="font-style: italic;">
<li> * organize public briefings, conferences or congresses</li>
<li>* support project groups which develop this technology, especially through financing their members</li>
<li>* accomplish public relations and provide advertisement materials for project groups</li>
</ul>
</div>
<p>
The organization is governed by these three board members. They make day to day decisions and represent the organization. Every half year they have a meeting which every member can attend.
</p>
</section>
</div>
<div class="col-3 imp-medium col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Important links</h2>
</header>
<ul class="link-list">
<li><a href="https://cloud.newpipe-ev.de/s/WzQOdYLRlZnuZxP">All files in one folder</a></li>
<li><a href="https://cloud.newpipe-ev.de/s/DfdgGxhCzcydduY">Statue (German)</a></li>
<li><a href="#">Statue (English)</a></li>
<li><a href="https://cloud.newpipe-ev.de/s/IWVDvSNmbHJwlAk">Privacy policy (German)</a></li>
<li><a href="https://cloud.newpipe-ev.de/s/IyrwfEmjEnSUzZA">Privacy policy (english)</a></li>
<li><a href="#">Member fee regulation (German)</a></li>
<li><a href="https://cloud.newpipe-ev.de/s/IWVDvSNmbHJwlAk">Member fee regulation (English)</a></li>
</ul>
</section>
</div>
<div class="col-3 col-6-medium">
<section>
<p>Fabio</p>
<a class="feature-image"><img src="images/fabio.png" alt=""></a>
</section>
</div>
<div class="col-3 col-6-medium">
<section>
<p>Christian</p>
<a class="feature-image"><img src="images/christian.png" alt=""></a>
</section>
</div>
<div class="col-3 col-6-medium">
<section>
<p>Thjorven</p>
<a class="feature-image"><img src="images/thjorven.jpg" alt=""></a>
<ul class="standard-list">
<li>Age: 23 years</li>
<li>Occupation: electrician for automation technology, studying electrical engineering and information technology</li>
<li>Open source work: Maintainer of <a href="https://python-telegram-bot.org">python-telegram-bot</a>, writing blogposts for <a href="https://newpipe.net/blog/">NewPipe</a>.</li>
<li>Board member since 2022</li>
</ul>
</section>
</div>
<div class="col-9 col-12-medium">
<section>
<p>
They are supported in their work by Fynn, in the role of the cash auditor.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

BIN
assets/css/images/bg01.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/css/images/bg02.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
assets/css/images/bg03.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/css/images/bg04.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/css/images/bg04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 B

View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="#ce1a00" stop-opacity="1"/>
<stop offset="100%" stop-color="#ed391b" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#gradient1);" />
</svg>

After

Width:  |  Height:  |  Size: 425 B

View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="#fd492b" stop-opacity="1"/>
<stop offset="100%" stop-color="#de2a10" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#gradient1);" />
</svg>

After

Width:  |  Height:  |  Size: 425 B

View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="#ed391b" stop-opacity="1"/>
<stop offset="100%" stop-color="#ce1a00" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#gradient1);" />
</svg>

After

Width:  |  Height:  |  Size: 425 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 B

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="30px" viewBox="0 0 20 30" zoomAndPan="disable">
<rect x="0" y="0" width="20" height="2" style="fill:#000;" />
<rect x="0" y="5" width="20" height="2" style="fill:#000;" />
<rect x="0" y="10" width="20" height="2" style="fill:#000;" />
<rect x="0" y="1" width="20" height="2" style="fill:#fff;" />
<rect x="0" y="6" width="20" height="2" style="fill:#fff;" />
<rect x="0" y="11" width="20" height="2" style="fill:#fff;" />
</svg>

After

Width:  |  Height:  |  Size: 545 B

2058
assets/css/main.css Normal file

File diff suppressed because it is too large Load Diff

2
assets/js/breakpoints.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});

2
assets/js/browser.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* browser.js v1.0.1 | @ajlkn | MIT licensed */
var browser=function(){"use strict";var t={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,r=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+r in n||"Webkit"+r in n||"O"+r in n||"ms"+r in n},init:function(){for(var e=navigator.userAgent,n="other",r=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],o=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(RegExp.$1);break}for(t.name=n,t.version=r,n="other",i=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],o=r=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(i[o][2]?i[o][2](RegExp.$1):RegExp.$1);break}"mac"==n&&"ontouchstart"in window&&(1024==screen.width&&1366==screen.height||834==screen.width&&1112==screen.height||810==screen.width&&1080==screen.height||768==screen.width&&1024==screen.height)&&(n="ios"),t.os=n,t.osVersion=r,t.touch="wp"==t.os?0<navigator.msMaxTouchPoints:!!("ontouchstart"in window),t.mobile="wp"==t.os||"android"==t.os||"ios"==t.os||"bb"==t.os}};return t.init(),t}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});

2
assets/js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

50
assets/js/main.js Normal file
View File

@ -0,0 +1,50 @@
/*
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ null, '736px' ]
});
// Nav.
// Title Bar.
$(
'<div id="titleBar">' +
'<a href="#navPanel" class="toggle"></a>' +
'<span class="title"><a href="index.html" class="hidden">' + $('#logo').html() + '</a></span>' +
'</div>'
)
.appendTo($body);
// Panel.
$(
'<div id="navPanel">' +
'<nav>' +
$('#nav').navList() +
'</nav>' +
'</div>'
)
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'left',
target: $body,
visibleClass: 'navPanel-visible'
});
})(jQuery);

50
assets/js/main.js~ Normal file
View File

@ -0,0 +1,50 @@
/*
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
var $window = $(window),
$body = $('body');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ null, '736px' ]
});
// Nav.
// Title Bar.
$(
'<div id="titleBar">' +
'<a href="#navPanel" class="toggle"></a>' +
'<span class="title"><a href="index.html" id="logo">' + $('#logo').html() + '</a></span>' +
'</div>'
)
.appendTo($body);
// Panel.
$(
'<div id="navPanel">' +
'<nav>' +
$('#nav').navList() +
'</nav>' +
'</div>'
)
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'left',
target: $body,
visibleClass: 'navPanel-visible'
});
})(jQuery);

587
assets/js/util.js Normal file
View File

@ -0,0 +1,587 @@
(function($) {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
var $this = $(this);
$a = $this.find('a'),
b = [];
$a.each(function() {
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
});
return b.join('');
};
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
return $this;
}
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Config.
config = $.extend({
// Delay.
delay: 0,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset forms on hide.
resetForms: false,
// Side of viewport the panel will appear.
side: null,
// Target element for "class".
target: $this,
// Class to toggle.
visibleClass: 'visible'
}, userConfig);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Panel.
// Methods.
$this._hide = function(event) {
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// If an event was provided, cancel it.
if (event) {
event.preventDefault();
event.stopPropagation();
}
// Hide.
config.target.removeClass(config.visibleClass);
// Post-hide stuff.
window.setTimeout(function() {
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
}, config.delay);
};
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Hide on click.
if (config.hideOnClick) {
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this
.on('click', 'a', function(event) {
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
if (!href || href == '#' || href == '' || href == '#' + id)
return;
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Hide panel.
$this._hide();
// Redirect to href.
window.setTimeout(function() {
if (target == '_blank')
window.open(href);
else
window.location.href = href;
}, config.delay + 10);
});
}
// Event: Touch stuff.
$this.on('touchstart', function(event) {
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
})
$this.on('touchmove', function(event) {
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
// Hide on swipe?
if (config.hideOnSwipe) {
var result = false,
boundary = 20,
delta = 50;
switch (config.side) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
default:
break;
}
if (result) {
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
return false;
}
}
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.removeClass(config.visibleClass);
});
// Body.
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.toggleClass(config.visibleClass);
});
// Window.
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
if (event.keyCode == 27)
$this._hide(event);
});
return $this;
};
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.
*/
$.fn.placeholder = function() {
// Browser natively supports placeholders? Bail.
if (typeof (document.createElement('input')).placeholder != 'undefined')
return $(this);
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).placeholder();
return $this;
}
// Vars.
var $this = $(this);
// Text, TextArea.
$this.find('input[type=text],textarea')
.each(function() {
var i = $(this);
if (i.val() == ''
|| i.val() == i.attr('placeholder'))
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('blur', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == '')
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('focus', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == i.attr('placeholder'))
i
.removeClass('polyfill-placeholder')
.val('');
});
// Password.
$this.find('input[type=password]')
.each(function() {
var i = $(this);
var x = $(
$('<div>')
.append(i.clone())
.remove()
.html()
.replace(/type="password"/i, 'type="text"')
.replace(/type=password/i, 'type=text')
);
if (i.attr('id') != '')
x.attr('id', i.attr('id') + '-polyfill-field');
if (i.attr('name') != '')
x.attr('name', i.attr('name') + '-polyfill-field');
x.addClass('polyfill-placeholder')
.val(x.attr('placeholder')).insertAfter(i);
if (i.val() == '')
i.hide();
else
x.hide();
i
.on('blur', function(event) {
event.preventDefault();
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
});
x
.on('focus', function(event) {
event.preventDefault();
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
x.hide();
i
.show()
.focus();
})
.on('keypress', function(event) {
event.preventDefault();
x.val('');
});
});
// Events.
$this
.on('submit', function() {
$this.find('input[type=text],input[type=password],textarea')
.each(function(event) {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
i.attr('name', '');
if (i.val() == i.attr('placeholder')) {
i.removeClass('polyfill-placeholder');
i.val('');
}
});
})
.on('reset', function(event) {
event.preventDefault();
$this.find('select')
.val($('option:first').val());
$this.find('input,textarea')
.each(function() {
var i = $(this),
x;
i.removeClass('polyfill-placeholder');
switch (this.type) {
case 'submit':
case 'reset':
break;
case 'password':
i.val(i.attr('defaultValue'));
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
else {
i.show();
x.hide();
}
break;
case 'checkbox':
case 'radio':
i.attr('checked', i.attr('defaultValue'));
break;
case 'text':
case 'textarea':
i.val(i.attr('defaultValue'));
if (i.val() == '') {
i.addClass('polyfill-placeholder');
i.val(i.attr('placeholder'));
}
break;
default:
i.val(i.attr('defaultValue'));
break;
}
});
});
return $this;
};
/**
* Moves elements to/from the first positions of their respective parents.
* @param {jQuery} $elements Elements (or selector) to move.
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
*/
$.prioritize = function($elements, condition) {
var key = '__prioritize';
// Expand $elements if it's not already a jQuery object.
if (typeof $elements != 'jQuery')
$elements = $($elements);
// Step through elements.
$elements.each(function() {
var $e = $(this), $p,
$parent = $e.parent();
// No parent? Bail.
if ($parent.length == 0)
return;
// Not moved? Move it.
if (!$e.data(key)) {
// Condition is false? Bail.
if (!condition)
return;
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
$p = $e.prev();
// Couldn't find anything? Means this element's already at the top, so bail.
if ($p.length == 0)
return;
// Move element to top of parent.
$e.prependTo($parent);
// Mark element as moved.
$e.data(key, $p);
}
// Moved already?
else {
// Condition is true? Bail.
if (condition)
return;
$p = $e.data(key);
// Move element back to its original location (using our placeholder).
$e.insertAfter($p);
// Unmark element as moved.
$e.removeData(key);
}
});
};
})(jQuery);

View File

@ -0,0 +1,223 @@
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
// Vars.
/// Breakpoints.
/// @var {list}
$breakpoints: () !global;
// Mixins.
/// Sets breakpoints.
/// @param {map} $x Breakpoints.
@mixin breakpoints($x: ()) {
$breakpoints: $x !global;
}
/// Wraps @content in a @media block targeting a specific orientation.
/// @param {string} $orientation Orientation.
@mixin orientation($orientation) {
@media screen and (orientation: #{$orientation}) {
@content;
}
}
/// Wraps @content in a @media block using a given query.
/// @param {string} $query Query.
@mixin breakpoint($query: null) {
$breakpoint: null;
$op: null;
$media: null;
// Determine operator, breakpoint.
// Greater than or equal.
@if (str-slice($query, 0, 2) == '>=') {
$op: 'gte';
$breakpoint: str-slice($query, 3);
}
// Less than or equal.
@elseif (str-slice($query, 0, 2) == '<=') {
$op: 'lte';
$breakpoint: str-slice($query, 3);
}
// Greater than.
@elseif (str-slice($query, 0, 1) == '>') {
$op: 'gt';
$breakpoint: str-slice($query, 2);
}
// Less than.
@elseif (str-slice($query, 0, 1) == '<') {
$op: 'lt';
$breakpoint: str-slice($query, 2);
}
// Not.
@elseif (str-slice($query, 0, 1) == '!') {
$op: 'not';
$breakpoint: str-slice($query, 2);
}
// Equal.
@else {
$op: 'eq';
$breakpoint: $query;
}
// Build media.
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
$a: map-get($breakpoints, $breakpoint);
// Range.
@if (type-of($a) == 'list') {
$x: nth($a, 1);
$y: nth($a, 2);
// Max only.
@if ($x == null) {
// Greater than or equal (>= 0 / anything)
@if ($op == 'gte') {
$media: 'screen';
}
// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}
// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Less than (< 0 / invalid)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: -1px)';
}
// Not (> y)
@elseif ($op == 'not') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Equal (<= y)
@else {
$media: 'screen and (max-width: ' + $y + ')';
}
}
// Min only.
@else if ($y == null) {
// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}
// Less than or equal (<= inf / anything)
@elseif ($op == 'lte') {
$media: 'screen';
}
// Greater than (> inf / invalid)
@elseif ($op == 'gt') {
$media: 'screen and (max-width: -1px)';
}
// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Not (< x)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Equal (>= x)
@else {
$media: 'screen and (min-width: ' + $x + ')';
}
}
// Min and max.
@else {
// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}
// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}
// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Not (< x and > y)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
}
// Equal (>= x and <= y)
@else {
$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
}
}
}
// String.
@else {
// Missing a media type? Prefix with "screen".
@if (str-slice($a, 0, 1) == '(') {
$media: 'screen and ' + $a;
}
// Otherwise, use as-is.
@else {
$media: $a;
}
}
}
// Output.
@media #{$media} {
@content;
}
}

View File

@ -0,0 +1,90 @@
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Gets a value from a map.
/// @author Hugo Giraudel
/// @param {map} $map Map.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function val($map, $keys...) {
@if nth($keys, 1) == null {
$keys: remove-nth($keys, 1);
}
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
/// Gets a duration value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _duration($keys...) {
@return val($duration, $keys...);
}
/// Gets a font value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _font($keys...) {
@return val($font, $keys...);
}
/// Gets a misc value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _misc($keys...) {
@return val($misc, $keys...);
}
/// Gets a palette value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _palette($keys...) {
@return val($palette, $keys...);
}
/// Gets a size value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _size($keys...) {
@return val($size, $keys...);
}

View File

@ -0,0 +1,149 @@
// html-grid.scss v1.0 | @ajlkn | MIT licensed */
// Mixins.
/// Initializes the current element as an HTML grid.
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
@mixin html-grid($gutters: 1.5em, $suffix: '') {
// Initialize.
$cols: 12;
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
$unit: 100% / $cols;
// Suffixes.
$suffixes: null;
@if (type-of($suffix) == 'list') {
$suffixes: $suffix;
}
@else {
$suffixes: ($suffix);
}
// Gutters.
$guttersCols: null;
$guttersRows: null;
@if (type-of($gutters) == 'list') {
$guttersCols: nth($gutters, 1);
$guttersRows: nth($gutters, 2);
}
@else {
$guttersCols: $gutters;
$guttersRows: 0;
}
// Row.
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
// Columns.
> * {
box-sizing: border-box;
}
// Gutters.
&.gtr-uniform {
> * {
> :last-child {
margin-bottom: 0;
}
}
}
// Alignment.
&.aln-left {
justify-content: flex-start;
}
&.aln-center {
justify-content: center;
}
&.aln-right {
justify-content: flex-end;
}
&.aln-top {
align-items: flex-start;
}
&.aln-middle {
align-items: center;
}
&.aln-bottom {
align-items: flex-end;
}
// Step through suffixes.
@each $suffix in $suffixes {
// Suffix.
@if ($suffix != '') {
$suffix: '-' + $suffix;
}
@else {
$suffix: '';
}
// Row.
// Important.
> .imp#{$suffix} {
order: -1;
}
// Columns, offsets.
@for $i from 1 through $cols {
> .col-#{$i}#{$suffix} {
width: $unit * $i;
}
> .off-#{$i}#{$suffix} {
margin-left: $unit * $i;
}
}
// Step through multipliers.
@each $multiplier in $multipliers {
// Gutters.
$class: null;
@if ($multiplier != 1) {
$class: '.gtr-' + ($multiplier * 100);
}
&#{$class} {
margin-top: ($guttersRows * $multiplier * -1);
margin-left: ($guttersCols * $multiplier * -1);
> * {
padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
}
// Uniform.
&.gtr-uniform {
margin-top: $guttersCols * $multiplier * -1;
> * {
padding-top: $guttersCols * $multiplier;
}
}
}
}
}
}

View File

@ -0,0 +1,78 @@
/// Makes an element's :before pseudoelement a FontAwesome icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $category Optional category to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $category: regular, $where: before) {
text-decoration: none;
&:#{$where} {
@if $content {
content: $content;
}
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
@if ($category == brands) {
font-family: 'Font Awesome 5 Brands';
}
@elseif ($category == solid) {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@else {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
}
}
/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
@if $important {
$important: '!important';
}
$x: 0.1em;
@if unit(_size(element-margin)) == 'rem' {
$x: 0.1rem;
}
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
}
/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {
$svg: str-replace($svg, '"', '\'');
$svg: str-replace($svg, '%', '%25');
$svg: str-replace($svg, '<', '%3C');
$svg: str-replace($svg, '>', '%3E');
$svg: str-replace($svg, '&', '%26');
$svg: str-replace($svg, '#', '%23');
$svg: str-replace($svg, '{', '%7B');
$svg: str-replace($svg, '}', '%7D');
$svg: str-replace($svg, ';', '%3B');
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
}

View File

@ -0,0 +1,22 @@
// Misc.
$misc: (
z-index-base: 10000
);
// Duration.
$duration: (
navPanel: 0.5s
);
// Size.
$size: (
navPanel: 275px
);
// Font.
$font: (
);
// Palette.
$palette: (
);

View File

@ -0,0 +1,376 @@
// vendor.scss v1.0 | @ajlkn | MIT licensed */
// Vars.
/// Vendor prefixes.
/// @var {list}
$vendor-prefixes: (
'-moz-',
'-webkit-',
'-ms-',
''
);
/// Properties that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-properties: (
// Animation.
'animation',
'animation-delay',
'animation-direction',
'animation-duration',
'animation-fill-mode',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
// Appearance.
'appearance',
// Backdrop filter.
'backdrop-filter',
// Background image options.
'background-clip',
'background-origin',
'background-size',
// Box sizing.
'box-sizing',
// Clip path.
'clip-path',
// Filter effects.
'filter',
// Flexbox.
'align-content',
'align-items',
'align-self',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'justify-content',
'order',
// Font feature.
'font-feature-settings',
'font-language-override',
'font-variant-ligatures',
// Font kerning.
'font-kerning',
// Fragmented borders and backgrounds.
'box-decoration-break',
// Grid layout.
'grid-column',
'grid-column-align',
'grid-column-end',
'grid-column-start',
'grid-row',
'grid-row-align',
'grid-row-end',
'grid-row-start',
'grid-template-columns',
'grid-template-rows',
// Hyphens.
'hyphens',
'word-break',
// Masks.
'mask',
'mask-border',
'mask-border-outset',
'mask-border-repeat',
'mask-border-slice',
'mask-border-source',
'mask-border-width',
'mask-clip',
'mask-composite',
'mask-image',
'mask-origin',
'mask-position',
'mask-repeat',
'mask-size',
// Multicolumn.
'break-after',
'break-before',
'break-inside',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-rule-color',
'column-rule-style',
'column-rule-width',
'column-span',
'column-width',
'columns',
// Object fit.
'object-fit',
'object-position',
// Regions.
'flow-from',
'flow-into',
'region-fragment',
// Scroll snap points.
'scroll-snap-coordinate',
'scroll-snap-destination',
'scroll-snap-points-x',
'scroll-snap-points-y',
'scroll-snap-type',
// Shapes.
'shape-image-threshold',
'shape-margin',
'shape-outside',
// Tab size.
'tab-size',
// Text align last.
'text-align-last',
// Text decoration.
'text-decoration-color',
'text-decoration-line',
'text-decoration-skip',
'text-decoration-style',
// Text emphasis.
'text-emphasis',
'text-emphasis-color',
'text-emphasis-position',
'text-emphasis-style',
// Text size adjust.
'text-size-adjust',
// Text spacing.
'text-spacing',
// Transform.
'transform',
'transform-origin',
// Transform 3D.
'backface-visibility',
'perspective',
'perspective-origin',
'transform-style',
// Transition.
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
// Unicode bidi.
'unicode-bidi',
// User select.
'user-select',
// Writing mode.
'writing-mode',
);
/// Values that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-values: (
// Cross fade.
'cross-fade',
// Element function.
'element',
// Filter function.
'filter',
// Flexbox.
'flex',
'inline-flex',
// Grab cursors.
'grab',
'grabbing',
// Gradients.
'linear-gradient',
'repeating-linear-gradient',
'radial-gradient',
'repeating-radial-gradient',
// Grid layout.
'grid',
'inline-grid',
// Image set.
'image-set',
// Intrinsic width.
'max-content',
'min-content',
'fit-content',
'fill',
'fill-available',
'stretch',
// Sticky position.
'sticky',
// Transform.
'transform',
// Zoom cursors.
'zoom-in',
'zoom-out',
);
// Functions.
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Replaces a substring within another string.
/// @author Hugo Giraudel
/// @param {string} $string String.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {string} Updated string.
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/// Replaces a substring within each string in a list.
/// @param {list} $strings List of strings.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {list} Updated list of strings.
@function str-replace-all($strings, $search, $replace: '') {
@each $string in $strings {
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
}
@return $strings;
}
// Mixins.
/// Wraps @content in vendorized keyframe blocks.
/// @param {string} $name Name.
@mixin keyframes($name) {
@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
}
/// Vendorizes a declaration's property and/or value(s).
/// @param {string} $property Property.
/// @param {mixed} $value String/list of value(s).
@mixin vendor($property, $value) {
// Determine if property should expand.
$expandProperty: index($vendor-properties, $property);
// Determine if value should expand (and if so, add '-prefix-' placeholder).
$expandValue: false;
@each $x in $value {
@each $y in $vendor-values {
@if $y == str-slice($x, 1, str-length($y)) {
$value: set-nth($value, index($value, $x), '-prefix-' + $x);
$expandValue: true;
}
}
}
// Expand property?
@if $expandProperty {
@each $vendor in $vendor-prefixes {
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Expand just the value?
@elseif $expandValue {
@each $vendor in $vendor-prefixes {
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Neither? Treat them as a normal declaration.
@else {
#{$property}: #{$value};
}
}

840
assets/sass/main.scss Normal file
View File

@ -0,0 +1,840 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200');
/*
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
// Breakpoints.
@include breakpoints((
xlarge: ( 1281px, 1680px ),
large: ( 981px, 1280px ),
medium: ( 737px, 980px ),
small: ( null, 736px )
));
// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
/* Basic */
// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #D4D9DD url('images/bg03.jpg');
color: #474f51;
font-size: 13.5pt;
font-family: 'Yanone Kaffeesatz';
line-height: 1.85em;
font-weight: 300;
}
input, textarea, select {
color: #474f51;
font-size: 13.5pt;
font-family: 'Yanone Kaffeesatz';
line-height: 1.85em;
font-weight: 300;
}
ul, ol, p, dl {
margin: 0 0 2em 0;
}
a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
section > :last-child,
section:last-child,
.last-child {
margin-bottom: 0 !important;
}
/* Container */
.container {
margin: 0 auto;
max-width: 100%;
width: 1200px;
@include breakpoint('<=xlarge') {
width: 1200px;
}
@include breakpoint('<=large') {
width: calc(100% - 40px);
}
@include breakpoint('<=medium') {
width: calc(100% - 50px);
}
@include breakpoint('<=small') {
width: calc(100% - 40px);
}
}
/* Row */
.row {
@include html-grid((25px, 25px));
@include breakpoint('<=xlarge') {
@include html-grid((25px, 25px), 'xlarge');
}
@include breakpoint('<=large') {
@include html-grid((20px, 20px), 'large');
}
@include breakpoint('<=medium') {
@include html-grid((25px, 25px), 'medium');
}
@include breakpoint('<=small') {
@include html-grid((20px, 20px), 'small');
}
}
/* Multi-use */
.link-list {
li {
padding: 0.2em 0 0.2em 0;
&:first-child {
padding-top: 0 !important;
border-top: 0 !important;
}
&:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
}
}
.quote-list {
li {
padding: 1em 0 1em 0;
overflow: hidden;
&:first-child {
padding-top: 0 !important;
border-top: 0 !important;
}
&:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
img {
float: left;
}
p {
margin: 0 0 0 90px;
font-size: 1.2em;
font-style: italic;
}
span {
display: block;
margin-left: 90px;
font-size: 0.9em;
font-weight: 400;
}
}
}
.check-list {
li {
padding: 0.7em 0 0.7em 45px;
font-size: 1.2em;
background: url('images/icon-checkmark.png') 0px 1.05em no-repeat;
&:first-child {
padding-top: 0 !important;
border-top: 0 !important;
background-position: 0 0.3em;
}
&:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
}
}
.feature-image {
display: block;
margin: 0 0 2em 0;
outline: 0;
img {
display: block;
width: 100%;
}
}
.bordered-feature-image {
display: block;
background: #fff url('images/bg04.png');
padding: 10px;
box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
margin: 0 0 1.5em 0;
outline: 0;
img {
display: block;
width: 100%;
}
}
.button-large {
@include vendor('background-image', 'linear-gradient(top, #ed391b, #ce1a00)');
display: inline-block;
background-color: #ed391b;
color: #fff;
text-decoration: none;
font-size: 1.75em;
height: 2em;
line-height: 2.125em;
font-weight: 300;
padding: 0 45px;
outline: 0;
border-radius: 10px;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
&:hover {
@include vendor('background-image', 'linear-gradient(top, #fd492b, #de2a10)');
background-color: #fd492b;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
}
&:active {
@include vendor('background-image', 'linear-gradient(top, #ce1a00, #ed391b)');
background-color: #ce1a00;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
}
}
/* Header */
#header {
position: relative;
background: #3B4346 url('images/bg01.jpg');
border-bottom: solid 1px #272d30;
box-shadow: inset 0px -1px 0px 0px #51575a;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
> .container {
position: relative;
min-height: 155px;
}
h1 {
position: absolute;
left: 0;
bottom: 35px;
font-size: 2.75em;
a {
color: #fff;
text-decoration: none;
}
}
nav {
position: absolute;
right: 0;
bottom: 35px;
font-weight: 200;
a {
color: #c6c8c8;
text-decoration: none;
font-size: 1.4em;
margin-left: 60px;
outline: 0;
&:hover {
color: #f6f8f8;
}
}
}
.subpage & {
> .container {
height: 155px;
}
}
}
/* Banner */
#banner {
border-top: solid 1px #222628;
box-shadow: inset 0px 1px 0px 0px #3e484a;
padding: 35px 0 35px 0;
color: #fff;
.bordered-feature-image {
margin-bottom: 0;
}
p {
font-size: 2em;
font-weight: 200;
line-height: 1.25em;
padding-right: 1em;
margin: 0 0 1em 0;
}
}
/* Features */
#features {
background: #353D40 url('images/bg02.jpg');
border-bottom: solid 1px #272e31;
padding: 45px 0 45px 0;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
color: #a0a8ab;
h2 {
font-size: 1.25em;
color: #fff;
margin: 0 0 0.25em 0;
}
a {
color: #e0e8eb;
}
strong {
color: #fff;
}
}
/* Content */
#content {
background: #f7f7f7 url('images/bg04.png');
border-top: solid 1px #fff;
padding: 45px 0 45px 0;
section {
background: #fff;
padding: 40px 30px 45px 30px;
box-shadow: 2px 2px 2px 1px rgba(128, 128, 128, 0.1);
margin: 0 0 25px 0;
}
h2 {
font-size: 1.8em;
color: #373f42;
margin: 0 0 0.25em 0;
}
h3 {
color: #96a9b5;
font-size: 1.25em;
}
a {
color: #ED391B;
}
header {
margin: 0 0 2em 0;
}
.quote-list {
li {
border-bottom: solid 1px #e2e6e8;
}
}
.link-list {
li {
border-bottom: solid 1px #e2e6e8;
}
}
.check-list {
li {
border-bottom: solid 1px #e2e6e8;
}
}
}
/* Footer */
#footer {
padding: 45px 0 45px 0;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
color: #546b76;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
h2 {
font-size: 1.25em;
color: #212f35;
margin: 0 0 1em 0;
}
a {
color: #546b76;
}
.quote-list {
li {
border-top: solid 1px #e0e4e6;
border-bottom: solid 1px #b5bec3;
}
}
.link-list {
li {
border-top: solid 1px #e0e4e6;
border-bottom: solid 1px #b5bec3;
}
}
.check-list {
li {
border-top: solid 1px #e0e4e6;
border-bottom: solid 1px #b5bec3;
}
}
}
/* Copyright */
#copyright {
border-top: solid 1px #b5bec3;
box-shadow: inset 0px 1px 0px 0px #e0e4e7;
text-align: center;
padding: 45px 0 80px 0;
color: #8d9ca3;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
a {
color: #8d9ca3;
}
}
/* Large */
@include breakpoint('<=large') {
/* Multi-use */
.check-list {
li {
font-size: 1em;
line-height: 2em;
}
}
.quote-list {
li {
padding: 1em 0 1em 0;
img {
width: 60px;
}
p {
margin: 0 0 0 80px;
font-size: 1em;
font-style: italic;
line-height: 1.8em;
}
span {
display: block;
margin-left: 80px;
font-size: 0.8em;
font-weight: 400;
line-height: 1.8em;
}
}
}
.feature-image {
margin: 0 0 1em 0;
}
.button-large {
font-size: 1.5em;
}
/* Banner */
#banner {
p {
font-size: 1.75em;
}
}
/* Header */
#header {
h1 {
font-size: 2.25em;
}
nav {
a {
font-size: 1.1em;
}
}
}
/* Content */
#content {
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
header {
margin: 0 0 1.25em 0;
}
}
}
/* Medium */
#navPanel, #titleBar {
display: none;
}
@include breakpoint('<=medium') {
/* Basic */
html, body {
overflow-x: hidden;
}
/* Header */
#header {
text-align: center;
> .container:first-child {
display: none;
}
}
/* Content */
#content {
padding: 25px 0;
}
/* Nav */
#page-wrapper {
@include vendor('backface-visibility', 'hidden');
@include vendor('transition', 'transform #{_duration(navPanel)} ease');
padding-bottom: 1px;
padding-top: 44px;
}
#titleBar {
@include vendor('backface-visibility', 'hidden');
@include vendor('transition', 'transform #{_duration(navPanel)} ease');
display: block;
height: 44px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: _misc(z-index-base) + 1;
color: #fff;
background: url('images/bg04.jpg');
box-shadow: inset 0px -20px 70px 0px rgba(200, 220, 245, 0.1), inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.6);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
.title {
display: block;
text-align: center;
font-size: 1.2em;
font-weight: 400;
line-height: 48px;
}
.toggle {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
&:after {
content: '';
display: block;
position: absolute;
top: 6px;
left: 6px;
color: #fff;
background: rgba(255, 255, 255, 0.025);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.05), inset 0px -8px 10px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);
width: 49px;
height: 31px;
border-radius: 8px;
}
&:before {
content: '';
position: absolute;
width: 20px;
height: 30px;
background: url('images/mobileUI-site-nav-opener-bg.svg');
top: 15px;
left: 20px;
z-index: 1;
opacity: 0.25;
}
&:active {
&:after {
background: rgba(255, 255, 255, 0.05);
}
}
}
}
#navPanel {
@include vendor('backface-visibility', 'hidden');
@include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
@include vendor('transition', ('transform #{_duration(navPanel)} ease'));
display: block;
height: 100%;
left: 0;
overflow-y: auto;
position: fixed;
top: 0;
width: _size(navPanel);
z-index: _misc(z-index-base) + 2;
background: url('images/bg04.jpg');
box-shadow: inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25), inset -2px 0px 25px 0px rgba(0, 0, 0, 0.5);
text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);
.link {
display: block;
color: #fff;
text-decoration: none;
font-size: 1.25em;
line-height: 2em;
padding: 0.625em 1.5em 0.325em 1.5em;
border-top: solid 1px #373d40;
border-bottom: solid 1px rgba(0, 0, 0, 0.4);
&:first-child {
border-top: 0;
}
&:last-child {
border-bottom: 0;
}
}
}
body {
&.navPanel-visible {
#page-wrapper {
@include vendor('transform', 'translateX(#{_size(navPanel)})');
}
#titleBar {
@include vendor('transform', 'translateX(#{_size(navPanel)})');
}
#navPanel {
@include vendor('transform', 'translateX(0)');
}
}
}
}
/* Small */
@include breakpoint('<=small') {
/* Basic */
body, input, textarea, select {
font-size: 13pt;
line-height: 1.4em;
}
/* Multi-use */
.link-list {
li {
padding: 0.75em 0 0.75em 0;
}
}
.quote-list {
li {
p {
margin-bottom: 0.5em;
}
}
}
.check-list {
li {
font-size: 1em;
}
}
.button-large {
width: 100%;
}
/* Banner */
#banner {
p {
font-size: 1.25em;
font-weight: 200;
line-height: 1.25em;
margin: 0 0 1em 0;
}
}
/* Content */
#content {
section {
padding: 30px 20px;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1em;
}
header {
margin: 0 0 1.25em 0;
}
}
/* Footer */
#footer {
.link-list {
margin: 0 0 10px 0 !important;
}
}
/* Copyright */
#copyright {
padding: 20px 30px;
}
}

121
blog.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Blog posts</h2>
</header>
</section>
<section>
<a href="./posts/2023-12-19_1st_plenum_2nd_board_meeting.html" class="hidden-blog">
<h2>1st plenum, 2nd board meeting</h2>
<h3>19.12.2023</h3>
<p class="last-child">
On the 16th we had two association wide meetings. Read this post to find the main points and the protocols.
</p>
</a>
</section>
<section>
<a href="./posts/2023-12-18_pseudonyms.html" class="hidden-blog">
<h2>Pseudonyms</h2>
<h3>18.12.2023</h3>
<p class="last-child">
We now officially support pseudonyms. Read here how and why.
</p>
</a>
</section>
<section>
<a href="./posts/2023-07-13_1st_board_meeting.html" class="hidden-blog">
<h2>1st board meeting</h2>
<h3>13.07.2023</h3>
<p class="last-child">
On the 13th we had our first board meeting. Read this post to find the main points and the protocol.
</p>
</a>
</section>
<section>
<a href="./posts/2022-11-05_founded.html" class="hidden-blog">
<h2>We are founded!</h2>
<h3>05.11.2022</h3>
<p class="last-child">
We are now officially an association. Read this post for a small hello letter.
</p>
</a>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

92
contact.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Contact</h2>
<h3></h3>
</header>
<p>
For press inquiries please contact the board via email: <a href="mailto:board@newpipe-ev.de?subject=Press inquiry">board@newpipe-ev.de</a>.
</p>
<p>
<strong>Matrix</strong> is our group chat system of choice. Feel free to join it at <a href="https://matrix.to/#/#newpipe-ev:matrix.org">#newpipe-ev:matrix.org</a>.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

99
credits.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Credits</h2>
<h3>Credit where credit is due.</h3>
</header>
<p>
This website was built using the <a href="https://html5up.net/halcyonic">Halcyonic site template.</a>
This template was published under <a href="https://creativecommons.org/licenses/by/3.0/">CC By 3.0</a>
by <a href="https://twitter.com/ajlkn">AJ</a>. We are very thankful to them for doing this, this website
would look a whole lot more technical/uglier without it.
</p>
<p>
We also use pictures here, we got them from <a href="https://unsplash.com/">Unsplash</a>, they are
licensed under the <a href="https://unsplash.com/license">Unsplash license</a>.
To be more specific, we have <a href="https://unsplash.com/photos/four-markers-on-table-566CgCRSNCk">nametag</a> by <a href="https://unsplash.com/@jontyson">Jon Tyson</a>,
<a href="https://unsplash.com/photos/oval-brown-wooden-conference-table-and-chairs-inside-conference-room-GWe0dlVD9e0">Minimalist boardroom</a> by <a href="https://unsplash.com/@bchild311">Benjamin Child</a> and
<a href="https://unsplash.com/photos/white-and-black-checked-pattern-z8y36JocqkU">Hello</a> by <a href="https://unsplash.com/@timmossholder">Tim Mossholder</a>
(<a href="https://www.instagram.com/timmossholder/">@timmossholder</a> on instagram).
Thank you all for providing these for everyone to use, you all are awesome!
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

108
donate.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Donate</h2>
</header>
<p>
You want to donate towards our association in order to forward our goals? Thank you!
</p>
<h3>Current goal</h3>
<p>
We currently want to offer TeamNewPipe to pay for a developer to start rewriting bigger parts of the app. We need about XXX € monthly to afford this, we currently get YYY €.
</p>
<p>
We offer the following ways to send us money: Via direct debit towards our bank account, IBAN <code>DE94430609671308756300</code>. This way has the fewest fees, so we get the most from your donation!
</p>
<p>
Via liberapay, <a href="https://liberapay.com/TeamNewPipe/">https://liberapay.com/TeamNewPipe/</a>.
</p>
<p>
Via OpenCollective, <a href="https://opencollective.com/lemmy">https://opencollective.com/lemmy</a>. (Potentially tax deductable here?)
</p>
<h3>
Non profit, can I get a donation receipt?
</h3>
<p>
Due to our unique focus, we werent able to register the association as “beneficial to the public”, which is in Germany seperated from non profit. We still can not amount profits with this association and have to spend all money we get towards our associations ideal goals (and can not e.g. pay ourselves a salary or just buy stocks to make more money), but sadly do not get the same tax benefits.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

20
images/TNPlogo.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#CD201F;}
.st1{fill:#FFFFFF;}
</style>
<g id="Alapkor">
<circle id="XMLID_23_" class="st0" cx="50" cy="50" r="50"/>
</g>
<g id="Elemek">
<path id="XMLID_19_" class="st1" d="M47,28.2c-9-5.3-15.3-9-15.3-9v61.7c0,0,30.4-18,52.3-30.9C72.1,43,57.7,34.5,47,28.2z"/>
</g>
<g id="Fedo">
<path id="XMLID_5_" class="st0" d="M48.4,40.1c-4.1-2.4-7-4.1-7-4.1V64c0,0,13.9-8.2,23.8-14C59.8,46.8,53.3,42.9,48.4,40.1z"/>
<rect id="XMLID_4_" x="41.4" y="55.6" class="st0" width="6.2" height="21"/>
</g>
<g id="Vonalak">
</g>
<script xmlns=""/></svg>

After

Width:  |  Height:  |  Size: 905 B

BIN
images/banner.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
images/christian.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 340 KiB

BIN
images/fabio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
images/hello.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
images/meeting.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
images/nametag.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 663 KiB

BIN
images/pic01.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
images/pic02.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
images/pic03.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
images/pic04.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
images/pic05.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/pic06.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
images/pic07.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
images/pic08.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
images/qrdebit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/qrstripe.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
images/thjorven.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
images/thjorven.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

165
imprint.html Normal file
View File

@ -0,0 +1,165 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Imprint</h2>
</header>
<p>
Since we are a German association, we have to offer our imprint in German (which is the legal binding version), but as usually we translated it as best as we could so you can enjoy it in English as well.
</p>
</section>
<section>
<h3>
Legal notice according to § 5 TMG and § 55 RStV.
</h3>
<p>
NewPipe e. V.<br />
Location: Weberstraße 14<br />
c/o Thjorven Rubach<br />
22083 Hamburg
</p>
<p>
Associations Register: 25263<br />
District court: Hamburg
</p>
<p><strong>Represented through:</strong><br />
Thjorven Rubach<br />
Fabio Giovanazzi<br />
Christian Schabesberger</p>
<h3>
Contact
</h3>
<p>Telephone: 040 53271857<br />
E-Mail: board@newpipe-ev.de
</p>
<h3>Responsible for Content
</h3>
<p>
Thjorven Rubach<br />
Location: Weberstraße 14<br />
22083 Hamburg
</p>
<h3>
Consumer arbitration board:
</h3>
<p>
We are not willing or obliged to participate in dispute resolution proceedings in front of a consumer arbitration board.
</p>
</section>
<section>
<h3>
Angaben gemäß § 5 TMG
</h3>
<p>
NewPipe e. V.<br />
Sitz: Weberstraße 14<br />
c/o Thjorven Rubach<br />
22083 Hamburg
</p>
<p>
Vereinsregister: 25263<br />
Registergericht: Hamburg
</p>
<p><strong>Vertreten durch:</strong><br />
Thjorven Rubach<br />
Fabio Giovanazzi<br />
Christian Schabesberger</p>
<h3>
Kontakt
</h3>
<p>Telefon: 040 53271857<br />
E-Mail: board@newpipe-ev.de
</p>
<h3>Redaktionell verantwortlich
</h3>
<p>
Thjorven Rubach<br />
Adresse: Weberstraße 14<br />
22083 Hamburg
</p>
<h3>
Verbraucherschlichtungsstelle:
</h3>
<p>
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

187
index.html Normal file
View File

@ -0,0 +1,187 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.&nbsp;V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="container">
<div class="row">
<div class="col-4 col-12-medium">
<!-- Box #1 -->
<section>
<header>
<h2>Who We Are</h2>
</header>
<a href="#" class="feature-image"><img src="images/pic05.jpg" alt="" /></a>
<p>A non-profit association founded in Germany in 2022, mostly by TeamNewPipe members. Almost anyone can join us, the association is governed directly by the members: At least once per year a full assembly is held where the board presents the work happened since the last assembly and votes are cast on new decisions.</p>
</section>
</div>
<div class="col-4 col-6-medium col-12-small">
<!-- Box #2 -->
<section>
<header>
<h2>What We Do</h2>
</header>
<ul class="check-list">
<li>Organize public informational events or congresses</li>
<li>Support projects financially which develop digital media technology</li>
<li>Make PR for projects in accordance with our association's goals</li>
<li>Provide digital infrastructure for projects</li>
<li>Or coordinate and help groups of volunteers who have the same goals</li>
</ul>
</section>
</div>
<div class="col-4 col-6-medium col-12-small">
<!-- Box #3 -->
<section>
<header style="margin-bottom: 20px;">
<h2>We currently support these projects</h2>
</header>
<ul class="quote-list">
<li>
<img src="images/TNPlogo.svg" alt="" height=70 />
<p>Hosting the website infrastructure and repository of TeamNewPipe.</p>
</li>
</ul>
<h3 style="font-style: italic"><a style="text-decoration: none;color: #FCFBF8;" href="contact.html">Maybe yours could be next?</a></h3>
</section>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row aln-center">
<div class="col-3 col-6-medium col-12-small">
<a href="#" class="hidden">
<!-- Feature #1 -->
<section>
<div href="#" class="bordered-feature-image"><img src="images/meeting.jpg" alt="" /></div>
<h2>1st plenum, 2nd board meeting</h2>
<h4>19.12.2023</h4>
<p class="hide-a" >
On the 16th we had two association wide meetings. Read this post to find the main points and the protocols.
</p>
</section>
</a>
</div>
<div class="col-3 col-6-medium col-12-small">
<a href="#" class="hidden">
<!-- Feature #2 -->
<section>
<div href="#" class="bordered-feature-image"><img src="images/nametag.jpg" alt="" /></div>
<h2>Pseudonyms</h2>
<h4>18.12.2023</h4>
<p class="hide-a" >
We now officially support pseudonyms. Read here how and why.
</p>
</section>
</a>
</div>
<div class="col-3 col-6-medium col-12-small">
<a href="#" class="hidden">
<!-- Feature #3 -->
<section>
<div href="#" class="bordered-feature-image"><img src="images/meeting.jpg" alt="" /></div>
<h2>1st board meeting</h2>
<h4>13.07.2023</h4>
<p class="hide-a" >
On the 13th we had our first board meeting. Read this post to find the main points and the protocol.
</p>
</section>
</a>
</div>
<div class="col-3 col-6-medium col-12-small">
<a href="#" class="hidden">
<!-- Feature #4 -->
<section>
<div href="#" class="bordered-feature-image"><img src="images/hello.jpg" alt="" /></div>
<h2>We are an association</h2>
<h4>05.11.2022</h4>
<p class="hide-a" >
We are founded. Read this post for a small hello letter.
</p>
</section>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

100
join.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Join our association!</h2>
</header>
<p>
Members of the association get voting rights in the plenum meetings, and bragging rights towards their friends (or foes).
</p>
<p>
Please read through our <a href="about.html">About</a> page to learn about us. Also read our statue linked there, to make sure we are a good fit for your patronage.
</p>
<p>
Every natural person can become a member! If you are underage, we need a conformation of your legal guardians. The regular fee is 24 EUR per year, the reduced 12 EUR, but individual member fees can be requested.
</p>
<p>
Every other entity can become a supporting member. Supporting members pay a yearly fee of 120 EUR, do not get active or passive vote rights and have to appoint a natural person to enact on their behalf.
</p>
<p>
To sign up, fill out the <a href="https://cloud.newpipe-ev.de/s/PYLcQfOAubZYcku">signup form</a>. If you choose SEPA mandate, also fill <a href="https://cloud.newpipe-ev.de/s/PYLcQfOAubZYcku">that out</a>, and then mail these forms to <a href="mailto:board@newpipe-ev.de?subject=New membership application">the board</a>. Hope to hear from you!
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

107
license.html Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Website Licensing</h2>
</header>
<p>
This document explains the licensing situation of the NewPipe e.&nbsp;V. website.
</p>
<h3>
Licensing of Contents
</h3>
<p>
The contents of this site, except for third-party resources or where noted otherwise, are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).<br />
Content is defined as the intellectual property found in texts, images, and other media. The source code itself is licensed differently. Please see the section "Licensing of Source Code".<br />
You can fetch a copy from the "licenses" directory inside this repository as well as from the <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode.en">Creative Commons website</a>.<br />
Authors who contribute media to this repository declare their agreement that their contribution will be licensed under the terms of CC-BY-SA 4.0. They further declare that they own the intellectual property, or have been authorized by the respective owner.
</p>
<h3>
Licensing of Source Code
</h3>
<p>
The source code (HTML, CSS and other scripting, markup or programming languages and the like) is licensed under the terms of the MIT license.<br />
You can fetch a copy from the "licenses" directory inside this repository as well as from the <a href="https://opensource.org/license/mit/">Open Source Initiative's homepage</a>.<br />
Authors who contribute source code to this repository declare their agreement that their contribution will be licensed under the terms of the MIT license. They further declare that they own the intellectual property, or have been authorized by the respective owner.
</p>
<h3>
<h3>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

187
onecolumn.html Normal file
View File

@ -0,0 +1,187 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>One Column - Halcyonic by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">Halcyonic</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="index.html">Homepage</a>
<a href="threecolumn.html">Three Column</a>
<a href="twocolumn1.html">Two Column #1</a>
<a href="twocolumn2.html">Two Column #2</a>
<a href="onecolumn.html">One Column</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>One Column</h2>
<h3>A generic one column layout</h3>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam metus, congue
vel suscipit ut, dignissim non risus. Vestibulum ante est, fringilla nec placerat
eu, vestibulum vitae diam. Integer eget egestas eros. Duis enim erat, mollis quis
lacinia eget, blandit nec ipsum. Donec vitae turpis ipsum. Aliquam mauris libero,
sagittis in eleifend at, mattis imperdiet velit. Donec urna risus, rutrum molestie
varius ac, lacinia sit amet augue. Nam ultrices elementum eros.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
</section>
<section><h1>test2</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row">
<div class="col-8 col-12-medium">
<!-- Links -->
<section>
<h2>Links to Important Stuff</h2>
<div>
<div class="row">
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="col-4 col-12-medium imp-medium">
<!-- Blurb -->
<section>
<h2>An Informative Text Blurb</h2>
<p>
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
&copy; Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,105 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="../about.html">About</a>
<a href="../join.html">Join us</a>
<a href="../blog.html">Blog</a>
<a href="../donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-3 col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Blog posts</h2>
</header>
<ul class="link-list">
<li><a href="./2023-12-19_1st_plenum_2nd_board_meeting.html">1st plenum, 2nd board meeting</a></li>
<li><a href="./2023-12-18_pseudonyms.html">Pseudonyms</a></li>
<li><a href="./2023-07-13_1st_board_meeting.html">1st board meeting</a></li>
<li><strong><a href="./2022-11-05_founded.html">We are founded!</a></strong></li>
</ul>
</section>
</div>
<div class="col-9 col-12-medium imp-medium">
<!-- Main Content -->
<section>
<header>
<h2>We are founded!</h2>
<h3>05.11.2022</h3>
</header>
<p>
This is a small post mortem of our association meeting. We did not sleep much and actually came up with a statue, a fee regulation, invited enough members to have a founding meeting and found time to eat together. All in the span of two days. Crazy.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="../contact.html">Contact</a> | <a href="../license.html">Licensing</a> | <a href="../privacy.html">Privacy Policy</a> | <a href="../credits.html">Credits</a> | <a href="../imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/browser.min.js"></script>
<script src="../assets/js/breakpoints.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,111 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="../about.html">About</a>
<a href="../join.html">Join us</a>
<a href="../blog.html">Blog</a>
<a href="../donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-3 col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Blog posts</h2>
</header>
<ul class="link-list">
<li><a href="./2023-12-19_1st_plenum_2nd_board_meeting.html">1st plenum, 2nd board meeting</a></li>
<li><a href="./2023-12-18_pseudonyms.html">Pseudonyms</a></li>
<li><strong><a href="./2023-07-13_1st_board_meeting.html">1st board meeting</a></strong></li>
<li><a href="./2022-11-05_founded.html">We are founded!</a></li>
</ul>
</section>
</div>
<div class="col-9 col-12-medium imp-medium">
<!-- Main Content -->
<section>
<header>
<h2>1st board meeting</h2>
<h3>13.07.2023</h3>
</header>
<p>
Today we had our first board meeting. The full protocol can be found <a href="https://cloud.newpipe-ev.de/s/KxSxfdbbdvfaJav">here</a>.
</p>
<p>
This meeting was mostly a recap of what got done. The bank account was created at the GLS, a medium-sized server was bought and the newpipe-ev.de domain. Also a backup space at hetzner. Also a mailbox email was created to get infrastructure relevant e-mail to a second mail provider.
</p>
<p>
Membership collecting and logo decisions were postponed to a later date. The idea to support the NewPipe rewrite was suggested, e.g. paying a student during their semester. An announcement regarding the e.V. should be done as soon as a website is there. There was an attempt to reach Wolf/Rossman with no reply.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="../contact.html">Contact</a> | <a href="../license.html">Licensing</a> | <a href="../privacy.html">Privacy Policy</a> | <a href="../credits.html">Credits</a> | <a href="../imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/browser.min.js"></script>
<script src="../assets/js/breakpoints.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,108 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="../about.html">About</a>
<a href="../join.html">Join us</a>
<a href="../blog.html">Blog</a>
<a href="../donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-3 col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Blog posts</h2>
</header>
<ul class="link-list">
<li><a href="./2023-12-19_1st_plenum_2nd_board_meeting.html">1st plenum, 2nd board meeting</a></li>
<li><strong><a href="./2023-12-18_pseudonyms.html">Pseudonyms</a></strong></li>
<li><a href="./2023-07-13_1st_board_meeting.html">1st board meeting</a></li>
<li><a href="./2022-11-05_founded.html">We are founded!</a></li>
</ul>
</section>
</div>
<div class="col-9 col-12-medium imp-medium">
<!-- Main Content -->
<section>
<header>
<h2>Pseudonyms</h2>
<h3>18.12.2023</h3>
</header>
<p>
Some members have reached out to us about pseudonyms. They do not want their actual name to appear on the internet in situations like a meeting protocol or when we mention them on this website. We understand this concern and came up with a solution!
</p>
<p>
We added a field to the official sign up form (which we send to all existing members) to add a wanted pseudonym. Then we can add this to our management system. This way, we know which member is behind a pseudonym and no one can enter a meeting with a new pseudonym and claim to be a member of our association. And we can use the pseudonyms in all public situations.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="../contact.html">Contact</a> | <a href="../license.html">Licensing</a> | <a href="../privacy.html">Privacy Policy</a> | <a href="../credits.html">Credits</a> | <a href="../imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/browser.min.js"></script>
<script src="../assets/js/breakpoints.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,111 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="../about.html">About</a>
<a href="../join.html">Join us</a>
<a href="../blog.html">Blog</a>
<a href="../donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-3 col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Blog posts</h2>
</header>
<ul class="link-list">
<li><strong><a href="./2023-12-19_1st_plenum_2nd_board_meeting.html">1st plenum, 2nd board meeting</a></strong></li>
<li><a href="./2023-12-18_pseudonyms.html">Pseudonyms</a></li>
<li><a href="./2023-07-13_1st_board_meeting.html">1st board meeting</a></li>
<li><a href="./2022-11-05_founded.html">We are founded!</a></li>
</ul>
</section>
</div>
<div class="col-9 col-12-medium imp-medium">
<!-- Main Content -->
<section>
<header>
<h2>1st plenum, 2nd board meeting</h2>
<h3>19.12.2023</h3>
</header>
<p>
Today we had our second board and the first plenum meeting. The full protocol can be found <a href="https://cloud.newpipe-ev.de/s/KxSxfdbbdvfaJav">here</a> and <a href="https://cloud.newpipe-ev.de/s/KxSxfdbbdvfaJav">here</a>.
</p>
<p>
In the board meeting, the conversion from donation currency was discussed. This was changed from allowing all currencies supported by liberapay to just EUR to make fees more transparent. Also it was decided to setup a temporary e-mail as well as website. The decision about pseudonyms was ratified. This also meant a change in privacy policy which needs to be acknowledged by the plenum.
</p>
<p>
In the plenum a topic about releasing protocols quicker was discussed. Then the results of a poll about potential logos were presented, and the decision made to make a new hybrid from the highest voted logo and see how the members like that approach. The privacy policy change and pseudonyms were presented. And a vote to offer allowing to use the NewPipe e.&nbsp;V. server to deploy NewPipe's website was done, as well as starting the legal work on offering someone to work on the rewrite
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="../contact.html">Contact</a> | <a href="../license.html">Licensing</a> | <a href="../privacy.html">Privacy Policy</a> | <a href="../credits.html">Credits</a> | <a href="../imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/browser.min.js"></script>
<script src="../assets/js/breakpoints.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>

108
privacy.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>NewPipe e.V.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">NewPipe e.&nbsp;V.</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="about.html">About</a>
<a href="join.html">Join us</a>
<a href="blog.html">Blog</a>
<a href="donate.html" class="button-large">Donate</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Main Content -->
<section>
<header>
<h2>Privacy policy</h2>
</header>
<h3>Data collection on this website</h3>
<p>
We do not collect any personal data of visitors of the NewPipe e.&nbsp;V. website. We do not install cookies on your system, and we do not track our users. Personal data such as the IP address are only processed for the purpose of serving the pages by our webserver software, and are deleted from the memory immediately after the page has been sent to the user.
</p>
<h3>Server logs</h3>
<p>
To have a minimum of control in scenarios where our website is abused, for example denial-of-service attacks, we configured our webserver to create a so-called acces log. This log file contains a list of all requests made to this server, each request in a separate line.<br />
The logged lines contain the following information:
<ul class="standard-list">
<li>the IP address that was used to make the request</li>
<li>a timestamp</li>
<li>the URL</li>
<li>the HTTP status code</li>
<li>the user agent the users browser sends automatically</li>
</ul>
We need to keep logs of the IP addresses sending requests to our server. As IP addresses are considered personal data and we respect the privacy of our users, we only keep enough of the IP address to be able to able to react to abuse (e.g., DoS and other attacks).<br />
We calculate prefixes of the IP addresses to anonymize them as follows:<br />
<ul class="standard-list">
<li>For IPv4 addresses, we remove the last two bytes to anonymize them. For example, an IP address such as <pre>12.34.56.78</pre> would be logged as <pre>12.34.0.0.</pre></li>
<li>For IPv6 addresses, we remove all bytes but the first two. For example, an IP address such as <pre>2001:db8:85a3:8d3:1319:8a2e:370:7344</pre> would be logged as <pre>2001:db8:0:0:0:0:0:0<pre> (short <pre>2001:0db8::</pre>).</li>
</ul>
We can not identify users from combinations of the other data. Therefore, we consider our log anonymized.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row aln-center">
<div class="col-12">
<a href="https://git.newpipe-ev.de/NewPipe-eV/website">Website repository</a> |
<a href="contact.html">Contact</a> | <a href="license.html">Licensing</a> | <a href="privacy.html">Privacy Policy</a> | <a href="credits.html">Credits</a> | <a href="imprint.html">Imprint</a>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
Copyright &copy; NewPipe e.&nbsp;V., all rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

232
threecolumn.html Normal file
View File

@ -0,0 +1,232 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Three Column - Halcyonic by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">Halcyonic</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="index.html">Homepage</a>
<a href="threecolumn.html">Three Column</a>
<a href="twocolumn1.html">Two Column #1</a>
<a href="twocolumn2.html">Two Column #2</a>
<a href="onecolumn.html">One Column</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-3 col-12-medium">
<!-- Left Sidebar -->
<section>
<header>
<h2>Ipsum Dolor</h2>
</header>
<p>
Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat.
</p>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
<section>
<header>
<h2>Magna Phasellus</h2>
</header>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Nec sociis natoque</a></li>
<li><a href="#">Penatibus et magnis</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
</div>
<div class="col-6 col-12-medium imp-medium">
<!-- Main Content -->
<section>
<header>
<h2>Three Column</h2>
<h3>A generic three column layout</h3>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam metus, congue
vel suscipit ut, dignissim non risus. Vestibulum ante est, fringilla nec placerat
eu, vestibulum vitae diam. Integer eget egestas eros. Duis enim erat, mollis quis
lacinia eget, blandit nec ipsum. Donec vitae turpis ipsum. Aliquam mauris libero,
sagittis in eleifend at, mattis imperdiet velit. Donec urna risus, rutrum molestie
varius ac, lacinia sit amet augue. Nam ultrices elementum eros.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
</section>
</div>
<div class="col-3 col-12-medium">
<!-- Right Sidebar -->
<section>
<header>
<h2>Magna Phasellus</h2>
</header>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Nec sociis natoque</a></li>
<li><a href="#">Penatibus et magnis</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
<section>
<header>
<h2>Ipsum Dolor</h2>
</header>
<p>
Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat.
</p>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row">
<div class="col-8 col-12-medium">
<!-- Links -->
<section>
<h2>Links to Important Stuff</h2>
<div>
<div class="row">
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="col-4 col-12-medium imp-medium">
<!-- Blurb -->
<section>
<h2>An Informative Text Blurb</h2>
<p>
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
&copy; Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

219
twocolumn1.html Normal file
View File

@ -0,0 +1,219 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Two Column 1 - Halcyonic by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">Halcyonic</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="index.html">Homepage</a>
<a href="threecolumn.html">Three Column</a>
<a href="twocolumn1.html">Two Column #1</a>
<a href="twocolumn2.html">Two Column #2</a>
<a href="onecolumn.html">One Column</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-9 col-12-medium">
<!-- Main Content -->
<section>
<header>
<h2>Two Column #1</h2>
<h3>A generic two column layout</h3>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam metus, congue
vel suscipit ut, dignissim non risus. Vestibulum ante est, fringilla nec placerat
eu, vestibulum vitae diam. Integer eget egestas eros. Duis enim erat, mollis quis
lacinia eget, blandit nec ipsum. Donec vitae turpis ipsum. Aliquam mauris libero,
sagittis in eleifend at, mattis imperdiet velit. Donec urna risus, rutrum molestie
varius ac, lacinia sit amet augue. Nam ultrices elementum eros.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
</section>
</div>
<div class="col-3 col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Magna Phasellus</h2>
</header>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Nec sociis natoque</a></li>
<li><a href="#">Penatibus et magnis</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
<section>
<header>
<h2>Ipsum Dolor</h2>
</header>
<p>
Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat.
</p>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row">
<div class="col-8 col-12-medium">
<!-- Links -->
<section>
<h2>Links to Important Stuff</h2>
<div>
<div class="row">
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="col-4 col-12-medium imp-medium">
<!-- Blurb -->
<section>
<h2>An Informative Text Blurb</h2>
<p>
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
&copy; Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

219
twocolumn2.html Normal file
View File

@ -0,0 +1,219 @@
<!DOCTYPE HTML>
<!--
Halcyonic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Two Column 2 - Halcyonic by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Logo -->
<h1><a href="index.html" id="logo">Halcyonic</a></h1>
<!-- Nav -->
<nav id="nav">
<a href="index.html">Homepage</a>
<a href="threecolumn.html">Three Column</a>
<a href="twocolumn1.html">Two Column #1</a>
<a href="twocolumn2.html">Two Column #2</a>
<a href="onecolumn.html">One Column</a>
</nav>
</div>
</div>
</div>
</section>
<!-- Content -->
<section id="content">
<div class="container">
<div class="row">
<div class="col-3 col-12-medium">
<!-- Sidebar -->
<section>
<header>
<h2>Magna Phasellus</h2>
</header>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Nec sociis natoque</a></li>
<li><a href="#">Penatibus et magnis</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
<section>
<header>
<h2>Ipsum Dolor</h2>
</header>
<p>
Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat.
</p>
<ul class="link-list">
<li><a href="#">Sed dolore viverra</a></li>
<li><a href="#">Ligula non varius</a></li>
<li><a href="#">Dis parturient montes</a></li>
<li><a href="#">Nascetur ridiculus</a></li>
</ul>
</section>
</div>
<div class="col-9 col-12-medium imp-medium">
<!-- Main Content -->
<section>
<header>
<h2>Two Column #2</h2>
<h3>Another generic two column layout</h3>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam metus, congue
vel suscipit ut, dignissim non risus. Vestibulum ante est, fringilla nec placerat
eu, vestibulum vitae diam. Integer eget egestas eros. Duis enim erat, mollis quis
lacinia eget, blandit nec ipsum. Donec vitae turpis ipsum. Aliquam mauris libero,
sagittis in eleifend at, mattis imperdiet velit. Donec urna risus, rutrum molestie
varius ac, lacinia sit amet augue. Nam ultrices elementum eros.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
<p>
Sed faucibus viverra ligula, non varius magna semper vitae. Donec eu justo ut ipsum
hendrerit congue nec eu risus. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
elit. Suspendisse fermentum adipiscing nisi, a tempor libero malesuada at. Morbi
lacinia dui adipiscing risus eleifend tincidunt. Proin eu mauris eu tellus eleifend
hendrerit.
</p>
<p>
Mauris sit amet tellus urna. In facilisis, tortor vitae ultricies egestas, odio
mi rhoncus arcu, quis euismod felis felis et velit. Mauris varius consectetur erat
egestas tempus. Cras convallis odio sit amet risus convallis porttitor. Integer
vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
justo imperdiet vel. Proin nec dictum mi. Duis commodo enim non tellus interdum
iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat dui auctor.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row">
<div class="col-8 col-12-medium">
<!-- Links -->
<section>
<h2>Links to Important Stuff</h2>
<div>
<div class="row">
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
<div class="col-3 col-12-small">
<ul class="link-list last-child">
<li><a href="#">Neque amet dapibus</a></li>
<li><a href="#">Sed mattis quis rutrum</a></li>
<li><a href="#">Accumsan suspendisse</a></li>
<li><a href="#">Eu varius vitae magna</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="col-4 col-12-medium imp-medium">
<!-- Blurb -->
<section>
<h2>An Informative Text Blurb</h2>
<p>
Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
</p>
</section>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div id="copyright">
&copy; Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>