Merge pull request #227 from omerskywalker/resourcePage

Create resource page #217 + #218

package.json

@@ -38,7 +38,8 @@
     "vuepress": "1.9.9",
     "vuepress-plugin-clean-urls": "1.1.2",
     "vuepress-plugin-code-copy": "1.0.6",
-    "vuepress-plugin-sitemap": "2.3.1"
+    "vuepress-plugin-sitemap": "2.3.1",
+    "webpack": "^4.47.0"
   },
   "dependencies": {
     "markdown-it": "^13.0.1"

src/.vuepress/config.js

@@ -96,6 +96,7 @@ module.exports = {
         link: "https://github.com/stratum-mining/stratum",
       },
       { text: "Blog", link: "/blog/" },
+      { text: "Resources", link: "/resources/" },
       { text: "Specification", link: "/specification/" },
     ],
   },

src/.vuepress/styles/index.styl

@@ -111,6 +111,10 @@ th, td {
   border-color: #282c34;
 }
 
+h1, h2 {
+  text-shadow: 0.5px 0.5px 1px #5bebf3;
+}
+
 .page-heading {
     position: relative;
 
@@ -232,6 +236,96 @@ li a[href="/specification/00-Abstract/"] {
   display: block;
 }
 
+// resource page styles
+
+.link-container {
+  margin-top: 20px;
+  text-align: center;
+}
+
+#read, #watch {
+  letter-spacing: 1px;
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+}
+
+#read:after, #watch:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px; /* Adjust this value to control the space between text and underline */
+  height: 3px; /* Adjust this value to control the thickness of the underline */
+  background-color: white; /* Use current text color for the underline */
+}
+
+.external-link {
+  display: inline-block;
+  padding: 10px 20px;
+  color: rgb(21, 77, 131);
+  background-color: rgb(91, 235, 243);
+  text-decoration: none;
+  border-radius: 5px;
+  position: relative; /* Required for the pseudo-element */
+  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
+  transition: background-color 0.3s ease, color 0.3s ease;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
+}
+
+.external-link::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 2px solid transparent; /* Initial transparent border */
+  border-radius: 5px; /* Same border radius as the parent */
+  transition: border-color 0.3s ease;
+  box-sizing: border-box;
+  pointer-events: none; /* Ensure the pseudo-element doesn't interfere with pointer events */
+}
+
+.external-link:hover {
+  background-color: #10ced8;
+}
+
+.external-link:hover::before {
+  border-color: white; /* Color of the border on hover */
+}
+
+.video-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.video-container iframe {
+  margin: 10px;
+  margin-bottom: 5%;
+}
+
+embed, iframe {
+  border: 1px solid #ccc;
+  margin-top: 20px;
+}
+
+.series {
+  justify-content: center;
+}
+
+.read-link-container {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 5%;
+  border: 1px solid rgba(91, 235, 243, .7)
+  border-radius: 5px;
+  padding-bottom: 3%;
+
+}
+
 // mobile styles
 @media (max-width: 520px) {
 
@@ -242,4 +336,27 @@ li a[href="/specification/00-Abstract/"] {
   .configTabs > div > div > nav > a.text-sm {
     padding: 10px 14px;
   }
-}
+
+  .content__default h1:first-of-type {
+    font-size: 3rem;
+    letter-spacing: 2px;
+}
+
+  .content__default p:first-of-type {
+    font-size: 1.5rem;
+    padding-top: 5%;
+}
+
+  .video-container {
+    flex-direction: column;
+  }
+
+  .video-container iframe {
+    margin: 5%;
+    margin-left: 0px;
+    margin-right: 0px;
+    width: 375px !important;
+  }
+
+}
+

src/resources.md

@@ -0,0 +1,54 @@
+---
+pageHeading: Learn
+---
+
+# LEARN SV2
+
+This resource page is designed to provide users with access to various media related to Stratum V2. The goal is to support users in their use and promotion of Stratum V2 by offering a hub for all necessary materials and information.
+
+## READ
+
+<div class="read-link-container">
+  <h2 class="read-link">Master Thesis on StratumV2</h2>
+   <a href="https://webthesis.biblio.polito.it/27678/" target="_blank" class="external-link">View the thesis</a>
+</div>
+
+<div class="read-link-container">
+  <h2 class="read-link">Satsie's Pocket Guide to StratumV2</h2>
+   <a href="https://satsie.dev/zines/sv2.html" target="_blank" class="external-link">View the magazine</a>
+</div>
+
+<div class="read-link-container">
+  <h2 class="read-link">The Bullish Case for StratumV2</h2>
+   <a href="https://www.swanbitcoin.com/industry/the-bullish-case-for-stratum/" target="_blank" class="external-link">View the article</a>
+</div>
+
+## WATCH
+
+<div class="video-container series">
+<iframe width="740" height="385" src="https://www.youtube.com/embed/xrdhtQPHg2o" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<div class="video-container series">
+<iframe width="740" height="385" src="https://youtube.com/embed/f3XsNhLiPBk" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<div class="video-container series">
+<iframe width="740" height="385" src="https://youtube.com/embed/4r3hb2OqLBg" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<div class="video-container series">
+<iframe width="740" height="385" src="https://youtube.com/embed/mTXw3UZNT0Y" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<div class="video-container series">
+<iframe width="740" height="385" src="https://www.youtube.com/embed/videoseries?list=PLZXAi8dsUIn0GmElOcmqUtgA5psfFIZoO" frameborder="0" allowfullscreen></iframe>
+</div>
+
+<script>
+
+    console.log('hello')
+
+
+    </script>
+