feat(documentation): dark mode

apivideo · Sep 7, 2023 · 1e12365 · 1e12365
1 parent 907ca55
commit 1e12365
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 3 deletions.
diff --git a/_assets/css/components/content-card.css b/_assets/css/components/content-card.css
@@ -4,6 +4,12 @@
   grid-gap: 2rem;
 }
 
+.dark .content-card {
+    border: 0.5px solid rgba(255, 255, 255, 0.20);
+background: #242933;
+box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.10), 0px 34px 24px -20px rgba(0, 0, 0, 0.04);
+}
+
 .content-card {
   padding: 24px !important;
   display: flex;
@@ -32,6 +38,11 @@
   margin-bottom: 24px !important;
 }
 
+.dark .content-card p.content-card-label {
+    color: white;
+    opacity: 0.7;
+}
+
 .content-card p.content-card-label {
   font-size: 18px;
   font-weight: 600;
@@ -40,6 +51,11 @@
   margin-bottom: 16px !important;
 }
 
+.dark .content-card p.content-card-description {
+    color: white !important;
+    opacity: 0.5 !important;
+}
+
 .content-card p.content-card-description {
   padding-bottom: 32px !important;
   opacity: 0.6;
@@ -58,3 +74,7 @@
   text-transform: uppercase;
   text-decoration: none !important;
 }
+
+.dark .content-card-link { 
+    color: rgba(255, 255, 255, 0.70) !important;
+}
diff --git a/_assets/css/components/hero.css b/_assets/css/components/hero.css
@@ -20,3 +20,11 @@
   line-height: normal;
   letter-spacing: -0.68px;
 }
+
+.dark .hero h1 {
+    color: white !important;
+}
+
+.dark .hero h1 em {
+    opacity: 0.7
+}
diff --git a/_assets/css/components/product-card.css b/_assets/css/components/product-card.css
@@ -13,6 +13,13 @@
   flex-direction: column;
 }
 
+.dark .product-grid-item {
+  border: 0.5px solid rgba(255, 255, 255, 0.2);
+  background: #242933;
+  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1),
+    0px 34px 24px -20px rgba(0, 0, 0, 0.1);
+}
+
 .product-grid-item-header * {
   margin: 0 !important;
   color: #fff !important;
@@ -75,6 +82,11 @@
   height: 100%;
 }
 
+.dark .product-grid-item-body-description p {
+    color: #FFF;
+    opacity: 0.6;
+}
+
 .product-grid-item-body-description p {
   flex: 1;
   opacity: 0.6;
@@ -107,6 +119,11 @@
   text-decoration: none !important;
 }
 
+.dark .product-grid-item-body p a {
+    color: #FFF !important;
+    background: rgba(255, 255, 255, 0.15);
+}
+
 .product-grid-item-body a:hover {
   background: rgb(250, 91, 48, 0.3);
 }
diff --git a/_assets/css/components/quick-link.css b/_assets/css/components/quick-link.css
@@ -5,6 +5,12 @@
   margin-bottom: 2em;
 }
 
+.dark .quick-links-item { 
+    border: 0.5px solid rgba(255, 255, 255, 0.20);
+    background: #242933;
+    box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.10), 0px 34px 24px -20px rgba(0, 0, 0, 0.04);
+}
+
 .quick-links-item {
   border-radius: 4px;
   background: #fff;
@@ -13,6 +19,11 @@
   padding: 0 24px;
 }
 
