diff --git a/testpage/responsive.css b/testpage/responsive.css new file mode 100644 index 0000000..9f08c95 --- /dev/null +++ b/testpage/responsive.css @@ -0,0 +1,108 @@ +@media screen and (max-width: 746px){ + #hamburger-menu{ + opacity: 0; + position: fixed; + } + + label .buns{ + position: fixed; + top: 0.8em; + right: 1em; + z-index:3; + height: 2em; + width: 2em; + } + label .buns::before, + label .buns::after, + label .buns .patty { + position: absolute; + left: 0; + width: 100%; + height: 4px; + border-radius: 5px; + background: #333; + content: ""; + transition:all .3s; + } + + label .buns::before{ + top: 0; + transform-origin: top left; + } + label .buns .patty{ + top: 45%; + } + label .buns::after{ + bottom: 0; + transform-origin: bottom left; + } + + .header-nav nav ul{ + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 2; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: flex-start; + } + .bd-no{ + display: none; + } + .header-nav nav ul::before{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + width: 25em; + background: rgba(188, 119, 194, .95); + transform: skewX(-20deg) translateX(-160%); + transform-origin: bottom left; + transition: transform.3s; + content: ""; + } + + .header-nav nav ul li{ + margin: 1em 1em; + padding: 0.2em 1em; + transform: translateX(-120%); + transition: all .15s, transfrom .5s; + transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + } + + /* .header-nav nav{ + transform: translateX(-120%); + } */ + #hamburger-menu:checked + label .buns::before, + #hamburger-menu:checked + label .buns::after{ + width: 130%; + } + #hamburger-menu:checked + label .buns .patty{ + transform: scale(0); + } + #hamburger-menu:checked + label .buns::before { + transform: rotate(45deg); + } + #hamburger-menu:checked + label .buns::after { + transform: rotate(-45deg); + } + + #hamburger-menu:checked ~ nav ul::before { + transform: skewX(-20deg) translateX(-60%); + } + #hamburger-menu:checked ~ nav ul li{ + transform: translateX(0); + } + #hamburger-menu:checked ~ .light-dark{ + background: #000; + opacity: .5; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} \ No newline at end of file diff --git a/testpage/test.css b/testpage/test.css index 989fa49..8e0c8d0 100644 --- a/testpage/test.css +++ b/testpage/test.css @@ -91,7 +91,10 @@ padding-top: 10px; padding-bottom: 10px; } - +#hamburger-menu{ + opacity: 0; + position: fixed; +} .header.change-color { background-color: #ffffff; } diff --git a/testpage/test.html b/testpage/test.html index a35f667..05068fb 100644 --- a/testpage/test.html +++ b/testpage/test.html @@ -9,6 +9,7 @@ + Document @@ -16,8 +17,15 @@

+ + + -
@@ -43,7 +44,7 @@
-

みんなで一緒に、
+

みんなで一緒に、
プログラミングに、
取り組んでいこう。

@@ -103,8 +104,8 @@ 受講生のみなさんの研究を鳥海山から世界に向けて発信する気持ちで、一緒に挑戦していきましょう。

キャラ画像ウミ浮輪 -
+ width="300" height="227"> + @@ -112,16 +113,16 @@

授業内容について

- -
+ +
-

class content

-

最初の顔合わせをしました。

-

2021.08.07

+

class content

+

最初の顔合わせをしました。

+

2021.08.07

-
- +
+