From 3ceaac240c36853adb30b9cc1ed34006acfd26ec Mon Sep 17 00:00:00 2001 From: Alexandre NOEL Date: Tue, 20 Aug 2024 11:41:27 +0200 Subject: [PATCH] Creating depot --- logo.png | Bin 0 -> 1954 bytes menu.html | 41 +++++++++++ style.css | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 243 insertions(+) create mode 100644 logo.png create mode 100644 menu.html create mode 100644 style.css diff --git a/logo.png b/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..7afa34109851ab21e8ebca93906424b3a84c8444 GIT binary patch literal 1954 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!SkfJR9T^xl_H+M9WCijSl0AZa z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#N0|Vo;0G|+7pn}i-njb^7 zJ_Trg_S5|6tNz7L^NYX6n?Qrt?wViyH9q-ifAQD+9H{=;U*ogC)+c|>|A89+oislN zY63NqiTrSA#3fF)MgAba01@1sAisbSoB@|YW&pj3%*DdS?bJ`WrGVz(F&U2(76%Y? zAxy#l|Np17^E?K|^n#KgzhEGZ0R+OD8~wSZ7JdIbMOb?M-+8i8-#C9T)v4}QR^rO8 z%AJ1gpU`rN10At{jNe7;yy~*}c&6vq9G*>#Y`wpO*|QYcw(Q`onLBmagUw9ZtN0ho ziEZcnI*rLUsOkEGV@u~Vsy|NTVp}0-ev56bqeAM9vv>ViH@>a)ypY3aR#aj2DN^IP z^{zb2_x0?oS9YFTDDA!wn4%dNlf2zs7HVGUGXrus3p^r=85pejK$!8&wuQ|=LG}_) zUsv`gY&=|sBBAZ?O&J)N7J9lkhD01*dhNUOWe16dhrdOR1ZG~{w1p>m?OG>Yuhki` z5$auCOM_NM%UC$Dt`uHdy>Q3&`}4EZVvN^K&#v=%SNm>~H@jjF^B>c#rC)g+SokA$ z=``H9aYaYN;dD_5UuNr!gfEK@`RJ=%*xO*h-Bj{EZU(QmbHucOjjPOb^c+|g$S^jo zzCJ}+h-Pp-*ldbTqBdt~b)(;MG9PX5g`*#G+gQ>4WS z5t*tZ^PC@8)+`bCT61t?c;n)i`xK%J-jy<3_G!E*-Jq7z_cgtrKY}I9o;SfyY?ad8 zf=5p@Pi~pL{Ja8t!_LhC3)g+WQ(47((=n*Hk^4aR^efVF9MhSvG+Ytb*;M1O?bd4h zPpiLlWH0Fxeqr=Yr+BWMq0g(}9EOsFCvE=@?x^gR5|C0&_7#%ev6fLbQ1ru(q%S`T z?HgV8A7Osr5hu21o^|=k*Qb6T6cKqak5A>j{Rw`%ITbFkVfXkBiKHAzXZW;#>G8R( za-aX?ER-;iy=?28z!>sgr)7S_`iwcig^BFN+;NPhZq4Q1#dCrfNmB zhUxz13(NnW{2I3Z@r$=Do)K$eEB`kx-p+Mt%Eq(u_8Z^d_snQlz4h~augvG$9PviK z)_+#H{wGZFgXyAohqg2B`?>beclo{c^``!RpUu6m<klukOZzW> zmovicU(+f{VER=pag8WRNi0dVN-jzTQVd20Mh3bDX1az(A%+H4CYDx)mf8jeRt5%= z+v_)>Xvob^$xN%nts&#pabQ+qPypFboS#-wo>-L1kWo@nP;8~IpP8GOo(ja7$=Q1O zMd^Fa%gzO=l>n&?$tcZDva)i?PcF?(%`3683IHlCW-wg-f44rG8c&cZR#qOVnduoN z45o%g{k_4BKsDk>=0MeiXQq^7fRxD8Fy8?xkwjABo0*$hQdyA70CtsrL0-E3rZ7J= zb9_U9su&DSEe$PAEi6qf7tg)~RKXyOWKM8q6;OqdiHV7mld4tBYM`_)l5}X0Cqr6h zPAbs*ditdWIr)hx#rmdZ`hI0)Vflfk`bH*(ruylbCGq)1ndzB%i8=8(`RV!bnaTNi d@rEX5rUsUJK&K_PfBy}#*wfX|Wt~$(6994fG;;s| literal 0 HcmV?d00001 diff --git a/menu.html b/menu.html new file mode 100644 index 0000000..3af9dad --- /dev/null +++ b/menu.html @@ -0,0 +1,41 @@ + + + + + + Pure HTML5/CSS3 Sidemenu + + + + + + + + +
+

