source for lucas.co
updates
main.js | 172 +++++++++++++++++++++++++++++++++-------------------------------
1 file changed, 89 insertions(+), 83 deletions(-)
diff --git a/main.js b/main.js
index f0d9b10..39babf0 100644
--- a/main.js
+++ b/main.js
@@ -19,7 +19,7 @@ loadPage();
function loadPage() {
window.addEventListener("resize", function() {
- sizing() });
+ check_h() });
create_tabs();
set_tab(0);
@@ -136,115 +136,121 @@ function images(i) {
}
}
-function sizing() {
+function check_h() {
let window_w = window.innerWidth;
let window_h = window.innerHeight;
if(window_w != w_start) {
w_start = window_w;
+ sizing()
+ }
+}
- let font_size = window_h * 0.014;
+function sizing() {
+ let window_w = window.innerWidth;
+ let window_h = window.innerHeight;
- // box
- let box = document.getElementById("box");
-
- let box_w = window_w * 0.6;
- let box_h = window_h * 0.5;
-
- let box_left = window_w / 2 - box_w / 2;
- let box_top = window_h / 2 - box_h / 2;
-
- box.style.width = box_w + "px";
- box.style.height = box_h + "px";
-
- box.style.left = box_left + "px";
- box.style.top = box_top + "px";
+ let font_size = window_h * 0.014;
- box.style.fontSize = font_size + "px";
-
- // image
- let images = document.getElementsByTagName("img");
- let n_images = images.length;
-
- let img_w = box_w * 0.4;
- let img_h = box_h * 0.4;
+ // box
+ let box = document.getElementById("box");
+
+ let box_w = window_w * 0.6;
+ let box_h = window_h * 0.5;
+
+ let box_left = window_w / 2 - box_w / 2;
+ let box_top = window_h / 2 - box_h / 2;
+
+ box.style.width = box_w + "px";
+ box.style.height = box_h + "px";
+
+ box.style.left = box_left + "px";
+ box.style.top = box_top + "px";
- for(img of images) {
- img.style.width = img_w + "px";
- img.style.height = img_h + "px";
+ box.style.fontSize = font_size + "px";
+
+ // image
+ let images = document.getElementsByTagName("img");
+ let n_images = images.length;
+
+ let img_w = box_w * 0.4;
+ let img_h = box_h * 0.4;
- img.style.left = 20 + "px";
- img.style.top = (img_h - 20) + "px";
- }
+ for(img of images) {
+ img.style.width = img_w + "px";
+ img.style.height = img_h + "px";
- // tab
- let tab_w;
- let tab_h;
-
- let dim_1 = window_h * 0.03;
-
- const border_radius = 45;
+ img.style.left = 20 + "px";
+ img.style.top = (img_h - 20) + "px";
+ }
- for(let i = 0; i < n_tabs; i++) {
- let tab = tabs[i];
- let pos = tab.pos;
- let idx = tab.idx;
- let count = counts[pos];
+ // tab
+ let tab_w;
+ let tab_h;
+
+ let dim_1 = window_h * 0.03;
+
+ const border_radius = 45;
- tab.style.fontSize = font_size + "px";
+ for(let i = 0; i < n_tabs; i++) {
+ let tab = tabs[i];
+ let pos = tab.pos;
+ let idx = tab.idx;
+ let count = counts[pos];
- if(pos == 0) {
- tab_w = box_w / count;
- tab_h = dim_1;
+ tab.style.fontSize = font_size + "px";
- tab.style.left = box_left + "px";
- tab.style.top = (box_top - tab_h) + "px";
+ if(pos == 0) {
+ tab_w = box_w / count;
+ tab_h = dim_1;
- tab.style.borderTopLeftRadius = border_radius + "px";
- tab.style.borderTopRightRadius = border_radius + "px";
- }
+ tab.style.left = box_left + "px";
+ tab.style.top = (box_top - tab_h) + "px";
- if(pos == 1) {
- tab_w = dim_1;
- tab_h = box_h / count;
+ tab.style.borderTopLeftRadius = border_radius + "px";
+ tab.style.borderTopRightRadius = border_radius + "px";
+ }
- tab.style.left = (box_left + box_w - tab_w / 2 + tab_w / 2) + "px";
- tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
+ if(pos == 1) {
+ tab_w = dim_1;
+ tab_h = box_h / count;
- tab.style.borderTopRightRadius = border_radius + "px";
- tab.style.borderBottomRightRadius = border_radius + "px";
+ tab.style.left = (box_left + box_w - tab_w / 2 + tab_w / 2) + "px";
+ tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
- tab.style.lineHeight = font_size + "px";
- }
+ tab.style.borderTopRightRadius = border_radius + "px";
+ tab.style.borderBottomRightRadius = border_radius + "px";
- if(pos == 2) {
- tab_w = box_w / count
- tab_h = dim_1;
-
- tab.style.top = (box_top + box_h) + "px";
- tab.style.left = (box_left + tab_w * idx) + "px";
-
- tab.style.borderBottomRightRadius = border_radius + "px";
- tab.style.borderBottomLeftRadius = border_radius + "px";
- }
+ tab.style.lineHeight = font_size + "px";
+ }
- if(pos == 3) {
- tab_w = dim_1;
- tab_h = box_h / count;
+ if(pos == 2) {
+ tab_w = box_w / count
+ tab_h = dim_1;
+
+ tab.style.top = (box_top + box_h) + "px";
+ tab.style.left = (box_left + tab_w * idx) + "px";
+
+ tab.style.borderBottomRightRadius = border_radius + "px";
+ tab.style.borderBottomLeftRadius = border_radius + "px";
+ }
- tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
- tab.style.left = (box_left - tab_w / 2 - tab_w / 2) + "px";
-
- tab.style.borderBottomLeftRadius = border_radius + "px";
- tab.style.borderTopLeftRadius = border_radius + "px";
+ if(pos == 3) {
+ tab_w = dim_1;
+ tab_h = box_h / count;
- tab.style.lineHeight = font_size + "px";
- }
+ tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
+ tab.style.left = (box_left - tab_w / 2 - tab_w / 2) + "px";
+
+ tab.style.borderBottomLeftRadius = border_radius + "px";
+ tab.style.borderTopLeftRadius = border_radius + "px";
- tab.style.width = tab_w + "px";
- tab.style.height = tab_h + "px";
+ tab.style.lineHeight = font_size + "px";
}
+ tab.style.width = tab_w + "px";
+ tab.style.height = tab_h + "px";
+
// files
let files_box = document.getElementById("files");
files_box.style.fontSize = font_size + "px";