Skip to content

Commit ee2087c

Browse files
lucyydotplucyydotp
committed
use a css grid for layout. it doesn't scale yet
1 parent c9d98c5 commit ee2087c

File tree

6 files changed

+155
-205
lines changed

6 files changed

+155
-205
lines changed

‎package-lock.json‎

Lines changed: 41 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"autoprefixer": "^10.4.13",
1313
"postcss": "^8.4.21",
1414
"postcss-cli": "^10.1.0",
15+
"sass": "^1.58.3",
1516
"tailwindcss": "^3.2.7",
1617
"vite": "^4.1.4"
1718
},

‎assets/devden_icon_2-3_width.png‎ renamed to ‎src/assets/devden_icon_2-3_width.png‎

File renamed without changes.

‎assets/devden_logo.svg‎ renamed to ‎src/assets/devden_logo.svg‎

File renamed without changes.

‎src/index.html‎

Lines changed: 72 additions & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -8,219 +8,86 @@
88
<link rel="stylesheet" href="/main.css">
99
<link rel="stylesheet" href="../node_modules/@fontsource/cascadia-code">
1010
<link rel="stylesheet" href="../node_modules/@fontsource/montserrat">
11+
<link rel="stylesheet" href="/index.scss"/>
1112
</head>
1213
<body>
1314
<script src="node_modules/flowbite/dist/flowbite.min.js"></script>
14-
<div class="h-screen bg-gradient-to-r from-teal via-indigo to-pink">
15-
<div class="pb-10">
16-
<nav class="fixed top-0 z-50 w-full bg-deeper-blue border-deeper-blue dark:bg-gray-800 dark:border-gray-700">
17-
<div class="px-3 py-3 lg:px-5 lg:pl-3">
18-
<div class="flex items-center justify-between font-cascadia text-white">
19-
<div class="flex items-center justify-start">
20-
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
21-
aria-controls="logo-sidebar"
22-
type="button"
23-
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
24-
<span class="sr-only">Open sidebar</span>
25-
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
26-
xmlns="http://www.w3.org/2000/svg">
27-
<path clip-rule="evenodd" fill-rule="evenodd"
28-
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
29-
</svg>
30-
</button>
31-
<a href="https://developerden.net" class="flex ml-2 hidden lg:inline">
32-
<img src="/assets/devden_logo.svg" class="h-8 mr-3" alt="Developer Den Logo"/>
33-
</a>
34-
</div>
35-
<a href="/" class="hover:bg-gray-300 rounded-2xl ease-in-out duration-300">home</a>
36-
<a href="/rules"
37-
class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">rules</a>
38-
<a href="/services-rules"
39-
class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">services
40-
rules</a>
41-
<a href="/projects"
42-
class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">projects</a>
43-
<a href="/learning-resources/"
44-
class="font-bold rounded-2xl px-3 py-1 bg-gradient-to-r from-teal via-indigo to-pink text-gray-50">learning
45-
resources</a>
15+
<!-- tailwind uses .container for things and it's messing with my grid -->
16+
<div class="devden-container">
17+
<nav class="topbar">
18+
<div class="px-3 py-3 lg:px-5 lg:pl-3">
19+
<div class="flex items-center justify-between font-cascadia text-white">
20+
<div class="flex items-center justify-start">
21+
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
22+
aria-controls="logo-sidebar"
23+
type="button"
24+
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
25+
<span class="sr-only">Open sidebar</span>
26+
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
27+
xmlns="http://www.w3.org/2000/svg">
28+
<path clip-rule="evenodd" fill-rule="evenodd"
29+
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
30+
</svg>
31+
</button>
32+
<a href="https://developerden.net" class="flex ml-2 hidden lg:inline">
33+
<img src="/assets/devden_logo.svg" class="h-8 mr-3" alt="Developer Den Logo"/>
34+
</a>
4635
</div>
36+
<a href="/" class="hover:bg-gray-300 rounded-2xl ease-in-out duration-300">home</a>
37+
<a href="/rules"
38+
class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">rules</a>
39+
<a href="/services-rules"
40+
class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">services
41+
rules</a>
42+
<a href="/projects"
43+
class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">projects</a>
44+
<a href="/learning-resources/"
45+
class="font-bold rounded-2xl px-3 py-1 bg-gradient-to-r from-teal via-indigo to-pink text-gray-50">learning
46+
resources</a>
4747
</div>
48-
</nav>
49-
</div>
50-
51-
<div>
52-
<aside id="logo-sidebar"
53-
class="fixed top-0 left-0 z-40 mr-4 w-auto h-screen pt-20 transition-transform -translate-x-full bg-deeper-blue sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
54-
aria-label="Sidebar">
55-
<div class="h-full px-3 pb-4 overflow-y-auto text-white dark:bg-gray-800">
56-
<ul class="space-y-2">
57-
<li>
58-
<a href="#"
59-
class="flex items-center p-2 text-base font-normal rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
60-
<span class="ml-3">java</span>
61-
</a>
62-
</li>
63-
<li>
64-
<a href="#"
65-
class="flex items-center p-2 text-base font-normal rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
66-
<span class="flex-1 ml-3 whitespace-nowrap">java 2</span>
67-
</a>
68-
</li>
69-
<li>
70-
<a href="#"
71-
class="flex items-center p-2 text-base font-normal rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
72-
<span class="flex-1 ml-3 whitespace-nowrap">not java</span>
73-
</a>
74-
</li>
75-
<li>
76-
<a href="#"
77-
class="flex items-center p-2 text-base font-normal rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
78-
<span class="flex-1 ml-3 whitespace-nowrap">also not java</span>
79-
</a>
80-
</li>
81-
<li>
82-
<a href="#"
83-
class="flex items-center p-2 text-base font-normal rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
84-
<span class="flex-1 ml-3 whitespace-nowrap">skript </span>
85-
</a>
86-
</li>
87-
<li>
88-
<a href="#"
89-
class="flex items-center p-2 text-base font-normal text-white rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
90-
<span class="flex-1 ml-3 whitespace-nowrap">not java 2</span>
91-
</a>
92-
</li>
93-
<li>
94-
<a href="#"
95-
class="flex items-center p-2 text-base font-normal text-white rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
96-
<span class="flex-1 ml-3 whitespace-nowrap">skript 2</span>
97-
</a>
98-
</li>
99-
</ul>
100-
</div>
101-
</aside>
48+
</div>
49+
</nav>
50+
<main>
51+
<div class="sidebar">
52+
<ul>
53+
<li>
54+
<a href="#">java</a>
55+
</li>
56+
<li>
57+
<a href="#">java 2</a>
58+
</li>
59+
<li>
60+
<a href="#">not java</a>
61+
</li>
62+
<li>
63+
<a href="#">also not java</a>
64+
</li>
65+
<li>
66+
<a href="#">skript</a>
67+
</li>
68+
<li>
69+
<a href="#">skript 2</a>
70+
</li>
71+
<li>
72+
<a href="#">molang</a>
73+
</li>
74+
</ul>
75+
</div>
10276

