create resource page #217 + #218

stratum-mining · Jul 29, 2024 · 1f59ef2 · 1f59ef2
1 parent b123a59
commit 1f59ef2
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 23 deletions.
diff --git a/src/.vuepress/styles/index.styl b/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,16 +236,65 @@ li a[href="/specification/00-Abstract/"] {
   display: block;
 }
 
-// mobile styles
-@media (max-width: 520px) {
+// resource page styles
 
-  .supportersTabs > div > div > nav > a.text-sm {
-    font-size: 0.83rem !important;
-  }
+.link-container {
+  margin-top: 20px;
+  text-align: center;
+}
 
-  .configTabs > div > div > nav > a.text-sm {
-    padding: 10px 14px;
-  }
+#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 {
@@ -251,6 +304,7 @@ li a[href="/specification/00-Abstract/"] {
 }
 .video-container iframe {
   margin: 10px;
+  margin-bottom: 5%;
 }
 
 embed, iframe {
@@ -261,3 +315,48 @@ embed, iframe {
 .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) {
+
+  .supportersTabs > div > div > nav > a.text-sm {
+    font-size: 0.83rem !important;
+  }
+
+  .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;
+  }
+
+}
+
diff --git a/src/resources.md b/src/resources.md
@@ -1,36 +1,54 @@
 ---
-pageHeading: Resources
+pageHeading: Learn
 ---
 
-# Content is knowledge, Knowledge is power
+# LEARN SV2
 
-This resource page is designed to provide users with access to various media related to Stratum V2. This includes detailed guides, tutorials, community contributions, updates, and media resources such as videos and articles. The goal is to support users in their use and promotion of Stratum V2 by offering a hub for all necessary materials and information.
+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.
 
-## Articles
--- **Articles** will go here
+## READ
 
-<embed src="src/.vuepress/public/assets/thesis.pdf" type="application/pdf" width="100%" height="600px" />
+<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>
+
+<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>
 
-## Videos
-<div class="video-container">
-<iframe width="700" height="385" src="https://www.youtube.com/embed/xrdhtQPHg2o" frameborder="0" allowfullscreen></iframe>
+<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>
 
-<iframe width="700" height="385" src="https://youtube.com/embed/f3XsNhLiPBk" frameborder="0" allowfullscreen></iframe>  
+## 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">
-<iframe width="700" height="385" src="https://youtube.com/embed/4r3hb2OqLBg" frameborder="0" allowfullscreen></iframe>
+<div class="video-container series">
+<iframe width="740" height="385" src="https://youtube.com/embed/f3XsNhLiPBk" frameborder="0" allowfullscreen></iframe>
+</div>
 
-<iframe width="700" height="385" src="https://youtube.com/embed/mTXw3UZNT0Y" frameborder="0" allowfullscreen></iframe>
+<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>
 
-## Miscellaneous
--- **Miscellaneous** will go here