Fix some widths 🐛

wwang721 · Nov 27, 2023 · dd1615a · dd1615a
1 parent dc982a7
commit dd1615a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/1news.md b/1news.md
@@ -20,7 +20,6 @@ permalink: /news.html
                 <div id="{{post.date|date:date_format}}_left" style="float: left; width: 325px; height: 185px; border: 0px solid red;">
                 <div style="width:280px; height: 172px; border: 1px solid #E5E4E2; overflow:hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0px rgba(0, 0, 0, 0.19);">
                 <a href="{{ post.url | relative_url }}" title="{{post.title}}">
-                    {% assign date_format = "%Y-%m-%d" %}
                     <img src="images/posts/{{post.date|date:date_format}}.jpg" alt="Not available" title="{{post.title}}"
                     style="width:280px;">
                 </a>
@@ -43,11 +42,11 @@ permalink: /news.html
                 
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                 {% assign date_format = "%Y-%m-%d" %}
-                <script id="{{post.date|date:date_format}}">
-                    var scripts = document.getElementsByTagName("script");
-                    var thisScript = scripts[scripts.length - 1];
-                    var name = thisScript.id
-
+                <script>
+                    // var scripts = document.getElementsByTagName("script");
+                    // var thisScript = scripts[scripts.length - 1];
+                    // var name = thisScript.id
+                    var name = "{{post.date|date:date_format}}";
                     var r_w = $("#"+name+"_row").width();
                     var lc_w = $("#"+name+"_left").width();
                     $("#"+name+"_right").width(0.98*(r_w-lc_w));

diff --git a/3about.md b/3about.md
@@ -208,8 +208,8 @@ $("#c22222").width(0.98*(r1_w-c1_w-c3_w));
 <hr style="height:5px;" />
 
 
-<div style='margin: 35px 0px 0px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 380px; overflow: hidden;'>
-<img src='./images/camleyGroup.jpg' alt="Camley Group" title="Camley Group 2023 March Meeting" style='width:380px;border: 13px solid white'/>
+<div style='margin: 35px 0px 0px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 350px; overflow: hidden;'>
+<img src='./images/camleyGroup.jpg' alt="Camley Group" title="Camley Group 2023 March Meeting" style='width:350px;border: 13px solid white'/>
 <p id="text" style="margin:-12px 0px 0px 62px"><font size="3"> Camley Group APS March Meeting</font></p>
 <p style="margin:-2px 0px 8px 126px"><font size="2">Las Vegas, NV (2023)</font></p> 
 </div>

diff --git a/about.html b/about.html
@@ -401,8 +401,8 @@ <h2 id="gallery"><strong>GALLERY</strong></h2>
 
 <hr style="height:5px;" />
 
-<div style="margin: 35px 0px 0px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 380px; overflow: hidden;">
-<img src="./images/camleyGroup.jpg" alt="Camley Group" title="Camley Group 2023 March Meeting" style="width:380px;border: 13px solid white" />
+<div style="margin: 35px 0px 0px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 350px; overflow: hidden;">
+<img src="./images/camleyGroup.jpg" alt="Camley Group" title="Camley Group 2023 March Meeting" style="width:350px;border: 13px solid white" />
 <p id="text" style="margin:-12px 0px 0px 62px"><font size="3"> Camley Group APS March Meeting</font></p>
 <p style="margin:-2px 0px 8px 126px"><font size="2">Las Vegas, NV (2023)</font></p> 
 </div>

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -3,13 +3,13 @@
 
 // to change width of the all pages @ WW 11/24/2023
 
-$navbar-width: 1200px;
+$navbar-width: 1280px;
 
 @import "jekyll-theme-cayman-blog";
 
 .wrapper {
-    max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit}));
-    max-width: calc(#{$navbar-width} - (#{$spacing-unit}));
+    max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit})*3);
+    max-width: calc(#{$navbar-width} - (#{$spacing-unit})*3);
     margin-right: auto;
     margin-left: auto;
     padding-right: $spacing-unit*2;
@@ -25,12 +25,12 @@ $navbar-width: 1200px;
 }
 
 .main-content {
-    max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit}*2));
-    max-width: calc(#{$navbar-width} - (#{$spacing-unit})*2);
+    max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit}*3));
+    max-width: calc(#{$navbar-width} - (#{$spacing-unit})*3);
     margin-right: auto;
     margin-left: auto;
-    padding-right: $spacing-unit*2; 
-    padding-left: $spacing-unit*2;
+    padding-right: $spacing-unit*3; 
+    padding-left: $spacing-unit*3;
 
     // the multiplier should be the same for max-width and pading to ensure <hr> @ WW