10377

104-
<div class="pt-4 bg-deep-blue min-h-screen">
105-
<div class="mt-14">
106-
<div class="mb-20 text-white">
107-
<h1 class="text-6xl font-cascadia mt-2 py-2 text-center">learning resources - Java</h1>
108-
<h2 class="text-2xl py-2 font-montserrat text-center">
109-
Java is an Object Oriented language designed by James Gosling in 1995
110-
</h2>
111-
<div class="">
112-
<ul class="space-y-1 list-disc">
113-
<li class="ml-10"><p class="font-montserrat text-l"><i>java.com</i>
114-
</p></li>
115-
</ul>
116-
</div>
117-
</div>
78+
<section>
79+
<h1 class="text-6xl font-cascadia mt-2 py-2 text-center">learning resources - Java</h1>
80+
<h2 class="text-2xl py-2 font-montserrat text-center">
81+
Java is an Object Oriented language designed by James Gosling in 1995
82+
</h2>
83+
<div class="">
84+
<ul class="space-y-1 list-disc">
85+
<li class="ml-10"><p class="font-montserrat text-l"><i>java.com</i>
86+
</p></li>
87+
</ul>
11888
</div>
119-
</div>
120-
</div>
89+
</section>
90+
</main>
12191
</div>
122-
123-
124-
<!--<div class="bg-deep-blue min-h-screen flex h-full bg-fixed flex-col">-->
125-
<!-- <div class="w-full bg-gradient-to-r from-teal via-indigo to-pink pb-1">-->
126-
<!-- <nav class="fixed top-0 z-50 w-full bg-deep-blue text-white font-montserrat shadow-md ">-->
127-
<!-- <div class="container flex flex-wrap items-center justify-between mx-auto">-->
128-
<!-- <div class="flex items-center">-->
129-
<!-- <img src="devden_logo.svg" class="sm:h-5" alt="DevDen logo">-->
130-
<!-- </div>-->
131-
<!-- <a href="/" class="hover:bg-gray-300 rounded-2xl ease-in-out duration-300">home</a>-->
132-
<!-- <a href="/rules" class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">rules</a>-->
133-
<!-- <a href="/services-rules" class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">services-->
134-
<!-- rules</a>-->
135-
<!-- <a href="/projects"-->
136-
<!-- class="hover:bg-gray-300 rounded-2xl px-3 py-1 ease-in-out duration-300">projects</a>-->
137-
<!-- <a href="/learning-resources/"-->
138-
<!-- class="font-bold rounded-2xl px-3 py-1 bg-gradient-to-r from-teal via-indigo to-pink text-gray-50">learning-->
139-
<!-- resources</a>-->
140-
<!-- </div>-->
141-
142-
<!-- </nav>-->
143-
<!-- </div>-->
144-
145-
<!-- <button data-drawer-target="language-sidebar" data-drawer-toggle="language-sidebar" aria-controls="language-sidebar"-->
146-
<!-- type="button"-->
147-
<!-- class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">-->
148-
<!-- <span class="sr-only">Open sidebar</span>-->
149-
<!-- <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"-->
150-
<!-- xmlns="http://www.w3.org/2000/svg">-->
151-
<!-- <path clip-rule="evenodd" fill-rule="evenodd"-->
152-
<!-- d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>-->
153-
<!-- </svg>-->
154-
<!-- </button>-->
155-
156-
<!-- <aside id="language-sidebar"-->
157-
<!-- class="fixed top-16 left-0 z-40 w-auto h-screen transition-transform -translate-x-full sm:translate-x-0"-->
158-
<!-- aria-label="Sidebar">-->
159-
<!-- <div class="w-full min-h-screen bg-gradient-to-b from-teal via-indigo to-pink pr-1">-->
160-
<!-- <div class="px-3 py-4 min-h-screen overflow-y-auto bg-deep-blue text-white dark:bg-gray-800">-->
161-
<!-- <ul class="space-y-2">-->
162-
<!-- <li>-->
163-
<!-- <a href="#"-->
164-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
165-
<!-- <span class="ml-3">Java</span>-->
166-
<!-- </a>-->
167-
<!-- </li>-->
168-
<!-- <li>-->
169-
<!-- <a href="#"-->
170-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
171-
<!-- <span class="flex-1 ml-3 whitespace-nowrap">Kotlin</span>-->
172-
<!-- </a>-->
173-
<!-- </li>-->
174-
<!-- <li>-->
175-
<!-- <a href="#"-->
176-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
177-
<!-- <span class="flex-1 ml-3 whitespace-nowrap">Idk</span>-->
178-
<!-- </a>-->
179-
<!-- </li>-->
180-
<!-- <li>-->
181-
<!-- <a href="#"-->
182-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
183-
<!-- <span class="flex-1 ml-3 whitespace-nowrap">Blah</span>-->
184-
<!-- </a>-->
185-
<!-- </li>-->
186-
<!-- <li>-->
187-
<!-- <a href="#"-->
188-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
189-
<!-- <span class="flex-1 ml-3 whitespace-nowrap">Blah Blah</span>-->
190-
<!-- </a>-->
191-
<!-- </li>-->
192-
<!-- <li>-->
193-
<!-- <a href="#"-->
194-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
195-
196-
<!-- <span class="flex-1 ml-3 whitespace-nowrap">Blah Blah Blah</span>-->
197-
<!-- </a>-->
198-
<!-- </li>-->
199-
<!-- <li>-->
200-
<!-- <a href="#"-->
201-
<!-- class="flex items-center p-2 text-base font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">-->
202-
203-
<!-- <span class="flex-1 ml-3 whitespace-nowrap">No more svgs</span>-->
204-
<!-- </a>-->
205-
<!-- </li>-->
206-
<!-- </ul>-->
207-
<!-- </div>-->
208-
<!-- </div>-->
209-
<!-- </aside>-->
210-
211-
<!-- <div class="ml-64 mr-64 mb-20 text-white">-->
212-
<!-- <h1 class="text-6xl font-cascadia mt-2 py-2 text-center">learning resources</h1>-->
213-
<!-- <h2 class="text-2xl py-2 font-montserrat text-center">-->
214-
<!-- learn stuff here-->
215-
<!-- </h2>-->
216-
<!-- <div class=""><h3 class="font-montserrat text-3xl py-2 mt-2">learn java</h3>-->
217-
<!-- <ul class="space-y-1 list-disc">-->
218-
<!-- <li class="ml-10"><p class="font-montserrat text-xl"><i>java. com</i>-->
219-
<!-- </p></li>-->
220-
<!-- </ul>-->
221-
222-
<!-- </div>-->
223-
<!-- </div>-->
224-
<!--</div>-->
22592
</body>
22693
</html>

0 commit comments

Comments
 (0)