Update index.css

nknighta · Jun 6, 2024 · c648e31 · c648e31
1 parent 5018899
commit c648e31
Showing 1 changed file with 150 additions and 25 deletions.
diff --git a/index.css b/index.css
@@ -5,6 +5,154 @@
     margin: 0;
     font-family: 'Noto Sans JP', sans-serif;
 }
+
+body {
+    background: #000021;
+}
+
+
+header {
+    /*ヘッダーを固定*/
+    position: fixed;
+    width: 100%;
+    height: 90px;
+    background: #000021;
+    z-index: 2;
+}
+
+header h1 {
+    color: #ffffff;
+    font-size: 30px;
+    padding: 20px;
+    text-align: center;
+
+}
+
+#hamburger {
+    display: block;
+    position: absolute;
+    top: 20px;
+    left: 30px;
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    transition: 1s;
+}
+
+.inner_line1 {
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 50px;
+    height: 3px;
+    background-color: #ffffff;
+    transition: .38s;
+    border-radius: 4px;
+    margin: 10px 0;
+}
+
+.inner_line2 {
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 50px;
+    height: 3px;
+    background-color: #ffffff;
+    transition: .38s;
+    border-radius: 4px;
+    margin: 20px 0;
+}
+
+.inner_line3 {
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 50px;
+    height: 3px;
+    background-color: #ffffff;
+    transition: .38s;
+    border-radius: 4px;
+    margin: 30px 0;
+}
+
+.in {
+    transform: translateX(100%);
+}
+
+.line_1,
+.line_2,
+.line_3 {
+    background: #fff;
+    padding: 0 10px;
+}
+
+.line_1 {
+    /*-45度回転させる*/
+    transform: rotate(-55deg);
+    top: 10;
+}
+
+.line_2 {
+    opacity: 0;
+}
+
+.line_3 {
+    /*45度回転させる*/
+    transform: rotate(55deg);
+    bottom: 0;
+}
+
+#nav {
+    position: absolute;
+    top: 0;
+    /*ナビメニューを左に隠した状態になる*/
+    left: -40%;
+    width: 40%;
+    height: 100vh;
+    background: #000021;
+    color: #fff;
+    /*０.7秒かけてナビメニューがスライドする*/
+    transition: .38s;
+}
+
+    #nav {
+        position: absolute;
+        top: 0;
+        /*ナビメニューを左に隠した状態になる*/
+        left: -100%;
+        width: 100%;
+        height: 100vh;
+        background: #000021;
+        color: #fff;
+        /*０.7秒かけてナビメニューがスライドする*/
+        transition: .38s;
+    }
+
+
+#nav ul {
+    padding-top: 80px;
+}
+
+#nav ul li {
+    list-style-type: none;
+    font-size: 20px;
+}
+
+#nav a {
+    display: block;
+    text-decoration: none;
+    color: #fff;
+    margin: 0 15px;
+    padding: 10px;
+    transition: .5s;
+}
+
+#nav li a:hover {
+    color: #aaa;
+    background: #7856ff;
+    border-bottom: none;
+}
+
 .myapps {
     text-align: center;
     padding: 0.7vh;
@@ -15,28 +163,18 @@
     justify-content: center;
 }
 
-.twitter-com{
+.twitter-com {
     text-align: center;
     padding: 2vh;
     height: 660px;
 }
 
-.headertext {
-    font-size: 4vh;
-    color: #7856ff;
-    font-family: 'Noto Sans JP', sans-serif;
-    text-shadow: 1px 1px 2px #7856ff, 0 0 2em #ff2200;
-    margin: 10px;
-}
 
 ::selection {
     background: #7856ff;
     color: #000;
 }
 
-body {
-    background: #000021;
-}
 
 .container-main {
     color: #fff;
@@ -69,28 +207,16 @@ body {
 .swiper-slide img {
     height: 300px;
     max-width: 100%;
+    z-index: 0;
 }
 
 .context {
     width: 100%;
     position: absolute;
 }
 
-.context h1 {
-    text-align: center;
-    color: #fff;
-    font-size: 50px;
-    height: 100% auto;
-}
 
 
-@media screen and (max-width: 600px) {
-    .context h1 {
-        padding: 30px 0;
-        font-size: 30px;
-        text-align: center;
-    }
-}
 
 .container-main-left-img {
     display: flex;
@@ -140,4 +266,3 @@ body {
     background: linear-gradient(to left, #8f94fb, #4e54c8);
     width: 100%;
 }
-