diff --git a/_posts/2024-06-07-webdev-roadmap.md b/_posts/2024-06-07-webdev-roadmap.md
index b3304b0..dc66cd6 100644
--- a/_posts/2024-06-07-webdev-roadmap.md
+++ b/_posts/2024-06-07-webdev-roadmap.md
@@ -67,7 +67,7 @@ Now that you know javascript, try making a [Simon Says Game](https://www.mathsis
Now that you know about the frontend, let’s start working on actual functional websites with a server.
-Here we have provided 2 pathways. One through Go and the other through Python(Django). While Golang being fast & scalable is mostly used for developing microservices softwares and cloud computing , on the other hand, Python providing for a huge number of libraries & community support is mostly used for AI,ML and data analysis. You should learn any one of them right now , but after you are done with the roadmap, you are suggested to come back and go-through the alternative pathway too.
+Here we have provided 3 pathways. One through Go another through Node and finally one wiht Python(Django). While Golang being fast & scalable is mostly used for developing microservices softwares and cloud computing , on the other hand, Python providing for a huge number of libraries & community support is mostly used for AI,ML and data analysis and since most people starting with webdev are already familiar with JS Node provides a quick transition into backend without the hassle of learning a completely new language . You should learn any one of them right now , but after you are done with the roadmap, you are suggested to come back and go-through the alternative pathway too.
**THE GO PATHWAY**
@@ -80,6 +80,17 @@ Here we have provided 2 pathways. One through Go and the other through Python(Dj
| Day 6 | **Middlewares and RESTful routing**
We will cover chapter-6 and 7 of this book. This part of the book will provide you with an explained implementation of [Middlewares and REST APIs](https://www.youtube.com/watch?v=1oWPUpMheGk) through routers. |
| Day 7 | **Form processing and Testing**
We will cover chapter-8 and 13 of this book.
Chapter-8 helps you to implement how to process,parse and then store the data(upon validation) as entered by the user on your website.
_Upon completing this chapter, you would have created your own website from scratch._
**Note:** In case you are interested to learn the whole deployment of the web application, you may go through chapters 9 - 12 which basically help you improve your web application by displaying flash messages to users, and security improvements to the website.
Now having made your website, the next important aspect of creating any web-application is its **testing**. Chapter -13 will provide you with the basic syntaxes to creating tests to the components/services you have added to your website. |
+**THE NODE PATHWAY**
+
+| Day Number | Resources |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Day 1 | **Intro to Node**
The [Node.js website](https://nodejs.org/en/about/) describes it as an asynchronous event driven JavaScript runtime, designed to build scalable network applications. So, at its most basic level, Node allows you to run JavaScript code on a machine such as your local computer or a server without having to go through a web browser. To facilitate this, Node has some added functionality that is not found in browser-based JavaScript, such as the ability to read and write local files, create http connections and listen to network requests.
To gain more knowledge about backend you can go through this short article on [MDN](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps) |
+| Day 2 & 3 | **Foundations**
We will begin by installing Node on our systems which can be done from the [official site](https://nodejs.org/en/download/package-manager). Now we are gonna cover the basic topics that you need to go thoroughly before working on the great websites you dream about making. We are linking the official [Node.js docs](https://nodejs.org/en/learn) which might be a bit confusing for people going through docs for the first time but dont worry it will help you out in the long run and you can always ask your doubts in the pclub discord server.
**Getting Started**
[How to run Nod.js scripts from the terminal.](https://nodejs.org/en/learn/command-line/run-nodejs-scripts-from-the-command-line)
[.env files](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs)
**HTTP Module**
Learn [how to make HTTP requests](https://github.com/nodejs/nodejs.dev/blob/aa4239e87a5adc992fdb709c20aebb5f6da77f86/content/learn/node-js-web-server/node-make-http-requests.en.md) and Node's [http module](https://nodejs.org/api/http.html)
**File System**
We will now learn about how to [read](https://nodejs.org/en/learn/manipulating-files/reading-files-with-nodejs) and [write](https://nodejs.org/en/learn/manipulating-files/writing-files-with-nodejs) files with Node.js and the [fs module](https://github.com/nodejs/nodejs.dev/blob/aa4239e87a5adc992fdb709c20aebb5f6da77f86/content/learn/node-js-modules/node-module-fs.en.md)
**Events**
Now we will go through the [Node events module](https://github.com/nodejs/nodejs.dev/blob/aa4239e87a5adc992fdb709c20aebb5f6da77f86/content/learn/node-js-modules/node-module-events.en.md) and [Event Emitter](https://nodejs.org/en/learn/asynchronous-work/the-nodejs-event-emitter) |
+| Day 4 | **Databasing**
We will now cover storing data for our website. Storing data locally has limitations so we are gonna learn one of the most popular databases MongoDB. MongoDB is a NoSQL database. We are gonna cover SQL and NoSQL database at a later stage for now we just need to know that MongoDB is what everyone is doing right now. To get started with MongoDB go through the [MongoDB University “Introduction to MongoDB” course.](https://learn.mongodb.com/learning-paths/introduction-to-mongodb)|
+| Day 5 | **Introduction To Express**
Finally we begin with the the most popular framework for building a backend in JS : EXPRESS. Go through the entire [MDN documentation on Node.js](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction) It is long but going through it will give you a idea what all you can do with express.
**Templating Engine**
A templating engine is a tool that allows you to insert variables and logic into your views. For instance, you could have a header that updates with the actual user’s name once they’ve logged in, something that is not possible with plain HTML. Now there are two popular options you could go through : [Pug](https://pugjs.org/) which has a learning curve and is quite different than regular HTML and [EJS](https://ejs.co/) which iss a lot more closer to HTML if you are comfortable with it.
**Middleware**
A middleware is just a plain JavaScript function that Express will call for you between the time it receives a network request and the time it fires off a response (i.e. it’s a function that sits in the middle). You will eventually be using several of these functions that will run in a specific sequence for every request. For example, you might have a logger (that prints details of the request to the console), an authenticator (that checks to see if the user is logged in, or otherwise has permission to access whatever they’re requesting) and a static-file server (if the user is requesting a static file then it will send it to them). You can read more about [middlewares here](http://expressjs.com/en/guide/using-middleware.html)
**NOTE**
While going through the resources you should also go through the [MDN tutorial on express](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)|
+| Day 6 | **CRUD and MVC**
CRUD stands for: Create, Read, Update and Delete. These are the four basic functions that you will be building into your database driven apps. If you are designing a CRUD interface that means that users can expect to be able to do these 4 things to items in the database (providing they have the appropriate permissions of course). Of course, this is a concept and not some sort of rule that must be followed. You may not want to allow users to do all of these actions, or you may want to limit which users can do what at any given time.
MVC is another common concept in web development and also something that is likely to come up in an interview question. MVC stands for Model, View, Controller and refers to the architecture of your code.
Models are the basic building blocks of your database. So for every type of entry in your DB (book, author, etc. in our Library Project), you’ll create a model that will hold the details of that type of entry. Models define the types of information that get used by your views and controllers.
Views are, of course, the component that generates the UI for your application. In our case, we’ve selected a templating engine that uses data supplied by a controller to display the desired information.
Controllers are the components that decide what view to display and what information is going to be put into it.
Go through this resource to get a better understandding of [MVC](https://www.freecodecamp.org/news/simplified-explanation-to-mvc-5d307796df30/) |
+| Day 7 | **Authentication and Testing**
Creating users and allowing them to log in and out of your web apps is a crucial functionality that we are finally ready to learn! There is quite a bit of setup involved here, but thankfully none of it is too tricky. You’ll be up and running in no time! In this lesson, we’re going to be using [passportJS](https://www.passportjs.org/), an excellent middleware to handle our authentication and sessions for us. Follow this [tutorial here](https://www.theodinproject.com/lessons/nodejs-authentication-basics) to get a better idea of authentication.
Testing is one of the most important parts of webdev that usually most people overlook. We are gonna cover the basics of testing that will get you started on this path. Follow along this [tutorial](https://www.theodinproject.com/lessons/nodejs-testing-routes-and-controllers) to get a hang of it.|
+
**THE DJANGO(PYTHON) PATHWAY**
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. That’s why we are providing an alternate pathway for the backend .
@@ -116,16 +127,33 @@ Now that you’ve made a website, how will you share it with the world? How will
| Day Number | Resources |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Day 1 | Git
Git is an important version control tool, it is used a lot in the industry. As a developer you must know how to use it.
Let’s start by installing git,
For windows, refer [here](https://nerdschalk.com/how-to-install-and-use-git-on-windows-11/) \| For Linux, refer [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
Before starting, it is really helpful to get familiar with the terminal, [shell tutorial](https://www.youtube.com/watch?v=Zl7npywCB84). Most commands you see here will also work on windows powershell.
You can learn more about here : [Git Video Tutorial](https://www.youtube.com/watch?v=IHaTbJPdB-s), [Blog on Git](https://jwiegley.github.io/git-from-the-bottom-up/) |
-| Day 2 | Git+Github
Github is a platform where you can keep your code for the world to see! Is also used when multiple people have to contribute to a project.
[What If you mess up?](https://ohshitgit.com/)
To get started with github, we suggest making an account with the IITK email id to avail the student pack, which comes with a lot of benefits. To learn about github, the official docs are a great place to start [Github Docs](https://docs.github.com/en/get-started/quickstart/hello-world).
Also, to get started you need to set up an SSH key, follow [this tutorial](https://www.youtube.com/watch?v=WgZIv5HI44o).
Learn more from here: [Git + Github](https://www.youtube.com/watch?v=HkdAHXoRtos), [Learn git branching](https://learngitbranching.js.org/) |
-| Day 3 | Github Actions
Now that you know about github, it is time to implement some CI/CD using github actions.
[What is CI/CD](https://www.youtube.com/watch?v=scEDHsr3APg&t=14s)
[Workflow for a React App](https://youtu.be/5I37iVCDUTU) |
-| Day 4 | Docker
Docker is a tool for containerizing your applications so that they can run on any platform! It is one of the most important tools used in the industry as it saves a lot of time. Check : [What is Docker?](https://www.freecodecamp.org/news/what-is-docker-used-for-a-docker-container-tutorial-for-beginners/), [Docker Tutorial](https://www.youtube.com/watch?v=pTFZFxd4hOI&t=27s) |
-| Day 5 | Deployment
Now it’s time to deploy your application to a server with everything we have learnt! DigitalOcean is a very good and economical service to do the same.
[In Depth guide to deploy a webapp on DigitalOcean with docker and Github Actions](https://www.youtube.com/watch?v=JsOoUrII3EY) |
-| Day 6 | Deployment
[Deployment Guide - Part 2](https://www.youtube.com/watch?v=hf8wUUrGCgU)
(NOTE: DigitalOcean is a paid service so you don’t need to actually host your website there you can use heroku). |
-| Day 7 | Kubernetes
Kubernetes is a service designed by Google which is used to manage and deploy multiple containers.
[Kubernetes Academy](https://kube.academy/) |
+| Day 1 | **Basics**
***Choosing an operating system***
We know most of you come from a windows or a mac background but when it comes to deevelopment you gotta go for a LINUX or UNIX based operating system. There are a lot of options out there but the most popular ones are UBUNTU, DEBIAN, FEDORA, ARCH, etc. We are not suggesting just shifting from your previous OS, start by dual booting it onto your machine and then slowly make it your daily driver. To get started read this [article](https://ledutokens.medium.com/get-started-with-linux-a-beginners-guide-9ba69b8be53c).
***Using a terminal***
A terminal is simply a text-based interface to the computer, it is used to interact with your computer system via CLI (command line interface). Everything you want to do can be achieved using the terminal and to become a good developer you must learn to live in the terminal. [Here's](https://ubuntu.com/tutorials/command-line-for-beginners#1-overview) a good article to get you started.|
+| Day 2 | **Git**
Git is an important version control tool, it is used a lot in the industry. As a developer you must know how to use it.
Let’s start by installing git,
For windows, refer [here](https://nerdschalk.com/how-to-install-and-use-git-on-windows-11/) \| For Linux, refer [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
Before starting, it is really helpful to get familiar with the terminal, [shell tutorial](https://www.youtube.com/watch?v=Zl7npywCB84). Most commands you see here will also work on windows powershell.
You can learn more about here : [Git Video Tutorial](https://www.youtube.com/watch?v=IHaTbJPdB-s), [Blog on Git](https://jwiegley.github.io/git-from-the-bottom-up/)
**Git+Github**
Github is a platform where you can keep your code for the world to see! Is also used when multiple people have to contribute to a project.
[What If you mess up?](https://ohshitgit.com/)
To get started with github, we suggest making an account with the IITK email id to avail the student pack, which comes with a lot of benefits. To learn about github, the official docs are a great place to start [Github Docs](https://docs.github.com/en/get-started/quickstart/hello-world).
Also, to get started you need to set up an SSH key, follow [this tutorial](https://www.youtube.com/watch?v=WgZIv5HI44o).
Learn more from here: [Git + Github](https://www.youtube.com/watch?v=HkdAHXoRtos), [Learn git branching](https://learngitbranching.js.org/) |
+| Day 3 | **Github Actions**
Now that you know about github, it is time to implement some CI/CD using github actions.
[What is CI/CD](https://www.youtube.com/watch?v=scEDHsr3APg&t=14s)
[Workflow for a React App](https://youtu.be/5I37iVCDUTU) |
+| Day 4 | **Network Security and Protocols**
As a DevOps engineer you will need to understand the basics of networking protocols, how they work, and how they are used in the real world. To get you started, you should learn about, [TCP/IP](https://www.geeksforgeeks.org/tcp-ip-model/), [HTTP](https://www.geeksforgeeks.org/http-full-form/), [HTTPS](https://www.geeksforgeeks.org/explain-working-of-https/), [FTP](https://www.geeksforgeeks.org/file-transfer-protocol-ftp-in-application-layer/), [SSH](https://www.geeksforgeeks.org/introduction-to-sshsecure-shell-keys/), [SMTP](https://www.geeksforgeeks.org/simple-mail-transfer-protocol-smtp/).
**Web Testing**
Web testing is a software testing technique to test web applications or websites for finding errors and bugs. A web application must be tested properly before it goes to the end-users. Also, testing a web application does not only mean finding common bugs or errors but also testing the quality-related risks associated with the application. [Here](https://usersnap.com/blog/web-application-testing/) is a good resource to get you started. Keep in mind testing is one of the most important aspects of web development and you will keep learning new methods of testing as go along.|
+| Day 5 | **Docker**
Docker is a tool for containerizing your applications so that they can run on any platform! It is one of the most important tools used in the industry as it saves a lot of time. Check : [What is Docker?](https://www.freecodecamp.org/news/what-is-docker-used-for-a-docker-container-tutorial-for-beginners/), [Docker Tutorial](https://www.youtube.com/watch?v=pTFZFxd4hOI&t=27s) |
+| Day 6 | **Deployment**
Now it’s time to deploy your application to a server with everything we have learnt! DigitalOcean is a very good and economical service to do the same.
[In Depth guide to deploy a webapp on DigitalOcean with docker and Github Actions](https://www.youtube.com/watch?v=JsOoUrII3EY) |
+| Day 7 | **Kubernetes**
Kubernetes is a service designed by Google which is used to manage and deploy multiple containers.
[Kubernetes Academy](https://kube.academy/) |
+
+
+
+**Extra Resources**
+We have covered all the necessary resources needed to get you started on your journey as a web developer but there's still a lot more to go but don't worry. The best way to master all these concepts is to just practice and if you ever feel stuck feel free to contact us. We are providing a link of lists that would help you out a lot on your journey of mastering the web.
+* [Web Dev Resources 1](https://web-dev-resources.com/#/)
+* [Web Dev Resources 2](https://github.com/iamismile/web-dev-resources)
+* [Tutorial on MERN stack](https://www.youtube.com/watch?v=K8YELRmUb5o&pp=ygUTbWVybiBmdWxsIHN0YWNrIGFwcA%3D%3D)
+* [Tutorial on Django](https://www.youtube.com/watch?v=rHux0gMZ3Eg&pp=ygUPZGphbmdvIHR1dG9yaWFs)
+* [A few advanced practices](https://muhammedcuma.medium.com/mastering-advanced-web-development-techniques-tools-and-best-practices-36376a949914)
+* [The Odin Project ](https://www.theodinproject.com/)(Covers almost everything from the most basic to advanced stuff)
+
+One last thing that we want to leave you with is choosing the right database for your application. Database are one of the integral parts of your application and deciding on one can be a hassle as you move forward. [Here](https://www.geeksforgeeks.org/which-database-you-should-choose-for-web-developement/) is a good article to read if you want to get an idea.
+
+
**What’s Next?**
+Now that we are familiar with both frontend and backend you can now start making websites and choose a stack to work with. We have given you a lot of options but there are still a lot more out there. The most popular stacks are MERN, MEAN, Ruby on Rails, GO+React and DJANGO.
+
The world of development is vast and there is a lot to explore, this roadmap is in fact just a beginning in your development journey. If you are interested, we suggest you learn more about Next.js(briefly mentioned in week4), MongoDB(a NoSql database), firebase, APIs, Regular Expressions and PostGre(another SQL database, but much more advanced and prevalent in the industry).
Web Development is a gateway to a lot of opportunities in Open Source. The huge benefit of contributing to open source is that you can network with other developers. This means that you'll meet new people and make friends, collaborate with other developers on projects, find mentors and have an opportunity to learn from each other. [Here](https://www.geeksforgeeks.org/best-open-source-programs-for-students-to-participate/amp/) is a list of competitions for students. We wish you all the best for your journey in web development!
@@ -137,3 +165,4 @@ Web Development is a gateway to a lot of opportunities in Open Source. The huge
- Ankush Yadav 9024503686
- Rahul Jha 8700367670
- Shivam Mishra 8604397668
+- Abhimanyu Solanki 8218196261
diff --git a/_posts/2024-07-21-cp-roadmap.html b/_posts/2024-07-21-cp-roadmap.html
index 13ec14c..b155431 100644
--- a/_posts/2024-07-21-cp-roadmap.html
+++ b/_posts/2024-07-21-cp-roadmap.html
@@ -2330,797 +2330,1369 @@
}
}
-
-header,footer, .search, .footer-widgets, .post-head {
-
- .block {
- display: block
-}
-
-.inline-block {
- display: inline-block
+.header__inner {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap
}
-.inline {
- display: inline
-}
-.show {
- display: block
+.logo__link {
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ font-size: 28px;
+ line-height: 1;
+ font-weight: 900;
+ vertical-align: middle;
+ color: #eee;
+ text-transform: uppercase;
+ text-decoration: none;
+ letter-spacing: -1px
}
-.hide {
- display: none
+.logo__link:hover {
+ color: #ff7b7b
}
-.invisible {
- visibility: hidden
+.logo__image {
+ max-height: 40px
}
-.list-reset {
- list-style-type: none;
- margin: 0;
- padding: 0
+.main-nav {
+ width: 100%;
+ max-width: 1300px;
+ margin: 0 auto
}
-.clearfix::after,
-.clearfix ::before {
- content: "";
- display: table;
- clear: both
+.main-nav__box {
+ display: flex;
+ align-items: center;
+ width: 80%;
+ padding-top: 200px;
+ margin: 0 auto
}
-.screen-reader-text {
- clip: rect(1px, 1px, 1px, 1px);
- height: 1px;
- overflow: hidden;
- position: absolute !important;
- width: 1px;
- word-wrap: normal !important
+.main-nav__box .nav__icon-close {
+ position: absolute;
+ top: 20px;
+ right: 40px;
+ z-index: 5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 30px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ color: rgba(255, 255, 255, .5);
+ transition: all .25s ease;
+ cursor: pointer
}
-html {
- /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
- line-height: 1.15;
- -webkit-text-size-adjust: 100%
+.main-nav__box .nav__icon-close:hover {
+ color: #fff
}
-body {
- margin: 0
-}
+@media only screen and (max-width: 768px) {
+ .main-nav__box {
+ padding-top: 100px
+ }
-h1 {
- font-size: 2em;
- margin: .67em 0
+ .main-nav__box .nav__icon-close {
+ top: 22px;
+ right: 42px
+ }
}
-hr {
- box-sizing: content-box;
- height: 0;
- overflow: visible
+@media only screen and (max-width: 576px) {
+ .main-nav__box {
+ width: 90%
+ }
}
-pre {
- font-family: monospace, monospace;
- font-size: 1em
+.navigation {
+ display: flex;
+ align-items: center
}
-a {
- background-color: rgba(0, 0, 0, 0)
+.top-nav .nav__list .nav__item {
+ display: inline-block;
+ margin-right: 40px
}
-abbr[title] {
- border-bottom: none;
- text-decoration: underline;
- text-decoration: underline dotted
+.top-nav .nav__list .nav__item:last-child {
+ margin-right: 0
}
-b,
-strong {
- font-weight: bolder
+.top-nav .nav__list .nav__item .nav__link {
+ position: relative;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ text-decoration: none;
+ color: #eee
}
-code,
-kbd,
-samp {
- font-family: monospace, monospace;
- font-size: 1em
+.top-nav .nav__list .nav__item .nav__link:hover {
+ color: #ff7b7b
}
-small {
- font-size: 80%
+@media only screen and (max-width: 992px) {
+ .top-nav {
+ display: none
+ }
}
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline
+.mobile-nav .nav__list .nav__item {
+ display: block;
+ margin-bottom: 36px;
+ text-align: center
}
-sub {
- bottom: -0.25em
+.mobile-nav .nav__list .nav__item:last-child {
+ margin-bottom: 0
}
-sup {
- top: -0.5em
+.mobile-nav .nav__list .nav__item .nav__link {
+ position: relative;
+ font-size: 18px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ color: #eee
}
-img {
- border-style: none
+.mobile-nav .nav__list .nav__item .nav__link:hover {
+ color: #ff7b7b
}
-button,
-input,
-optgroup,
-select,
-textarea {
- font-family: inherit;
- font-size: 100%;
- line-height: 1.15;
- margin: 0
+@media only screen and (max-width: 576px) {
+ .mobile-nav .nav__list .nav__item {
+ margin-bottom: 28px
+ }
}
-button,
-input {
- overflow: visible
+.nav-buttons {
+ display: flex;
+ align-items: center;
+ font-size: 24px;
+ color: #eee
}
-button,
-select {
- text-transform: none
+.nav-buttons .search-button {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ transition: all .2s
}
-button,
-[type=button],
-[type=reset],
-[type=submit] {
- -webkit-appearance: button
+.nav-buttons .search-button span {
+ transition: all .2s
}
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
- border-style: none;
- padding: 0
+.nav-buttons .search-button:hover span {
+ color: #ff7b7b
}
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
- outline: 1px dotted ButtonText
+.nav-buttons .search-button span {
+ display: block;
+ margin-left: 8px;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase
}
-fieldset {
- padding: .35em .75em .625em
+@media only screen and (max-width: 992px) {
+ .nav-buttons .search-button span {
+ display: none
+ }
}
-legend {
- box-sizing: border-box;
- color: inherit;
- display: table;
- max-width: 100%;
- padding: 0;
- white-space: normal
+.nav-buttons .nav__icon-menu {
+ display: none;
+ margin-right: 16px
}
-progress {
- vertical-align: baseline
+@media only screen and (max-width: 992px) {
+ .nav-buttons .nav__icon-menu {
+ display: block
+ }
}
-textarea {
- overflow: auto
+.nav-buttons .nav__icon {
+ cursor: pointer
}
-[type=checkbox],
-[type=radio] {
- box-sizing: border-box;
- padding: 0
-}
-
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
- height: auto
+.menu-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 100;
+ opacity: 0;
+ visibility: hidden;
+ background-color: #09080f;
+ transition: all .5s ease-in-out
}
-[type=search] {
- -webkit-appearance: textfield;
- outline-offset: -2px
+.menu-overlay.is-open {
+ opacity: 1;
+ visibility: visible
}
-[type=search]::-webkit-search-decoration {
- -webkit-appearance: none
+@supports(-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+ .menu-overlay {
+ -webkit-backdrop-filter: saturate(180%) blur(24px);
+ backdrop-filter: saturate(180%) blur(24px);
+ background-color: rgba(9, 8, 15, .9)
+ }
}
-::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit
+@media only screen and (min-width: 992px) {
+ .menu-overlay {
+ display: none
+ }
}
-details {
- display: block
+.nav-grid {
+ width: 100%;
+ height: 75vh;
+ overflow-y: auto
}
-summary {
- display: list-item
+.nav-grid__item {
+ margin-bottom: 30px
}
-template {
- display: none
+@media only screen and (max-width: 768px) {
+ .nav-grid__item {
+ height: auto
+ }
}
-[hidden] {
- display: none
+.nav-grid__title {
+ position: relative;
+ margin-bottom: 48px;
+ padding-bottom: 15px;
+ font-size: 40px;
+ text-align: center;
+ color: #eee
}
-li>ul,
-li>ol {
- margin-bottom: 0
+.nav-grid__title::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, -50%);
+ display: block;
+ width: 25px;
+ height: 2px;
+ background-color: #fff
}
-table {
- border-collapse: collapse;
- border-spacing: 0
+@media only screen and (max-width: 768px) {
+ .nav-grid__title {
+ margin-bottom: 30px
+ }
}
-ul,
-ol,
-dd {
- margin-left: 20px
+.search__box {
+ position: relative;
+ max-width: 540px;
+ width: 100%;
+ margin: 0 auto;
+ padding-top: 140px
}
-.highlight {
- border-radius: 4px;
- color: #fff;
- background: #17151e
+.search__box .search__close {
+ position: absolute;
+ top: 50%;
+ right: 24px;
+ transform: translateY(-50%);
+ font-size: 30px;
+ line-height: 1;
+ color: rgba(238, 238, 238, .5);
+ transition: all .25s;
+ cursor: pointer
}
-.highlighter-rouge .highlight {
- background: #eef
+.search__box .search__close:hover {
+ color: #eee
}
-.highlight .c {
- color: #998;
- font-style: italic
+@media only screen and (max-width: 768px) {
+ .search__box {
+ width: 80%;
+ padding-top: 100px
+ }
}
-.highlight .err {
- color: #a61717;
- background-color: #e3d2d2
+@media only screen and (max-width: 576px) {
+ .search__box {
+ width: 90%
+ }
}
-.highlight .k {
- font-weight: bold
+.search__group {
+ position: relative;
+ margin-bottom: 64px
}
-.highlight .o {
- font-weight: bold
+.search__group .search__text {
+ width: 100%;
+ height: auto;
+ padding: 16px 24px;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ font-size: 24px;
+ font-weight: 900;
+ line-height: 42px;
+ border-radius: 8px;
+ border: 4px solid rgba(238, 238, 238, .1);
+ transition: all .3s;
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0)
}
-.highlight .cm {
- color: #998;
- font-style: italic
+.search__group .search__text::-webkit-input-placeholder {
+ font-weight: 900;
+ color: rgba(238, 238, 238, .8)
}
-.highlight .cp {
- color: #999;
- font-weight: bold
+.search__group .search__text::placeholder {
+ font-weight: 900;
+ color: rgba(238, 238, 238, .8)
}
-.highlight .c1 {
- color: #998;
- font-style: italic
+.search__group .search__text::-ms-clear {
+ display: none
}
-.highlight .cs {
- color: #999;
- font-weight: bold;
- font-style: italic
+.search__group .search__text:focus {
+ color: #eee;
+ background: #09080f
}
-.highlight .gd {
- color: #000;
- background-color: #fdd
+@media only screen and (max-width: 576px) {
+ .search__group .search__text {
+ font-size: 26px
+ }
}
-.highlight .gd .x {
- color: #000;
- background-color: #faa
+.search-results-list .no-results {
+ width: 100%;
+ list-style: none
}
-.highlight .ge {
- font-style: italic
+.search-results-list .no-results h3 {
+ font-size: 28px;
+ text-align: center
}
-.highlight .gr {
- color: #a00
+.load-more {
+ margin: 0 auto
}
-.highlight .gh {
- color: #999
+.load-more-section {
+ margin: 30px auto;
+ text-align: center
}
-.highlight .gi {
- color: #000;
- background-color: #dfd
+@media only screen and (max-width: 576px) {
+ .load-more-section {
+ margin: 20px auto
+ }
}
-.highlight .gi .x {
- color: #000;
- background-color: #afa
+.widget {
+ margin-bottom: 40px
}
-.highlight .go {
- color: #888
+@media only screen and (max-width: 768px) {
+ .widget {
+ margin-bottom: 64px
+ }
}
-.highlight .gp {
- color: #555
+.widget__title {
+ position: relative;
+ padding-left: 8px;
+ margin-bottom: 36px;
+ font-size: 24px;
+ line-height: 1;
+ color: #fff
}
-.highlight .gs {
- font-weight: bold
+.widget__title::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ z-index: -1;
+ transform: translateY(-50%);
+ display: block;
+ width: 106px;
+ height: 38px;
+ border-radius: 4px 0px 0px 4px;
+ background: linear-gradient(90deg, #ff7b7b -5.19%, rgba(15, 14, 21, 0) 100%)
}
-.highlight .gu {
- color: #fff
+@media only screen and (max-width: 992px) {
+ .widget__title {
+ font-size: 24px
+ }
}
-.highlight .gt {
- color: #a00
+.recent-posts {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px
}
-.highlight .kc {
- font-weight: bold
+.recent-posts:last-child {
+ margin-bottom: 0
}
-.highlight .kd {
- font-weight: bold
+@media only screen and (max-width: 360px) {
+ .recent-posts {
+ flex-wrap: wrap;
+ margin-bottom: 32px
+ }
}
-.highlight .kp {
- font-weight: bold
+.recent-posts__image {
+ position: relative;
+ display: block;
+ width: 100%;
+ max-width: 174px;
+ height: 144px;
+ margin-right: 20px;
+ border-radius: 16px;
+ overflow: hidden;
+ background: #09080f
}
-.highlight .kr {
- font-weight: bold
+.recent-posts__image img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 16px;
+ object-fit: cover
}
-.highlight .kt {
- color: #458;
- font-weight: bold
+@media only screen and (max-width: 360px) {
+ .recent-posts__image {
+ height: auto;
+ max-width: 100%;
+ padding-top: 56.6%;
+ margin: 0 0 20px
+ }
}
-.highlight .m {
- color: #099
+.recent-posts__content .recent-posts__title {
+ font-size: 18px;
+ margin: 8px 0
}
-.highlight .s {
- color: #d85858
+.recent-posts__content .article__author-image {
+ width: 28px;
+ height: 28px
}
-.highlight .na {
- color: teal
+.tag__cloud {
+ display: flex;
+ flex-wrap: wrap
}
-.highlight .nb {
- color: #0086b3
+.tag__cloud a {
+ display: inline-block;
+ padding: 8px 16px;
+ margin: 0 5px 5px 0;
+ font-size: 12px;
+ line-height: 10px;
+ font-weight: 700;
+ border: 3px solid rgba(255, 255, 255, .1);
+ border-radius: 24px;
+ color: #aaa
}
-.highlight .nc {
- color: #458;
- font-weight: bold
+.tag__cloud a:hover {
+ border-color: #ff7b7b;
+ color: #fff
}
-.highlight .no {
- color: teal
+.subscribe-subtitle {
+ width: 100%;
+ margin-bottom: 24px;
+ font-size: 16px;
+ line-height: 24px;
+ color: #aaa
}
-.highlight .ni {
- color: purple
+.subscribe-group-top {
+ display: flex;
+ align-items: center
}
-.highlight .ne {
- color: #900;
- font-weight: bold
+.subscribe-group-top .subscribe-email {
+ position: relative;
+ width: 100%;
+ height: 56px;
+ padding: 20px;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 700;
+ border-radius: 8px;
+ color: #fff;
+ background-color: #17151e;
+ border: 2px solid rgba(0, 0, 0, 0);
+ outline: 0;
+ -webkit-appearance: none;
+ box-sizing: border-box;
+ transition: border-color .2s ease-in-out;
+ cursor: text
}
-.highlight .nf {
- color: #900;
- font-weight: bold
+.subscribe-group-top .subscribe-email::placeholder {
+ color: #eee
}
-.highlight .nn {
- color: #555
+.subscribe-group-top .subscribe-email:focus {
+ color: #fff;
+ border-color: #ff7b7b
}
-.highlight .nt {
- color: #6565ff
+.subscribe-group-top .subscribe-button {
+ margin-left: 10px
}
-.highlight .nv {
- color: teal
+.copyright {
+ font-size: 13px;
+ color: #aaa
}
-.highlight .ow {
- font-weight: bold
+.copyright a {
+ font-weight: 500;
+ color: #fff
}
-.highlight .w {
- color: #bbb
+.copyright a:hover {
+ color: #ff7b7b
}
-.highlight .mf {
- color: #099
+.social {
+ text-align: center
}
-.highlight .mh {
- color: #099
+.social .social__list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center
}
-.highlight .mi {
- color: #099
+.social .social__item {
+ display: inline-block;
+ margin-left: 8px
}
-.highlight .mo {
- color: #099
+.social .social__item:first-child {
+ margin-left: 0
}
-.highlight .sb {
- color: #d85858
+.social .social__link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ font-size: 16px;
+ line-height: 40px;
+ border-radius: 8px;
+ color: #fff;
+ background-color: #17151e
}
-.highlight .sc {
- color: #d85858
+.social .social__link:hover {
+ color: #09080f;
+ background-color: #ff7b7b
}
-.highlight .sd {
- color: #d85858
-}
+@media only screen and (max-width: 992px) {
+ .social {
+ margin-bottom: 5px
+ }
-.highlight .s2 {
- color: #d85858
-}
+ .social .social__item {
+ margin-bottom: 10px
+ }
-.highlight .se {
- color: #d85858
+ .social .social__link {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-size: 16px
+ }
}
-.highlight .sh {
- color: #d85858
+.post-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 16px;
+ object-fit: cover
}
-.highlight .si {
- color: #d85858
+.image-box {
+ position: relative;
+ padding-top: 90%;
+ min-height: 280px;
+ border-radius: 16px;
+ overflow: hidden;
+ box-shadow: 0 5px 10px 0px rgba(0, 0, 0, .15);
+ background-color: #09080f
}
-.highlight .sx {
- color: #d85858
+@media only screen and (max-width: 768px) {
+ .image-box {
+ padding-top: 65%;
+ margin-bottom: 40px
+ }
}
-.highlight .sr {
- color: #009926
+.post__meta {
+ line-height: 13px
}
-.highlight .s1 {
- color: #d85858
+.post__meta .post__date,
+.post__meta .post__minutes {
+ font-size: 13px;
+ line-height: 1;
+ font-weight: 500
}
-.highlight .ss {
- color: #990073
+.post__meta .post__minutes{
+ color: #fff;
}
-.highlight .bp {
- color: #999
+.post__meta .post__date {
+ color: #aaa
}
-.highlight .vc {
- color: teal
+.post__title {
+ margin: 20px 0 20px;
+ font-size: 56px;
+ line-height: 1;
+ color: white;
}
-.highlight .vg {
- color: teal
+@media only screen and (max-width: 1200px) {
+ .post__title {
+ font-size: 40px
+ }
}
-.highlight .vi {
- color: teal
+@media only screen and (max-width: 576px) {
+ .post__title {
+ font-size: 32px
+ }
}
-.highlight .il {
- color: #099
+.post__bottom {
+ display: flex;
+ align-items: center;
+ font-size: 13px;
+ line-height: 30px;
+ font-weight: 500;
+ color: #fff
}
-.container {
- max-width: 1340px;
- padding-left: 20px;
- padding-right: 20px;
- margin: 0 auto
+.post-tags .post__tag {
+ padding: 4px 8px;
+ margin: 2px 0;
+ font-size: 12px;
+ line-height: 10px;
+ font-weight: 700;
+ border: 2px solid rgba(255, 255, 255, .2);
+ border-radius: 24px;
+ color: #aaa
}
-.container-big {
- max-width: 1600px;
- padding-left: 20px;
- padding-right: 20px;
- margin: 0 auto
+.post-tags .post__tag:hover {
+ color: #fff;
+ border-color: #ff7b7b
}
-.row {
- display: flex;
- flex-wrap: wrap;
- flex: 0 1 auto;
- flex-direction: row;
- box-sizing: border-box;
- margin-left: -16px;
- margin-right: -16px
+.post__author {
+ float: left;
+ flex-shrink: 0
}
-.col {
- padding-left: 16px;
- padding-right: 16px
+.post__author-image {
+ position: relative;
+ display: inline-block;
+ width: 36px;
+ height: 36px;
+ padding: 3px;
+ margin-right: 8px;
+ border: 2px solid #ff7b7b;
+ border-radius: 50%;
+ overflow: hidden
}
-[class^=col-] {
- flex: auto
+.post__author-image img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover
}
-.col-0 {
- width: 0%
+.post__author-link {
+ font-size: 13px;
+ color: #fff
}
-.col-1 {
- width: 8.3333333333%
+.post__author-link:hover {
+ color: #fff
}
-.col-2 {
- width: 16.6666666667%
+.post__author span {
+ color: rgba(255, 255, 255, .8)
}
-.col-3 {
- width: 25%
+.post__content,
+.page__content {
+ color: #aaa
}
-.col-4 {
- width: 33.3333333333%
+.post__content a,
+.page__content a {
+ border-bottom: 2px solid rgba(238, 238, 238, .1)
}
-.col-5 {
- width: 41.6666666667%
+.post__content a:hover,
+.page__content a:hover {
+ border-color: #ff7b7b;
+ color: #eee;
+ text-decoration: none
}
-.col-6 {
- width: 50%
+.post__share {
+ display: flex;
+ justify-content: center;
+ margin: 64px 0
}
-.col-7 {
- width: 58.3333333333%
+.post__share .share__list {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 16px;
+ background: #17151e
}
-.col-8 {
- width: 66.6666666667%
+.post__share .share__list .share__link {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 28px 24px;
+ font-size: 20px;
+ color: #eee;
+ transition: all .2s
}
-.col-9 {
- width: 75%
+.post__share .share__list .share__link:first-child {
+ padding-left: 48px
}
-.col-10 {
- width: 83.3333333333%
+.post__share .share__list .share__link:first-child::after {
+ content: none
}
-.col-11 {
- width: 91.6666666667%
+.post__share .share__list .share__link:last-child {
+ padding-right: 48px
}
-.col-12 {
- width: 100%
+.post__share .share__list .share__link::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ display: block;
+ width: 1px;
+ height: 12px;
+ background: rgba(238, 238, 238, .08)
}
-.push-0 {
- margin-left: 0%
+.post__share .share__list .share__link:hover {
+ color: #ff7b7b
}
-.push-1 {
- margin-left: 8.3333333333%
-}
+@media only screen and (max-width: 576px) {
+ .post__share {
+ margin: 48px 0
+ }
-.push-2 {
- margin-left: 16.6666666667%
-}
+ .post__share .share__list .share__link {
+ padding: 24px 20px
+ }
-.push-3 {
- margin-left: 25%
-}
+ .post__share .share__list .share__link:first-child {
+ padding-left: 40px
+ }
-.push-4 {
- margin-left: 33.3333333333%
+ .post__share .share__list .share__link:last-child {
+ padding-right: 40px
+ }
}
-.push-5 {
- margin-left: 41.6666666667%
+.post__navigation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 64px;
+ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
+ border-radius: 16px
}
-.push-6 {
- margin-left: 50%
+.post__navigation .prev,
+.post__navigation .prev img {
+ border-radius: 16px 0 0 16px
}
-.push-7 {
- margin-left: 58.3333333333%
+.post__navigation .next,
+.post__navigation .next img {
+ border-radius: 0 16px 16px 0
}
-.push-8 {
- margin-left: 66.6666666667%
+.post__navigation .prev,
+.post__navigation .next {
+ position: relative;
+ display: flex;
+ align-items: flex-end;
+ width: 100%;
+ min-height: 240px;
+ padding: 0 32px 32px;
+ overflow: hidden;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-color: #09080f;
+ user-select: none
}
-.push-9 {
- margin-left: 75%
+.post__navigation .prev::after,
+.post__navigation .next::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(9, 8, 15, .6);
+ pointer-events: none;
+ transition: .25s
}
-.push-10 {
- margin-left: 83.3333333333%
+.post__navigation .prev:hover::after,
+.post__navigation .next:hover::after {
+ background-color: rgba(9, 8, 15, .7)
}
-.push-11 {
- margin-left: 91.6666666667%
+.post__navigation .prev .post__nav,
+.post__navigation .next .post__nav {
+ display: inline-block;
+ margin-bottom: 8px;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ color: #eee
}
-.push-12 {
- margin-left: 100%
+.post__navigation .prev .post__nav-image,
+.post__navigation .next .post__nav-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover
}
-.pull-0 {
- margin-right: 0%
+.post__navigation .prev .post__nav-box,
+.post__navigation .next .post__nav-box {
+ position: relative;
+ z-index: 1;
+ width: 100%
}
-.pull-1 {
- margin-right: 8.3333333333%
+.post__navigation .prev .post__nav__prev i,
+.post__navigation .next .post__nav__prev i {
+ margin-right: 4px
}
-.pull-2 {
- margin-right: 16.6666666667%
+.post__navigation .prev .post__nav__next i,
+.post__navigation .next .post__nav__next i {
+ margin-left: 4px
}
-.pull-3 {
- margin-right: 25%
+.post__navigation .prev .post__nav__title,
+.post__navigation .next .post__nav__title {
+ margin-bottom: 0;
+ font-size: 24px;
+ line-height: 1
}
-.pull-4 {
- margin-right: 33.3333333333%
+.post__navigation .prev .post__nav__title a,
+.post__navigation .next .post__nav__title a {
+ color: #eee
}
-.pull-5 {
- margin-right: 41.6666666667%
+.post__navigation .next {
+ text-align: right;
+ margin-left: auto
}
-.pull-6 {
- margin-right: 50%
-}
+@media only screen and (max-width: 768px) {
+ .post__navigation {
+ flex-wrap: wrap;
+ box-shadow: none
+ }
-.pull-7 {
- margin-right: 58.3333333333%
+ .post__navigation .prev,
+ .post__navigation .next {
+ width: 100%;
+ border-radius: 16px;
+ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5)
+ }
+
+ .post__navigation .prev img,
+ .post__navigation .next img {
+ border-radius: 16px
+ }
+
+ .post__navigation .prev {
+ margin-bottom: 20px
+ }
}
-.pull-8 {
- margin-right: 66.6666666667%
+@media only screen and (max-width: 576px) {
+ .post__navigation {
+ margin-bottom: 48px
+ }
}
-.pull-9 {
- margin-right: 75%
+.related-posts {
+ display: none
}
-.pull-10 {
- margin-right: 83.3333333333%
+.related-posts.is-related {
+ display: block
}
-.pull-11 {
- margin-right: 91.6666666667%
+.related-posts .related-title {
+ position: relative;
+ padding-left: 8px;
+ margin-bottom: 36px;
+ font-size: 24px;
+ line-height: 1;
+ color: #fff
}
-.pull-12 {
- margin-right: 100%
+.related-posts .related-title::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ z-index: -1;
+ transform: translateY(-50%);
+ display: block;
+ width: 106px;
+ height: 38px;
+ border-radius: 4px 0px 0px 4px;
+ background: linear-gradient(90deg, #ff7b7b -5.19%, rgba(15, 14, 21, 0) 100%)
}
-@media(max-width: 992px) {
- .col-d-0 {
- width: 0%
+@media only screen and (max-width: 992px) {
+ .related-posts .related-title {
+ font-size: 24px
}
+}
- .col-d-1 {
- width: 8.3333333333%
- }
+.disqus-inner {
+ border-radius: 16px;
+ background: #17151e
+}
- .col-d-2 {
- width: 16.6666666667%
- }
+.post-comments {
+ max-width: 824px;
+ padding: 64px 32px;
+ margin: 0 auto
+}
- .col-d-3 {
- width: 25%
+@media only screen and (max-width: 576px) {
+ .post-comments {
+ padding: 48px 32px
}
+}
- .col-d-4 {
- width: 33.3333333333%
- }
+.archive-box {
+ position: relative;
+ margin: 50px 0 80px;
+ text-align: center
+}
- .col-d-5 {
- width: 41.6666666667%
+@media only screen and (max-width: 576px) {
+ .archive-box {
+ margin: 20px 0 50px
}
+}
- .col-d-6 {
- width: 50%
- }
+.archive-meta {
+ font-size: 16px;
+ color: rgba(238, 238, 238, .6)
+}
- .col-d-7 {
- width: 58.3333333333%
- }
+.archive-title {
+ position: relative;
+ margin: 0;
+ font-size: 47px;
+ line-height: 57px
+}
- .col-d-8 {
- width: 66.6666666667%
+@media only screen and (max-width: 576px) {
+ .archive-title {
+ font-size: 40px;
+ line-height: 52px
}
+}
- .col-d-9 {
- width: 75%
- }
+.archive-description {
+ max-width: 600px;
+ margin: 10px auto 0;
+ font-size: 16px;
+ line-height: 32px
+}
- .col-d-10 {
- width: 83.3333333333%
+@media only screen and (max-width: 576px) {
+ .archive-description {
+ margin: 5px auto 0;
+ line-height: 28px
}
+}
- .col-d-11 {
- width: 91.6666666667%
- }
+.form__group {
+ margin-bottom: 20px
+}
- .col-d-12 {
- width: 100%
- }
+.form__input {
+ width: 100%;
+ padding: 20px;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ font-size: 16px;
+ font-weight: 700;
+ border: 2px solid rgba(0, 0, 0, 0);
+ border-radius: 8px;
+ color: #eee;
+ background: #17151e;
+ transition: border-color .2s ease-in-out
+}
- .push-d-0 {
- margin-left: 0%
- }
+.form__input::placeholder {
+ color: #fff
+}
- .push-d-1 {
- margin-left: 8.3333333333%
- }
+.form__input:focus {
+ border-color: #ff7b7b
+}
- .push-d-2 {
- margin-left: 16.6666666667%
- }
- .push-d-3 {
- margin-left: 25%
- }
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ flex: 0 1 auto;
+ flex-direction: row;
+ box-sizing: border-box;
+ margin-left: -16px;
+ margin-right: -16px
+}
- .push-d-4 {
- margin-left: 33.3333333333%
- }
+.col {
+ padding-left: 16px;
+ padding-right: 16px
+}
- .push-d-5 {
- margin-left: 41.6666666667%
- }
+[class^=col-] {
+ flex: auto
+}
- .push-d-6 {
- margin-left: 50%
- }
+.col-0 {
+ width: 0%
+}
- .push-d-7 {
- margin-left: 58.3333333333%
- }
+.col-1 {
+ width: 8.3333333333%
+}
- .push-d-8 {
- margin-left: 66.6666666667%
- }
+.col-2 {
+ width: 16.6666666667%
+}
- .push-d-9 {
- margin-left: 75%
- }
+.col-3 {
+ width: 25%
+}
- .push-d-10 {
- margin-left: 83.3333333333%
- }
+.col-4 {
+ width: 33.3333333333%
+}
- .push-d-11 {
- margin-left: 91.6666666667%
+.col-5 {
+ width: 41.6666666667%
+}
+
+.col-6 {
+ width: 50%
+}
+
+.col-7 {
+ width: 58.3333333333%
+}
+
+.col-8 {
+ width: 66.6666666667%
+}
+
+.col-9 {
+ width: 75%
+}
+
+.col-10 {
+ width: 83.3333333333%
+}
+
+.col-11 {
+ width: 91.6666666667%
+}
+
+.col-12 {
+ width: 100%
+}
+
+.push-0 {
+ margin-left: 0%
+}
+
+.push-1 {
+ margin-left: 8.3333333333%
+}
+
+.push-2 {
+ margin-left: 16.6666666667%
+}
+
+.push-3 {
+ margin-left: 25%
+}
+
+.push-4 {
+ margin-left: 33.3333333333%
+}
+
+.push-5 {
+ margin-left: 41.6666666667%
+}
+
+.push-6 {
+ margin-left: 50%
+}
+
+.push-7 {
+ margin-left: 58.3333333333%
+}
+
+.push-8 {
+ margin-left: 66.6666666667%
+}
+
+.push-9 {
+ margin-left: 75%
+}
+
+.push-10 {
+ margin-left: 83.3333333333%
+}
+
+.push-11 {
+ margin-left: 91.6666666667%
+}
+
+.push-12 {
+ margin-left: 100%
+}
+
+.pull-0 {
+ margin-right: 0%
+}
+
+.pull-1 {
+ margin-right: 8.3333333333%
+}
+
+.pull-2 {
+ margin-right: 16.6666666667%
+}
+
+.pull-3 {
+ margin-right: 25%
+}
+
+.pull-4 {
+ margin-right: 33.3333333333%
+}
+
+.pull-5 {
+ margin-right: 41.6666666667%
+}
+
+.pull-6 {
+ margin-right: 50%
+}
+
+.pull-7 {
+ margin-right: 58.3333333333%
+}
+
+.pull-8 {
+ margin-right: 66.6666666667%
+}
+
+.pull-9 {
+ margin-right: 75%
+}
+
+.pull-10 {
+ margin-right: 83.3333333333%
+}
+
+.pull-11 {
+ margin-right: 91.6666666667%
+}
+
+.pull-12 {
+ margin-right: 100%
+}
+
+@media(max-width: 992px) {
+ .col-d-0 {
+ width: 0%
+ }
+
+ .col-d-1 {
+ width: 8.3333333333%
+ }
+
+ .col-d-2 {
+ width: 16.6666666667%
+ }
+
+ .col-d-3 {
+ width: 25%
+ }
+
+ .col-d-4 {
+ width: 33.3333333333%
+ }
+
+ .col-d-5 {
+ width: 41.6666666667%
+ }
+
+ .col-d-6 {
+ width: 50%
+ }
+
+ .col-d-7 {
+ width: 58.3333333333%
+ }
+
+ .col-d-8 {
+ width: 66.6666666667%
+ }
+
+ .col-d-9 {
+ width: 75%
+ }
+
+ .col-d-10 {
+ width: 83.3333333333%
+ }
+
+ .col-d-11 {
+ width: 91.6666666667%
+ }
+
+ .col-d-12 {
+ width: 100%
+ }
+
+ .push-d-0 {
+ margin-left: 0%
+ }
+
+ .push-d-1 {
+ margin-left: 8.3333333333%
+ }
+
+ .push-d-2 {
+ margin-left: 16.6666666667%
+ }
+
+ .push-d-3 {
+ margin-left: 25%
+ }
+
+ .push-d-4 {
+ margin-left: 33.3333333333%
+ }
+
+ .push-d-5 {
+ margin-left: 41.6666666667%
+ }
+
+ .push-d-6 {
+ margin-left: 50%
+ }
+
+ .push-d-7 {
+ margin-left: 58.3333333333%
+ }
+
+ .push-d-8 {
+ margin-left: 66.6666666667%
+ }
+
+ .push-d-9 {
+ margin-left: 75%
+ }
+
+ .push-d-10 {
+ margin-left: 83.3333333333%
+ }
+
+ .push-d-11 {
+ margin-left: 91.6666666667%
}
.push-d-12 {
@@ -4462,1831 +5034,1234 @@
img.zoom-img {
cursor: pointer;
cursor: -webkit-zoom-out;
- cursor: -moz-zoom-out
-}
-
-.zoom-overlay {
- z-index: 420;
- background: #0f0e15;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- pointer-events: none;
- opacity: 0;
- -webkit-transition: opacity 300ms;
- -o-transition: opacity 300ms;
- transition: opacity 300ms
-}
-
-@supports(-webkit-backdrop-filter: none) or (backdrop-filter: none) {
- .zoom-overlay {
- -webkit-backdrop-filter: saturate(180%) blur(24px);
- backdrop-filter: saturate(180%) blur(24px);
- background: rgba(15, 14, 21, .8)
- }
-}
-
-.zoom-overlay-open .zoom-overlay {
- opacity: 1
-}
-
-.zoom-overlay-open,
-.zoom-overlay-transitioning {
- cursor: default
-}
-
-.animate {
- animation: animateElement cubic-bezier(0.3, 0.45, 0.45, 0.95) .75s;
- animation-duration: .75s;
- animation-iteration-count: 1;
- transition: transform .2s
-}
-
-@keyframes animateElement {
- 0% {
- opacity: 0;
- transform: translate(0px, 50px)
- }
-
- 100% {
- opacity: 1;
- transform: translate(0px, 0px)
- }
-}
-
-*,
-*::after,
-*::before {
- box-sizing: border-box
-}
-
-body {
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-size: 18px;
- line-height: 1.7;
- color: #eee;
- background-color: #0f0e15;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- overflow-x: hidden
-}
-
-body.is-in::after {
- visibility: hidden;
- opacity: 0;
- pointer-events: none
-}
-
-body::after {
- content: "";
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: #09080f;
- z-index: 999;
- transition: 1s
-}
-
-body input,
-body textarea {
- border: 1px solid #eee;
- outline: none
-}
-
-@media only screen and (max-width: 576px) {
- body {
- font-size: 16px;
- line-height: 29px
- }
-}
-
-::placeholder {
- color: #aaa
-}
-
-*::selection {
- color: #fff;
- background-color: rgba(255, 123, 123, .7)
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-weight: 900;
- line-height: 1.4em;
- letter-spacing: -1px;
- color: #eee
-}
-
-h1 {
- font-size: 36px
-}
-
-h2 {
- font-size: 28px
-}
-
-h3 {
- font-size: 24px
-}
-
-h4 {
- font-size: 20px
-}
-
-h5 {
- font-size: 18px
-}
-
-h6 {
- font-size: 16px
-}
-
-pre {
- overflow: auto;
- padding: 20px;
- font-size: 14px;
- white-space: pre-wrap;
- word-wrap: break-word;
- word-break: break-all
-}
-
-code[class*=language-],
-pre[class*=language-] {
- white-space: pre-wrap;
- word-break: break-all;
- line-height: inherit
-}
-
-img,
-.zoom-img-wrap {
- max-width: 100%;
- height: auto;
- vertical-align: middle
-}
-
-img+em,
-.zoom-img-wrap+em {
- display: inline-block;
- width: 100%;
- padding: 20px 0 0;
- font-size: 12px;
- font-style: normal;
- line-height: 1;
- text-align: center;
- color: #eee
-}
-
-a {
- text-decoration: none;
- color: #eee;
- transition: all .2s
-}
-
-a:hover {
- color: #ff7b7b
-}
-
-hr {
- display: block;
- width: 100%;
- height: 1px;
- margin: 64px 0;
- border: 0;
- background: #09080f
-}
-
-.table-container {
- display: block;
- max-width: 100%;
- overflow-x: auto
-}
-
-table {
- font-size: 12px;
- color: rgba(238, 238, 238, .7);
- width: 100%;
- border-width: 1px;
- border-color: #09080f;
- border-collapse: collapse
-}
-
-table th {
- padding: 12px;
- font-size: 16px;
- text-align: left;
- border: 1px solid #09080f;
- color: #fff;
- background-color: #17151e
-}
-
-table tr {
- background-color: #09080f;
- transition: all .3s ease
-}
-
-table tr:nth-child(even) {
- background-color: rgba(0, 0, 0, 0)
-}
-
-table td {
- padding: 12px;
- font-size: 14px;
- border: 1px solid #09080f
-}
-
-table tr:hover {
- color: #fff
-}
-
-.gallery-box {
- margin-bottom: 30px
-}
-
-.gallery-box em {
- display: inline-block;
- width: 100%;
- padding: 20px 0 0;
- font-size: 12px;
- font-style: normal;
- line-height: 1;
- text-align: center;
- color: #eee
-}
-
-.gallery-box em a {
- border-bottom: 2px solid rgba(238, 238, 238, .1)
-}
-
-.gallery-box em a:hover {
- border-color: #ff7b7b;
- color: #eee;
- text-decoration: none
-}
-
-.gallery {
- display: grid;
- grid-template-columns: repeat(3, auto);
- justify-content: center;
- align-content: center;
- grid-gap: 10px
-}
-
-.gallery img {
- width: 100%;
- height: auto
-}
-
-.lazy {
- opacity: 0;
- transition: .4s ease
-}
-
-.lazy.loaded {
- opacity: 1
-}
-
-.hero {
- position: relative;
- margin-bottom: 32px;
- overflow: hidden;
- background-color: #09080f
-}
-
-@media only screen and (max-width: 576px) {
- .hero {
- box-shadow: none
- }
-}
-
-.hero__inner::before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 1;
- background: linear-gradient(180deg, rgba(15, 14, 21, 0.5) 0%, #0f0e15 100%)
-}
-
-.hero__image {
- min-height: 664px;
- user-select: none;
- background-color: #09080f
-}
-
-.hero__image img {
- position: absolute;
- top: 0px;
- width: 100%;
- height: 100%;
- object-fit: cover
-}
-
-@media only screen and (max-width: 992px) {
- .hero__image {
- min-height: 620px
- }
-}
-
-@media only screen and (max-width: 768px) {
- .hero__image {
- min-height: 500px
- }
-}
-
-@media only screen and (max-width: 576px) {
- .hero__image {
- min-height: 400px
- }
-}
-
-.hero__content {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 1;
- width: 100%;
- max-width: 650px;
- padding: 0 20px;
- text-align: center
-}
-
-.hero__title {
- font-size: 60px;
- margin: 0 0 10px;
- line-height: 1;
- color: #fff
-}
-
-@media only screen and (max-width: 576px) {
- .hero__title {
- font-size: 43px;
- margin: 0 0 5px
- }
-}
-
-.hero__desc {
- font-size: 20px;
- color: #aaa;
- margin: 0
-}
-
-@media only screen and (max-width: 576px) {
- .hero__desc {
- font-size: 16px;
- line-height: 21px
- }
-}
-
-.hero-without-image {
- margin: 192px 0 96px
-}
-
-.hero-without-image .hero-inner {
- display: flex;
- align-items: center;
- justify-content: center
-}
-
-.hero-without-image .hero-content {
- width: 100%;
- max-width: 650px;
- padding: 0 20px;
- text-align: center
+ cursor: -moz-zoom-out
}
-@media only screen and (max-width: 576px) {
- .hero-without-image {
- margin: 144px 0 48px
+.zoom-overlay {
+ z-index: 420;
+ background: #0f0e15;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ pointer-events: none;
+ opacity: 0;
+ -webkit-transition: opacity 300ms;
+ -o-transition: opacity 300ms;
+ transition: opacity 300ms
+}
+
+@supports(-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+ .zoom-overlay {
+ -webkit-backdrop-filter: saturate(180%) blur(24px);
+ backdrop-filter: saturate(180%) blur(24px);
+ background: rgba(15, 14, 21, .8)
}
}
-.top {
- position: fixed;
- bottom: 25px;
- right: -100px;
- z-index: 5;
- width: 40px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- border-radius: 8px;
- background-color: #09080f;
- color: #fff;
- cursor: pointer;
- transition: all .25s ease
+.zoom-overlay-open .zoom-overlay {
+ opacity: 1
}
-.top:hover {
- color: #09080f;
- background: #ff7b7b
+.zoom-overlay-open,
+.zoom-overlay-transitioning {
+ cursor: default
}
-.top.is-active {
- right: 30px
+.animate {
+ animation: animateElement cubic-bezier(0.3, 0.45, 0.45, 0.95) .75s;
+ animation-duration: .75s;
+ animation-iteration-count: 1;
+ transition: transform .2s
}
-@media only screen and (max-width: 768px) {
- .top {
- bottom: 15px
+@keyframes animateElement {
+ 0% {
+ opacity: 0;
+ transform: translate(0px, 50px)
}
- .top.is-active {
- right: 25px
+ 100% {
+ opacity: 1;
+ transform: translate(0px, 0px)
}
}
-
-.header__inner {
- position: relative;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap
+*,
+*::after,
+*::before {
+ box-sizing: border-box
}
-.logo__link {
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-size: 28px;
- line-height: 1;
- font-weight: 900;
- vertical-align: middle;
- color: #eee;
- text-transform: uppercase;
- text-decoration: none;
- letter-spacing: -1px
-}
-.logo__link:hover {
- color: #ff7b7b
-}
-.logo__image {
- max-height: 40px
+header,footer, .search, .footer-widgets, .post-head {
+ .block {
+ display: block
}
-.main-nav {
- width: 100%;
- max-width: 1300px;
- margin: 0 auto
+.inline-block {
+ display: inline-block
}
-.main-nav__box {
- display: flex;
- align-items: center;
- width: 80%;
- padding-top: 200px;
- margin: 0 auto
+.inline {
+ display: inline
}
-.main-nav__box .nav__icon-close {
- position: absolute;
- top: 20px;
- right: 40px;
- z-index: 5;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 30px;
- width: 40px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- color: rgba(255, 255, 255, .5);
- transition: all .25s ease;
- cursor: pointer
+.show {
+ display: block
}
-.main-nav__box .nav__icon-close:hover {
- color: #fff
+.hide {
+ display: none
}
-@media only screen and (max-width: 768px) {
- .main-nav__box {
- padding-top: 100px
- }
-
- .main-nav__box .nav__icon-close {
- top: 22px;
- right: 42px
- }
+.invisible {
+ visibility: hidden
}
-@media only screen and (max-width: 576px) {
- .main-nav__box {
- width: 90%
- }
+.list-reset {
+ list-style-type: none;
+ margin: 0;
+ padding: 0
}
-.navigation {
- display: flex;
- align-items: center
+.clearfix::after,
+.clearfix ::before {
+ content: "";
+ display: table;
+ clear: both
}
-.top-nav .nav__list .nav__item {
- display: inline-block;
- margin-right: 40px
+.screen-reader-text {
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ overflow: hidden;
+ position: absolute !important;
+ width: 1px;
+ word-wrap: normal !important
}
-.top-nav .nav__list .nav__item:last-child {
- margin-right: 0
+ line-height: 1.15;
+ margin: 0;
+
+h1 {
+ font-size: 2em;
+ margin: .67em 0
}
-.top-nav .nav__list .nav__item .nav__link {
- position: relative;
- font-size: 12px;
- font-weight: 700;
- letter-spacing: 1px;
- text-transform: uppercase;
- text-decoration: none;
- color: #eee
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible
}
-.top-nav .nav__list .nav__item .nav__link:hover {
- color: #ff7b7b
+pre {
+ font-family: monospace, monospace;
+ font-size: 1em
}
-@media only screen and (max-width: 992px) {
- .top-nav {
- display: none
- }
+a {
+ background-color: rgba(0, 0, 0, 0)
}
-.mobile-nav .nav__list .nav__item {
- display: block;
- margin-bottom: 36px;
- text-align: center
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted
}
-.mobile-nav .nav__list .nav__item:last-child {
- margin-bottom: 0
+b,
+strong {
+ font-weight: bolder
}
-.mobile-nav .nav__list .nav__item .nav__link {
- position: relative;
- font-size: 18px;
- font-weight: 700;
- letter-spacing: 1px;
- text-transform: uppercase;
- color: #eee
+code,
+kbd,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em
}
-.mobile-nav .nav__list .nav__item .nav__link:hover {
- color: #ff7b7b
+small {
+ font-size: 80%
}
-@media only screen and (max-width: 576px) {
- .mobile-nav .nav__list .nav__item {
- margin-bottom: 28px
- }
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
}
-.nav-buttons {
- display: flex;
- align-items: center;
- font-size: 24px;
- color: #eee
+sub {
+ bottom: -0.25em
}
-.nav-buttons .search-button {
- display: flex;
- align-items: center;
- cursor: pointer;
- transition: all .2s
+sup {
+ top: -0.5em
}
-.nav-buttons .search-button span {
- transition: all .2s
+img {
+ border-style: none
}
-.nav-buttons .search-button:hover span {
- color: #ff7b7b
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0
}
-.nav-buttons .search-button span {
- display: block;
- margin-left: 8px;
- font-size: 12px;
- font-weight: 700;
- letter-spacing: 1px;
- text-transform: uppercase
+button,
+input {
+ overflow: visible
}
-@media only screen and (max-width: 992px) {
- .nav-buttons .search-button span {
- display: none
- }
+button,
+select {
+ text-transform: none
}
-.nav-buttons .nav__icon-menu {
- display: none;
- margin-right: 16px
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+ -webkit-appearance: button
}
-@media only screen and (max-width: 992px) {
- .nav-buttons .nav__icon-menu {
- display: block
- }
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+ border-style: none;
+ padding: 0
}
-.nav-buttons .nav__icon {
- cursor: pointer
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+ outline: 1px dotted ButtonText
}
-.menu-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 100;
- opacity: 0;
- visibility: hidden;
- background-color: #09080f;
- transition: all .5s ease-in-out
+fieldset {
+ padding: .35em .75em .625em
}
-.menu-overlay.is-open {
- opacity: 1;
- visibility: visible
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal
}
-@supports(-webkit-backdrop-filter: none) or (backdrop-filter: none) {
- .menu-overlay {
- -webkit-backdrop-filter: saturate(180%) blur(24px);
- backdrop-filter: saturate(180%) blur(24px);
- background-color: rgba(9, 8, 15, .9)
- }
+progress {
+ vertical-align: baseline
}
-@media only screen and (min-width: 992px) {
- .menu-overlay {
- display: none
- }
+textarea {
+ overflow: auto
}
-.nav-grid {
- width: 100%;
- height: 75vh;
- overflow-y: auto
+[type=checkbox],
+[type=radio] {
+ box-sizing: border-box;
+ padding: 0
}
-.nav-grid__item {
- margin-bottom: 30px
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+ height: auto
}
-@media only screen and (max-width: 768px) {
- .nav-grid__item {
- height: auto
- }
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
}
-.nav-grid__title {
- position: relative;
- margin-bottom: 48px;
- padding-bottom: 15px;
- font-size: 40px;
- text-align: center;
- color: #eee
+[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
}
-.nav-grid__title::after {
- content: "";
- position: absolute;
- left: 50%;
- bottom: 0;
- transform: translate(-50%, -50%);
- display: block;
- width: 25px;
- height: 2px;
- background-color: #fff
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
}
-@media only screen and (max-width: 768px) {
- .nav-grid__title {
- margin-bottom: 30px
- }
+details {
+ display: block
}
-.search__box {
- position: relative;
- max-width: 540px;
- width: 100%;
- margin: 0 auto;
- padding-top: 140px
+summary {
+ display: list-item
}
-.search__box .search__close {
- position: absolute;
- top: 50%;
- right: 24px;
- transform: translateY(-50%);
- font-size: 30px;
- line-height: 1;
- color: rgba(238, 238, 238, .5);
- transition: all .25s;
- cursor: pointer
+template {
+ display: none
}
-.search__box .search__close:hover {
- color: #eee
+[hidden] {
+ display: none
}
-@media only screen and (max-width: 768px) {
- .search__box {
- width: 80%;
- padding-top: 100px
- }
+li>ul,
+li>ol {
+ margin-bottom: 0
}
-@media only screen and (max-width: 576px) {
- .search__box {
- width: 90%
- }
+table {
+ border-collapse: collapse;
+ border-spacing: 0
}
-.search__group {
- position: relative;
- margin-bottom: 64px
+ul,
+ol,
+dd {
+ margin-left: 20px
}
-.search__group .search__text {
- width: 100%;
- height: auto;
- padding: 16px 24px;
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-size: 24px;
- font-weight: 900;
- line-height: 42px;
- border-radius: 8px;
- border: 4px solid rgba(238, 238, 238, .1);
- transition: all .3s;
+.highlight {
+ border-radius: 4px;
color: #fff;
- background-color: rgba(0, 0, 0, 0)
-}
-
-.search__group .search__text::-webkit-input-placeholder {
- font-weight: 900;
- color: rgba(238, 238, 238, .8)
+ background: #17151e
}
-.search__group .search__text::placeholder {
- font-weight: 900;
- color: rgba(238, 238, 238, .8)
+.highlighter-rouge .highlight {
+ background: #eef
}
-.search__group .search__text::-ms-clear {
- display: none
+.highlight .c {
+ color: #998;
+ font-style: italic
}
-.search__group .search__text:focus {
- color: #eee;
- background: #09080f
+.highlight .err {
+ color: #a61717;
+ background-color: #e3d2d2
}
-@media only screen and (max-width: 576px) {
- .search__group .search__text {
- font-size: 26px
- }
+.highlight .k {
+ font-weight: bold
}
-.search-results-list .no-results {
- width: 100%;
- list-style: none
+.highlight .o {
+ font-weight: bold
}
-.search-results-list .no-results h3 {
- font-size: 28px;
- text-align: center
+.highlight .cm {
+ color: #998;
+ font-style: italic
}
-.load-more {
- margin: 0 auto
+.highlight .cp {
+ color: #999;
+ font-weight: bold
}
-.load-more-section {
- margin: 30px auto;
- text-align: center
+.highlight .c1 {
+ color: #998;
+ font-style: italic
}
-@media only screen and (max-width: 576px) {
- .load-more-section {
- margin: 20px auto
- }
+.highlight .cs {
+ color: #999;
+ font-weight: bold;
+ font-style: italic
}
-.widget {
- margin-bottom: 40px
+.highlight .gd {
+ color: #000;
+ background-color: #fdd
}
-@media only screen and (max-width: 768px) {
- .widget {
- margin-bottom: 64px
- }
+.highlight .gd .x {
+ color: #000;
+ background-color: #faa
}
-.widget__title {
- position: relative;
- padding-left: 8px;
- margin-bottom: 36px;
- font-size: 24px;
- line-height: 1;
- color: #fff
+.highlight .ge {
+ font-style: italic
}
-.widget__title::after {
- content: "";
- position: absolute;
- left: 0;
- top: 50%;
- z-index: -1;
- transform: translateY(-50%);
- display: block;
- width: 106px;
- height: 38px;
- border-radius: 4px 0px 0px 4px;
- background: linear-gradient(90deg, #ff7b7b -5.19%, rgba(15, 14, 21, 0) 100%)
+.highlight .gr {
+ color: #a00
}
-@media only screen and (max-width: 992px) {
- .widget__title {
- font-size: 24px
- }
+.highlight .gh {
+ color: #999
}
-.recent-posts {
- display: flex;
- align-items: center;
- margin-bottom: 20px
+.highlight .gi {
+ color: #000;
+ background-color: #dfd
}
-.recent-posts:last-child {
- margin-bottom: 0
+.highlight .gi .x {
+ color: #000;
+ background-color: #afa
}
-@media only screen and (max-width: 360px) {
- .recent-posts {
- flex-wrap: wrap;
- margin-bottom: 32px
- }
+.highlight .go {
+ color: #888
}
-.recent-posts__image {
- position: relative;
- display: block;
- width: 100%;
- max-width: 174px;
- height: 144px;
- margin-right: 20px;
- border-radius: 16px;
- overflow: hidden;
- background: #09080f
+.highlight .gp {
+ color: #555
}
-.recent-posts__image img {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: 16px;
- object-fit: cover
+.highlight .gs {
+ font-weight: bold
}
-@media only screen and (max-width: 360px) {
- .recent-posts__image {
- height: auto;
- max-width: 100%;
- padding-top: 56.6%;
- margin: 0 0 20px
- }
+.highlight .gu {
+ color: #fff
}
-.recent-posts__content .recent-posts__title {
- font-size: 18px;
- margin: 8px 0
+.highlight .gt {
+ color: #a00
}
-.recent-posts__content .article__author-image {
- width: 28px;
- height: 28px
+.highlight .kc {
+ font-weight: bold
}
-.tag__cloud {
- display: flex;
- flex-wrap: wrap
+.highlight .kd {
+ font-weight: bold
}
-.tag__cloud a {
- display: inline-block;
- padding: 8px 16px;
- margin: 0 5px 5px 0;
- font-size: 12px;
- line-height: 10px;
- font-weight: 700;
- border: 3px solid rgba(255, 255, 255, .1);
- border-radius: 24px;
- color: #aaa
+.highlight .kp {
+ font-weight: bold
}
-.tag__cloud a:hover {
- border-color: #ff7b7b;
- color: #fff
+.highlight .kr {
+ font-weight: bold
}
-.subscribe-subtitle {
- width: 100%;
- margin-bottom: 24px;
- font-size: 16px;
- line-height: 24px;
- color: #aaa
+.highlight .kt {
+ color: #458;
+ font-weight: bold
}
-.subscribe-group-top {
- display: flex;
- align-items: center
+.highlight .m {
+ color: #099
}
-.subscribe-group-top .subscribe-email {
- position: relative;
- width: 100%;
- height: 56px;
- padding: 20px;
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-size: 14px;
- line-height: 20px;
- font-weight: 700;
- border-radius: 8px;
- color: #fff;
- background-color: #17151e;
- border: 2px solid rgba(0, 0, 0, 0);
- outline: 0;
- -webkit-appearance: none;
- box-sizing: border-box;
- transition: border-color .2s ease-in-out;
- cursor: text
+.highlight .s {
+ color: #d85858
}
-.subscribe-group-top .subscribe-email::placeholder {
- color: #eee
+.highlight .na {
+ color: teal
}
-.subscribe-group-top .subscribe-email:focus {
- color: #fff;
- border-color: #ff7b7b
+.highlight .nb {
+ color: #0086b3
}
-.subscribe-group-top .subscribe-button {
- margin-left: 10px
+.highlight .nc {
+ color: #458;
+ font-weight: bold
}
-.copyright {
- font-size: 13px;
- color: #aaa
+.highlight .no {
+ color: teal
}
-.copyright a {
- font-weight: 500;
- color: #fff
+.highlight .ni {
+ color: purple
}
-.copyright a:hover {
- color: #ff7b7b
+.highlight .ne {
+ color: #900;
+ font-weight: bold
}
-.social {
- text-align: center
+.highlight .nf {
+ color: #900;
+ font-weight: bold
}
-.social .social__list {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center
+.highlight .nn {
+ color: #555
}
-.social .social__item {
- display: inline-block;
- margin-left: 8px
+.highlight .nt {
+ color: #6565ff
}
-.social .social__item:first-child {
- margin-left: 0
+.highlight .nv {
+ color: teal
}
-.social .social__link {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 40px;
- height: 40px;
- font-size: 16px;
- line-height: 40px;
- border-radius: 8px;
- color: #fff;
- background-color: #17151e
+.highlight .ow {
+ font-weight: bold
}
-.social .social__link:hover {
- color: #09080f;
- background-color: #ff7b7b
+.highlight .w {
+ color: #bbb
}
-@media only screen and (max-width: 992px) {
- .social {
- margin-bottom: 5px
- }
-
- .social .social__item {
- margin-bottom: 10px
- }
-
- .social .social__link {
- width: 30px;
- height: 30px;
- line-height: 30px;
- font-size: 16px
- }
+.highlight .mf {
+ color: #099
}
-.button {
- display: inline-block;
- white-space: nowrap;
- vertical-align: middle;
- font: inherit;
- border: none;
- border-radius: 8px;
- outline: none;
- -webkit-appearance: none;
- text-align: center;
- text-decoration: none;
- color: #fff;
- transition: all .2s ease;
- cursor: pointer
+.highlight .mh {
+ color: #099
}
-.button:hover {
- color: #fff
+.highlight .mi {
+ color: #099
}
-.button--primary {
- padding: 20px 40px;
- font-size: 16px;
- font-weight: 700;
- line-height: 1;
- background-color: #17151e
+.highlight .mo {
+ color: #099
}
-.button--primary:hover {
- color: #09080f;
- background-color: #ff6262
+.highlight .sb {
+ color: #d85858
}
-.button--middle {
- position: relative;
- padding: 24px 48px;
- width: 100%;
- max-width: 412px;
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-size: 12px;
- font-weight: 700;
- letter-spacing: 1px;
- text-transform: uppercase;
- transition: all .2s ease;
- background-color: #09080f
+.highlight .sc {
+ color: #d85858
}
-.button--middle:hover {
- background-color: #17151e
+.highlight .sd {
+ color: #d85858
}
-.button--big {
- display: block;
- width: 100%
+.highlight .s2 {
+ color: #d85858
}
-.article {
- align-items: stretch;
- flex-grow: 1;
- min-height: 340px;
- margin-bottom: 32px;
- transition: transform .2s ease
+.highlight .se {
+ color: #d85858
}
-.article::after {
- content: "";
- display: table;
- padding-top: 25%
+.highlight .sh {
+ color: #d85858
}
-.article:hover {
- transform: translateY(-5px)
+.highlight .si {
+ color: #d85858
}
-.article--big::after {
- padding-top: 35%
+.highlight .sx {
+ color: #d85858
}
-@media only screen and (max-width: 992px) {
- .article--big::after {
- padding-top: 25%
- }
+.highlight .sr {
+ color: #009926
}
-@media only screen and (max-width: 576px) {
- .article {
- min-height: 280px
- }
+.highlight .s1 {
+ color: #d85858
}
-.article__inner {
- position: relative;
- display: flex;
- width: 100%;
- height: 100%;
- border-radius: 16px;
- overflow: hidden;
- box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
- background-color: #09080f
+.highlight .ss {
+ color: #990073
}
-.article__inner .featured-post {
- position: absolute;
- top: 20px;
- right: 32px;
- z-index: 10;
- padding: 2px 4px;
- font-size: 20px;
- border-radius: 4px;
- color: #aaa;
- background: rgba(255, 255, 255, .08);
- pointer-events: none
+.highlight .bp {
+ color: #999
}
-@media only screen and (max-width: 576px) {
- .article__inner .featured-post {
- right: 20px
- }
+.highlight .vc {
+ color: teal
}
-.article__title {
- margin: 12px 0 12px;
- font-size: 28px;
- line-height: 1
+.highlight .vg {
+ color: teal
}
-.article__title a {
- color: #eee
+.highlight .vi {
+ color: teal
}
-@media only screen and (max-width: 576px) {
- .article__title {
- font-size: 24px
- }
+.highlight .il {
+ color: #099
}
-.article__excerpt {
- margin-bottom: 12px;
- font-size: 14px;
- line-height: 17px;
- color: #aaa
+.container {
+ max-width: 1340px;
+ padding-left: 20px;
+ padding-right: 20px;
+ margin: 0 auto
}
-@media only screen and (max-width: 576px) {
- .article__excerpt {
- font-size: 13px
- }
+.container-big {
+ max-width: 1600px;
+ padding-left: 20px;
+ padding-right: 20px;
+ margin: 0 auto
}
-.article__image {
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- overflow: hidden;
- user-select: none;
- background-color: #09080f
+body input,
+body textarea {
+ border: 1px solid #eee;
+ outline: none
}
-.article__image::after {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(15, 14, 21, .6);
- pointer-events: none
+@media only screen and (max-width: 576px) {
+ body {
+ font-size: 16px;
+ line-height: 29px
+ }
}
-.article__image img {
- position: absolute;
- top: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 16px;
- pointer-events: none
+::placeholder {
+ color: #aaa
}
-.article__content {
- z-index: 1;
- width: 100%;
- margin-top: auto;
- padding: 0 32px 32px;
- pointer-events: none
+*::selection {
+ color: #fff;
+ background-color: rgba(255, 123, 123, .7)
}
-@media only screen and (max-width: 576px) {
- .article__content {
- padding: 20px
- }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ font-weight: 900;
+ line-height: 1.4em;
+ letter-spacing: -1px;
+ color: #eee
}
-.article__meta {
- line-height: 12px
+h1 {
+ font-size: 36px
}
-.article__meta .article__date,
-.article__meta .article__minutes {
- font-size: 12px;
- line-height: 1;
- font-weight: 500
+h2 {
+ font-size: 28px
}
-.article__meta .article__date {
- color: #aaa
+h3 {
+ font-size: 24px
}
-.article__bottom {
- display: flex;
- align-items: center;
- font-size: 12px;
- line-height: 18px;
- font-weight: 500;
- color: #fff
+h4 {
+ font-size: 20px
}
-.article__bottom a {
- pointer-events: all
+h5 {
+ font-size: 18px
}
-.article-tags .article__tag {
- display: inline-block;
- padding: 4px 8px;
- margin: 2px 0;
- font-size: 12px;
- line-height: 10px;
- font-weight: 500;
- letter-spacing: -0.5px;
- border: 2px solid rgba(255, 255, 255, .4);
- border-radius: 24px;
- color: #aaa
+h6 {
+ font-size: 16px
}
-.article-tags .article__tag:hover {
- color: #fff;
- border-color: #ff7b7b
+pre {
+ overflow: auto;
+ padding: 20px;
+ font-size: 14px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ word-break: break-all
+}
+
+code[class*=language-],
+pre[class*=language-] {
+ white-space: pre-wrap;
+ word-break: break-all;
+ line-height: inherit
}
-.article__author {
- float: left;
- flex-shrink: 0
+img,
+.zoom-img-wrap {
+ max-width: 100%;
+ height: auto;
+ vertical-align: middle
}
-.article__author-image {
- position: relative;
+img+em,
+.zoom-img-wrap+em {
display: inline-block;
- width: 36px;
- height: 36px;
- padding: 3px;
- margin-right: 8px;
- border: 2px solid #ff7b7b;
- border-radius: 50%;
- overflow: hidden
-}
-
-.article__author-image img {
- position: absolute;
- top: 0;
- left: 0;
width: 100%;
- height: 100%;
- object-fit: cover
+ padding: 20px 0 0;
+ font-size: 12px;
+ font-style: normal;
+ line-height: 1;
+ text-align: center;
+ color: #eee
}
-.article__author-link {
- font-size: 12px;
- color: #fff
+a {
+ text-decoration: none;
+ color: #eee;
+ transition: all .2s
}
-.article__author-link:hover {
- color: #fff
+a:hover {
+ color: #ff7b7b
}
-.article__author span {
- color: rgba(255, 255, 255, .8)
+hr {
+ display: block;
+ width: 100%;
+ height: 1px;
+ margin: 64px 0;
+ border: 0;
+ background: #09080f
}
-.post,
-.page {
- position: relative;
- max-width: 760px;
- margin: 0 auto
+.table-container {
+ display: block;
+ max-width: 100%;
+ overflow-x: auto
}
-.post-image {
- position: absolute;
- top: 0;
- left: 0;
+table {
+ font-size: 12px;
+ color: rgba(238, 238, 238, .7);
width: 100%;
- height: 100%;
- border-radius: 16px;
- object-fit: cover
+ border-width: 1px;
+ border-color: #09080f;
+ border-collapse: collapse
}
-.image-box {
- position: relative;
- padding-top: 90%;
- min-height: 280px;
- border-radius: 16px;
- overflow: hidden;
- box-shadow: 0 5px 10px 0px rgba(0, 0, 0, .15);
- background-color: #09080f
+table th {
+ padding: 12px;
+ font-size: 16px;
+ text-align: left;
+ border: 1px solid #09080f;
+ color: #fff;
+ background-color: #17151e
}
-@media only screen and (max-width: 768px) {
- .image-box {
- padding-top: 65%;
- margin-bottom: 40px
- }
+table tr {
+ background-color: #09080f;
+ transition: all .3s ease
}
-.post__meta {
- line-height: 13px
+table tr:nth-child(even) {
+ background-color: rgba(0, 0, 0, 0)
}
-.post__meta .post__date,
-.post__meta .post__minutes {
- font-size: 13px;
- line-height: 1;
- font-weight: 500
+table td {
+ padding: 12px;
+ font-size: 14px;
+ border: 1px solid #09080f
}
-.post__meta .post__minutes{
- color: #fff;
+table tr:hover {
+ color: #fff
}
-.post__meta .post__date {
- color: #aaa
+.gallery-box {
+ margin-bottom: 30px
}
-.post__title {
- margin: 20px 0 20px;
- font-size: 56px;
- line-height: 1
+.gallery-box em {
+ display: inline-block;
+ width: 100%;
+ padding: 20px 0 0;
+ font-size: 12px;
+ font-style: normal;
+ line-height: 1;
+ text-align: center;
+ color: #eee
}
-@media only screen and (max-width: 1200px) {
- .post__title {
- font-size: 40px
- }
+.gallery-box em a {
+ border-bottom: 2px solid rgba(238, 238, 238, .1)
}
-@media only screen and (max-width: 576px) {
- .post__title {
- font-size: 32px
- }
+.gallery-box em a:hover {
+ border-color: #ff7b7b;
+ color: #eee;
+ text-decoration: none
}
-.post__bottom {
- display: flex;
- align-items: center;
- font-size: 13px;
- line-height: 30px;
- font-weight: 500;
- color: #fff
+.gallery {
+ display: grid;
+ grid-template-columns: repeat(3, auto);
+ justify-content: center;
+ align-content: center;
+ grid-gap: 10px
}
-.post-tags .post__tag {
- padding: 4px 8px;
- margin: 2px 0;
- font-size: 12px;
- line-height: 10px;
- font-weight: 700;
- border: 2px solid rgba(255, 255, 255, .2);
- border-radius: 24px;
- color: #aaa
+.gallery img {
+ width: 100%;
+ height: auto
}
-.post-tags .post__tag:hover {
- color: #fff;
- border-color: #ff7b7b
+.lazy {
+ opacity: 0;
+ transition: .4s ease
}
-.post__author {
- float: left;
- flex-shrink: 0
+.lazy.loaded {
+ opacity: 1
}
-.post__author-image {
+.hero {
position: relative;
- display: inline-block;
- width: 36px;
- height: 36px;
- padding: 3px;
- margin-right: 8px;
- border: 2px solid #ff7b7b;
- border-radius: 50%;
- overflow: hidden
+ margin-bottom: 32px;
+ overflow: hidden;
+ background-color: #09080f
}
-.post__author-image img {
+@media only screen and (max-width: 576px) {
+ .hero {
+ box-shadow: none
+ }
+}
+
+.hero__inner::before {
+ content: "";
+ display: block;
position: absolute;
top: 0;
+ bottom: 0;
left: 0;
+ right: 0;
+ z-index: 1;
+ background: linear-gradient(180deg, rgba(15, 14, 21, 0.5) 0%, #0f0e15 100%)
+}
+
+.hero__image {
+ min-height: 664px;
+ user-select: none;
+ background-color: #09080f
+}
+
+.hero__image img {
+ position: absolute;
+ top: 0px;
width: 100%;
height: 100%;
object-fit: cover
}
-.post__author-link {
- font-size: 13px;
- color: #fff
+@media only screen and (max-width: 992px) {
+ .hero__image {
+ min-height: 620px
+ }
}
-.post__author-link:hover {
- color: #fff
+@media only screen and (max-width: 768px) {
+ .hero__image {
+ min-height: 500px
+ }
}
-.post__author span {
- color: rgba(255, 255, 255, .8)
+@media only screen and (max-width: 576px) {
+ .hero__image {
+ min-height: 400px
+ }
}
-.post__content,
-.page__content {
- color: #aaa
+.hero__content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1;
+ width: 100%;
+ max-width: 650px;
+ padding: 0 20px;
+ text-align: center
}
-.post__content a,
-.page__content a {
- border-bottom: 2px solid rgba(238, 238, 238, .1)
+.hero__title {
+ font-size: 60px;
+ margin: 0 0 10px;
+ line-height: 1;
+ color: #fff
}
-.post__content a:hover,
-.page__content a:hover {
- border-color: #ff7b7b;
- color: #eee;
- text-decoration: none
+@media only screen and (max-width: 576px) {
+ .hero__title {
+ font-size: 43px;
+ margin: 0 0 5px
+ }
}
-.post__share {
- display: flex;
- justify-content: center;
- margin: 64px 0
+.hero__desc {
+ font-size: 20px;
+ color: #aaa;
+ margin: 0
}
-.post__share .share__list {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- border-radius: 16px;
- background: #17151e
+@media only screen and (max-width: 576px) {
+ .hero__desc {
+ font-size: 16px;
+ line-height: 21px
+ }
}
-.post__share .share__list .share__link {
- position: relative;
+.hero-without-image {
+ margin: 192px 0 96px
+}
+
+.hero-without-image .hero-inner {
display: flex;
- justify-content: center;
align-items: center;
- padding: 28px 24px;
- font-size: 20px;
- color: #eee;
- transition: all .2s
+ justify-content: center
}
-.post__share .share__list .share__link:first-child {
- padding-left: 48px
+.hero-without-image .hero-content {
+ width: 100%;
+ max-width: 650px;
+ padding: 0 20px;
+ text-align: center
}
-.post__share .share__list .share__link:first-child::after {
- content: none
+@media only screen and (max-width: 576px) {
+ .hero-without-image {
+ margin: 144px 0 48px
+ }
}
-.post__share .share__list .share__link:last-child {
- padding-right: 48px
+.top {
+ position: fixed;
+ bottom: 25px;
+ right: -100px;
+ z-index: 5;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border-radius: 8px;
+ background-color: #09080f;
+ color: #fff;
+ cursor: pointer;
+ transition: all .25s ease
}
-.post__share .share__list .share__link::after {
- content: "";
- position: absolute;
- left: 0;
- display: block;
- width: 1px;
- height: 12px;
- background: rgba(238, 238, 238, .08)
+.top:hover {
+ color: #09080f;
+ background: #ff7b7b
}
-.post__share .share__list .share__link:hover {
- color: #ff7b7b
+.top.is-active {
+ right: 30px
}
-@media only screen and (max-width: 576px) {
- .post__share {
- margin: 48px 0
- }
-
- .post__share .share__list .share__link {
- padding: 24px 20px
+@media only screen and (max-width: 768px) {
+ .top {
+ bottom: 15px
}
- .post__share .share__list .share__link:first-child {
- padding-left: 40px
+ .top.is-active {
+ right: 25px
}
+}
- .post__share .share__list .share__link:last-child {
- padding-right: 40px
- }
+.button {
+ display: inline-block;
+ white-space: nowrap;
+ vertical-align: middle;
+ font: inherit;
+ border: none;
+ border-radius: 8px;
+ outline: none;
+ -webkit-appearance: none;
+ text-align: center;
+ text-decoration: none;
+ color: #fff;
+ transition: all .2s ease;
+ cursor: pointer
}
-.post__navigation {
- display: flex;
- justify-content: space-between;
- margin-bottom: 64px;
- box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
- border-radius: 16px
+.button:hover {
+ color: #fff
}
-.post__navigation .prev,
-.post__navigation .prev img {
- border-radius: 16px 0 0 16px
+.button--primary {
+ padding: 20px 40px;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 1;
+ background-color: #17151e
}
-.post__navigation .next,
-.post__navigation .next img {
- border-radius: 0 16px 16px 0
+.button--primary:hover {
+ color: #09080f;
+ background-color: #ff6262
}
-.post__navigation .prev,
-.post__navigation .next {
+.button--middle {
position: relative;
- display: flex;
- align-items: flex-end;
+ padding: 24px 48px;
width: 100%;
- min-height: 240px;
- padding: 0 32px 32px;
- overflow: hidden;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- background-color: #09080f;
- user-select: none
+ max-width: 412px;
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ transition: all .2s ease;
+ background-color: #09080f
}
-.post__navigation .prev::after,
-.post__navigation .next::after {
- content: "";
+.button--middle:hover {
+ background-color: #17151e
+}
+
+.button--big {
display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(9, 8, 15, .6);
- pointer-events: none;
- transition: .25s
+ width: 100%
}
-.post__navigation .prev:hover::after,
-.post__navigation .next:hover::after {
- background-color: rgba(9, 8, 15, .7)
+.article {
+ align-items: stretch;
+ flex-grow: 1;
+ min-height: 340px;
+ margin-bottom: 32px;
+ transition: transform .2s ease
}
-.post__navigation .prev .post__nav,
-.post__navigation .next .post__nav {
- display: inline-block;
- margin-bottom: 8px;
- font-size: 12px;
- font-weight: 500;
- text-transform: uppercase;
- color: #eee
+.article::after {
+ content: "";
+ display: table;
+ padding-top: 25%
}
-.post__navigation .prev .post__nav-image,
-.post__navigation .next .post__nav-image {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: cover
+.article:hover {
+ transform: translateY(-5px)
}
-.post__navigation .prev .post__nav-box,
-.post__navigation .next .post__nav-box {
+.article--big::after {
+ padding-top: 35%
+}
+
+@media only screen and (max-width: 992px) {
+ .article--big::after {
+ padding-top: 25%
+ }
+}
+
+@media only screen and (max-width: 576px) {
+ .article {
+ min-height: 280px
+ }
+}
+
+.article__inner {
position: relative;
- z-index: 1;
- width: 100%
+ display: flex;
+ width: 100%;
+ height: 100%;
+ border-radius: 16px;
+ overflow: hidden;
+ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
+ background-color: #09080f
}
-.post__navigation .prev .post__nav__prev i,
-.post__navigation .next .post__nav__prev i {
- margin-right: 4px
+.article__inner .featured-post {
+ position: absolute;
+ top: 20px;
+ right: 32px;
+ z-index: 10;
+ padding: 2px 4px;
+ font-size: 20px;
+ border-radius: 4px;
+ color: #aaa;
+ background: rgba(255, 255, 255, .08);
+ pointer-events: none
}
-.post__navigation .prev .post__nav__next i,
-.post__navigation .next .post__nav__next i {
- margin-left: 4px
+@media only screen and (max-width: 576px) {
+ .article__inner .featured-post {
+ right: 20px
+ }
}
-.post__navigation .prev .post__nav__title,
-.post__navigation .next .post__nav__title {
- margin-bottom: 0;
- font-size: 24px;
+.article__title {
+ margin: 12px 0 12px;
+ font-size: 28px;
line-height: 1
}
-.post__navigation .prev .post__nav__title a,
-.post__navigation .next .post__nav__title a {
+.article__title a {
color: #eee
}
-.post__navigation .next {
- text-align: right;
- margin-left: auto
-}
-
-@media only screen and (max-width: 768px) {
- .post__navigation {
- flex-wrap: wrap;
- box-shadow: none
- }
-
- .post__navigation .prev,
- .post__navigation .next {
- width: 100%;
- border-radius: 16px;
- box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5)
- }
-
- .post__navigation .prev img,
- .post__navigation .next img {
- border-radius: 16px
- }
-
- .post__navigation .prev {
- margin-bottom: 20px
- }
-}
-
@media only screen and (max-width: 576px) {
- .post__navigation {
- margin-bottom: 48px
+ .article__title {
+ font-size: 24px
}
}
-.related-posts {
- display: none
+.article__excerpt {
+ margin-bottom: 12px;
+ font-size: 14px;
+ line-height: 17px;
+ color: #aaa
}
-.related-posts.is-related {
- display: block
+@media only screen and (max-width: 576px) {
+ .article__excerpt {
+ font-size: 13px
+ }
}
-.related-posts .related-title {
- position: relative;
- padding-left: 8px;
- margin-bottom: 36px;
- font-size: 24px;
- line-height: 1;
- color: #fff
+.article__image {
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ user-select: none;
+ background-color: #09080f
}
-.related-posts .related-title::after {
+.article__image::after {
content: "";
+ display: block;
position: absolute;
+ top: 0;
left: 0;
- top: 50%;
- z-index: -1;
- transform: translateY(-50%);
- display: block;
- width: 106px;
- height: 38px;
- border-radius: 4px 0px 0px 4px;
- background: linear-gradient(90deg, #ff7b7b -5.19%, rgba(15, 14, 21, 0) 100%)
-}
-
-@media only screen and (max-width: 992px) {
- .related-posts .related-title {
- font-size: 24px
- }
+ width: 100%;
+ height: 100%;
+ background-color: rgba(15, 14, 21, .6);
+ pointer-events: none
}
-.disqus-inner {
+.article__image img {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
border-radius: 16px;
- background: #17151e
+ pointer-events: none
}
-.post-comments {
- max-width: 824px;
- padding: 64px 32px;
- margin: 0 auto
+.article__content {
+ z-index: 1;
+ width: 100%;
+ margin-top: auto;
+ padding: 0 32px 32px;
+ pointer-events: none
}
@media only screen and (max-width: 576px) {
- .post-comments {
- padding: 48px 32px
+ .article__content {
+ padding: 20px
}
}
-.archive-box {
- position: relative;
- margin: 50px 0 80px;
- text-align: center
+.article__meta {
+ line-height: 12px
}
-@media only screen and (max-width: 576px) {
- .archive-box {
- margin: 20px 0 50px
- }
+.article__meta .article__date,
+.article__meta .article__minutes {
+ font-size: 12px;
+ line-height: 1;
+ font-weight: 500
}
-.archive-meta {
- font-size: 16px;
- color: rgba(238, 238, 238, .6)
+.article__meta .article__date {
+ color: #aaa
}
-.archive-title {
- position: relative;
- margin: 0;
- font-size: 47px;
- line-height: 57px
+.article__bottom {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ line-height: 18px;
+ font-weight: 500;
+ color: #fff
}
-@media only screen and (max-width: 576px) {
- .archive-title {
- font-size: 40px;
- line-height: 52px
- }
+.article__bottom a {
+ pointer-events: all
}
-.archive-description {
- max-width: 600px;
- margin: 10px auto 0;
- font-size: 16px;
- line-height: 32px
+.article-tags .article__tag {
+ display: inline-block;
+ padding: 4px 8px;
+ margin: 2px 0;
+ font-size: 12px;
+ line-height: 10px;
+ font-weight: 500;
+ letter-spacing: -0.5px;
+ border: 2px solid rgba(255, 255, 255, .4);
+ border-radius: 24px;
+ color: #aaa
}
-@media only screen and (max-width: 576px) {
- .archive-description {
- margin: 5px auto 0;
- line-height: 28px
- }
+.article-tags .article__tag:hover {
+ color: #fff;
+ border-color: #ff7b7b
}
-.form__group {
- margin-bottom: 20px
+.article__author {
+ float: left;
+ flex-shrink: 0
}
-.form__input {
+.article__author-image {
+ position: relative;
+ display: inline-block;
+ width: 36px;
+ height: 36px;
+ padding: 3px;
+ margin-right: 8px;
+ border: 2px solid #ff7b7b;
+ border-radius: 50%;
+ overflow: hidden
+}
+
+.article__author-image img {
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
- padding: 20px;
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- font-size: 16px;
- font-weight: 700;
- border: 2px solid rgba(0, 0, 0, 0);
- border-radius: 8px;
- color: #eee;
- background: #17151e;
- transition: border-color .2s ease-in-out
+ height: 100%;
+ object-fit: cover
}
-.form__input::placeholder {
+.article__author-link {
+ font-size: 12px;
color: #fff
}
-.form__input:focus {
- border-color: #ff7b7b
+.article__author-link:hover {
+ color: #fff
+}
+
+.article__author span {
+ color: rgba(255, 255, 255, .8)
+}
+
+.post,
+.page {
+ position: relative;
+ max-width: 760px;
+ margin: 0 auto
}
+
textarea {
resize: vertical
}
}
+h1.main{
+ text-align: center;
+ color: white;
+ font-size: 4rem;
+ font-weight:900;
+ margin: 2rem auto 1rem;
+ /* text-decoration: underline solid white; */
+}
@@ -6541,21 +6516,11 @@