Skip to content

Commit 33da621

Browse files
incognitotgtincognitotgt
committed
Turns out css wasn't hard 💀
1 parent 4978558 commit 33da621

File tree

2 files changed

+152
-122
lines changed

2 files changed

+152
-122
lines changed

‎static/css/tab.css‎

Lines changed: 148 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,166 @@
11
:root {
2-
--primary-color: #1a1a1a;
3-
--secondary-color: #2c2c2c;
4-
--accent-color: #444;
5-
--text-color: #f0f0f0;
6-
--hover-color: #555;
2+
--primary-color: #1a1a1a;
3+
--secondary-color: #2c2c2c;
4+
--accent-color: #444;
5+
--text-color: #f0f0f0;
6+
--hover-color: #555;
77
}
88

99
body {
10-
margin: 0;
11-
font-family: 'Roboto', Arial, sans-serif;
12-
position: relative;
13-
background-color: var(--primary-color);
14-
color: var(--text-color);
15-
overflow: hidden;
10+
margin: 0;
11+
font-family: 'Roboto', Arial, sans-serif;
12+
position: relative;
13+
background-color: var(--primary-color);
14+
color: var(--text-color);
15+
overflow: hidden;
1616
}
1717

1818
.iframe-container iframe {
19-
display: none;
19+
display: none;
2020
}
2121

2222
.iframe-container iframe.active {
23-
display: block;
23+
display: block;
2424
}
2525

26-
2726
.container {
28-
display: grid;
29-
grid-template-rows: auto 1fr;
30-
height: 100vh;
27+
display: grid;
28+
grid-template-rows: auto 1fr;
29+
height: 100vh;
3130
}
3231

3332
.nav {
34-
background-color: var(--secondary-color);
35-
padding: 1rem;
36-
transition: transform 0.5s ease;
37-
border-radius: 0 10px 10px 0;
38-
width: 200%;
39-
z-index: 5;
40-
transform: translateX(0);
41-
position: absolute;
42-
left: 0;
43-
width: 100vw;
44-
height: 80px;
45-
display: flex;
46-
align-items: center;
33+
background-color: var(--secondary-color);
34+
padding: 1rem;
35+
transition: transform 0.5s ease;
36+
border-radius: 0 10px 10px 0;
37+
width: 200%;
38+
z-index: 5;
39+
transform: translateX(0);
40+
position: absolute;
41+
left: 0;
42+
width: 100vw;
43+
height: 80px;
44+
display: flex;
45+
align-items: center;
4746
}
4847

4948
#add-tab {
50-
padding: 0.5rem;
51-
cursor: pointer;
52-
background-color: var(--accent-color);
53-
color: var(--text-color);
54-
border: none;
55-
border-radius: 5px;
56-
margin-right: 0.5rem;
57-
transition: background-color 0.3s ease;
49+
padding: 0.5rem;
50+
cursor: pointer;
51+
background-color: var(--accent-color);
52+
color: var(--text-color);
53+
border: none;
54+
border-radius: 5px;
55+
margin-right: 0.5rem;
56+
transition: background-color 0.3s ease;
5857
}
58+
5959
#expand {
60-
float: right;
61-
padding: 0.5rem;
62-
cursor: pointer;
63-
background-color: var(--accent-color);
64-
color: var(--text-color);
65-
border: none;
66-
border-radius: 5px;
67-
margin-right: 0.5rem;
68-
transition: background-color 0.3s ease;
60+
float: right;
61+
padding: 0.5rem;
62+
cursor: pointer;
63+
background-color: var(--accent-color);
64+
color: var(--text-color);
65+
border: none;
66+
border-radius: 5px;
67+
margin-right: 0.5rem;
68+
transition: background-color 0.3s ease;
6969
}
70+
7071
#reload {
71-
float: right;
72-
padding: 0.5rem;
73-
cursor: pointer;
74-
background-color: var(--accent-color);
75-
color: var(--text-color);
76-
border: none;
77-
border-radius: 5px;
78-
margin-right: 0.5rem;
79-
transition: background-color 0.3s ease;
72+
float: right;
73+
padding: 0.5rem;
74+
cursor: pointer;
75+
background-color: var(--accent-color);
76+
color: var(--text-color);
77+
border: none;
78+
border-radius: 5px;
79+
margin-right: 0.5rem;
80+
transition: background-color 0.3s ease;
8081
}
8182

82-
#reload:hover {
83-
background-color: var(--hover-color);
83+
#navb {
84+
float: left;
85+
padding: 0.5rem;
86+
cursor: pointer;
87+
background-color: var(--accent-color);
88+
color: var(--text-color);
89+
border: none;
90+
border-radius: 5px;
91+
margin-right: 0.5rem;
92+
transition: background-color 0.3s ease;
8493
}
8594

95+
#navf {
96+
float: right;
97+
padding: 0.5rem;
98+
cursor: pointer;
99+
background-color: var(--accent-color);
100+
color: var(--text-color);
101+
border: none;
102+
border-radius: 5px;
103+
margin-right: 0.5rem;
104+
transition: background-color 0.3s ease;
105+
}
86106

87-
#expand:hover {
88-
background-color: var(--hover-color);
107+
#reload:hover {
108+
background-color: var(--hover-color);
89109
}
90110

111+
#expand:hover {
112+
background-color: var(--hover-color);
113+
}
91114

