スタイル調整

progedu · Jan 6, 2025 · 4a3d663 · 4a3d663
1 parent 2cb3669
commit 4a3d663
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 5 deletions.
diff --git a/2024/winter/entry/assets/css/style.css b/2024/winter/entry/assets/css/style.css
@@ -959,4 +959,96 @@ footer {
   .oubo .description {
     margin-top: 2rem;
   }
-}
+}
+
+.news {
+  background: url(../img/news_header.png) top center no-repeat;
+  background-size: cover;
+  background-color: #fccfff;
+}
+
+.news > div {
+  margin: 3rem 0;
+}
+
+.news ul {
+  display: block;
+  font-family: "M PLUS Rounded 1c", sans-serif;
+  width: 90%;
+  margin: 0 auto;
+  background-color: white;
+  border: 3px #d58fdd solid;
+  border-radius: 10px;
+  margin-bottom: 3rem;
+  padding: 0.5rem 1rem;
+} 
+
+.news ul li {
+  list-style: none;
+  font-size: 1.2rem;
+  border-bottom: 2px #e7b4ed dashed;
+  padding: 0.5rem;
+} 
+
+.news ul li:last-child {
+  border-bottom: 0;
+}
+
+.news article {
+  width: 90%;
+  margin: 0 auto;
+  text-align: center;
+  background-color: #FFFFFFCC;
+  padding: 2rem;
+
+  font-family: "M PLUS Rounded 1c", sans-serif;
+}
+
+.news h2 {
+  font-family: "M PLUS Rounded 1c", sans-serif;
+  color: rgb(255 255 255);
+  font-weight: 400;
+  font-size: 3vw;
+  text-shadow: 2px 2px rgb(181 181 181);
+  background: #a944b4ee;
+  display: inline;
+  padding: 10px 50px;
+  border-radius: 10px;
+}
+
+.news article h1 {
+  font-size: 2rem;
+  padding-bottom: 1rem;
+}
+
+.news p {
+  text-align: left;
+}
+
+.news p.date {
+  text-align: right;
+}
+
+.news p strong {
+  font-weight: bold;
+}
+
+.news p img {
+  max-width: 90%;
+  margin-left: 5%;
+}
+
+.news article .btn {
+  background-color: #9a2fa6ee;
+  color: #FFF;
+}
+
+@media (max-width: 768px) {
+  .news h2 {
+    font-size: 6vw;
+    text-shadow: 1px 1px rgb(181 181 181);
+  }
+  .news article h1{
+    font-size: 1.2rem;
+  }
+}
diff --git a/2024/winter/entry/assets/img/news_header.png b/2024/winter/entry/assets/img/news_header.png
diff --git a/2024/winter/entry/index.html b/2024/winter/entry/index.html
@@ -43,16 +43,16 @@ <h1>ZEN Study<br>動くWebアプリコンテスト<br>2024 冬</h1>
     <div class="limit">
       応募締切 <strong>2025</strong>年<strong>1</strong>月<strong>31</strong>日(金)23：59
     </div>
+    <div class="text-2xl text-center p-5 attention">
+      <canvas class="background"></canvas>
+      <h3 class="w-[80%] mx-auto">ZEN Studyプログラミング入門コースで学んだN高グループ生、N中等部生ならびにZEN Study一般受講者が、プログラミングの成果物を競うコンテストです。</h3>
+    </div>
     <div class="news p-2">
       <div class="text-center"><h2>お知らせ</h2></div>
       <ul class="shadow rounded">
         <li>2024.12.18 コンテストの応募を開始しました</li>
       </ul>
     </div>
-    <div class="text-2xl text-center p-5 attention">
-      <canvas class="background"></canvas>
-      <h3 class="w-[80%] mx-auto">ZEN Studyプログラミング入門コースで学んだN高グループ生、N中等部生ならびにZEN Study一般受講者が、プログラミングの成果物を競うコンテストです。</h3>
-    </div>
     <div class="rule p-2 animation animation-below">
       <h2 class="text-center m-5">応募規定</h2>
       <dl class="p-4 mx-auto mt-5 mb-5 shadow-lg animation animation-below rule_common">