initial commit
This commit is contained in:
zyachel
commit
d660f9ea58
55 changed files with 5999 additions and 0 deletions
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
#big stuff
|
||||
node_modules/
|
||||
.cache/
|
||||
.parcel-cache/
|
||||
|
||||
# env variables
|
||||
*.env
|
||||
|
||||
# CSS files
|
||||
public/css/*.css
|
||||
public/css/*.css.map
|
||||
|
||||
#misc stuff
|
||||
fetchers/*
|
||||
!fetchers/movie.js
|
||||
controllers/movieControllers.js
|
||||
routes/movieRoutes.js
|
||||
views/pug/homepage.pug
|
||||
views/pug/movies.pug
|
||||
views/pug/_card.pug
|
||||
utils/constants.js
|
||||
661
LICENSE
Normal file
661
LICENSE
Normal file
|
|
@ -0,0 +1,661 @@
|
|||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
136
README.md
Normal file
136
README.md
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
# libremdb
|
||||
|
||||
A FOSS alternative front-end to IMDb.
|
||||
|
||||
Inspired by projects like [teddit](https://codeberg.org/teddit/teddit), [nitter](https://github.com/zedeus/nitter) and [many others](#similar-projects).
|
||||
|
||||
<br/>
|
||||
<img src="./public/img/misc/preview.png" title="dark mode showing lighthouse stats" width="1000" />
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- No ads or tracking
|
||||
Browse any movie info without being tracked or bombarded by annoying ads.
|
||||
- No connection to IMDb
|
||||
All requests go through the backend; client never talks to IMDb except for a bunch of requests to `m.media-amazon.com` for images.
|
||||
- No JavaScript required
|
||||
Just a few linesof code(~30) to save theme preference, which itself is optional.
|
||||
- Modern interface
|
||||
Modern interface with curated colors supporting both dark and light themes.
|
||||
- Responsive design
|
||||
Be it your small mobile or big computer screen, it's fully responsive.
|
||||
- Lightweight
|
||||
_[Up movie page](https://imdb.com/title/tt1049413/)_
|
||||
| | libremdb | IMDb |
|
||||
| --------------- | -------- | ------ |
|
||||
| no. of requests | ~35 | ~280 |
|
||||
| data consumed | 1.35MB | 7.75MB |
|
||||
|
||||
---
|
||||
|
||||
## FAQs
|
||||
|
||||
- Why is it so slow?
|
||||
Whenever you request info about a movie/show on libremdb, 4 trips are made(2 between your browser and libremdb's server, and 2 between libremdb's server and IMDb's server) instead of the usual 2 trips when you visit a website. For this reason there's a noticable delay. This is a bit of inconvenience you'll have to face should you wish to use this website.
|
||||
|
||||
- It doesn't have all routes.
|
||||
I think most of the people just check IMDb to get a quick glimpse of a movie/show. That's why there is just one route for now. However, I will try to implement other important routes if time allows. Keep an eye on [To-Do](#to-do) section.
|
||||
|
||||
- Why is it connecting to `m.media-amazon.com`?
|
||||
For now, images are directly served from amazon. If I have enough time in the future, I'll implement a way to serve the images from libremdb instead.
|
||||
|
||||
- Will amazon track me then?
|
||||
They may log your IP address. I'd recommend using a VPN for mitigating this risk.
|
||||
|
||||
- Why not just use IMDb?
|
||||
Refer to the [features section](#features) above.
|
||||
- Why didn't you use other databases like [TMDB](https://www.themoviedb.org/) or [OMDb](https://www.omdbapi.com/)?
|
||||
IMDb simply has superior dataset compared to all other alternatives. With that being said, I'd encourage you to check out those alternatives too.
|
||||
- Why did you deploy it on heroku? Why not just buy your own domain name?
|
||||
It's just a proof-of-concept for now. However, if you'd like to do so, you are very welcome.
|
||||
|
||||
---
|
||||
|
||||
## Privacy
|
||||
|
||||
In short: libremdb doesn't collect any data at all.
|
||||
|
||||
- Data you directly provide: None.
|
||||
- Data you passively provide: Heroku might log some things(like IP address). So, consider hosting your own instance or using a VPN.
|
||||
- Data stored in your browser: To remember theme preferences, the website stores a key named 'theme' in Local Storage provided by your browser. Apart from that, there is nothing stored in your browser.
|
||||
|
||||
---
|
||||
|
||||
## To-Do
|
||||
|
||||
### soon
|
||||
|
||||
- [ ] add advanced search route
|
||||
- [ ] add did you know and reviews on movie info page
|
||||
- [ ] implement routes for reviews, quotes, goofs, trivia and crazy credits
|
||||
|
||||
### at a later stage
|
||||
|
||||
- [ ] use redis
|
||||
- [ ] implement a better installation method
|
||||
- [ ] serve images from libremdb itself
|
||||
- [ ] add a way to see trailer and other videos
|
||||
- [ ] implement other trivial routes
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
1. Install Node.js and Git.
|
||||
for Node.js, visit [their website](https://nodejs.org/en/).
|
||||
for Git, run `sudo apt install git` if you're on a Debain-based distro. Else visit [their website](https://git-scm.com/).
|
||||
|
||||
2. Clone and set up the repo.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/zyachel/libremdb.git
|
||||
cd libremdb
|
||||
cp config.env.template config.env # you can make necessary changes
|
||||
# if you use npm, change 'pnpm' to 'npm run' here as well as in package.json
|
||||
pnpm install
|
||||
pnpm start
|
||||
```
|
||||
|
||||
libremdb will start running at http://localhost:3000.
|
||||
|
||||
---
|
||||
|
||||
## similar projects
|
||||
|
||||
- [Teddit](https://codeberg.org/teddit/teddit)
|
||||
Teddit is an alternative Reddit front-end focused on privacy.
|
||||
- [Nitter](https://github.com/zedeus/nitter)
|
||||
Nitter is a free and open source alternative Twitter front-end focused on privacy.
|
||||
- [Bibliogram](https://sr.ht/~cadence/bibliogram/)
|
||||
Bibliogram is an alternative front-end for Instagram.
|
||||
- [Invidious](https://invidious.org)
|
||||
Invidious is an alternative front-end to YouTube.
|
||||
- [Libreddit](https://github.com/spikecodes/libreddit)
|
||||
Libreddit is an alternative private front-end to Reddit.
|
||||
- [Scribe](https://git.sr.ht/~edwardloveall/scribe)
|
||||
Scribe is an alternative Medium frontend.
|
||||
|
||||
- [other cool projects →](https://github.com/mendel5/alternative-front-ends)
|
||||
|
||||
---
|
||||
|
||||
## Contact
|
||||
|
||||
| \[matrix\] | email |
|
||||
| :--------------------------------------------------------: | :------------------------------------------------------: |
|
||||
| <img src="./public/img/contact/matrix.png" width="120" /> | <img src="./public/img/contact/email.png" width="120" /> |
|
||||
| [@ninal:matrix.org](https://matrix.to/#/@ninal:matrix.org) | [aricla@protonmail.com](mailto:aricla@protonmail.com) |
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
Licensed under GNU AGPLv3.
|
||||
Refer to [License](/LICENSE) for full legalese.
|
||||
58
app.js
Normal file
58
app.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
const express = require('express');
|
||||
const path = require('path');
|
||||
const morgan = require('morgan');
|
||||
const helmet = require('helmet');
|
||||
const compression = require('compression');
|
||||
const app = express();
|
||||
// const movieRouter = require('./routes/movieRoutes');
|
||||
const viewRouter = require('./routes/viewRoutes');
|
||||
const globalErrorHandler = require('./controllers/errorControllers');
|
||||
const { AppError } = require('./utils/errorUtils');
|
||||
|
||||
//-------------------------------------------------------------------------//
|
||||
// GLOBAL MIDDLEWARES
|
||||
//-------------------------------------------------------------------------//
|
||||
|
||||
app.use(compression()); // for compressing response bodies
|
||||
app.use(
|
||||
// for making the app more secure by setting some security headers(like CORS)
|
||||
helmet({
|
||||
contentSecurityPolicy: {
|
||||
directives: {
|
||||
// only allowing images from 'm.media-amazon.com' as crossorigin
|
||||
'img-src': ["'self'", 'm.media-amazon.com'],
|
||||
},
|
||||
},
|
||||
// 'crossorigin' attribute is needed in the img tag where images are fetched from 'm.media-amazon.com' if the policy below is set to true. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy for more details
|
||||
crossOriginEmbedderPolicy: false,
|
||||
})
|
||||
);
|
||||
|
||||
app.set('view engine', 'pug'); // setting pug as a view engine
|
||||
app.set('views', path.join(__dirname, 'views/pug')); // directory from where html template will be sourced
|
||||
|
||||
app.use(express.static(path.join(__dirname, 'public'))); // directory from where files like css, images, fonts, will be sourced
|
||||
|
||||
if (process.env.NODE_ENV === 'development') app.use(morgan('dev')); // for logging requests
|
||||
// app.use(express.json({ limit: '3mb' })); // for parsing json
|
||||
|
||||
//-------------------------------------------------------------------------//
|
||||
// ROUTER MIDDLEWARES
|
||||
//-------------------------------------------------------------------------//
|
||||
// app.use('/api/v1/movies', movieRouter); // sub-router for movie related endpoints
|
||||
app.use('/', viewRouter); // for html pages
|
||||
|
||||
//-------------------------------------------------------------------------//
|
||||
// GLOBAL ERROR HANDLING
|
||||
//-------------------------------------------------------------------------//
|
||||
app.all('*', (req, res, next) => {
|
||||
next(
|
||||
new AppError(
|
||||
`the route you requested(${req.originalUrl}) doesn't exist`,
|
||||
404
|
||||
)
|
||||
);
|
||||
});
|
||||
app.use(globalErrorHandler); // handling errors in every middleware
|
||||
|
||||
module.exports = app;
|
||||
8
config.env.template
Normal file
8
config.env.template
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# default port is 3000
|
||||
PORT=3000
|
||||
# url
|
||||
URL=http://localhost:3000
|
||||
# enviorment
|
||||
NODE_ENV=production
|
||||
# change image quality
|
||||
IMAGE_QUALITY=500
|
||||
94
controllers/errorControllers.js
Normal file
94
controllers/errorControllers.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
const { AppError } = require('../utils/errorUtils');
|
||||
|
||||
//----------------------------------------------------------------------------------------------------------//
|
||||
// ERROR HANDLING FUNCTIONS ACC TO ENVIRONMENTS
|
||||
//----------------------------------------------------------------------------------------------------------//
|
||||
// for errors during development
|
||||
const devErrorHandler = (err, req, res) => {
|
||||
req.originalUrl.startsWith('/api/')
|
||||
? // 1) FOR API
|
||||
res.status(err.statusCode).json({
|
||||
status: err.status,
|
||||
message: err.message,
|
||||
stack: err.stack,
|
||||
err,
|
||||
})
|
||||
: // 2) FOR RENDERED PAGES
|
||||
res.render('error', {
|
||||
title: 'an error occured',
|
||||
page: 'error',
|
||||
message: err.message,
|
||||
statusCode: err.statusCode,
|
||||
stack: err.stack,
|
||||
});
|
||||
};
|
||||
|
||||
// for errors during production
|
||||
const prodErrorHandler = (err, req, res) => {
|
||||
if (req.originalUrl.startsWith('/api/'))
|
||||
// 1) FOR API
|
||||
// for trusted, operational errors
|
||||
err.isOperational
|
||||
? res
|
||||
.status(err.statusCode)
|
||||
.json({ status: err.status, message: err.message })
|
||||
: // for untrusted errors sending a generic message
|
||||
res
|
||||
.status(500)
|
||||
.json({ status: 'fail', message: 'something went wrong!' });
|
||||
|
||||
// 2) FOR RENDERED PAGES
|
||||
err.isOperational
|
||||
? res.render('error', {
|
||||
title: 'something went wrong',
|
||||
page: 'error',
|
||||
message: err.message,
|
||||
statusCode: err.statusCode,
|
||||
})
|
||||
: res.render('error', {
|
||||
title: 'an error occured',
|
||||
page: 'error',
|
||||
message: 'something went wrong!',
|
||||
statusCode: 500,
|
||||
});
|
||||
// err;
|
||||
};
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------------//
|
||||
// MAIN EXPRESS ERROR HANDLING MIDDLEWARE
|
||||
//-------------------------------------------------------------------------------------------------------------//
|
||||
const globalErrorHandler = (err, req, res, next) => {
|
||||
// setting some defaults on the error in case they don't exist already
|
||||
err.statusCode = err.statusCode || 500;
|
||||
err.status = err.status || 'error';
|
||||
|
||||
// logging error to the console
|
||||
console.log('\x1b[31m%s\x1b[0m', '🔴️ ERROR:', err); // with red color
|
||||
|
||||
// sending error to the client
|
||||
// for dev environment
|
||||
if (process.env.NODE_ENV === 'development') devErrorHandler(err, req, res);
|
||||
// for prod environment
|
||||
else if (process.env.NODE_ENV === 'production') {
|
||||
let error = { ...err };
|
||||
|
||||
// marking some special errors as operational
|
||||
// axios errors
|
||||
if (err.isAxiosError) {
|
||||
// if connection can't be established to imdb for some reason
|
||||
if (err.code === 'ENETUNREACH' || err.code === 'ENOTFOUND')
|
||||
error = new AppError(
|
||||
'there was some problem fetching data from IMDb',
|
||||
500
|
||||
);
|
||||
|
||||
// in case the url is wrong(like bad title id)
|
||||
if (err.response)
|
||||
error = new AppError(err.response.statusText, err.response.status);
|
||||
}
|
||||
|
||||
prodErrorHandler(error, req, res);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = globalErrorHandler;
|
||||
73
controllers/viewControllers.js
Normal file
73
controllers/viewControllers.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
const { AppError, catchErrors } = require('../utils/errorUtils');
|
||||
// const { genres, popularGenres } = require('../utils/constants');
|
||||
const getMovie = require('../fetchers/movie');
|
||||
|
||||
exports.overview = (req, res, next) => res.redirect(301, '/about');
|
||||
|
||||
exports.about = catchErrors(async (req, res, next) => {
|
||||
res.render('about', { title: 'About', page: 'About' });
|
||||
});
|
||||
|
||||
exports.privacy = catchErrors(async (req, res, next) => {
|
||||
res.render('privacy', { title: 'Privacy', page: 'Privacy' });
|
||||
});
|
||||
|
||||
exports.contact = catchErrors(async (req, res, next) => {
|
||||
res.render('contact', { title: 'Contact', page: 'Contact' });
|
||||
});
|
||||
|
||||
exports.similarProjects = catchErrors(async (req, res, next) => {
|
||||
res.render('similarProjects', {
|
||||
title: 'Similar Projects',
|
||||
page: 'Similar Projects',
|
||||
});
|
||||
});
|
||||
|
||||
exports.movie = catchErrors(async (req, res, next) => {
|
||||
const movie = await getMovie(req.params.title, +process.env.IMAGE_QUALITY);
|
||||
res.render('movie', {
|
||||
movie,
|
||||
title: movie.basic.name,
|
||||
page: movie.basic.name,
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
exports.searchGenres = catchErrors(async (req, res, next) => {
|
||||
// fetching top 10 rated movies to show in homepage
|
||||
let movies;
|
||||
const genresQueriedStr = req.query.genres;
|
||||
const genresQueriedArr = genresQueriedStr?.split(',');
|
||||
|
||||
if (!genresQueriedArr) {
|
||||
movies = await moviesDataFetcher('sci-fi,action');
|
||||
return res.render('homepage', {
|
||||
title: 'Home Page',
|
||||
page: 'Home Page',
|
||||
movies: movies.slice(-10),
|
||||
genres,
|
||||
popularGenres,
|
||||
});
|
||||
}
|
||||
|
||||
const numResults = +req.query.results || 10;
|
||||
const numPage = +req.query.page || 1;
|
||||
const resultsToskip = numResults * (numPage - 1);
|
||||
|
||||
movies = await moviesDataFetcher(genresQueriedStr);
|
||||
movies = movies.slice(resultsToskip, resultsToskip + numResults);
|
||||
const totalNumResults = movies.length;
|
||||
|
||||
if (!movies.length) return next(new AppError('no movies found', 404));
|
||||
|
||||
const [curPage, totalPages] = [numPage, totalNumResults / numResults];
|
||||
res.render('movies', {
|
||||
title: genresQueriedArr.join(', '),
|
||||
page: 'Movies',
|
||||
genres: genresQueriedArr,
|
||||
movies,
|
||||
curPage,
|
||||
totalPages,
|
||||
});
|
||||
});
|
||||
*/
|
||||
237
fetchers/movie.js
Normal file
237
fetchers/movie.js
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
const cheerio = require('cheerio');
|
||||
const axiosInstance = require('../utils/axiosInstance');
|
||||
|
||||
// cleans images links and adds custom quality(optional).
|
||||
const cleanLink = (link, quality = null) => {
|
||||
if (!link) return '';
|
||||
let cleanedLink = link.match(
|
||||
/https:\/\/m\.media-amazon\.com\/images\/M\/[^.]*/gm
|
||||
)?.[0];
|
||||
if (!cleanedLink) return '';
|
||||
cleanedLink += quality ? `.UX${quality}.jpeg` : '.jpeg';
|
||||
return cleanedLink;
|
||||
};
|
||||
|
||||
const getMovie = async (title, quality = null) => {
|
||||
try {
|
||||
const res = await axiosInstance(`/title/${title}`);
|
||||
|
||||
const $ = cheerio.load(res.data);
|
||||
|
||||
// basic info
|
||||
const name = $('h1').text();
|
||||
const metadata = $('ul[data-testid=hero-title-block__metadata] li')
|
||||
.map((i, el) =>
|
||||
$(el).children().length ? $(el).children().first().text() : $(el).text()
|
||||
)
|
||||
.toArray();
|
||||
const rating = $('[data-testid=hero-rating-bar__aggregate-rating__score]')
|
||||
.children()
|
||||
.first()
|
||||
.text();
|
||||
const numVotes = $('[data-testid=hero-rating-bar__aggregate-rating__score]')
|
||||
.siblings()
|
||||
.last()
|
||||
.text();
|
||||
const popularity = $('[data-testid="hero-rating-bar__popularity__score"]')
|
||||
.first()
|
||||
.text();
|
||||
const plotBrief = $('span[data-testid=plot-xl]').contents().first().text();
|
||||
let poster = $('[data-testid="hero-media__poster"] img').attr('src');
|
||||
poster = cleanLink(poster, quality);
|
||||
const reviewScores = [];
|
||||
$(
|
||||
'ul[data-testid="reviewContent-all-reviews"] li a span.three-Elements'
|
||||
).each((i, el) =>
|
||||
reviewScores.push([
|
||||
$(el).children().first().text(),
|
||||
$(el).children().last().text(),
|
||||
])
|
||||
);
|
||||
|
||||
// media
|
||||
const images = $('section[data-testid="Photos"] .ipc-photo img')
|
||||
.map((i, el) => {
|
||||
let image = $(el).attr('src');
|
||||
return cleanLink(image, quality);
|
||||
})
|
||||
.toArray();
|
||||
const imagesLinkExternal = $('[data-testid=photos-title]').attr('href');
|
||||
const videoThumbnail = $('.ipc-slate__slate-image img').attr('src');
|
||||
const videoLinkExternal = $('.hero-media__slate-overlay').attr('href');
|
||||
const videosLinkExternal = $('[data-testid=videos-title]').attr('href');
|
||||
|
||||
// cast
|
||||
const actors = $(
|
||||
'section[data-testid="title-cast"] div[data-testid=title-cast-item]'
|
||||
)
|
||||
.map((i, el) => {
|
||||
const name = $(el)
|
||||
.find('a[data-testid="title-cast-item__actor"]')
|
||||
.text();
|
||||
let avatar = $(el).find('img').attr('src');
|
||||
avatar = cleanLink(avatar, quality);
|
||||
const characterName = $(el)
|
||||
.find('a[data-testid=cast-item-characters-link] span')
|
||||
.first()
|
||||
.text();
|
||||
|
||||
return { name, avatar, characterName };
|
||||
})
|
||||
.toArray();
|
||||
const directors = $(
|
||||
'section[data-testid=title-cast] ul li:nth-of-type(1) li'
|
||||
)
|
||||
.map((i, el) => $(el).find('a').text())
|
||||
.toArray();
|
||||
const writers = $('section[data-testid=title-cast] ul li:nth-of-type(2) li')
|
||||
.map((i, el) => $(el).find('a').text())
|
||||
.toArray();
|
||||
|
||||
// storyline
|
||||
const plotExpanded = $(
|
||||
'section[data-testid="Storyline"] [data-testid=storyline-plot-summary]'
|
||||
)
|
||||
.contents()
|
||||
.first()
|
||||
.text();
|
||||
const tagline = $(
|
||||
'section[data-testid="Storyline"] [data-testid=storyline-taglines] li'
|
||||
)
|
||||
.first()
|
||||
.text();
|
||||
const genres = $(
|
||||
'section[data-testid="Storyline"] [data-testid=storyline-genres] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
const parentalGuidance = $(
|
||||
'[data-testid="storyline-certificate"] li'
|
||||
).text();
|
||||
|
||||
// details
|
||||
const releaseDate = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-releasedate"] li'
|
||||
).text();
|
||||
const countries = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-origin"] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
const officialSite = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-officialsites"] li a'
|
||||
)
|
||||
.first()
|
||||
.attr('href');
|
||||
const languages = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-languages"] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
const alternateTitle = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-akas"] li'
|
||||
)
|
||||
.first()
|
||||
.text();
|
||||
const filmingLocations = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-filminglocations"] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
const companies = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-companies"] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
|
||||
// technical specs
|
||||
const runtime = $(
|
||||
'section[data-testid="TechSpecs"] li[data-testid="title-techspec_runtime"] div'
|
||||
).text();
|
||||
const color = $(
|
||||
'section[data-testid="TechSpecs"] li[data-testid="title-techspec_color"] div'
|
||||
).text();
|
||||
const aspectRatio = $(
|
||||
'section[data-testid="TechSpecs"] li[data-testid="title-techspec_aspectratio"] div'
|
||||
).text();
|
||||
const sound = $(
|
||||
'section[data-testid="TechSpecs"] li[data-testid="title-techspec_soundmix"] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
|
||||
// boxoffice
|
||||
const budget = $(
|
||||
'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-budget"] li'
|
||||
).text();
|
||||
const grossDomestic = $(
|
||||
'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-grossdomestic"] li'
|
||||
).text();
|
||||
const openingWeekendDomestic = $(
|
||||
'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-openingweekenddomestic"] li'
|
||||
)
|
||||
.map((i, el) => $(el).text())
|
||||
.toArray();
|
||||
const grossWorldwide = $(
|
||||
'section[data-testid="BoxOffice"] [data-testid="title-boxoffice-section"] li[data-testid="title-boxoffice-cumulativeworldwidegross"] li'
|
||||
).text();
|
||||
|
||||
// making data object
|
||||
const data = {
|
||||
basic: {
|
||||
name,
|
||||
poster,
|
||||
metadata,
|
||||
rating,
|
||||
numVotes,
|
||||
popularity,
|
||||
genres,
|
||||
plotBrief,
|
||||
directors,
|
||||
writers,
|
||||
},
|
||||
media: {
|
||||
poster,
|
||||
images,
|
||||
imagesLinkExternal,
|
||||
videoThumbnail,
|
||||
videoLinkExternal,
|
||||
videosLinkExternal,
|
||||
},
|
||||
topCast: { actors, directors, writers },
|
||||
storyline: { plotExpanded, tagline, genres, parentalGuidance },
|
||||
details: {
|
||||
releaseDate,
|
||||
countries,
|
||||
officialSite,
|
||||
languages,
|
||||
alternateTitle,
|
||||
filmingLocations,
|
||||
companies,
|
||||
},
|
||||
technicalSpecs: {
|
||||
runtime,
|
||||
color,
|
||||
aspectRatio,
|
||||
sound,
|
||||
},
|
||||
boxoffice: {
|
||||
budget,
|
||||
openingWeekendDomestic,
|
||||
grossDomestic,
|
||||
grossWorldwide,
|
||||
},
|
||||
reviews: {
|
||||
reviewScores,
|
||||
},
|
||||
};
|
||||
|
||||
// returning data
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.log(err.response);
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = getMovie;
|
||||
42
package.json
Normal file
42
package.json
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "libremdb",
|
||||
"version": "0.0.1",
|
||||
"description": "a FOSS alternative front-end to IMDb",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"sass:watch": "sass views/sass/main.scss public/css/styles.css --watch",
|
||||
"sass:build": "sass views/sass/main.scss public/css/styles.css --style=compressed",
|
||||
"prod": " (nodemon server.js) & (pnpm sass:watch)",
|
||||
"dev": " (NODE_ENV=development nodemon server.js) & (pnpm sass:watch)",
|
||||
"start": "(npm run sass:build) && (node server.js)"
|
||||
},
|
||||
"author": "libremdb-contributors",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"axios": "^0.25.0",
|
||||
"cheerio": "^1.0.0-rc.10",
|
||||
"compression": "^1.7.4",
|
||||
"dotenv": "^16.0.0",
|
||||
"express": "^4.17.3",
|
||||
"helmet": "^5.0.2",
|
||||
"morgan": "^1.10.0",
|
||||
"pug": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/morgan": "^1.9.3",
|
||||
"nodemon": "^2.0.15",
|
||||
"sass": "^1.49.9"
|
||||
},
|
||||
"nodemonConfig": {
|
||||
"ignore": [
|
||||
"node_modules/*",
|
||||
"public/*"
|
||||
]
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"json-schema@<0.4.0": ">=0.4.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
1646
pnpm-lock.yaml
Normal file
1646
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
9
public/browserconfig.xml
Normal file
9
public/browserconfig.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/favicon/mstile-150x150.png"/>
|
||||
<TileColor>#b91d47</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
public/favicon/android-chrome-192x192.png
Normal file
BIN
public/favicon/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/favicon/android-chrome-512x512.png
Normal file
BIN
public/favicon/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
public/favicon/apple-touch-icon.png
Normal file
BIN
public/favicon/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/favicon/favicon-16x16.png
Normal file
BIN
public/favicon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
public/favicon/favicon-32x32.png
Normal file
BIN
public/favicon/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/favicon/favicon.ico
Normal file
BIN
public/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/favicon/mstile-150x150.png
Normal file
BIN
public/favicon/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
61
public/favicon/safari-pinned-tab.svg
Normal file
61
public/favicon/safari-pinned-tab.svg
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="576.000000pt" height="576.000000pt" viewBox="0 0 576.000000 576.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,576.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2600 5594 c-14 -3 -70 -11 -125 -20 -96 -15 -228 -49 -290 -75 -16
|
||||
-7 -36 -13 -42 -15 -25 -5 -204 -95 -270 -135 -176 -108 -350 -269 -481 -444
|
||||
-138 -184 -256 -466 -288 -685 -15 -109 -19 -164 -18 -300 1 -139 7 -189 39
|
||||
-355 3 -16 22 -77 41 -135 151 -452 499 -823 944 -1007 93 -39 232 -84 238
|
||||
-78 3 2 12 0 21 -4 9 -5 32 -12 51 -15 65 -11 95 -16 130 -22 55 -11 317 -12
|
||||
395 -3 115 14 143 19 223 40 42 11 84 22 92 24 69 16 330 129 338 148 2 4 8 7
|
||||
14 7 15 0 109 63 204 136 234 181 421 436 528 720 14 39 28 80 31 92 2 11 9
|
||||
30 15 41 6 12 9 21 6 21 -3 0 0 15 5 33 5 17 12 46 15 62 2 17 7 37 9 45 17
|
||||
65 25 344 12 460 -11 101 -25 172 -43 227 -7 23 -15 52 -18 65 -2 13 -15 52
|
||||
-29 88 -110 289 -279 522 -519 718 -42 34 -81 62 -87 62 -6 0 -11 4 -11 9 0 5
|
||||
-9 13 -20 16 -11 3 -26 13 -34 20 -28 28 -266 145 -326 160 -3 1 -18 7 -35 14
|
||||
-16 7 -73 23 -125 36 -87 22 -121 29 -205 41 -41 7 -354 13 -385 8z m255 -336
|
||||
c28 -6 77 -24 109 -41 184 -97 268 -320 192 -509 -111 -275 -463 -352 -681
|
||||
-150 -42 39 -95 113 -100 141 -2 9 -4 17 -4 19 -1 1 -1 5 -2 10 0 4 -5 12 -10
|
||||
18 -14 17 -18 125 -7 184 5 30 23 79 39 111 29 59 121 159 145 159 8 0 14 3
|
||||
14 8 0 8 74 40 109 47 13 2 26 6 28 8 8 9 120 6 168 -5z m-932 -622 c2 3 24 0
|
||||
48 -6 24 -6 52 -13 62 -15 49 -11 155 -94 202 -157 34 -46 67 -149 70 -223 4
|
||||
-78 -40 -213 -84 -256 -9 -10 -29 -31 -45 -48 -98 -108 -298 -147 -446 -87
|
||||
-105 43 -173 104 -220 201 -125 253 32 549 312 590 24 4 45 8 47 10 1 2 13 0
|
||||
26 -5 13 -5 25 -7 28 -4z m1769 -1 c211 -16 381 -206 372 -415 -2 -30 -5 -65
|
||||
-8 -77 -3 -13 -8 -31 -10 -41 -15 -68 -116 -191 -189 -231 -119 -66 -268 -72
|
||||
-391 -16 -93 42 -161 110 -203 201 -39 87 -47 160 -28 258 34 164 171 293 340
|
||||
320 21 4 41 9 43 11 3 2 8 2 13 -1 4 -2 32 -6 61 -9z m-834 -458 c7 -2 18 -9
|
||||
24 -15 7 -7 17 -12 24 -12 7 0 28 -19 48 -41 128 -150 41 -383 -152 -406 -26
|
||||
-3 -49 -6 -52 -6 -13 -2 -78 17 -103 30 -174 88 -176 346 -4 435 66 34 115 38
|
||||
215 15z m-548 -562 c90 -14 231 -113 270 -191 8 -16 21 -37 29 -46 8 -10 11
|
||||
-18 7 -18 -4 0 -2 -8 3 -18 9 -17 24 -101 24 -127 -3 -84 -37 -194 -72 -237
|
||||
-120 -144 -256 -200 -421 -174 -118 19 -241 107 -297 213 -37 68 -44 95 -48
|
||||
180 -6 116 34 220 117 302 50 50 151 107 200 113 15 2 29 6 32 9 6 6 104 2
|
||||
156 -6z m1095 1 c16 -3 59 -20 94 -37 146 -72 234 -219 226 -378 -4 -92 -4
|
||||
-92 -37 -163 -145 -313 -608 -318 -754 -8 -39 81 -42 96 -42 181 0 71 4 96 29
|
||||
154 27 65 77 130 137 177 84 67 225 97 347 74z"/>
|
||||
<path d="M5282 2084 c-74 -15 -167 -64 -228 -119 -6 -5 -22 -18 -35 -28 -85
|
||||
-62 -248 -181 -266 -195 -12 -9 -32 -25 -45 -34 -13 -9 -95 -70 -183 -134 -88
|
||||
-65 -162 -120 -165 -123 -3 -4 -23 -18 -45 -33 -22 -14 -51 -35 -65 -47 -14
|
||||
-11 -93 -69 -175 -130 l-151 -110 -625 2 -626 2 -36 28 c-45 34 -67 74 -67
|
||||
122 0 60 45 123 100 140 14 5 219 9 455 10 237 2 439 5 450 8 92 24 176 88
|
||||
220 168 27 49 30 63 30 144 -1 77 -5 97 -27 140 -34 65 -107 132 -171 158 -51
|
||||
20 -70 20 -915 21 -953 1 -978 0 -1158 -60 -120 -40 -302 -135 -360 -189 -6
|
||||
-5 -28 -23 -49 -40 -21 -16 -80 -64 -130 -105 -50 -41 -109 -88 -130 -105 -21
|
||||
-16 -43 -34 -49 -40 -6 -5 -36 -31 -67 -56 l-57 -45 -283 0 c-198 1 -293 -2
|
||||
-318 -11 -46 -16 -89 -65 -97 -112 -10 -49 -9 -1014 0 -1029 4 -7 4 -12 1 -12
|
||||
-3 0 4 -18 16 -39 44 -79 -136 -72 1939 -69 1020 2 1864 6 1875 10 11 3 40 11
|
||||
65 18 70 19 200 72 200 82 0 5 4 7 9 4 9 -6 103 55 246 161 55 41 111 82 123
|
||||
91 13 9 42 31 65 48 37 28 339 250 392 288 11 8 69 51 128 95 59 45 110 81
|
||||
113 81 2 0 13 8 23 18 10 9 44 35 75 57 31 22 74 54 95 70 22 17 84 63 138
|
||||
102 130 95 175 141 210 211 26 53 28 66 28 177 0 115 -1 123 -32 185 -85 173
|
||||
-259 261 -441 224z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/font/Montserrat-Bold.woff2
Normal file
BIN
public/font/Montserrat-Bold.woff2
Normal file
Binary file not shown.
BIN
public/font/Montserrat-Italic.woff2
Normal file
BIN
public/font/Montserrat-Italic.woff2
Normal file
Binary file not shown.
BIN
public/font/Montserrat-Light.woff2
Normal file
BIN
public/font/Montserrat-Light.woff2
Normal file
Binary file not shown.
BIN
public/font/Montserrat-Regular.woff2
Normal file
BIN
public/font/Montserrat-Regular.woff2
Normal file
Binary file not shown.
BIN
public/font/Montserrat-SemiBold.woff2
Normal file
BIN
public/font/Montserrat-SemiBold.woff2
Normal file
Binary file not shown.
BIN
public/font/NunitoSans-Bold.woff2
Normal file
BIN
public/font/NunitoSans-Bold.woff2
Normal file
Binary file not shown.
BIN
public/font/NunitoSans-Italic.woff2
Normal file
BIN
public/font/NunitoSans-Italic.woff2
Normal file
Binary file not shown.
BIN
public/font/NunitoSans-Light.woff2
Normal file
BIN
public/font/NunitoSans-Light.woff2
Normal file
Binary file not shown.
BIN
public/font/NunitoSans-Regular.woff2
Normal file
BIN
public/font/NunitoSans-Regular.woff2
Normal file
Binary file not shown.
BIN
public/font/NunitoSans-SemiBold.woff2
Normal file
BIN
public/font/NunitoSans-SemiBold.woff2
Normal file
Binary file not shown.
BIN
public/img/contact/email.png
Executable file
BIN
public/img/contact/email.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/img/contact/matrix.png
Executable file
BIN
public/img/contact/matrix.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
public/img/misc/preview.png
Normal file
BIN
public/img/misc/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 KiB |
70
public/img/misc/sprite.svg
Normal file
70
public/img/misc/sprite.svg
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<svg width="0" height="0" class="hidden">
|
||||
<!--main logo-->
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.35 143.74" id="icon-logo">
|
||||
<g transform="translate(-32.882 -133.08)">
|
||||
<path d="m181.17 245.31-35.745 26.329c-4.6831 3.4634-10.478 5.3684-16.536 5.3684h-91.81c-2.3148 0-3.9952-1.9172-3.9952-4.2307v-25.397c0-2.3146 1.9182-4.2386 3.9952-4.2386l14.65 6e-3 12.303-9.9854c5.3181-4.2595 12.467-6.945 19.611-6.945h42.095c5.1594 0 9.226 4.5958 8.3661 9.8875-0.69453 4.1672-4.5958 7.0432-8.8292 7.0432h-20.463c-2.3148 0-3.9952 1.918-3.9952 3.9952 0 2.0772 1.9182 3.9952 3.9952 3.9952h31.909l31.671-23.328c4.7096-3.4898 11.327-2.4717 14.798 2.2402 3.6962 5.1803 2.6908 11.795-2.0188 15.261z"></path>
|
||||
<path d="m106 133.08a44.526 43.709 0 0 1 44.526 43.709 44.526 43.709 0 0 1-44.526 43.709 44.526 43.709 0 0 1-44.526-43.709 44.526 43.709 0 0 1 44.526-43.709m0 8.7418a11.131 10.927 0 0 0-11.131 10.927 11.131 10.927 0 0 0 11.131 10.927 11.131 10.927 0 0 0 11.131-10.927 11.131 10.927 0 0 0-11.131-10.927m-33.84 24.171c-1.9146 5.7259 1.2908 11.889 7.1241 13.769 5.8774 1.8357 12.156-1.2671 14.026-7.0372 1.9146-5.726-1.2908-11.889-7.1241-13.769-5.833-1.8357-12.155 1.2671-14.026 7.0372m67.724-0.13216c-1.9146-5.6385-8.1927-8.7418-14.025-6.9061-5.8774 1.8359-9.0832 7.9989-7.1686 13.769 1.9146 5.7259 8.1927 8.8729 14.025 6.9934 5.833-1.8357 9.0388-8.0425 7.1686-13.856m-54.767 39.164c4.9424 3.5842 11.977 2.4914 15.539-2.404 3.6067-4.8954 2.4935-11.714-2.4933-15.255-4.9424-3.5404-11.933-2.4476-15.54 2.404-3.6065 4.8956-2.4935 11.714 2.4935 15.255m41.81 0c4.9868-3.5404 6.0999-10.359 2.4933-15.255-3.6066-4.8954-10.597-5.9882-15.539-2.404-4.987 3.5406-6.1 10.359-2.4935 15.255 3.5175 4.8954 10.597 5.9444 15.54 2.404m-20.927-34.793a6.6789 6.5564 0 0 0-6.6788 6.5563 6.6789 6.5564 0 0 0 6.6788 6.5565 6.6789 6.5564 0 0 0 6.6789-6.5565 6.6789 6.5564 0 0 0-6.6789-6.5563z"></path>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<!--theme switcher icon-->
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-theme-switcher">
|
||||
<path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 448V64c105.9 0 192 86.13 192 192S361.9 448 256 448z"></path>
|
||||
</symbol>
|
||||
|
||||
<!--miscellaneous logos-->
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-cancel">
|
||||
<path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM64 256c0-41.4 13.3-79.68 35.68-111.1l267.4 267.4C335.7 434.7 297.4 448 256 448C150.1 448 64 361.9 64 256zM412.3 367.1L144.9 99.68C176.3 77.3 214.6 64 256 64c105.9 0 192 86.13 192 192C448 297.4 434.7 335.7 412.3 367.1z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" id="icon-code-document">
|
||||
<path d="M162.1 257.8c-7.812-7.812-20.47-7.812-28.28 0l-48 48c-7.812 7.812-7.812 20.5 0 28.31l48 48C137.8 386.1 142.9 388 148 388s10.23-1.938 14.14-5.844c7.812-7.812 7.812-20.5 0-28.31L128.3 320l33.86-33.84C169.1 278.3 169.1 265.7 162.1 257.8zM365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM221.9 257.8c-7.812 7.812-7.812 20.5 0 28.31L255.7 320l-33.86 33.84c-7.812 7.812-7.812 20.5 0 28.31C225.8 386.1 230.9 388 236 388s10.23-1.938 14.14-5.844l48-48c7.812-7.812 7.812-20.5 0-28.31l-48-48C242.3 250 229.7 250 221.9 257.8z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-computer-home">
|
||||
<path d="M218.3 8.486C230.6-2.829 249.4-2.829 261.7 8.486L469.7 200.5C476.4 206.7 480 215.2 480 224H336C316.9 224 299.7 232.4 288 245.7V208C288 199.2 280.8 192 272 192H208C199.2 192 192 199.2 192 208V272C192 280.8 199.2 288 208 288H271.1V416H112C85.49 416 64 394.5 64 368V256H32C18.83 256 6.996 247.9 2.198 235.7C-2.6 223.4 .6145 209.4 10.3 200.5L218.3 8.486zM336 256H560C577.7 256 592 270.3 592 288V448H624C632.8 448 640 455.2 640 464C640 490.5 618.5 512 592 512H303.1C277.5 512 255.1 490.5 255.1 464C255.1 455.2 263.2 448 271.1 448H303.1V288C303.1 270.3 318.3 256 336 256zM352 304V448H544V304H352z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-link-slash">
|
||||
<path d="M485.1 354.9l113.5-113.5c55.21-55.21 55.21-144.7 0-199.9C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02c3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64s40.1 8.047 54.71 22.66c14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-119 119l-30.09-23.59c21.49-51.28 12.12-112.4-29.63-154.1C346.1 109.8 310.8 96 274.6 96c-29.6 0-58.93 9.752-83.83 28.23L38.81 5.109C34.41 1.672 29.19 0 24.03 0c-7.125 0-14.19 3.156-18.91 9.187c-8.188 10.44-6.375 25.53 4.062 33.7l591.1 463.1c10.5 8.203 25.56 6.328 33.69-4.078c8.188-10.44 6.375-25.53-4.062-33.7L485.1 354.9zM350.8 249.6L244.3 166.2C253.8 162.2 264 160 274.6 160c20.67 0 40.1 8.049 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71C352 241.5 351.4 245.6 350.8 249.6zM234 387.4l-37.96 37.96C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66c-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l84.83-84.83L120.7 191.3L41.41 270.7c-55.21 55.21-55.21 144.7 0 199.9C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02C239.6 394.1 236.9 390.7 234 387.4zM265.4 374.6C293 402.2 329.2 416 365.4 416c11.98 0 23.84-2.082 35.51-5.111L224.6 272.7C223.9 309.5 237.3 346.5 265.4 374.6z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-eye-slash">
|
||||
<path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-feather">
|
||||
<path d="M483.4 244.2L351.9 287.1h97.74c-9.874 10.62 3.75-3.125-46.24 46.87l-147.6 49.12h98.24c-74.99 73.12-194.6 70.62-246.8 54.1l-66.14 65.99c-9.374 9.374-24.6 9.374-33.98 0s-9.374-24.6 0-33.98l259.5-259.2c6.249-6.25 6.249-16.37 0-22.62c-6.249-6.249-16.37-6.249-22.62 0l-178.4 178.2C58.78 306.1 68.61 216.7 129.1 156.3l85.74-85.68c90.62-90.62 189.8-88.27 252.3-25.78C517.8 95.34 528.9 169.7 483.4 244.2z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-fast-forward">
|
||||
<path d="M52.51 440.6l171.5-142.9V214.3L52.51 71.41C31.88 54.28 0 68.66 0 96.03v319.9C0 443.3 31.88 457.7 52.51 440.6zM308.5 440.6l192-159.1c15.25-12.87 15.25-36.37 0-49.24l-192-159.1c-20.63-17.12-52.51-2.749-52.51 24.62v319.9C256 443.3 287.9 457.7 308.5 440.6z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-graph-rising">
|
||||
<path d="M472 432h-48a24 24 0 01-24-24V104a24 24 0 0124-24h48a24 24 0 0124 24v304a24 24 0 01-24 24zM344 432h-48a24 24 0 01-24-24V184a24 24 0 0124-24h48a24 24 0 0124 24v224a24 24 0 01-24 24zM216 432h-48a24 24 0 01-24-24V248a24 24 0 0124-24h48a24 24 0 0124 24v160a24 24 0 01-24 24zM88 432H40a24 24 0 01-24-24v-96a24 24 0 0124-24h48a24 24 0 0124 24v96a24 24 0 01-24 24z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" id="icon-rating">
|
||||
<path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-rewind">
|
||||
<path d="M459.5 71.41l-171.5 142.9v83.45l171.5 142.9C480.1 457.7 512 443.3 512 415.1V96.03C512 68.66 480.1 54.28 459.5 71.41zM203.5 71.41L11.44 231.4c-15.25 12.87-15.25 36.37 0 49.24l192 159.1c20.63 17.12 52.51 2.749 52.51-24.62v-319.9C255.1 68.66 224.1 54.28 203.5 71.41z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-like-dislike">
|
||||
<path d="M22.5,10H15.75C15.13,10 14.6,10.38 14.37,10.91L12.11,16.2C12.04,16.37 12,16.56 12,16.75V18A1,1 0 0,0 13,19H18.18L17.5,22.18V22.42C17.5,22.73 17.63,23 17.83,23.22L18.62,24L23.56,19.06C23.83,18.79 24,18.41 24,18V11.5A1.5,1.5 0 0,0 22.5,10M12,6A1,1 0 0,0 11,5H5.82L6.5,1.82V1.59C6.5,1.28 6.37,1 6.17,0.79L5.38,0L0.44,4.94C0.17,5.21 0,5.59 0,6V12.5A1.5,1.5 0 0,0 1.5,14H8.25C8.87,14 9.4,13.62 9.63,13.09L11.89,7.8C11.96,7.63 12,7.44 12,7.25V6Z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" id="icon-person-slash">
|
||||
<path d="M95.1 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7c5.625 0 10.73-1.65 15.42-4.029L264.9 304.3C171.3 306.7 95.1 383.1 95.1 477.3zM630.8 469.1l-277.1-217.9c54.69-14.56 95.18-63.95 95.18-123.2C447.1 57.31 390.7 0 319.1 0C250.2 0 193.7 55.93 192.3 125.4l-153.4-120.3C34.41 1.672 29.19 0 24.03 0C16.91 0 9.845 3.156 5.127 9.187c-8.187 10.44-6.375 25.53 4.062 33.7L601.2 506.9c10.5 8.203 25.56 6.328 33.69-4.078C643.1 492.4 641.2 477.3 630.8 469.1z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-image-slash">
|
||||
<path d="M21 17.2L6.8 3H19C20.1 3 21 3.9 21 5V17.2M20.7 22L19.7 21H5C3.9 21 3 20.1 3 19V4.3L2 3.3L3.3 2L22 20.7L20.7 22M16.8 18L12.9 14.1L11 16.5L8.5 13.5L5 18H16.8Z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-palette">
|
||||
<path d="M2.53,19.65L3.87,20.21V11.18L1.44,17.04C1.03,18.06 1.5,19.23 2.53,19.65M22.03,15.95L17.07,4C16.76,3.23 16.03,2.77 15.26,2.75C15,2.75 14.73,2.79 14.47,2.9L7.1,5.95C6.35,6.26 5.89,7 5.87,7.75C5.86,8 5.91,8.29 6,8.55L11,20.5C11.29,21.28 12.03,21.74 12.81,21.75C13.07,21.75 13.33,21.7 13.58,21.6L20.94,18.55C21.96,18.13 22.45,16.96 22.03,15.95M7.88,8.75A1,1 0 0,1 6.88,7.75A1,1 0 0,1 7.88,6.75C8.43,6.75 8.88,7.2 8.88,7.75C8.88,8.3 8.43,8.75 7.88,8.75M5.88,19.75A2,2 0 0,0 7.88,21.75H9.33L5.88,13.41V19.75Z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-responsive">
|
||||
<path d="M4,6V16H9V12A2,2 0 0,1 11,10H16A2,2 0 0,1 18,12V16H20V6H4M0,20V18H4A2,2 0 0,1 2,16V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V16A2,2 0 0,1 20,18H24V20H18V20C18,21.11 17.1,22 16,22H11A2,2 0 0,1 9,20H9L0,20M11.5,20A0.5,0.5 0 0,0 11,20.5A0.5,0.5 0 0,0 11.5,21A0.5,0.5 0 0,0 12,20.5A0.5,0.5 0 0,0 11.5,20M15.5,20A0.5,0.5 0 0,0 15,20.5A0.5,0.5 0 0,0 15.5,21A0.5,0.5 0 0,0 16,20.5A0.5,0.5 0 0,0 15.5,20M13,20V21H14V20H13M11,12V19H16V12H11Z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-legal">
|
||||
<path d="M12,3C10.73,3 9.6,3.8 9.18,5H3V7H4.95L2,14C1.53,16 3,17 5.5,17C8,17 9.56,16 9,14L6.05,7H9.17C9.5,7.85 10.15,8.5 11,8.83V20H2V22H22V20H13V8.82C13.85,8.5 14.5,7.85 14.82,7H17.95L15,14C14.53,16 16,17 18.5,17C21,17 22.56,16 22,14L19.05,7H21V5H14.83C14.4,3.8 13.27,3 12,3M12,5A1,1 0 0,1 13,6A1,1 0 0,1 12,7A1,1 0 0,1 11,6A1,1 0 0,1 12,5M5.5,10.25L7,14H4L5.5,10.25M18.5,10.25L20,14H17L18.5,10.25Z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-code-block">
|
||||
<path d="M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z"></path>
|
||||
</symbol>
|
||||
<symbol aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-ads-slash">
|
||||
<path d="M12.2 9L10.2 7H13C14.1 7 15 7.9 15 9V11.8L13 9.8V9H12.2M23 9V7H19C17.9 7 17 7.9 17 9V11C17 12.1 17.9 13 19 13H21V15H18.2L20.2 17H21C22.1 17 23 16.1 23 15V13C23 11.9 22.1 11 21 11H19V9H23M22.1 21.5L20.8 22.8L14.4 16.4C14.1 16.7 13.6 17 13 17H9V10.9L7 8.9V17H5V13H3V17H1V9C1 7.9 1.9 7 3 7H5.1L1.1 3L2.4 1.7L22.1 21.5M5 9H3V11H5V9M13 14.9L11 12.9V15H13V14.9Z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
35
public/js/index.js
Normal file
35
public/js/index.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
const rootEl = document.documentElement;
|
||||
const input = document.querySelector('.theme-switcher__input');
|
||||
|
||||
// adding this property insures that the media query for dark mode in css won't be executed. We'll use media query from js instead. Toggle without this line would also work just fine. But then light would actually mean dark and vice-versa.
|
||||
rootEl.setAttribute('js', 'enabled');
|
||||
|
||||
// function for adding or removing the theme(and checked state for checkbox) accordingly
|
||||
const toggleTheme = theme => {
|
||||
if (theme === 'dark') {
|
||||
rootEl.setAttribute('theme', 'dark');
|
||||
input.setAttribute('checked', '');
|
||||
} else if (theme === 'light') {
|
||||
rootEl.removeAttribute('theme');
|
||||
input.removeAttribute('checked');
|
||||
}
|
||||
};
|
||||
|
||||
// storing user and browser preferences
|
||||
const userPrefersTheme = typeof Storage ? localStorage.getItem('theme') : null;
|
||||
const browserPrefersDarkTheme = window.matchMedia(
|
||||
'(prefers-color-scheme: dark)'
|
||||
).matches;
|
||||
|
||||
// setting theme taking into account calculated preferences
|
||||
if (userPrefersTheme) toggleTheme(userPrefersTheme);
|
||||
else if (browserPrefersDarkTheme) toggleTheme('dark');
|
||||
|
||||
// setting theme when user toggles the theme-switcher input(and storing the preference in localStorage)
|
||||
input.addEventListener('change', e => {
|
||||
let theme = e.target.checked ? 'dark' : 'light';
|
||||
toggleTheme(theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
});
|
||||
|
||||
// localStorage.removeItem("theme");
|
||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
user-agent: *
|
||||
disallow: /img/
|
||||
disallow: /contact
|
||||
22
public/site.webmanifest
Normal file
22
public/site.webmanifest
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "libremdb",
|
||||
"short_name": "libremdb",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/favicon/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/favicon/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#0f2c67",
|
||||
"background_color": "#0f2c67",
|
||||
"display": "standalone",
|
||||
"start_url": "."
|
||||
}
|
||||
17
routes/viewRoutes.js
Normal file
17
routes/viewRoutes.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const express = require('express');
|
||||
const viewController = require('../controllers/viewControllers');
|
||||
|
||||
const viewRouter = express.Router();
|
||||
|
||||
// generic routes
|
||||
viewRouter.get('/about', viewController.about);
|
||||
viewRouter.get('/privacy', viewController.privacy);
|
||||
viewRouter.get('/contact', viewController.contact);
|
||||
viewRouter.get('/similar-projects', viewController.similarProjects);
|
||||
viewRouter.get('/', viewController.overview);
|
||||
|
||||
// routes identical to imdb
|
||||
viewRouter.get('/title/:title', viewController.movie);
|
||||
// viewRouter.get('/search/title/', viewController.searchGenres);
|
||||
|
||||
module.exports = viewRouter;
|
||||
33
server.js
Normal file
33
server.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const dotenv = require('dotenv');
|
||||
const app = require('./app');
|
||||
|
||||
//---------------------------------------------------------------------------//
|
||||
// ERROR HANDLING IN NODEJS
|
||||
//---------------------------------------------------------------------------//
|
||||
// for synchronus errors that are not caught anywhere. Should come before any code
|
||||
process.on('uncaughtException', err => {
|
||||
console.log('\x1b[31m%s\x1b[0m', '🔴️ ERROR:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
// for rejected promises that aren't caught anywhere
|
||||
process.on('unhandledRejection', err => {
|
||||
console.log('\x1b[31m%s\x1b[0m', '🔴️ ERROR:', err);
|
||||
server.close(() => process.exit(1)); // shutting the system down gracefully
|
||||
});
|
||||
|
||||
//---------------------------------------------------------------------------//
|
||||
// LOADING CONFIG FILE VARIABLES
|
||||
//---------------------------------------------------------------------------//
|
||||
dotenv.config({ path: './config.env' }); // loading .env variables
|
||||
|
||||
//---------------------------------------------------------------------------//
|
||||
// STARTING SERVER
|
||||
//---------------------------------------------------------------------------//
|
||||
const port = process.env.PORT || 3000;
|
||||
const server = app.listen(port, () =>
|
||||
console.log(
|
||||
'\x1b[36m%s\x1b[0m', // for colors lol. Search for ansi escape characters
|
||||
`🎧️ listening at port ${port}. Env: ${process.env.NODE_ENV}`
|
||||
)
|
||||
);
|
||||
8
utils/axiosInstance.js
Normal file
8
utils/axiosInstance.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
const axios = require('axios').default;
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: 'https://www.imdb.com/',
|
||||
timeout: 500000,
|
||||
});
|
||||
|
||||
module.exports = axiosInstance;
|
||||
32
utils/errorUtils.js
Normal file
32
utils/errorUtils.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// class that'll make all errors in the app categorisable into operational and non-operational errors
|
||||
/**
|
||||
* similar to Error class, but much cooler for this app
|
||||
*/
|
||||
exports.AppError = class extends Error {
|
||||
/**
|
||||
*
|
||||
* @param {string} message message that'll show up on err.message
|
||||
* @param {number} statusCode err status code
|
||||
*/
|
||||
constructor(message, statusCode) {
|
||||
super(message);
|
||||
|
||||
this.statusCode = statusCode || 500;
|
||||
this.status = `${statusCode}`.startsWith('4') ? 'fail' : 'error';
|
||||
this.isOperational = true;
|
||||
|
||||
// Error.captureStackTrace(this, this.constructor);
|
||||
}
|
||||
};
|
||||
|
||||
// alternative for the ugly trycatch blocks
|
||||
/**
|
||||
* wrapper for async functions in the controller
|
||||
* @param {function} controller async function whose errors are to be caught
|
||||
* @returns a function similar to express's middleware which executes all the logic of the passed function
|
||||
*/
|
||||
exports.catchErrors = function (controller) {
|
||||
return (req, res, next) => {
|
||||
controller(req, res, next).catch(err => next(err));
|
||||
};
|
||||
};
|
||||
26
views/pug/_footer.pug
Normal file
26
views/pug/_footer.pug
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
mixin list-maker(name, link)
|
||||
li.footer__nav-item
|
||||
a.footer__link(class=`${page === name ? 'footer__link--active' : ''}`,href=link)= name
|
||||
|
||||
footer.footer
|
||||
.footer__logo-box
|
||||
svg.footer__logo: use(href='/img/misc/sprite.svg#icon-logo')
|
||||
span.footer__logo-text libremdb
|
||||
|
||||
|
||||
ul.footer__nav
|
||||
//- +list-maker('Home Page','/')
|
||||
+list-maker('About','/about')
|
||||
+list-maker('Privacy','/privacy')
|
||||
+list-maker('Contact','/contact')
|
||||
li.footer__nav-item
|
||||
a.footer__link(href="#") Back to top
|
||||
|
||||
.footer__text
|
||||
p.footer__disclaimer
|
||||
span.footer__name libremdb
|
||||
| takes no credit for the movies shown and the all the accompanying data.
|
||||
p.footer__copyleft
|
||||
a.footer__link(href='https://github.com/zyachel/libremdb') Code
|
||||
| for the website and the server is licensed under
|
||||
a.footer__link(href='https://www.gnu.org/licenses/agpl-3.0-standalone.html') GNU AGPLv3
|
||||
26
views/pug/_header.pug
Normal file
26
views/pug/_header.pug
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
header(class=`${page === 'About'? 'about__header' : ''} header`)
|
||||
block header
|
||||
.header__nav-bar
|
||||
a.header__logo-box(href="/")
|
||||
svg.header__logo: use(href='/img/misc/sprite.svg#icon-logo')
|
||||
span.header__logo-text libremdb
|
||||
|
||||
nav.header__nav
|
||||
ul.header__nav-links
|
||||
- if(page === 'About')
|
||||
li.header__nav-item
|
||||
a.header__link(href='#features') Features
|
||||
li.header__nav-item
|
||||
a.header__link(href="#faqs") FAQs
|
||||
- else
|
||||
li.header__nav-item
|
||||
a.header__link(href='/about') About
|
||||
li.header__nav-item
|
||||
-const link = page === 'Contact' ? 'Privacy' : 'Contact';
|
||||
a.header__link(href=`/${link.toLowerCase()}`)= link
|
||||
li.header__nav-item
|
||||
a.header__link(href="https://github.com/zyachel/libremdb") Code
|
||||
|
||||
//- for theme
|
||||
label.theme-switcher__label(for="theme-switcher", name="theme switcher label", title="change theme")
|
||||
svg.theme-switcher__icon: use(href='/img/misc/sprite.svg#icon-theme-switcher')
|
||||
94
views/pug/about.pug
Normal file
94
views/pug/about.pug
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
extends base
|
||||
block append header
|
||||
.header__text-box
|
||||
h1.heading.heading__primary.header__main-text A FOSS alternative front-end to IMDb
|
||||
h2.header__sub-text Inspired by projects like
|
||||
a.header__sub-text.header__sub-text-links(href="https://codeberg.org/teddit/teddit") teddit
|
||||
span ,
|
||||
a.header__sub-text.header__sub-text-links(href="https://github.com/zedeus/nitter") nitter
|
||||
span and
|
||||
a.header__sub-text.header__sub-text-links(href="/similar-projects") many others
|
||||
| .
|
||||
a.button.button__primary.header__button(href='#features') features
|
||||
|
||||
block content
|
||||
main.main.about
|
||||
.about__features#features
|
||||
h2.heading.heading__secondary.about__features-heading Features
|
||||
.features
|
||||
.feature
|
||||
svg.feature__icon: use(href='/img/misc/sprite.svg#icon-eye-slash')
|
||||
h3.heading.heading__tertiary.feature__title No ads or tracking
|
||||
p.feature__text Browse any movie info without being tracked or bombarded by annoying ads.
|
||||
|
||||
.feature
|
||||
svg.feature__icon: use(href='/img/misc/sprite.svg#icon-link-slash')
|
||||
h3.heading.heading__tertiary.feature__title No connection to IMDb
|
||||
.feature__text All requests go through the backend; client never talks to IMDb except for a bunch of requests to m.media-amazon.com for images.
|
||||
|
||||
.feature
|
||||
svg.feature__icon: use(href='/img/misc/sprite.svg#icon-code-document')
|
||||
h3.heading.heading__tertiary.feature__title No JavaScript required
|
||||
p.feature__text Just a few lines(50 or so) of code to save theme preference, which itself is optional.
|
||||
|
||||
.feature
|
||||
svg.feature__icon: use(href='/img/misc/sprite.svg#icon-feather')
|
||||
h3.heading.heading__tertiary.feature__title Lightweight
|
||||
p.feature__text up movie page:
|
||||
br
|
||||
| libremdb: ~35 HTTP requests(1.35MB) vs IMDb: ~280 requests(7.75MB)
|
||||
|
||||
.feature
|
||||
svg.feature__icon: use(href='/img/misc/sprite.svg#icon-palette')
|
||||
h3.heading.heading__tertiary.feature__title Modern interface
|
||||
p.feature__text Modern interface with curated colors supporting both dark and light themes.
|
||||
|
||||
.feature
|
||||
svg.feature__icon: use(href='/img/misc/sprite.svg#icon-responsive')
|
||||
h3.heading.heading__tertiary.feature__title Responsive design
|
||||
p.feature__text Be it your small mobile or big computer screen, it's fully responsive.
|
||||
|
||||
|
||||
.about__faqs#faqs
|
||||
h2.heading.heading__secondary.about__faqs-heading Frequently asked questions
|
||||
.faqs
|
||||
details.faq
|
||||
summary.faq__question This website is so basic!
|
||||
p.faq__answer Yes, it is! I don't think a website that shows you some quick info of something needs to be overly fancy.
|
||||
details.faq
|
||||
summary.faq__question This website is slow.
|
||||
p.faq__answer Whenever you request info about a movie/show on libremdb, 4 trips are made(2 between your browser and libremdb's server, and 2 between libremdb's server and IMDb's server) instead of the usual 2 trips when you visit a website. For this reason there's a noticable delay. This is a bit of inconvenience you'll have to face should you wish to use this website.
|
||||
details.faq
|
||||
summary.faq__question It doesn't have all routes.
|
||||
p.faq__answer I think most of the people just check IMDb to get a quick glimpse of a movie/show. That's why there is just one route for now. However, I will try to implement other important routes if time allows. More info on
|
||||
a.faq__link(href='https://github.com/zyachel/libremdb') Github
|
||||
| .
|
||||
details.faq
|
||||
summary.faq__question Why is libremdb connecting to m.media-amazon.com?
|
||||
p.faq__answer For now, images are directly served from amazon. If I have enough time in the future, I'll implement a way to serve the images from libremdb instead.
|
||||
details.faq
|
||||
summary.faq__question Will amazon track me then?
|
||||
p.faq__answer They may log your IP address. I'd recommend using a VPN for mitigating this risk.
|
||||
details.faq
|
||||
summary.faq__question Why not just use IMDb?
|
||||
p.faq__answer Refer to the
|
||||
a.faq__link(href='#features') features section
|
||||
| above.
|
||||
details.faq
|
||||
summary.faq__question Why didn't you use other databases like
|
||||
a.faq__link(href="https://www.themoviedb.org/") TMDB
|
||||
| or
|
||||
a.faq__link(href="https://www.omdbapi.com/") OMDb
|
||||
| ?
|
||||
p.faq__answer IMDb simply has superior dataset compared to all other alternatives. With that being said, I'd encourage you to check out those alternatives too.
|
||||
details.faq
|
||||
summary.faq__question Why did you deploy it on heroku? Why not just buy your own domain name?
|
||||
p.faq__answer It's just a proof-of-concept for now. However, if you'd like to do so, you are very welcome.
|
||||
details.faq
|
||||
summary.faq__question Your website name is very, ehm, lame.
|
||||
p.faq__answer Let's just say I'm not very good at naming things.
|
||||
details.faq
|
||||
summary.faq__question I have some ideas/want to contribute, how do I contact you?
|
||||
p.faq__answer Here are a couple of ways to
|
||||
a.faq__link(href="/contact") reach me
|
||||
|. Send your beautiful suggestions or just drop a hi.
|
||||
33
views/pug/base.pug
Normal file
33
views/pug/base.pug
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
//- essential stuff
|
||||
meta(charset="UTF-8")
|
||||
meta(http-equiv="X-UA-Compatible", content="IE=edge")
|
||||
meta(name="viewport", content="width=device-width, initial-scale=1.0")
|
||||
title #{title} | libremdb
|
||||
meta(name="description", content="A Free and Open Soruce alternative front-end to IMDb. Look up movie overviews without being tracked.")
|
||||
//- preloading these for performance gains
|
||||
link(rel="preload stylesheet", href="/css/styles.css", as='style' crossorigin)
|
||||
link(rel="preload", href="/font/Montserrat-SemiBold.woff2", as="font", type="font/woff2" crossorigin)
|
||||
link(rel="preload", href="/font/NunitoSans-Regular.woff2", as="font", type="font/woff2" crossorigin)
|
||||
script(src="/js/index.js", defer)
|
||||
//- for favicons and stuff
|
||||
meta(name='color-scheme', content='light dark')
|
||||
meta(name='theme-color', content='#0f2c67')
|
||||
meta(name='msapplication-TileColor', content='#b91d47')
|
||||
link(rel='apple-touch-icon', sizes='180x180', href='/favicon/apple-touch-icon.png')
|
||||
link(rel='icon', type='image/png', sizes='32x32', href='/favicon/favicon-32x32.png')
|
||||
link(rel='icon', type='image/png', sizes='16x16', href='/favicon/favicon-16x16.png')
|
||||
link(rel='manifest', href='/site.webmanifest')
|
||||
link(rel='mask-icon', href='/favicon/safari-pinned-tab.svg', color='#5bbad5')
|
||||
|
||||
body
|
||||
//input is actually a checkbox hack to enable changing themes without js
|
||||
input#theme-switcher.theme-switcher__input(type="checkbox", name="theme switcher checkbox")
|
||||
.page
|
||||
include _header
|
||||
|
||||
block content
|
||||
h1 this is a placeholder text
|
||||
include _footer
|
||||
20
views/pug/contact.pug
Normal file
20
views/pug/contact.pug
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
extends base
|
||||
|
||||
block content
|
||||
main.main.contact
|
||||
h1.heading.heading__primary.contact__heading Got any feedback?
|
||||
p.contact__text reach me via:
|
||||
|
||||
.contact__mediums
|
||||
.contact__medium
|
||||
p.contact__medium-name [matrix]
|
||||
figure.contact__ways
|
||||
img.contact__ways-image(src="/img/contact/matrix.png", alt="QR Code for matrix")
|
||||
figcaption.contact__ways-text
|
||||
a.contact__ways-link(href="https://matrix.to/#/@ninal:matrix.org") @ninal:matrix.org
|
||||
.contact__medium
|
||||
p.contact__medium-name Email
|
||||
figure.contact__ways
|
||||
img.contact__ways-image(src="/img/contact/email.png", alt="QR Code for email")
|
||||
figcaption.contact__ways-text
|
||||
a.contact__ways-link(href="mailto:aricla@protonmail.com") aricla@protonmail.com
|
||||
13
views/pug/error.pug
Normal file
13
views/pug/error.pug
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
extends base
|
||||
|
||||
block content
|
||||
main.main.error
|
||||
h1.heading.heading__primary.error__status-code= statusCode
|
||||
h2.heading.heading__secondary.error__message= message
|
||||
if stack
|
||||
.error__stack-box
|
||||
pre.error__stack: code= stack
|
||||
p.error__text go back to the
|
||||
a.error__link(href="/") home page
|
||||
p.error__text if you believe this itself is an error,
|
||||
a.error__link(href="/contact") contact us
|
||||
155
views/pug/movie.pug
Normal file
155
views/pug/movie.pug
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
extends base
|
||||
|
||||
block content
|
||||
main.main.movie
|
||||
.movie__basic.basic
|
||||
figure.basic__image-box(style=`background-image: url(${movie.basic.poster})`)
|
||||
if movie.basic.poster
|
||||
img.basic__image(
|
||||
src=movie.basic.poster,
|
||||
alt=`${movie.basic.name} cover image`,
|
||||
title=`${movie.basic.name} cover image`
|
||||
)
|
||||
else
|
||||
svg.basic__image-na: use(href='/img/misc/sprite.svg#icon-image-slash')
|
||||
.basic__about
|
||||
h1.basic__title= movie.basic.name
|
||||
.basic__metadata
|
||||
each metadata in movie.basic.metadata
|
||||
span.basic__metadata-data= metadata
|
||||
|
||||
.basic__stats
|
||||
.basic__rating
|
||||
span.basic__rating-num= movie.basic.rating || '\u2013'
|
||||
svg.basic__rating-icon.basic__icon: use(href='/img/misc/sprite.svg#icon-rating')
|
||||
span.basic__rating-text avg. rating
|
||||
.basic__votes
|
||||
span.basic__votes-num= movie.basic.numVotes || '\u2013'
|
||||
svg.basic__votes-icon.basic__icon: use(href='/img/misc/sprite.svg#icon-like-dislike')
|
||||
span.basic__votes-text number of votes
|
||||
.basic__popularity
|
||||
span.basic__popularity-num=movie.basic.popularity || '\u2013'
|
||||
svg.basic__popularity-icon.basic__icon: use(href='/img/misc/sprite.svg#icon-graph-rising')
|
||||
span.basic__popularity-text popularity
|
||||
|
||||
.basic__genres
|
||||
span.basic__genre-heading Genres:
|
||||
-if (movie.basic.genres.length)
|
||||
each genre in movie.basic.genres
|
||||
span.basic__genre= genre
|
||||
-else
|
||||
span.basic__genre –
|
||||
|
||||
.basic__description
|
||||
p.basic__description-heading Overview
|
||||
p.basic__description-text= movie.basic.plotBrief || '\u2013'
|
||||
.basic__directors
|
||||
span.basic__director-heading Director:
|
||||
-if (movie.basic.directors.length)
|
||||
each director in movie.basic.directors
|
||||
span.basic__director= director
|
||||
- else
|
||||
span.basic__director –
|
||||
.basic__writers
|
||||
span.basic__writer-heading Writers:
|
||||
-if (movie.basic.writers.length)
|
||||
each writer in movie.basic.writers
|
||||
span.basic__writer= writer || '\u2013'
|
||||
- else
|
||||
span.basic__writer –
|
||||
|
||||
.movie__cast
|
||||
h2.movie__heading-main Top Cast
|
||||
ul.movie__cast-list.actors
|
||||
each cast in movie.topCast.actors
|
||||
li.actor: figure.actor__details
|
||||
if cast.avatar
|
||||
img.actor__image(src=cast.avatar, alt=`image of ${cast.name}`)
|
||||
else
|
||||
svg.actor__image-na: use(href='/img/misc/sprite.svg#icon-image-slash')
|
||||
figcaption.actor__name= cast.name
|
||||
figcaption.actor__character-name= cast.characterName ? 'as '+ cast.characterName : ''
|
||||
|
||||
.movie__storyline
|
||||
h2.movie__heading-main Storyline
|
||||
.movie__storyline-details.storyline
|
||||
.storyline__story
|
||||
p.movie__heading-sub Story
|
||||
span= movie.storyline.plotExpanded || '\u2013'
|
||||
.storyline__tagline
|
||||
span.movie__heading-sub Tagline:
|
||||
span= movie.storyline.tagline || '\u2013'
|
||||
.storyline__pg
|
||||
span.movie__heading-sub Parental Guidance:
|
||||
span= movie.storyline.parentalGuidance || '\u2013'
|
||||
|
||||
|
||||
.movie__details
|
||||
h2.movie__heading-main Details
|
||||
.movie__details-container.details
|
||||
p.details__release-date
|
||||
span.movie__heading-sub Release Date:
|
||||
span=movie.details.releaseDate || '\u2013'
|
||||
p.details__country
|
||||
span.movie__heading-sub Countries:
|
||||
span=movie.details.countries.join(', ') || '\u2013'
|
||||
p.details__languages
|
||||
span.movie__heading-sub Languages:
|
||||
span= movie.details.languages.join(', ')
|
||||
p.details__alt-name
|
||||
span.movie__heading-sub Also known as:
|
||||
span= movie.details.alternateTitle || '\u2013'
|
||||
p.details__-locations
|
||||
span.movie__heading-sub Filming locations:
|
||||
span= movie.details.filmingLocations.join(', ') || '\u2013'
|
||||
p.details__companies
|
||||
span.movie__heading-sub Companies:
|
||||
span= movie.details.companies.join(', ')
|
||||
-if(movie.details.officialSite)
|
||||
a.movie__link(href=movie.details.officialSite) Official website
|
||||
span →
|
||||
|
||||
.movie__boxoffice
|
||||
h2.movie__heading-main Box Office
|
||||
.movie__boxoffice-details.boxoffice
|
||||
- if (movie.boxoffice.grossWorldwide)
|
||||
p.boxoffice__budget
|
||||
span.movie__heading-sub Budget:
|
||||
span= movie.boxoffice.budget || '\u2013'
|
||||
p.boxoffice__opening-weekend-domestic
|
||||
span.movie__heading-sub Opening Weekend:
|
||||
span= movie.boxoffice.openingWeekendDomestic[0] || '\u2013'
|
||||
p.boxoffice__domestic
|
||||
span.movie__heading-sub Gross Domestic:
|
||||
span= movie.boxoffice.grossDomestic || '\u2013'
|
||||
p.boxoffice__worldwide
|
||||
span.movie__heading-sub Gross Worldwide:
|
||||
span= movie.boxoffice.grossWorldwide || '\u2013'
|
||||
- else
|
||||
p.boxoffice__na Data not available
|
||||
|
||||
.movie__technical
|
||||
h2.movie__heading-main Technical Specs
|
||||
.movie__technical-details.technical
|
||||
p.technical__runtime
|
||||
span.movie__heading-sub Runtime:
|
||||
span= movie.technicalSpecs.runtime || '\u2013'
|
||||
p.technical__color
|
||||
span.movie__heading-sub Color:
|
||||
span= movie.technicalSpecs.color || '\u2013'
|
||||
p.technical__ratio
|
||||
span.movie__heading-sub Aspect ratio:
|
||||
span= movie.technicalSpecs.aspectRatio || '\u2013'
|
||||
p.technical__sound
|
||||
span.movie__heading-sub Sound:
|
||||
span= movie.technicalSpecs.sound.join(', ') || '\u2013'
|
||||
|
||||
.movie__media
|
||||
h2.movie__heading-main Media
|
||||
-if (movie.media.images.length)
|
||||
.movie__media-box
|
||||
each image, index in movie.media.images
|
||||
figure.movie__media-image-secondary-box
|
||||
img.movie__media-image(src=image, alt=`image ${index + 1} from ${movie.basic.name}`)
|
||||
-else
|
||||
p.movie-media__na no media avaiable
|
||||
16
views/pug/privacy.pug
Normal file
16
views/pug/privacy.pug
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
extends base
|
||||
|
||||
block content
|
||||
main.main.privacy
|
||||
h1.heading.heading__primary.privacy__heading Privacy Policy
|
||||
p.privacy__jist In short: libremdb doesn't collect any data at all.
|
||||
.privacy__item
|
||||
h2.heading.heading__secondary.privacy__item-heading Data you directly provide
|
||||
p.privacy__item-text None.
|
||||
.privacy__item
|
||||
h2.heading.heading__secondary.privacy__item-heading Data you passively provide
|
||||
p.privacy__item-text Heroku might log some things(like IP address). So, consider hosting your own instance or using a VPN.
|
||||
.privacy__item
|
||||
h2.heading.heading__secondary.privacy__item-heading Data stored in your browser
|
||||
p.privacy__item-text To remember theme preferences, the website stores a key named 'theme' in Local Storage provided by your browser. Apart from that, there is nothing stored in your browser. To remove the key, press F12 > Storage(or Application in chromium-based browsers) > Local Storage > right click > Delete.
|
||||
p.privacy__item-text To permamently disable libremdb from storing your theme prefrences, either turn off JavaScript or disable access to Local Storage for libremdb.
|
||||
50
views/pug/similarProjects.pug
Normal file
50
views/pug/similarProjects.pug
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
extends base
|
||||
|
||||
mixin project(name, description, website, instance, official=true)
|
||||
.project
|
||||
a.project__name(href=website)=name
|
||||
p.project__about=description
|
||||
a.project__instance(href=instance)=`${official ? 'Official' : 'Community'} instance `
|
||||
span.project__instance-arrow →
|
||||
|
||||
block content
|
||||
main.main.similar-projects
|
||||
h1.heading.heading__primary.similar-projects__heading Other cool projects you should check out:
|
||||
.similar-projects__list
|
||||
+project(
|
||||
'Teddit',
|
||||
'Teddit is an alternative Reddit front-end focused on privacy.',
|
||||
"https://codeberg.org/teddit/teddit",
|
||||
"https://teddit.net/"
|
||||
)
|
||||
+project(
|
||||
'Nitter',
|
||||
'Nitter is a free and open source alternative Twitter front-end focused on privacy.',
|
||||
'https://github.com/zedeus/nitter',
|
||||
'https://nitter.net/'
|
||||
)
|
||||
+project(
|
||||
'Bibliogram',
|
||||
'Bibliogram is an alternative front-end for Instagram.',
|
||||
'https://sr.ht/~cadence/bibliogram/',
|
||||
'https://bibliogram.art/'
|
||||
)
|
||||
+project(
|
||||
'Invidious',
|
||||
'Invidious is an alternative front-end to YouTube.',
|
||||
'https://invidious.org',
|
||||
'https://invidious.snopyta.org/feed/popular',
|
||||
false
|
||||
)
|
||||
+project(
|
||||
'Libreddit',
|
||||
'Libreddit is an alternative private front-end to Reddit.',
|
||||
'https://github.com/spikecodes/libreddit',
|
||||
'https://libreddit.spike.codes/'
|
||||
)
|
||||
+project(
|
||||
'Scribe',
|
||||
'Scribe is an alternative Medium frontend.',
|
||||
'https://git.sr.ht/~edwardloveall/scribe',
|
||||
'https://scribe.rip/'
|
||||
)
|
||||
381
views/sass/_abstracts.scss
Normal file
381
views/sass/_abstracts.scss
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
// importing sass built-in modules
|
||||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// ANIMATIONS
|
||||
////////////////////////////////////////////////////////////////
|
||||
// animation to be used when summary is being opened
|
||||
// doesn't work on closing because of the limitation of details tag
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// MIXINS
|
||||
////////////////////////////////////////////////////////////////
|
||||
// mixin to add underline under link
|
||||
@mixin underliner($clr-2, $clr-1: transparent, $transition: true) {
|
||||
border-bottom: 2px solid $clr-1;
|
||||
|
||||
@if $transition {
|
||||
transition: border 0.4s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid $clr-2;
|
||||
}
|
||||
}
|
||||
|
||||
// MIXINS TO TURN SCSS VARIABLES INTO CSS VARIABLES:
|
||||
@mixin themed-css-variables($theme) {
|
||||
@each $var, $values in $themed-variables {
|
||||
--#{$var}: #{map.get($values, $theme)};
|
||||
}
|
||||
}
|
||||
@mixin misc-css-variables {
|
||||
@each $var, $value in $misc-variables {
|
||||
--#{$var}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// MIXIN TO ADD FONTS
|
||||
$font-type-map: (
|
||||
'Thin': 100,
|
||||
'ExtraLight': 200,
|
||||
'Light': 300,
|
||||
'Regular': 400,
|
||||
'Medium': 500,
|
||||
'SemiBold': 600,
|
||||
'Bold': 700,
|
||||
'ExtraBold': 800,
|
||||
'Black': 900,
|
||||
);
|
||||
|
||||
@mixin font($font-name, $font-types...) {
|
||||
// looping over the argument list $font-types
|
||||
@each $font-type in $font-types {
|
||||
// setting initial values
|
||||
$weight: normal;
|
||||
$style: normal;
|
||||
// font names to be used in the src
|
||||
$font-name-string: '#{$font-name}-#{$font-type}';
|
||||
|
||||
// changing weight property for font-type that has weight defined in the font-type-map map
|
||||
@if (map.has-key($font-type-map, $font-type)) {
|
||||
$weight: map.get($font-type-map, $font-type);
|
||||
}
|
||||
// changing style property if the font-type value is Italic
|
||||
@if ($font-type == 'Italic') {
|
||||
$style: italic;
|
||||
}
|
||||
|
||||
// filling all the properties
|
||||
@font-face {
|
||||
font-family: $font-name;
|
||||
src: local($font-name),
|
||||
url('/font/#{$font-name-string}.woff2') format('woff2');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
}
|
||||
////////////////////////////////////////////////////////////////
|
||||
// BREAKPOINTS
|
||||
////////////////////////////////////////////////////////////////
|
||||
// declaration of breakpoints
|
||||
// using em for accessibility reasons(see: https://zellwk.com/blog/media-query-units/)
|
||||
// 1em = 16px
|
||||
$breakpoints: (
|
||||
bp-1100: 68.75em,
|
||||
bp-900: 56.25em,
|
||||
bp-725: 45.32em,
|
||||
bp-550: 34.375em,
|
||||
bp-450: 28.125em,
|
||||
bp-400: 25em,
|
||||
bp-350: 21.875em,
|
||||
);
|
||||
|
||||
// mixin to handle known and unknown breakpoints:
|
||||
@mixin bp($given-breakpoint) {
|
||||
// just assigning the given value to a new variable since we're going to change it conditionally;
|
||||
$breakpoint: $given-breakpoint;
|
||||
// if $breakpoints map contains the given variable then getting it's value
|
||||
@if map.has-key($breakpoints, $breakpoint) {
|
||||
$breakpoint: map.get($breakpoints, $breakpoint);
|
||||
}
|
||||
// and then using it for media query. This will also work for straight out values(50em or 800px, for example)
|
||||
@media screen and (max-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// VARIABLES
|
||||
////////////////////////////////////////////////////////////////
|
||||
// BASE COLOR DEFINITIONS:
|
||||
$clr-primary: #f3e3e2;
|
||||
$clr-secondary: #4d0011;
|
||||
$clr-tertiary: #0f2c67;
|
||||
$clr-alpha: #2f3542;
|
||||
$clr-beta: #485460;
|
||||
$clr-gamma: #ddd;
|
||||
// unused
|
||||
// $clr-quatenary: #232946;
|
||||
// $clr-delta: #1e272e;
|
||||
// $clr-epsilon: #ccc;
|
||||
// $clr-zeta: #eee;
|
||||
// VARIABLES MAPS:
|
||||
$misc-variables: (
|
||||
// 1) FONTS:
|
||||
ff-base: ('NunitoSans', sans-serif),
|
||||
ff-alt-alpha: ('Montserrat', sans-serif),
|
||||
fs-2000: 20rem,
|
||||
fs-1700: 17rem,
|
||||
fs-1500: 15rem,
|
||||
fs-1200: 12rem,
|
||||
fs-1000: 10rem,
|
||||
fs-400: 4rem,
|
||||
fs-350: 3.5rem,
|
||||
fs-320: 3.2rem,
|
||||
fs-300: 3rem,
|
||||
fs-280: 2.8rem,
|
||||
fs-250: 2.5rem,
|
||||
fs-220: 2.2rem,
|
||||
fs-200: 2rem,
|
||||
fs-180: 1.8rem,
|
||||
fs-160: 1.6rem,
|
||||
fs-140: 1.4rem,
|
||||
fs-120: 1.2rem,
|
||||
// 2) MISCELLANEOUS:
|
||||
border-radius: 0.5em,
|
||||
spacer-200: 2rem,
|
||||
spacer-050: 0.5rem,
|
||||
spacer-100: 1rem,
|
||||
spacer-300: 3rem,
|
||||
spacer-500: 5rem,
|
||||
spacer-800: 8rem,
|
||||
theme-swticher-rotation-unchecked: -180deg,
|
||||
theme-swticher-rotation-checked: 180deg
|
||||
);
|
||||
$themed-variables: (
|
||||
// BIG LAYOUTS:
|
||||
// 1) BASE:
|
||||
clr-base-bg:
|
||||
(
|
||||
light: color.scale($clr-primary, $lightness: 50%),
|
||||
// light: lighten($clr-primary, 5%),
|
||||
dark: color.scale($clr-tertiary, $lightness: -82%),
|
||||
),
|
||||
clr-base-heading: (
|
||||
light: darken($clr-tertiary, 9%),
|
||||
dark: color.scale($clr-primary, $lightness: -10%, $saturation: -70%),
|
||||
),
|
||||
clr-base-heading-alt-alpha: (
|
||||
light: initial,
|
||||
dark: initial,
|
||||
),
|
||||
clr-base-text: (
|
||||
light: $clr-alpha,
|
||||
dark: $clr-gamma,
|
||||
),
|
||||
clr-base-text-alt-alpha: (
|
||||
light: $clr-beta,
|
||||
dark: $clr-gamma,
|
||||
),
|
||||
clr-base-link: (
|
||||
light: color.scale($clr-tertiary, $lightness: 5%),
|
||||
dark: color.scale($clr-secondary, $lightness: 80%),
|
||||
),
|
||||
clr-base-link-hover: (
|
||||
light: color.scale($clr-tertiary, $lightness: 20%),
|
||||
dark: color.scale($clr-secondary, $lightness: 70%, $saturation: 90%),
|
||||
),
|
||||
// 2) HEADER & FOOTER(HF):
|
||||
clr-hf-bg:
|
||||
(
|
||||
light: color.scale($clr-primary, $lightness: -15%),
|
||||
// dark: color.scale($clr-primary, $lightness: -90%, $saturation: -50%),
|
||||
dark: color.scale($clr-tertiary, $lightness: -55%, $saturation: 80%),
|
||||
),
|
||||
clr-hf-logo: (
|
||||
light: color.scale($clr-secondary, $lightness: 12%),
|
||||
dark: lighten($clr-secondary, 50%),
|
||||
),
|
||||
clr-hf-text: (
|
||||
light: darken($clr-tertiary, 10%),
|
||||
dark: lighten($clr-primary, 3%),
|
||||
),
|
||||
clr-hf-text-alt-alpha: (
|
||||
light: color.scale($clr-alpha, $lightness: -10%),
|
||||
dark: $clr-gamma,
|
||||
),
|
||||
clr-hf-link: (
|
||||
light: color.scale($clr-tertiary, $lightness: 5%),
|
||||
dark: color.scale($clr-secondary, $lightness: 85%),
|
||||
),
|
||||
clr-hf-link-hover: (
|
||||
light: color.scale($clr-tertiary, $lightness: 15%, $saturation: 50%),
|
||||
dark: color.scale($clr-secondary, $lightness: 78%, $saturation: 95%),
|
||||
),
|
||||
// SMALLER COMPONENTS:
|
||||
// 3) CARD:
|
||||
clr-card-bg:
|
||||
(
|
||||
light: $clr-primary,
|
||||
dark: color.scale($clr-tertiary, $lightness: -45%, $saturation: 50%),
|
||||
),
|
||||
clr-card-bg-alt-alpha: (
|
||||
light: color.scale($clr-primary, $lightness: 30%),
|
||||
dark: color.scale($clr-tertiary, $lightness: -70%),
|
||||
),
|
||||
clr-card-heading: (
|
||||
light: color.scale($clr-tertiary, $lightness: -35%),
|
||||
dark: color.scale($clr-secondary, $lightness: 85%, $saturation: 0%),
|
||||
),
|
||||
clr-card-heading-alt-alpha: (
|
||||
light: color.scale($clr-tertiary, $lightness: -15%),
|
||||
dark: color.scale($clr-secondary, $lightness: 92%),
|
||||
),
|
||||
clr-card-text: (
|
||||
light: $clr-alpha,
|
||||
dark: color.scale($clr-primary, $lightness: 10%),
|
||||
),
|
||||
clr-card-text-alt-alpha: (
|
||||
light: $clr-beta,
|
||||
dark: color.scale($clr-beta, $lightness: 40%),
|
||||
),
|
||||
clr-card-icon: (
|
||||
light: lighten($clr-secondary, 10%),
|
||||
dark: color.scale($clr-secondary, $lightness: 60%),
|
||||
),
|
||||
clr-card-icon-alt-alpha: (
|
||||
light: lighten($clr-beta, 5%),
|
||||
dark: color.scale($clr-beta, $lightness: 5%),
|
||||
),
|
||||
clr-card-icon-alt-beta: (
|
||||
light: $clr-tertiary,
|
||||
dark: color.scale($clr-secondary, $lightness: 60%),
|
||||
),
|
||||
clr-card-link: (
|
||||
light: $clr-secondary,
|
||||
dark: color.scale($clr-secondary, $lightness: 75%),
|
||||
),
|
||||
clr-card-link-hover: (
|
||||
light: lighten($clr-secondary, 10%),
|
||||
dark: color.scale($clr-secondary, $lightness: 80%, $saturation: 90%),
|
||||
),
|
||||
clr-card-link-alt-alpha: (
|
||||
light: color.scale($clr-tertiary, $lightness: 5%),
|
||||
dark: color.scale($clr-secondary, $lightness: 80%),
|
||||
),
|
||||
clr-card-link-hover-alt-alpha: (
|
||||
light: color.scale($clr-tertiary, $lightness: 20%),
|
||||
dark: color.scale($clr-secondary, $lightness: 70%, $saturation: 90%),
|
||||
),
|
||||
gradient-card-bg: (
|
||||
light:
|
||||
linear-gradient(
|
||||
to top,
|
||||
rgba($clr-primary, 1),
|
||||
rgba(lighten($clr-secondary, 10%), 0.5)
|
||||
),
|
||||
dark:
|
||||
linear-gradient(
|
||||
to top,
|
||||
rgba(color.scale($clr-tertiary, $lightness: -45%, $saturation: 50%), 1),
|
||||
rgba(color.scale($clr-primary, $lightness: -90%), 0.8)
|
||||
),
|
||||
),
|
||||
clr-card-border: (
|
||||
light: darken($clr-secondary, 5%),
|
||||
dark: color.scale($clr-secondary, $lightness: 60%),
|
||||
),
|
||||
// 4) BUTTONS:
|
||||
clr-button:
|
||||
(
|
||||
light: $clr-secondary,
|
||||
dark: lighten($clr-secondary, 3%),
|
||||
),
|
||||
clr-button-hover: (
|
||||
light: lighten($clr-secondary, 3%),
|
||||
dark: lighten($clr-secondary, 6%),
|
||||
),
|
||||
clr-button-text: (
|
||||
light: lighten($clr-primary, 5%),
|
||||
dark: lighten($clr-primary, 10%),
|
||||
),
|
||||
clr-button-alt-alpha: (
|
||||
light: lighten($clr-tertiary, 5%),
|
||||
dark: color.scale($clr-tertiary, $lightness: -15%),
|
||||
),
|
||||
clr-button-hover-alt-alpha: (
|
||||
light: lighten($clr-tertiary, 15%),
|
||||
dark: color.scale($clr-tertiary, $lightness: 5%),
|
||||
),
|
||||
clr-button-text-alt-alpha: (
|
||||
light: color.scale($clr-primary, $lightness: 50%),
|
||||
dark: color.scale($clr-primary, $lightness: 50%),
|
||||
),
|
||||
// MISCELLANEOUS
|
||||
// 5) SHADOWS:
|
||||
shadow-button:
|
||||
(
|
||||
light: 3px 3px 2px rgba(#000, 0.4),
|
||||
dark: 3px 3px 2px rgba(#000, 1),
|
||||
),
|
||||
shadow-button-hover: (
|
||||
light: 7px 7px 3px rgba(#000, 0.3),
|
||||
dark: 7px 7px 3px rgba(#000, 0.6),
|
||||
),
|
||||
shadow-button-active: (
|
||||
light: 6px 6px 2px rgba(#000, 0.5),
|
||||
dark: 6px 6px 2px rgba(#000, 0.8),
|
||||
),
|
||||
shadow-card: (
|
||||
light: 0 0.5rem 1rem rgba(#000, 0.3),
|
||||
dark: 2px 2px 3px 2px rgba(#000, 1),
|
||||
),
|
||||
// 6) THEME SWITCHER ICON
|
||||
clr-theme-switcher-unchecked:
|
||||
(
|
||||
light: $clr-tertiary,
|
||||
dark: lighten($clr-secondary, 70%),
|
||||
),
|
||||
clr-theme-switcher-checked: (
|
||||
light: $clr-tertiary,
|
||||
dark: lighten($clr-secondary, 70%),
|
||||
),
|
||||
// 7) SCROLLBAR:
|
||||
clr-scrollbar-track:
|
||||
(
|
||||
light: transparent,
|
||||
dark: transparent,
|
||||
),
|
||||
clr-scrollbar-thumb: (
|
||||
light: $clr-tertiary,
|
||||
dark: $clr-primary,
|
||||
),
|
||||
clr-scrollbar-thumb-hover: (
|
||||
light: $clr-tertiary,
|
||||
dark: lighten($clr-primary, 10%),
|
||||
),
|
||||
// 8) SELECTION:
|
||||
clr-selection-bg:
|
||||
(
|
||||
light: color.scale($clr-secondary, $lightness: 5%),
|
||||
dark: color.scale($clr-secondary, $lightness: 90%),
|
||||
),
|
||||
clr-selection-text: (
|
||||
light: color.scale($clr-primary, $lightness: 15%),
|
||||
dark: color.scale($clr-tertiary, $lightness: -20%),
|
||||
)
|
||||
);
|
||||
178
views/sass/_base.scss
Normal file
178
views/sass/_base.scss
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
// importing as scss vars
|
||||
@use 'abstracts' as *;
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
// TYPOGRAPHY
|
||||
///////////////////////////////////////////////////////////////
|
||||
@include font('Montserrat', 'Italic', 'Light', 'Regular', 'SemiBold', 'Bold');
|
||||
@include font('NunitoSans', 'Italic', 'Light', 'Regular', 'SemiBold', 'Bold');
|
||||
|
||||
///////////////////////////////////////////////////////////////
|
||||
// RESET RULES
|
||||
///////////////////////////////////////////////////////////////
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 62.5%;
|
||||
|
||||
@include bp(bp-725) {
|
||||
font-size: 58%;
|
||||
}
|
||||
|
||||
@include bp(bp-350) {
|
||||
font-size: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
text-rendering: optimizeLegibility;
|
||||
// transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
font-size: 1.6rem;
|
||||
background-color: var(--clr-base-bg);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// BASE STYLES
|
||||
////////////////////////////////////////////////////////////////
|
||||
// initally declaring light-mode variables
|
||||
:root {
|
||||
@include misc-css-variables;
|
||||
@include themed-css-variables(light);
|
||||
|
||||
// dark mode declaration
|
||||
&[theme='dark'] {
|
||||
@include themed-css-variables(dark);
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
|
||||
background-color: var(--clr-base-bg);
|
||||
color: var(--clr-base-text);
|
||||
font-family: var(--ff-base);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// VANITY
|
||||
////////////////////////////////////////////////////////////////
|
||||
// selection
|
||||
|
||||
::selection {
|
||||
background-color: var(--clr-selection-bg);
|
||||
color: var(--clr-selection-text);
|
||||
}
|
||||
|
||||
// scrollbar
|
||||
@supports (scrollbar-width: auto) {
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);
|
||||
// scrollba
|
||||
}
|
||||
}
|
||||
@supports not (scrollbar-width: auto) {
|
||||
::-webkit-scrollbar {
|
||||
width: 1rem; // for vertical scrollbars
|
||||
height: 1rem; // horizontal scrollbars
|
||||
border-radius: 100rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--clr-scrollbar-track);
|
||||
// border-radius: 100vw;
|
||||
// margin-block: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--clr-scrollbar-thumb);
|
||||
border-radius: 100vw;
|
||||
// margin: 2px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
&:hover {
|
||||
background-color: var(--clr-scrollbar-thumb-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
////////////////////////////////////////////////////////////////
|
||||
// THEME SWITCHER
|
||||
////////////////////////////////////////////////////////////////
|
||||
|
||||
.theme-switcher {
|
||||
&__input {
|
||||
position: absolute;
|
||||
clip-path: circle(1px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: var(--fs-200);
|
||||
width: var(--fs-200);
|
||||
|
||||
fill: var(--clr-theme-switcher-unchecked);
|
||||
transform: rotateZ(var(--theme-swticher-rotation-unchecked));
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@include bp(bp-400) {
|
||||
height: var(--fs-160);
|
||||
width: var(--fs-160);
|
||||
}
|
||||
}
|
||||
|
||||
// new selector, same as writing:
|
||||
// &__label:hover, &__input:focus ~ .page &__label
|
||||
:is(&__label:hover, &__input:focus ~ .page &__label) {
|
||||
box-shadow: 0px 0px 1rem currentColor, 0px 0px 1.5rem currentColor;
|
||||
}
|
||||
|
||||
&__input:checked ~ .page &__icon {
|
||||
fill: var(--clr-theme-switcher-checked);
|
||||
transform: rotateZ(var(--theme-swticher-rotation-checked));
|
||||
}
|
||||
}
|
||||
|
||||
// if js is disabled, applying vars from on .page instead of on body.
|
||||
// progressive degradement i guess
|
||||
:root:not([js='enabled']) {
|
||||
// when user checks the theme-switcher, replacing root styles(light) with dark styles(on the .page)
|
||||
.theme-switcher__input:checked ~ .page {
|
||||
@include themed-css-variables(dark);
|
||||
}
|
||||
|
||||
// if the user prefers the dark scheme, then using dark styles on root
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include themed-css-variables(dark);
|
||||
|
||||
// and when user checks the theme-switcher, applying light styles on .page
|
||||
.theme-switcher {
|
||||
&__input:checked ~ .page {
|
||||
@include themed-css-variables(light);
|
||||
}
|
||||
|
||||
&__input:checked ~ .page &__icon {
|
||||
fill: var(--clr-theme-switcher-checked);
|
||||
transform: rotateZ(var(--theme-swticher-rotation-checked));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
804
views/sass/_components.scss
Normal file
804
views/sass/_components.scss
Normal file
|
|
@ -0,0 +1,804 @@
|
|||
// importing as scss vars
|
||||
@use 'abstracts' as *;
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// HEADINGS
|
||||
////////////////////////////////////////////////////////////////
|
||||
.heading {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-base-heading);
|
||||
|
||||
&__primary {
|
||||
font-size: var(--fs-400);
|
||||
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-350);
|
||||
}
|
||||
@include bp(bp-450) {
|
||||
font-size: calc(var(--fs-350) - 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
font-size: var(--fs-350);
|
||||
font-weight: 600;
|
||||
|
||||
@include bp(bp-550) {
|
||||
font-size: calc(var(--fs-350) - 0.5rem);
|
||||
}
|
||||
@include bp(bp-450) {
|
||||
font-size: var(--fs-250);
|
||||
}
|
||||
}
|
||||
|
||||
&__tertiary {
|
||||
font-size: var(--fs-250);
|
||||
color: var(--clr-base-heading-alt-alpha);
|
||||
}
|
||||
|
||||
&__quatenary {
|
||||
color: var(--clr-base-heading-alt-alpha);
|
||||
font-size: var(--fs-220);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// BUTTONS
|
||||
////////////////////////////////////////////////////////////////
|
||||
.button {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-button);
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&__primary {
|
||||
font-size: var(--fs-200);
|
||||
padding: 2rem 5rem;
|
||||
|
||||
@include bp(bp-725) {
|
||||
font-size: var(--fs-180);
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
|
||||
@include bp(bp-450) {
|
||||
font-size: var(--fs-160);
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
font-size: var(--fs-140);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-button-active);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// CARD
|
||||
////////////////////////////////////////////////////////////////
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
|
||||
gap: var(--spacer-500);
|
||||
// align-items: center;
|
||||
|
||||
@include bp(bp-725) {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 18rem minmax(25rem, 1fr);
|
||||
gap: var(--spacer-100);
|
||||
|
||||
background: var(--clr-card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
|
||||
&__image-box {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
|
||||
@include bp(bp-725) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
content: '';
|
||||
inset: 0; // nice property instead of top, left, etc.
|
||||
background-image: var(--gradient-card-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
@include bp(bp-725) {
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
z-index: 3;
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
outline: 3px solid var(--clr-card-border);
|
||||
outline-offset: -0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__about {
|
||||
margin: 2rem;
|
||||
display: grid;
|
||||
grid-template-rows: min-content repeat(5, auto);
|
||||
grid-auto-rows: auto;
|
||||
gap: 0.5rem;
|
||||
color: var(--clr-card-text);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: var(--clr-card-heading);
|
||||
font-size: var(--fs-250);
|
||||
align-self: center;
|
||||
|
||||
@include bp(bp-725) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include bp(bp-450) {
|
||||
font-size: var(--fs-220);
|
||||
}
|
||||
}
|
||||
|
||||
&__genres {
|
||||
align-self: end;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include bp(bp-725) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__genre {
|
||||
text-decoration: none;
|
||||
color: var(--clr-card-link);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-120);
|
||||
font-weight: 900;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-card-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__rating-box {
|
||||
align-self: start;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
font-size: var(--fs-140);
|
||||
|
||||
@include bp(bp-725) {
|
||||
justify-self: center;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__rating {
|
||||
display: flex;
|
||||
|
||||
@include bp(bp-725) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__rating-star {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
|
||||
&--active {
|
||||
fill: var(--clr-card-icon);
|
||||
}
|
||||
|
||||
&--inactive {
|
||||
fill: var(--clr-card-icon-alt-alpha);
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__rating-num {
|
||||
&::before {
|
||||
content: '(' attr(data-movie-rating) ')';
|
||||
|
||||
@include bp(bp-725) {
|
||||
content: attr(data-movie-rating) ' rating';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__votes {
|
||||
// font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&__not-rated {
|
||||
// font-size: 1.2rem;
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
// text-transform: uppercase;
|
||||
|
||||
@include bp(bp-725) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
align-self: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
// &__actors {
|
||||
// }
|
||||
|
||||
&__actor {
|
||||
}
|
||||
|
||||
&__actor-text,
|
||||
&__director-text {
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
}
|
||||
|
||||
// &__directors {
|
||||
// }
|
||||
|
||||
&__director {
|
||||
}
|
||||
|
||||
// &__director-text {
|
||||
// }
|
||||
|
||||
&__link {
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
// margin-bottom: 1rem;
|
||||
|
||||
font-size: var(--fs-120);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
text-decoration: none;
|
||||
color: var(--clr-card-link);
|
||||
|
||||
backface-visibility: hidden;
|
||||
@include underliner(var(--clr-card-link-hover), transparent, false);
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
color: var(--clr-card-link-hover);
|
||||
}
|
||||
|
||||
@include bp(bp-725) {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__link-arrow {
|
||||
padding-left: 3px;
|
||||
display: inline-block;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
&__link:hover &__link-arrow {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
@include bp(bp-725) {
|
||||
min-width: 28rem;
|
||||
width: 70vw;
|
||||
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 20rem auto;
|
||||
}
|
||||
|
||||
@include bp(bp-450) {
|
||||
min-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// FEATURES
|
||||
////////////////////////////////////////////////////////////////
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-rows: max-content auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
|
||||
gap: var(--spacer-500);
|
||||
|
||||
@include bp(bp-550) {
|
||||
gap: var(--spacer-300);
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
// align-self: center;
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: var(--spacer-200) var(--spacer-100);
|
||||
align-items: center;
|
||||
grid-template-columns: max-content auto;
|
||||
grid-auto-rows: min-content;
|
||||
|
||||
background: var(--clr-card-bg);
|
||||
box-shadow: var(--shadow-card);
|
||||
border-radius: 5px;
|
||||
|
||||
&__icon {
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
fill: var(--clr-card-icon-alt-beta);
|
||||
|
||||
@include bp(bp-550) {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
// align-self: center;
|
||||
font-size: var(--fs-220);
|
||||
color: var(--clr-card-heading);
|
||||
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-200);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
grid-column: -2 / -1;
|
||||
align-self: start;
|
||||
}
|
||||
@include bp(bp-550) {
|
||||
gap: var(--spacer-100);
|
||||
// gap: var(--spacer-300);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// FAQs
|
||||
////////////////////////////////////////////////////////////////
|
||||
.faqs {
|
||||
display: grid;
|
||||
gap: var(--spacer-300);
|
||||
}
|
||||
|
||||
.faq {
|
||||
border-left: 2px solid var(--clr-card-icon-alt-beta);
|
||||
|
||||
&__question {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: var(--clr-card-bg);
|
||||
// font-size: 1.8rem;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
|
||||
// for the plus sign as the default marker can't be customised much
|
||||
&::before {
|
||||
display: inline-block;
|
||||
content: '\00d7'; // x sign
|
||||
margin-right: 5px;
|
||||
font-weight: 700;
|
||||
color: var(--clr-card-icon-alt-beta);
|
||||
|
||||
transform: rotatez(-135deg);
|
||||
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer {
|
||||
padding: 1rem;
|
||||
background-color: var(--clr-card-bg-alt-alpha);
|
||||
}
|
||||
|
||||
&[open] &__question::before {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
&[open] &__answer {
|
||||
animation: slide-down 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
// margin: 3px 0.4rem 0 0.4rem;
|
||||
color: var(--clr-card-link-alt-alpha);
|
||||
|
||||
@include underliner(
|
||||
var(--clr-card-link-hover-alt-alpha),
|
||||
var(--clr-card-link-alt-alpha),
|
||||
false
|
||||
);
|
||||
|
||||
transition: all 0.2s;
|
||||
&:hover {
|
||||
color: var(--clr-card-link-hover-alt-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// BASIC
|
||||
////////////////////////////////////////////////////////////////
|
||||
.basic {
|
||||
display: grid;
|
||||
margin-bottom: var(--spacer-200);
|
||||
grid-template-columns: 30rem minmax(40rem, 1fr);
|
||||
gap: var(--spacer-100);
|
||||
|
||||
background: var(--clr-card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
|
||||
&__image-box {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
|
||||
@include bp(bp-725) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
content: '';
|
||||
inset: 0; // nice property instead of top, left, etc.
|
||||
background-image: var(--gradient-card-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
@include bp(bp-725) {
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
z-index: 3;
|
||||
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
outline: 3px solid var(--clr-card-border);
|
||||
outline-offset: -0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__image-na {
|
||||
fill: var(--clr-card-icon-alt-alpha);
|
||||
height: 40%;
|
||||
width: 40%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&__about {
|
||||
margin: 1.5rem;
|
||||
display: grid;
|
||||
grid-template-rows: min-content;
|
||||
grid-auto-rows: auto;
|
||||
|
||||
gap: 1rem;
|
||||
color: var(--clr-card-text);
|
||||
|
||||
@include bp(bp-900) {
|
||||
// grid-template-rows: min-content min-content 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
@include bp(bp-725) {
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
%list-items:not(:last-of-type)::after {
|
||||
margin-right: 0.6rem;
|
||||
display: inline-block;
|
||||
content: ',';
|
||||
}
|
||||
&__title {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading);
|
||||
font-size: var(--fs-400);
|
||||
font-weight: 600;
|
||||
align-self: center;
|
||||
line-height: 1;
|
||||
|
||||
@include bp(bp-900) {
|
||||
font-size: var(--fs-350);
|
||||
}
|
||||
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-300);
|
||||
}
|
||||
@include bp(bp-450) {
|
||||
font-size: var(--fs-300);
|
||||
}
|
||||
}
|
||||
|
||||
&__genres {
|
||||
align-self: end;
|
||||
|
||||
@include bp(bp-725) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__genre-heading,
|
||||
&__director-heading,
|
||||
&__writer-heading {
|
||||
font-weight: 600;
|
||||
// font-size: var(--fs-180);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
}
|
||||
&__genre {
|
||||
@extend %list-items;
|
||||
}
|
||||
|
||||
&__metadata-data {
|
||||
// font-size: var(--fs-180);
|
||||
// line-height: 1;
|
||||
|
||||
&:not(:last-of-type)::after {
|
||||
display: inline-block;
|
||||
content: '\00b7';
|
||||
margin: 0 5px;
|
||||
font-weight: 900;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-size: var(--fs-200);
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
gap: var(--spacer-200);
|
||||
|
||||
// margin: 0.5rem 0;
|
||||
color: var(--clr-card-text);
|
||||
|
||||
@include bp(bp-725) {
|
||||
justify-self: center;
|
||||
}
|
||||
@include bp(bp-350) {
|
||||
gap: var(--spacer-100);
|
||||
}
|
||||
}
|
||||
|
||||
&__rating,
|
||||
&__votes,
|
||||
&__popularity {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
font-size: 3rem;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
gap: 0.5rem 1rem;
|
||||
|
||||
@include bp(bp-900) {
|
||||
gap: 0 1rem;
|
||||
font-size: var(--fs-280);
|
||||
}
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-250);
|
||||
}
|
||||
}
|
||||
&__rating-num,
|
||||
&__votes-num,
|
||||
&__popularity-num {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
&__rating-text,
|
||||
&__votes-text,
|
||||
&__popularity-text {
|
||||
grid-column: 1 / -1;
|
||||
// justify-self: start;
|
||||
font-size: 0.5em;
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
// line-height: 0.5;
|
||||
}
|
||||
&__icon {
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
fill: var(--clr-card-icon);
|
||||
}
|
||||
|
||||
&__no-rating-text {
|
||||
margin-top: 1rem;
|
||||
font-size: var(--fs-140);
|
||||
color: var(--clr-card-text);
|
||||
}
|
||||
|
||||
&__description-heading {
|
||||
font-size: var(--fs-200);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 600;
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-180);
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
// background: red;
|
||||
padding: 1rem 0;
|
||||
align-self: center;
|
||||
|
||||
@include bp(bp-900) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__director {
|
||||
@extend %list-items;
|
||||
}
|
||||
|
||||
&__writer {
|
||||
@extend %list-items;
|
||||
}
|
||||
|
||||
@include bp(bp-900) {
|
||||
grid-template-columns: 20rem minmax(35rem, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@include bp(bp-725) {
|
||||
min-width: 28rem;
|
||||
// width: 90vw;
|
||||
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 25rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// ACTORS
|
||||
////////////////////////////////////////////////////////////////
|
||||
.actors {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
gap: var(--spacer-200);
|
||||
// scroll-snap-type: y mandatory;
|
||||
padding: var(--spacer-200) var(--spacer-100);
|
||||
}
|
||||
|
||||
.actor {
|
||||
list-style: none;
|
||||
flex: 1 0 15rem;
|
||||
|
||||
display: grid;
|
||||
max-height: 30rem;
|
||||
max-width: 30rem;
|
||||
// scroll-snap-align: start;
|
||||
|
||||
&__details {
|
||||
display: grid;
|
||||
grid-template-rows: minmax(10rem, 65%) repeat(2, min-content);
|
||||
gap: var(--spacer-050);
|
||||
overflow: hidden;
|
||||
|
||||
text-align: center;
|
||||
background-color: var(--clr-card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
&__image {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
&__image-na {
|
||||
fill: var(--clr-card-icon-alt-alpha);
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&__name {
|
||||
// font-size: var(--fs-180);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 600;
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
}
|
||||
|
||||
&__character-name {
|
||||
font-size: var(--fs-140);
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
}
|
||||
}
|
||||
////////////////////////////////////////////////////////////////
|
||||
// storyline
|
||||
////////////////////////////////////////////////////////////////
|
||||
.storyline,
|
||||
.boxoffice,
|
||||
.technical,
|
||||
.details {
|
||||
display: grid;
|
||||
gap: var(--spacer-050);
|
||||
}
|
||||
290
views/sass/_layout.scss
Normal file
290
views/sass/_layout.scss
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
// importing as scss vars
|
||||
@use 'abstracts' as *;
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// HEADER
|
||||
////////////////////////////////////////////////////////////////
|
||||
.header {
|
||||
// color: #fff;
|
||||
background: var(--clr-hf-bg);
|
||||
// min-height: 10vh;
|
||||
padding: 3rem 5rem;
|
||||
// position: relative;
|
||||
// border-radius: 0 0 3rem 3rem;
|
||||
|
||||
&__nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__logo-box {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--fs-200);
|
||||
|
||||
@include bp(bp-400) {
|
||||
font-size: var(--fs-180);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 1.75em;
|
||||
width: 1.75em;
|
||||
fill: var(--clr-hf-logo);
|
||||
}
|
||||
|
||||
&__logo-text {
|
||||
margin-left: 0.2em;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 700;
|
||||
color: var(--clr-hf-logo);
|
||||
}
|
||||
|
||||
&__nav,
|
||||
&__nav-links {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__nav-item {
|
||||
list-style: none;
|
||||
margin-right: var(--spacer-500);
|
||||
|
||||
@include bp(bp-550) {
|
||||
margin-right: var(--spacer-300);
|
||||
}
|
||||
|
||||
@include bp(bp-450) {
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
// &:not(:first-of-type) {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
@include bp(bp-400) {
|
||||
margin-right: var(--spacer-200);
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
font-size: var(--fs-180);
|
||||
// text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--clr-hf-link);
|
||||
@include underliner(var(--clr-hf-link-hover), transparent, false);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-hf-link-hover);
|
||||
}
|
||||
|
||||
@include bp(bp-400) {
|
||||
font-size: var(--fs-160);
|
||||
}
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
display: grid;
|
||||
grid-template-rows: 3fr max-content 2fr 1fr; // 1fr is empty row. cause i don't like messing with margins and stuff
|
||||
gap: var(--spacer-300);
|
||||
// padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__main-text {
|
||||
align-self: end;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-400);
|
||||
color: var(--clr-hf-text);
|
||||
|
||||
@include bp(bp-725) {
|
||||
font-size: var(--fs-350);
|
||||
}
|
||||
|
||||
@include bp(bp-450) {
|
||||
font-size: var(--fs-300);
|
||||
}
|
||||
}
|
||||
|
||||
&__sub-text {
|
||||
font-size: var(--fs-200);
|
||||
color: var(--clr-hf-text-alt-alpha);
|
||||
font-weight: 600;
|
||||
|
||||
@include bp(bp-725) {
|
||||
font-size: var(--fs-180);
|
||||
}
|
||||
}
|
||||
|
||||
&__sub-text-links {
|
||||
text-decoration: none;
|
||||
color: var(--clr-hf-link);
|
||||
@include underliner(var(--clr-hf-link-hover), var(--clr-hf-link), false);
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-hf-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
color: var(--clr-button-text);
|
||||
background-color: var(--clr-button);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--clr-button-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@include bp(bp-725) {
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
@include bp(bp-450) {
|
||||
padding: 2rem;
|
||||
}
|
||||
@include bp(bp-350) {
|
||||
padding: 2rem var(--spacer-100);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// FOOTER
|
||||
////////////////////////////////////////////////////////////////
|
||||
.footer {
|
||||
padding: 5rem 10rem;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: var(--spacer-300);
|
||||
|
||||
background: var(--clr-hf-bg);
|
||||
|
||||
&__logo-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
@include bp(bp-450) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
fill: var(--clr-hf-logo);
|
||||
|
||||
@include bp(bp-725) {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo-text {
|
||||
// letter-spacing: 2px;
|
||||
padding-top: 0.5rem;
|
||||
font-size: var(--fs-350);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 700;
|
||||
color: var(--clr-hf-logo);
|
||||
|
||||
@include bp(bp-725) {
|
||||
font-size: var(--fs-250);
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
justify-self: stretch;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3rem;
|
||||
|
||||
@include bp(bp-725) {
|
||||
gap: 2rem;
|
||||
}
|
||||
@include bp(bp-550) {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-item {
|
||||
flex: 1 0 10rem;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font-size: var(--fs-180);
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
color: var(--clr-hf-link);
|
||||
font-weight: 600;
|
||||
|
||||
@include underliner(var(--clr-hf-link-hover), transparent, false);
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&--active {
|
||||
color: var(--clr-hf-link-hover);
|
||||
border-bottom: 2px solid var(--clr-hf-link-hover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-hf-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
// align-self: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
font-size: var(--fs-180);
|
||||
color: var(--clr-hf-text);
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@include bp(bp-725) {
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
@include bp(bp-400) {
|
||||
gap: var(--spacer-200);
|
||||
padding: var(--spacer-200);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// MAIN
|
||||
////////////////////////////////////////////////////////////////
|
||||
.main {
|
||||
// max-width: 200rem;
|
||||
// margin-inline: auto;
|
||||
padding: 2rem;
|
||||
|
||||
@include bp(bp-450) {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
}
|
||||
642
views/sass/_pages.scss
Normal file
642
views/sass/_pages.scss
Normal file
|
|
@ -0,0 +1,642 @@
|
|||
// importing as scss vars
|
||||
@use 'abstracts' as *;
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// MOVIES PAGE
|
||||
////////////////////////////////////////////////////////////////
|
||||
|
||||
.movies {
|
||||
&__heading {
|
||||
padding-top: var(--spacer-500);
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__container {
|
||||
min-height: 100vh;
|
||||
padding: var(--spacer-500);
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__go-to-page {
|
||||
}
|
||||
|
||||
&__button {
|
||||
background-color: var(--clr-button-go2page-bg);
|
||||
color: var(--clr-button-go2page-text);
|
||||
}
|
||||
}
|
||||
|
||||
.go-to-page {
|
||||
margin: 3rem 5rem;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 5rem;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
|
||||
&__link {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
fill: var(--clr-button-alt-alpha);
|
||||
}
|
||||
|
||||
&__info {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
// background-color: rebeccapurple;
|
||||
color: var(--clr-base-text);
|
||||
font-size: var(--fs-180);
|
||||
}
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding-top: 3rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// OVERVIEW PAGE
|
||||
////////////////////////////////////////////////////////////////
|
||||
.overview {
|
||||
&__nav-box {
|
||||
padding: 5rem 2rem;
|
||||
|
||||
@include bp(bp-725) {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-heading {
|
||||
padding-bottom: var(--spacer-300);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--spacer-100);
|
||||
// overflow-x: scroll;
|
||||
|
||||
@include bp(bp-725) {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-item {
|
||||
list-style: none;
|
||||
flex-grow: 1; // to make genres appearing on last row fill it completely
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__nav-link {
|
||||
display: block; // makes the whole nav-item clickable,not just the text
|
||||
text-decoration: none;
|
||||
padding: 1rem;
|
||||
background-color: var(--clr-button-alt-alpha);
|
||||
color: var(--clr-button-text-alt-alpha);
|
||||
border-radius: 5px;
|
||||
// box-shadow: var(--shadow-button);
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-button-alt-alpha-hover);
|
||||
color: var(--clr-button-text-alt-alpha);
|
||||
}
|
||||
}
|
||||
|
||||
&__popular {
|
||||
padding: 5rem;
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
@include bp(bp-450) {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__popular-heading {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding-bottom: var(--spacer-300);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// ABOUT PAGE
|
||||
////////////////////////////////////////////////////////////////
|
||||
.about {
|
||||
padding-top: var(--spacer-500);
|
||||
|
||||
&__header {
|
||||
height: 100vh;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: min-content;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
&__features {
|
||||
padding: 6rem;
|
||||
|
||||
// display: grid;
|
||||
// grid-template-rows: max-content auto;
|
||||
// grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
|
||||
// gap: 6rem;
|
||||
// padding: 6rem;
|
||||
|
||||
@include bp(bp-450) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__features-heading {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding-bottom: var(--spacer-500);
|
||||
}
|
||||
|
||||
&__faqs {
|
||||
// display: grid;
|
||||
padding: 6rem;
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
|
||||
@include bp(bp-450) {
|
||||
padding: 5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__faqs-heading {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: var(--spacer-500);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// PRIVACY
|
||||
////////////////////////////////////////////////////////////////
|
||||
.privacy {
|
||||
max-width: 120rem;
|
||||
margin-inline: auto;
|
||||
padding: var(--spacer-800) var(--spacer-500);
|
||||
display: grid;
|
||||
gap: var(--spacer-300);
|
||||
|
||||
&__heading {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__jist {
|
||||
justify-self: center;
|
||||
font-size: var(--fs-200);
|
||||
font-weight: 600;
|
||||
|
||||
margin-bottom: var(--spacer-300);
|
||||
}
|
||||
|
||||
&__item {
|
||||
// background-color: var(--color-secondary);
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
&__item-heading {
|
||||
// text-align: center;
|
||||
// color: var(--clr-base-heading);
|
||||
}
|
||||
|
||||
@include bp(bp-400) {
|
||||
padding: var(--spacer-500) var(--spacer-200);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// CONTACT
|
||||
////////////////////////////////////////////////////////////////
|
||||
.contact {
|
||||
padding: var(--spacer-500);
|
||||
display: grid;
|
||||
gap: var(--spacer-500);
|
||||
|
||||
&__heading {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: var(--fs-220);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__mediums {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--spacer-300);
|
||||
}
|
||||
|
||||
&__medium {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
&__medium-name {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-200);
|
||||
}
|
||||
|
||||
&__ways {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&__ways-image {
|
||||
display: inline-block;
|
||||
width: 50vw;
|
||||
max-width: 20rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
&__ways-text {
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
&__ways-link {
|
||||
font-size: var(--fs-180);
|
||||
text-decoration: none;
|
||||
color: var(--clr-base-link);
|
||||
|
||||
@include underliner(var(--clr-base-link-hover), transparent, false);
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-base-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@include bp(bp-400) {
|
||||
padding: var(--spacer-500) var(--spacer-200);
|
||||
gap: var(--spacer-300);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// SIMILAR PROJECTS
|
||||
////////////////////////////////////////////////////////////////
|
||||
.similar-projects {
|
||||
display: grid;
|
||||
gap: var(--spacer-800);
|
||||
padding: var(--spacer-800) var(--spacer-500);
|
||||
|
||||
&__heading {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-300);
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: grid;
|
||||
gap: var(--spacer-500);
|
||||
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
|
||||
|
||||
@include bp(bp-550) {
|
||||
grid-template-columns: auto;
|
||||
gap: var(--spacer-300);
|
||||
}
|
||||
}
|
||||
@include bp(bp-725) {
|
||||
gap: var(--spacer-500);
|
||||
padding: var(--spacer-500);
|
||||
}
|
||||
@include bp(bp-550) {
|
||||
padding: var(--spacer-500) var(--spacer-300);
|
||||
}
|
||||
@include bp(bp-350) {
|
||||
gap: var(--spacer-300);
|
||||
padding: var(--spacer-300);
|
||||
}
|
||||
}
|
||||
|
||||
.project {
|
||||
padding: var(--spacer-200);
|
||||
background-color: var(--clr-card-bg);
|
||||
display: grid;
|
||||
gap: var(--spacer-100);
|
||||
box-shadow: var(--shadow-card);
|
||||
border-radius: 5px;
|
||||
|
||||
&__name {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-size: var(--fs-200);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: var(--clr-card-heading);
|
||||
}
|
||||
|
||||
&__about {
|
||||
color: var(--clr-card-text);
|
||||
}
|
||||
|
||||
&__instance {
|
||||
display: inline-block;
|
||||
justify-self: start;
|
||||
align-self: end;
|
||||
text-decoration: none;
|
||||
color: var(--clr-base-link);
|
||||
|
||||
@include underliner(var(--clr-base-link-hover));
|
||||
backface-visibility: hidden;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
color: var(--clr-base-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__instance-arrow {
|
||||
display: inline-block;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
&__instance:hover &__instance-arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// ERROR
|
||||
////////////////////////////////////////////////////////////////
|
||||
.error {
|
||||
padding: var(--spacer-500);
|
||||
display: grid;
|
||||
gap: var(--spacer-200);
|
||||
text-align: center;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
// min-height: 100vh;
|
||||
|
||||
&__status-code {
|
||||
// font-size: 20rem;
|
||||
font-size: var(--fs-2000);
|
||||
|
||||
@include bp(bp-725) {
|
||||
font-size: var(--fs-1700);
|
||||
}
|
||||
@include bp(bp-550) {
|
||||
font-size: var(--fs-1500);
|
||||
}
|
||||
@include bp(bp-400) {
|
||||
font-size: var(--fs-1200);
|
||||
}
|
||||
@include bp(bp-350) {
|
||||
font-size: var(--fs-1000);
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
color: var(--clr-base-link);
|
||||
@include underliner(var(--clr-base-link-hover), transparent, false);
|
||||
|
||||
transition: all 0.4s;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-base-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: var(--fs-180);
|
||||
}
|
||||
|
||||
&__stack-box {
|
||||
max-width: 85vw;
|
||||
padding: var(--spacer-100) var(--spacer-200);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
border: 1px solid;
|
||||
text-align: initial;
|
||||
background-color: var(--clr-card-bg);
|
||||
}
|
||||
|
||||
&__stack {
|
||||
overflow: auto;
|
||||
padding: var(--spacer-100) 0;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// MOVIE
|
||||
////////////////////////////////////////////////////////////////
|
||||
.movie {
|
||||
padding: var(--spacer-500);
|
||||
display: grid;
|
||||
gap: var(--spacer-500);
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(5, auto);
|
||||
grid-auto-flow: dense;
|
||||
color: var(--clr-card-text);
|
||||
|
||||
&__basic {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
&__cast {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
overflow: hidden;
|
||||
margin: var(--spacer-200);
|
||||
|
||||
@include bp(bp-550) {
|
||||
margin: var(--spacer-200) 0;
|
||||
}
|
||||
|
||||
@include bp(bp-350) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading-main {
|
||||
font-size: var(--fs-350);
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading);
|
||||
|
||||
@include bp(bp-900) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
&__heading-sub {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading-alt-alpha);
|
||||
}
|
||||
|
||||
&__storyline,
|
||||
&__boxoffice,
|
||||
&__details,
|
||||
&__technical,
|
||||
&__media {
|
||||
// background: var(--clr-card-bg);
|
||||
// border-radius: var(--border-radius);
|
||||
padding: var(--spacer-200);
|
||||
// box-shadow: var(--shadow-card);
|
||||
display: grid;
|
||||
gap: var(--spacer-100);
|
||||
align-content: start;
|
||||
|
||||
@include bp(bp-1100) {
|
||||
padding: var(--spacer-200) var(--spacer-100);
|
||||
}
|
||||
@include bp(bp-900) {
|
||||
padding: var(--spacer-100);
|
||||
}
|
||||
@include bp(bp-350) {
|
||||
padding: var(--spacer-100) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__storyline {
|
||||
grid-column: 1 / span 4;
|
||||
|
||||
@include bp(bp-1100) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
grid-column: -3 / -1;
|
||||
@include bp(bp-1100) {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
@include bp(bp-900) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__boxoffice {
|
||||
grid-column: -3 / -1;
|
||||
@include bp(bp-1100) {
|
||||
grid-column: 3 / span 2;
|
||||
}
|
||||
|
||||
@include bp(bp-900) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__technical {
|
||||
grid-column: -3 / -1;
|
||||
@include bp(bp-900) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__media {
|
||||
align-self: center;
|
||||
grid-column: 1 / span 4;
|
||||
grid-row: -3 / -1;
|
||||
@include bp(bp-1100) {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&__media-image-secondary-box {
|
||||
max-height: 30rem;
|
||||
flex: 1 0 30rem;
|
||||
max-width: 30rem;
|
||||
|
||||
@include bp(bp-900) {
|
||||
max-height: 20rem;
|
||||
flex: 1 0 20rem;
|
||||
}
|
||||
}
|
||||
&__media-box {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: var(--spacer-300);
|
||||
padding: var(--spacer-200) var(--spacer-100);
|
||||
|
||||
@include bp(bp-900) {
|
||||
gap: var(--spacer-200);
|
||||
padding: var(--spacer-100);
|
||||
}
|
||||
}
|
||||
&__media-image {
|
||||
// max-height: 15rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
justify-self: start;
|
||||
color: var(--clr-base-link);
|
||||
@include underliner(var(--clr-base-link-hover));
|
||||
|
||||
span {
|
||||
transition: all 200ms;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-base-link-hover);
|
||||
|
||||
span {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include bp(bp-1100) {
|
||||
// grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacer-200) var(--spacer-100);
|
||||
padding: var(--spacer-300);
|
||||
}
|
||||
|
||||
@include bp(bp-550) {
|
||||
padding: var(--spacer-200);
|
||||
}
|
||||
}
|
||||
5
views/sass/main.scss
Normal file
5
views/sass/main.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// @use 'abstracts'; // stuff like sass mixins, variables and the likes
|
||||
@use 'base'; // containes main reset rules, some typography and keyframes for animations
|
||||
@use 'components'; // for things that are smaller than layouts. eg: buttons
|
||||
@use 'layout'; // will contain navs, header, footer, grid and stuff
|
||||
@use 'pages'; // for very specific styles for specific pages.
|
||||
Loading…
Reference in a new issue