92115
#add-tab:hover {
93-
background-color: var(--hover-color);
116+
background-color: var(--hover-color);
117+
}
118+
119+
#navb:hover {
120+
background-color: var(--hover-color);
121+
}
122+
123+
#navf:hover {
124+
background-color: var(--hover-color);
94125
}
95126

96127
ul {
97-
list-style-type: none;
98-
padding: 0;
99-
display: flex;
128+
list-style-type: none;
129+
padding: 0;
130+
display: flex;
100131
}
101132

102133
li {
103-
padding: 0.4rem;
104-
background-color: var(--accent-color);
105-
margin-right: 0.5rem;
106-
cursor: pointer;
107-
border-radius: 5px;
108-
transition: background-color 0.3s ease;
109-
display: flex;
110-
align-items: center;
111-
justify-content: center;
134+
padding: 0.4rem;
135+
background-color: var(--accent-color);
136+
margin-right: 0.5rem;
137+
cursor: pointer;
138+
border-radius: 5px;
139+
transition: background-color 0.3s ease;
140+
display: flex;
141+
align-items: center;
142+
justify-content: center;
112143
}
113144

114145
li:hover {
115-
background-color: var(--hover-color);
146+
background-color: var(--hover-color);
116147
}
117148

118149
iframe {
119-
position: absolute;
120-
width: 100%;
121-
height: 100%;
122-
border: none;
123-
left: 0;
124-
top: 13%;
150+
position: absolute;
151+
width: 100%;
152+
height: 100%;
153+
border: none;
154+
left: 0;
155+
top: 13%;
125156
}
126157

127158
.toggle-nav-checkbox {
128-
display: none;
159+
display: none;
129160
}
130161

131-
.toggle-nav-checkbox:checked ~ .container {
132-
grid-template-columns: 0 1fr;
162+
.toggle-nav-checkbox:checked~.container {
163+
grid-template-columns: 0 1fr;
133164
}
134165

135166
.toggle-nav-checkbox {
@@ -178,51 +209,49 @@ iframe {
178209
}
179210

180211
.close-tab {
181-
border: none;
182-
background: none;
183-
font-size: 16px;
184-
color: #ccc;
185-
cursor: pointer;
186-
transition: color 0.3s ease;
187-
width: 30px;
212+
border: none;
213+
background: none;
214+
font-size: 16px;
215+
color: #ccc;
216+
cursor: pointer;
217+
transition: color 0.3s ease;
218+
width: 30px;
188219
}
189220

190221
.close-tab:hover {
191-
color: var(--text-color);
192-
222+
color: var(--text-color);
193223
}
194224

195225
.adress-bar-container {
196-
display: flex;
197-
align-items: center;
198-
background-color: #333;
199-
border-radius: 50px;
200-
padding: 15px;
201-
overflow: hidden;
202-
width: 95%;
203-
margin-top: 75px;
204-
transition: width 0.5s;
205-
overflow: hidden;
206-
position: fixed;
207-
left: 5px;
226+
display: flex;
227+
align-items: center;
228+
background-color: #333;
229+
border-radius: 50px;
230+
padding: 15px;
231+
overflow: hidden;
232+
width: 95%;
233+
margin-top: 75px;
234+
transition: width 0.5s;
235+
overflow: hidden;
236+
position: fixed;
237+
left: 5px;
208238
}
209239

210-
211240
.adress-bar-input {
212-
opacity: 1;
213-
background-color: transparent;
214-
border: none;
215-
outline: none;
216-
color: #fff;
217-
padding: 0 15px;
218-
font-size: 16px;
219-
position: absolute;
220-
overflow: hidden;
221-
width: 400px;
222-
transition: opacity 0.5s, width 0.5s;
241+
opacity: 1;
242+
background-color: transparent;
243+
border: none;
244+
outline: none;
245+
color: #fff;
246+
padding: 0 15px;
247+
font-size: 16px;
248+
position: absolute;
249+
overflow: hidden;
250+
width: 400px;
251+
transition: opacity 0.5s, width 0.5s;
223252
}
224253

225254
.adress-bar-search-form {
226-
display: flex;
227-
align-items: center;
228-
}
255+
display: flex;
256+
align-items: center;
257+
}

‎static/tabs.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
<button id="add-tab"><i class="fa-solid fa-plus"></i></button>
2121
<button id="expand" onclick="expand()"><i class="fa-solid fa-expand"></i></button>
2222
<button id="reload" onclick="reload()"><i class="fa-solid fa-rotate-right"></i></button>
23-
<button onclick="goBack()">Back</button>
24-
<button onclick="goForward()">Forward</button>
23+
<button id="navb" onclick="goBack()"><i class="fa-solid fa-arrow-left"></i></button>
24+
<button id="navf" onclick="goForward()"><i class="fa-solid fa-arrow-right"></i></button>
2525
<div class="adress-bar-container">
2626
<form method="POST" class="adress-bar-search-form" id="inpbox">
2727
<input class="adress-bar-input" tag="searchbar" id="searchbar" placeholder="Search" />
@@ -72,5 +72,6 @@
7272

7373
<script src="./contact/mathematics.js"></script>
7474
<script src="./contact/geography.js"></script>
75-
</body>
75+
</body>
76+
7677
</html>

0 commit comments

Comments
 (0)