Home Explore
compton
/
sources
0
0
Fork 0
Files
Browse Source

Update styles of picture section

Extra changes:
* Update readme
compton 5 months ago
parent
c8bf05ba50
commit
21a556d1cc
4 changed files with 90 additions and 65 deletions
Unified View Show Diff Stats
  1. 5 5
      src/page/README.md
  2. 11 8
      src/page/index.php
  3. 73 51
      src/page/main.css
  4. 1 1
      src/page/summary.php

+ 5 - 5
src/page/README.md
View File 

@@ -1,11 +1,11 @@
 
 Здесь лежит исходный код для страниц с изображениями 
 Здесь лежит исходный код для страниц с изображениями 
 [cmd.inp.nsk.su/~compton/pictures](https://cmd.inp.nsk.su/~compton/pictures/)
 
 [cmd.inp.nsk.su/~compton/pictures](https://cmd.inp.nsk.su/~compton/pictures/)
 
 
 
-* `index.php` - стартовая страница
 
-* `init.php` - страница с детальной (интерактивной) информацией о конкретной энергетической точке
 
-* `summary.php` - страница с информацией в целом о сезоне
 
-* `plots.php` - неинтерактивная информация об усреднениях по точкам в сезоне
 
-* `main.css` - стили css для сайта
 
+* `index.php` — стартовая страница
 
+* `init.php` — страница с детальной (интерактивной) информацией о конкретной энергетической точке
 
+* `summary.php` — страница с информацией в целом о сезоне
 
+* `commonfoos.php` — набор используемых php-функций, который подгружается на других страницах
 
+* `main.css` — стили css для сайта
 
 
 
 
 
 ### Развёртывание раздела pictures
 
 ### Развёртывание раздела pictures

+ 11 - 8
src/page/index.php
View File 

@@ -14,17 +14,20 @@ $names = available_seasons($host, $owner, $repo, "energy_points", $token);
 
 
 
 <body>
 
 <body>
 
     <div class="main_block">
 
     <div class="main_block">
 
-        <h1>Compton avg by seasons</h1>
 
-
 
-        <?php
 
-        foreach ($names as $name) {
 
-            echo "<a href=\"./init.php?season={$name}\">{$name}</a><br>";
 
-        }
 
-        ?>
 
+        <div class="title_block">
 
+            <h1>Compton avg by seasons</h1>
 
+        </div>
 
 
 
+        <div class="content_block">
 
+            <?php
 
+            foreach ($names as $name) {
 
+                echo "<div class=\"selection_item\"><a href=\"./init.php?season={$name}\">• {$name}</a></div>";
 
+            }
 
+            ?>
 
+        </div>
 
         <br>
 
         <br>
 
         <?php
 
         <?php
 
-        echo "<a href=\"./summary.php?season=" . end($names) . "\">Season summary</a>";
 
+        echo "<div class=\"selection_item\"><a href=\"./summary.php?season=" . end($names) . "\">Season summary</a></div>";
 
         ?>
 
         ?>
 
     </div>
 
     </div>
 
 </body>
 
 </body>

+ 73 - 51
src/page/main.css
View File 

@@ -1,102 +1,124 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
 
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
 
 
-a{
 
-    font-size: 36px;
 
+a {
 
+    font-size: 3.6rem;
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: #26110C;
 
     color: #26110C;
 
-    transition-duration: 1s;
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
 }
 
 }
 
 
 
-a:hover{
 
+a:hover {
 
     color: #732727;
 
     color: #732727;
 
+    text-decoration: underline;
 
 }
 
 }
 
 
 
-a:visited{
 
-    color: #26110C;
 
+body {
 
+    background-color: #F2A76650;
 
+    margin: 0;
 
+    /*#D9B9A7;*/
 
 }
 
 }
 
 
 
-body{
 
-    background-color: #F2A76687; /*#D9B9A7;*/
 
+br {
 
+    margin-bottom: 1.8rem;
 
 }
 
 }
 
 
 
-br{
 
-    margin-bottom: 18px;
 
+div.content_block {
 
+    display: flex;
 
+    flex-direction: column-reverse;
 
+    flex-wrap: wrap;
 
+    flex-basis: 100%;
 
+    flex: 1;
 
+    width: 100%;
 
 }
 
 }
 
 
 
-div.main_block{
 
-    width: max(50%, 500px);
 
+div.main_block {
 
+    width: max(50%, 350px);
 
     max-width: min(100%, 800px);
 
     max-width: min(100%, 800px);
 
     margin: 0 auto;
 
     margin: 0 auto;
 
-    padding-top: 50px;
 
 }
 
 }
 
 
 
-h1{
 
+div.selection_item {
 
+    min-width: 40%;
 
+    padding: 0.5rem 1rem;
 
+}
 
+
 
+div.title_block {
 
+    margin: 4rem 0;
 
+}
 
+
 
+h1 {
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
-    font-size: 48px;
 
+    font-size: 4.8rem;
 
+    padding-left: 1rem;
 
+    margin: 0;
 
 }
 
 }
 
 
 
-h2{
 
+h2 {
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
-    font-size: 40px;
 
+    font-size: 4rem;
 
 }
 
 }
 
 
 
-h3{
 
+h3 {
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
-    font-size: 32px;  
+    font-size: 3.2rem;
 
 }
 
 }
 
 
 
-h4{
 
+h4 {
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
-    font-size: 24px;
 
+    font-size: 2.4rem;
 
 }
 
 }
 
 
 
-hr{
 
+hr {
 
     border: 0;
 
     border: 0;
 
     border-bottom: dashed;
 
     border-bottom: dashed;
 
 }
 
 }
 
 
 
-img{
 
-    padding: 15px 0;
 
+html {
 
+    font-size: 62.5%;
 
+    margin: 0;
 
+}
 
+
 
+img {
 
+    padding: 1.5rem 0;
 
     width: 100%;
 
     width: 100%;
 
 }
 
 }
 
 
 
-p{
 
+p {
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
-    font-size: 28px;
 
+    font-size: 2.8rem;
 
 }
 
 }
 
 
 
 select {
 
 select {
 
 
 
-  /* styling */
 
-  background-color: #F2A76652;
 
-  border: thin solid #F23030;
 
-  border-radius: 4px;
 
-  display: block;
 
-  font: inherit;
 
-  font-size: 20px;
 
-  line-height: 1.5em;
 
-  padding: 0.5em 3.5em 0.5em 1em;
 
+    /* styling */
 
+    background-color: #F2A76652;
 
+    border: thin solid #F23030;
 
+    border-radius: 4px;
 
+    display: block;
 
+    font: inherit;
 
+    font-size: 2.0rem;
 
+    line-height: 1.5em;
 
+    padding: 0.5em 3.5em 0.5em 1em;
 
 
 
-  /* reset */
 
+    /* reset */
 
 
 
-  margin: 0 auto;      
-  -webkit-box-sizing: border-box;
 
-  -moz-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  -webkit-appearance: none;
 
-  -moz-appearance: none;
 
+    margin: 0 auto;
 
+    -webkit-box-sizing: border-box;
 
+    -moz-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    -webkit-appearance: none;
 
+    -moz-appearance: none;
 
 }
 
 }
 
 
 
 select.select-css {
 
 select.select-css {
 
     background-image:
 
     background-image:
 
-	linear-gradient(45deg, transparent 50%, #260101 0%),
 
-	linear-gradient(135deg, #260101 50%, transparent 0%);
 
-  background-position:
 
-      calc(100% - 21px) calc(1em + 2px),
 
-      calc(100% - 13px) calc(1em + 2px);
 
-  background-size:
 
-      8px 8px, 8px 8px, 2.5em 2.5em;
 
-  background-repeat: no-repeat;
 
-}
 
+        linear-gradient(45deg, transparent 50%, #260101 0%),
 
+        linear-gradient(135deg, #260101 50%, transparent 0%);
 
+    background-position:
 
+        calc(100% - 21px) calc(1em + 2px),
 
+        calc(100% - 13px) calc(1em + 2px);
 
+    background-size:
 
+        8px 8px, 8px 8px, 2.5em 2.5em;
 
+    background-repeat: no-repeat;
 
+}

+ 1 - 1
src/page/summary.php
View File 

@@ -58,7 +58,7 @@ $selected_season_url = season_table_url($host, $owner, $repo, "", $token, $selec
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <div style="margin-top: 40px; width: 100%;">
 
     <div style="margin-top: 40px; width: 100%;">
 
-        <div style="width: min(100%, 600px); margin: 0 auto;">
 
+        <div style="width: min(100%, 600px); margin: 0 auto; font-size: 2rem;">
 
             <h3 style="padding-right: 40px;">Methodology</h3>
 
             <h3 style="padding-right: 40px;">Methodology</h3>
 
             <p style="font-size: inherit;"><b>Mean energy measurements:</b> a difference between measured mean beam energy and target beam energy vs target beam energy.</p>
 
             <p style="font-size: inherit;"><b>Mean energy measurements:</b> a difference between measured mean beam energy and target beam energy vs target beam energy.</p>
 
             <p style="font-size: inherit;"><b>Spread measurements:</b> a measured mean beam spread vs measured mean beam energy for the given energy points. A line shows the best fit of these points to a linear function (as a result of chi-square minimization)</p>
 
             <p style="font-size: inherit;"><b>Spread measurements:</b> a measured mean beam spread vs measured mean beam energy for the given energy points. A line shows the best fit of these points to a linear function (as a result of chi-square minimization)</p>