+.dark .quick-links-item h4 {
+    color: rgba(255, 255, 255, 0.70) !important;
+
+}
+
 .quick-links-item h4 {
   color: var(--AV_Primary_Blue_Dark, #202d47) !important;
   font-size: 18px !important;
@@ -45,15 +56,25 @@
   background: linear-gradient(90deg, #414f6e 0%, #2773aa 100%);
 }
 
+.dark .quick-links-item > p {
+    border-top: 1px solid rgba(255,255,255,0.1) !important;  
+}
+
 .quick-links-item > p {
   border-top: 1px solid #efefef !important;
   padding-top: 18px !important;
 }
 
+.dark .quick-links-item > p > a.quick-links-item-line { 
+    color: rgba(255, 255, 255, 0.50) !important;
+
+}
+
 .quick-links-item > p > a.quick-links-item-line {
   display: flex !important;
   gap: 16px !important;
   align-items: center !important;
+  font-size: 14px;
 
   text-decoration: none !important;
   color: var(--AV_Primary_Blue, #414f6e) !important;

diff --git a/_assets/css/components/support-card.css b/_assets/css/components/support-card.css
@@ -3,6 +3,13 @@
   gap: 56px;
 }
 
+.dark .support-cards .support-card {
+  border: 0.5px solid rgba(255, 255, 255, 0.2);
+  background: #242933;
+  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1),
+    0px 34px 24px -20px rgba(0, 0, 0, 0.04);
+}
+
 .support-cards .support-card {
   flex: 1;
   display: flex;
@@ -22,6 +29,10 @@
   letter-spacing: -0.36px !important;
 }
 
+.dark .support-card p.support-card-label {
+    color: rgba(255, 255, 255, 0.50) !important;
+}
+
 .support-card p.support-card-label {
   flex: 1;
 }

diff --git a/_assets/css/style.css b/_assets/css/style.css
@@ -335,6 +335,11 @@
   border-top: 1px dashed var(--doctave-theme-content-bg-secondary);
 }
 
+.dark .section-header hr {
+  border-top: 1px dashed white !important;
+  opacity: 0.6 !important;
+}
+
 .section-header h3 {
   color: var(--AV_Primary_Blue_06, rgba(65, 79, 110, 0.60)) !important;
   font-family: JetBrains Mono, sans-serif;
@@ -347,4 +352,12 @@
   font-size: 34px !important;
   line-height: 34px !important;
   font-weight: 500 !important;
+}
+
+p {
+  font-size: 18px;
+}
+
+.dark p {
+  color: rgba(255, 255, 255, 0.70);
 }
diff --git a/get-started/aws-migration.md b/get-started/aws-migration.md
@@ -5,7 +5,50 @@ meta:
   description: This page gets users started on how to migrate from AWS to api.video.
 ---
 
-AWS migration guide
-=============
+# AWS migration guide
 
-This page gets users started on how to migrate from AWS to api.video.
+Planning to migrate api.video from Amazon S3? We got you covered! 
+
+There are two methods for your disposal that you can use in order to migrate all of your video content from S3 to api.video.
+
+## api.video Import Tool
+
+With api.video, you can use our in-house import tool in order to migrate all of your video in a short time from the popular hosting and video provider.
+
+The simple tool will require you to input serveral parameters from provider you are leaving and from api.video. 
+
+Check out the [Import Tool](https://import.api.video/) now.
+
+
+
+
+### How to get the AWS Access Key and Account Secret
+
+To access AWS, you will need to sign up for an AWS account.
+
+Access keys consist of an access key ID and secret access key, which are used to sign programmatic requests that you make to AWS. If you don't have access keys, you can create them by using the IAM console at https://console.aws.amazon.com/iam/. We recommend that you use IAM access keys instead of AWS root account access keys. IAM lets you securely control access to AWS services and resources in your AWS account.
+
+Note
+To create access keys, you must have permissions to perform the required IAM actions. For more information, see Granting IAM User Permission to Manage Password Policy and Credentials in the IAM User Guide.
+
+To get your access key ID and secret access key
+Open the IAM console at https://console.aws.amazon.com/iam/.
+
+On the navigation menu, choose Users.
+
+Choose your IAM user name (not the check box).
+
+Open the Security credentials tab, and then choose Create access key.
+
+To see the new access key, choose Show. Your credentials resemble the following:
+
+Access key ID: AKIAIOSFODNN7EXAMPLE
+
+Secret access key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
+
+To download the key pair, choose Download .csv file. Store the .csv file with keys in a secure location.
+
+Important
+Keep the keys confidential to protect your AWS account, and never email them. Do not share them outside your organization, even if an inquiry appears to come from AWS or Amazon.com. No one who legitimately represents Amazon will ever ask you for your secret key.
+
+You can retrieve the secret access key only when you initially create the key pair. Like a password, you can't retrieve it later. If you lose it, you must create a new key pair.