Title h1

+

Paragraph here

+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8e4edfb --- /dev/null +++ b/style.css @@ -0,0 +1,202 @@ +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); + +body { + margin: 0; + font-family: Arial, sans-serif; + background: #f4f4f4; + transition: background 0.3s, color 0.3s; + display: flex; +} + +body.dark { + background: #333; + color: #f4f4f4; +} + +.sidebar { + position: fixed; + left: 0; + top: 0; + width: 60px; + height: 100%; + background: #231f20; + padding: 20px; + box-sizing: border-box; + transition: width 0.3s ease-in-out; + overflow: hidden; + z-index: 1000; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.sidebar.close { + width: 60px; +} + +.sidebar.close .profile-label span, +.sidebar.close a span { + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; +} + +.sidebar:not(.close) .profile-label span, +.sidebar:not(.close) a span { + opacity: 1; + visibility: visible; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; +} + +.sidebar ul { + margin-left: -6px; + padding: 0; + list-style: none; +} + +.sidebar ul li span { + margin-left: 10px; +} + +.sidebar ul li a:has(img) { + padding: 0; +} + +.sidebar .toggle { + cursor: pointer; + font-size: 23px; + color: #ddd; + display: block; + margin: 0 0 20px -3px; +} + +.sidebar .toggle-switch { + cursor: pointer; + color: #ddd; + display: flex; + align-items: center; + margin-top: auto; +} + +.sidebar .toggle-switch .mode-text { + margin-left: 10px; +} + +.content { + margin-left: 60px; + padding: 20px; + transition: margin-left 0.3s ease-in-out; + flex-grow: 1; +} + +#toggle-sidebar:checked ~ .sidebar { + width: 250px; +} + +#toggle-sidebar:checked ~ .content { + margin-left: 250px; +} + +#toggle-sidebar:checked ~ .sidebar .profile-label span, +#toggle-sidebar:checked ~ .sidebar a span { + opacity: 1; + visibility: visible; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; +} + +.sidebar .profile-label, +.sidebar a { + display: flex; + align-items: center; + font-size: 18px; + color: #ddd; + text-decoration: none; + margin: 10px 0; + transition: font-size 0.3s ease-in-out, visibility 0.3s ease-in-out; + position: relative; + padding: 5px 0 0 5px; +} + +.sidebar a:hover, .sidebar label:hover { + color: #fff; +} + +.sidebar .profile-label:before, +.sidebar a:before { + content: attr(data-icon); + font-size: 24px; + display: inline-block; + width: 30px; + text-align: center; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); +} + +#toggle-dark-mode:checked ~ body { + background: #333; + color: #f4f4f4; +} + +#toggle-dark-mode:checked ~ .sidebar { + background: #333; +} + +#toggle-dark-mode:checked ~ .sidebar a, +#toggle-dark-mode:checked ~ .sidebar .profile-label, +#toggle-dark-mode:checked ~ .sidebar .toggle-switch .mode-text { + color: #f4f4f4; +} + +.sidebar .top-menu { + flex-grow: 1; +} + +.sidebar .bottom-menu { + margin-top: 20px; +} + +.sidebar .bottom-menu ul li { + height: 40px; + display: flex; + align-items: center; +} + +@media screen and (max-width: 768px) { + .sidebar { + width: 60px; + } + + .content { + margin-left: 60px; + padding: 10px; + } + + #toggle-sidebar:checked ~ .sidebar { + width: 250px; + } + + #toggle-sidebar:checked ~ .content { + margin-left: 250px; + } + + .sidebar .toggle { + display: block; + margin: 10px 0; + } + + .sidebar .toggle-switch { + display: none; + } +} + +@media screen and (max-width: 480px) { + .sidebar .toggle { + font-size: 18px; + } + + .content h1 { + font-size: 24px; + } +}