puth the css in the head

Team1157 · Aug 11, 2024 · 71ce1c8 · 71ce1c8
1 parent 95a30b3
commit 71ce1c8
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 122 deletions.
diff --git a/src/.vuepress/config.ts b/src/.vuepress/config.ts
@@ -12,21 +12,116 @@ export default defineUserConfig({
     ],
     ['meta', { property: 'og:type', content: 'article' }],
     [
-      'script',
+      'style',
       {},
       `
-		function expandImage(element) {
-		  var container = element.parentElement;
-		  container.classList.toggle('expanded');
-		  var image = container.querySelector('img');
-		  if (container.classList.contains('expanded')) {
-		    container.style.height = 'auto';
-		    element.innerHTML = '&#9650;'; // Up arrow
-		  } else {
-		    image.style.height = '150px';
-		    element.innerHTML = '&#9660;'; // Down arrow
-		  }
-		}
+         br {
+            display: block;
+            margin: 30px 0;
+         }
+         
+         .about-us, .join-now {
+           padding: 0px;
+           border-radius: 10px;
+           color: #ffffff;
+         }
+         
+         .contentuwu {
+           display: flex;
+           align-items: center;
+         }
+         
+         .text-content {
+           flex: 1;
+         }
+         
+         .text-content h2 {
+           margin-left: 20px;
+           font-size: 2rem;
+         }
+         
+         .text-content p {
+           font-size: 1.2rem;
+           line-height: 1.5;
+           margin-left: 20px;
+         }
+         
+         .team-image {
+           flex-shrink: 0;
+           max-width: 30%;
+           height: auto;
+           border-radius: 10px;
+           margin-left: 20px;
+         }
+         
+         .team-image-right {
+           flex-shrink: 0;
+           max-width: 30%;
+           height: auto;
+           border-radius: 10px;
+           margin-right: 20px;
+         }
+         h2.hero-name{
+         	color:  #3e2137;
+         }
+         h2{
+         	color: #d4af37;
+         }
+         h3{
+         	color:  #ebbcfc;
+         }
+         .image-container {
+           position: relative;
+           height: 150px;
+           overflow: hidden;
+           margin-bottom: 20px;
+         }
+       
+         .image-container img {
+           width: 100%;
+           position: relative;
+         }
+       
+         .arrow {
+           position: absolute;
+           bottom: 0;
+           left: 50%;
+           transform: translateX(-50%);
+           font-size: 20px;
+           cursor: pointer;
+           background-color: rgba(0, 0, 0, 0.7);
+           padding-top: 3px;
+           padding-right: 5px;
+           padding-bottom: 3px;
+           padding-left: 5px;
+           border-radius: 50%;
+         }
+         .card-container {
+             display: grid;
+             grid-template-columns: repeat(3, 1fr);
+             gap: 30px;
+         }
+         .card {
+             padding: 35px;
+             border-radius: 20px;
+             text-align: center;
+             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+             transition: transform 0.2s;
+         }
+         .card:hover {
+             transform: translateY(-5px);
+         }
+         .card-icon {
+             font-size: 40px;
+             margin-bottom: 10px;
+         }
+         .card-title {
+             font-size: 18px;
+             margin-bottom: 10px;
+         }
+         .card-text {
+             font-size: 14px;
+         }
     `,
     ],
   ],

diff --git a/src/README.md b/src/README.md
@@ -31,115 +31,6 @@ config:
   - type: custom
 ---
 
-<style>
-  br {
-     display: block;
-     margin: 30px 0;
-  }
-
-  .about-us, .join-now {
-    padding: 0px;
-    border-radius: 10px;
-    color: #ffffff;
-  }
-
-  .contentuwu {
-    display: flex;
-    align-items: center;
-  }
-
-  .text-content {
-    flex: 1;
-  }
-
-  .text-content h2 {
-    margin-left: 20px;
-    font-size: 2rem;
-  }
-
-  .text-content p {
-    font-size: 1.2rem;
-    line-height: 1.5;
-    margin-left: 20px;
-  }
-
-  .team-image {
-    flex-shrink: 0;
-    max-width: 30%;
-    height: auto;
-    border-radius: 10px;
-    margin-left: 20px;
-  }
-
-  .team-image-right {
-    flex-shrink: 0;
-    max-width: 30%;
-    height: auto;
-    border-radius: 10px;
-    margin-right: 20px;
-  }
-  h2.hero-name{
-  	color:  #3e2137;
-  }
-  h2{
-  	color: #d4af37;
-  }
-  h3{
-  	color:  #ebbcfc;
-  }
-  .image-container {
-    position: relative;
-    height: 150px;
-    overflow: hidden;
-    margin-bottom: 20px;
-  }
-
-  .image-container img {
-    width: 100%;
-    position: relative;
-  }
-
-  .arrow {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 20px;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.7);
-    padding-top: 3px;
-    padding-right: 5px;
-    padding-bottom: 3px;
-    padding-left: 5px;
-    border-radius: 50%;
-  }
-  .card-container {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 30px;
-  }
-  .card {
-      padding: 35px;
-      border-radius: 20px;
-      text-align: center;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      transition: transform 0.2s;
-  }
-  .card:hover {
-      transform: translateY(-5px);
-  }
-  .card-icon {
-      font-size: 40px;
-      margin-bottom: 10px;
-  }
-  .card-title {
-      font-size: 18px;
-      margin-bottom: 10px;
-  }
-  .card-text {
-      font-size: 14px;
-  }
-</style>
 <section id="about">
 <div class="about-us">
   <div class="contentuwu">