Changeset 2006


Ignore:
Timestamp:
03/13/18 18:07:42 (3 months ago)
Author:
csnyder
Message:

Mobile styles

Location:
cb5m
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • cb5m/templates/header.html.php

    r2004 r2006  
    1313  <script type="text/javascript" src="/www-core/core3.js"></script> 
    1414  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700|Source+Sans+Pro:300,300i" rel="stylesheet"> 
    15   <link rel="stylesheet" href="/www-cb5m/cb5m.css?v=7"> 
    16   <link rel="stylesheet" href="/www-cb5m/cb5m-mobile.css?v=<?=h(time())?>"> 
    17   <link rel="stylesheet" media="print" href="/www-cb5m/cb5m-print.css?v=2"> 
    18   <script type="text/javascript" src="/www-cb5m/cb5m.js?v=3"></script> 
     15  <link rel="stylesheet" href="/www-cb5m/cb5m.css?v=8"> 
     16  <link rel="stylesheet" href="/www-cb5m/cb5m-mobile.css?v=2"> 
     17  <link rel="stylesheet" media="print" href="/www-cb5m/cb5m-print.css?v=3"> 
     18  <script type="text/javascript" src="/www-cb5m/cb5m.js?v=4"></script> 
    1919  <link rel="icon" href="/www-cb5m/favicon.ico" type="image/x-icon"> 
    2020  <?if($object->type=='log'){?> 
  • cb5m/templates/issue-view.html.php

    r1998 r2006  
    2828  return t; 
    2929}(document, "script", "twitter-wjs"));</script> 
    30   <p class="tweet"><a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=<?=rue($object->title)?>" data-size="large">Tweet This</a></p> 
     30  <p id="Tweet" class="tweet"><a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=<?=rue($object->title)?>" data-size="large">Tweet This</a></p> 
    3131  <!-- end tweet this --> 
    32   <h4 class="peernav"> 
     32  <h4 id="PeerNav" class="peernav"> 
    3333    <?if(!empty($object->peers['previous'])){?><span class="previous"><a href="<?=h($object->peers['previous']->url)?>/">previous post<span class="arrows">&gt;&gt;</span></a></span><?}?> 
    3434    <?if(!empty($object->peers['next'])){?><span class="next"><a href="<?=h($object->peers['next']->url)?>/"><span class="arrows">&lt;&lt;</span>next post</a></span><?}?> 
  • cb5m/www/cb5m-mobile.css

    r2004 r2006  
    1 /* Mobile */ 
    2 @media screen and (max-width: 63rem) { 
     1/* Tablet - 832px */ 
     2@media screen and (max-width: 52rem) and (min-width: 43.1rem) { 
     3  #Header { max-width: 100%; margin: 0 auto; padding: 15px 16px 20px 16px; } 
     4  #Navigation { clear: left; padding-top: 4px; } 
     5  #Object { max-width: 100%; min-height: none; margin: 0 auto; padding: 0px 16px 50px 16px; } 
     6   
     7  #Pages div.page { width: 31.75%; margin: 0 0 17px 0; } 
     8  #Pages div.page:nth-of-type( 3n+2 ) { width: 32.25%; margin: 0 2.12% 17px 2.12%; } 
     9  #Pages div.page.p2col { width: 48.87%; } 
     10  #Pages div.page.p2col:nth-of-type( 3n+2 ) { width: 48.87%; margin: 0 0 17px 0; } 
     11  #Pages div.page.p2col.odd { margin: 0 2.12% 17px 0 !important; } 
     12   
     13  #Posts div.post { width: 31.75%; margin: 0 0 17px 0; } 
     14  #Posts div.post:nth-of-type( 3n+2 ) { width: 32.25%; margin: 0 2.12% 17px 2.12%; } 
     15  #Posts div.post.p2col { width: 48.87%; } 
     16  #Posts div.post.p2col:nth-of-type( 3n+2 ) { width: 48.87%; margin: 0 0 17px 0; } 
     17  #Posts div.post.p2col.odd { margin: 0 2.12% 17px 0 !important; } 
     18   
     19  #Footer { max-width: 100%; margin: 0 auto; padding: 15px 16px 20px 16px; } 
     20  #FooterLogo { width: 22vw; } 
     21  #Sitemap { width: 66.12vw; } 
     22} 
     23/* Phone - 688px */ 
     24@media screen and (max-width: 43rem) { 
     25  body { color: #231f20; } 
    326 
    427  h1 { font-size: 25px; letter-spacing: 0.03em; } 
     
    1134  a.button, button { display: block; border: 2px solid #ffffff; border-radius: 8px; background-color: #939597; padding: 10px 30px 7px 30px; font-size: 24px; line-height: 1.4em; } 
    1235   
    13   div.c3col { column-count: 1; column-gap: 0; -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; } 
     36  div.c3col, p.c3col { column-count: 1; column-gap: 0; -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; } 
    1437  div.c6col { column-count: 1; column-gap: 0; -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; } 
    15  
     38   
     39   
    1640  #Canvas { overflow: hidden; } 
    1741  #Header { padding: 8px 14px 12px 14px; } 
     
    5377  #Navigation div.section.c939597 a.section { color: #000000; } 
    5478   
    55   #Object { max-width: 100%; min-height: none; margin: 0 auto; padding: 0px 14px; } 
     79  #Banner.landscape { width: 100%; height: 57.5vw; overflow: hidden; margin-bottom: 25px; text-align: center; } 
     80  #Banner.landscape img { margin: 0 -100%; max-width: unset; max-height: 100%; } 
     81  #Banner.portrait { float: none; width: 100%; padding: 43px 0 0px 0; } 
     82   
     83  #Object { max-width: 100%; min-height: none; margin: 0 auto; padding: 0px 14px 49px 14px; } 
     84  #Header + #Object { margin-top: 10px; } 
    5685  #Object h1 { margin-top: 1.7rem; } 
     86  #Object h2 { margin-top: 2.5rem; } 
     87  #Object h3 { font-size: 21px; margin-top: 1.6rem; } 
     88  #Object h4 { font-size: 21px; margin-top: 1.6rem; } 
     89  #Object h4.peernav { font-size: 16px; } 
     90  #Object p, #Object ul, #Object ol { font-size: 23.5px; font-size: 1.47rem; line-height: 1.2em; } 
     91  #Object p, #Object table, #Object li { margin-top: 14px; margin-top: 0.88rem; } 
     92  #Object blockquote { margin: 36px 22px 51px 22px; } 
     93  #Object blockquote, #Object blockquote p { font-size: 28px; line-height: 1.2em; } 
     94  #Object p.attribution { margin: -41px 22px 39px; font-size: 18px; line-height: 1.3em; letter-spacing: 0.08em; } 
     95  #Object p.required { font-size: 18px; } 
     96  #Object ul { margin: 24px 0 28px 22px; } 
     97  #Object ol { margin: 24px 0 28px 37px; } 
     98  #Object ul { list-style-type: none; } 
     99  #Object ul li::before { content: "\2022"; position: absolute; top: 0px; left: -11px; } 
     100  #Object li { margin-top: 24px; } 
     101  #Object table.left, #Object table.right { float: none; width: 100%; } 
     102  #Object table.left { margin-left: 0; } 
     103  #Object table.right { margin-right: 0; } 
     104  #Object table.left td, #Object table.right td { padding: 0; } 
     105  #Object ol + ol, #Object ul + ul { margin: -32px 0 51px 34px; margin: -2rem 0 3.19rem 34px; } 
     106  #Object div.c3col { font-size: 23.5px; font-size: 1.47rem; line-height: 1.2em; } 
    57107   
    58108  #Posts div.post { display: block; width: 100%; margin: 0 0 24px 0; border: 0; padding: 0 0 14px 0; text-align: left; } 
     
    73123  #Pages div.page.p2col.odd { margin: 0 0 24px 0 !important; } 
    74124  #Pages div.thumbnail { max-height: 215px; margin: 0 -14px 14px; } 
     125  #Pages div.wrap { font-size: 23.5px; font-size: 1.47rem; line-height: 1.2em; } 
     126  #Pages div.wrap h3 { margin: 0 0 22px 0 !important; } 
     127  #Pages div.wrap p { margin-top: 14px; margin-top: 0.88rem; font-size: 23.5px; font-size: 1.47rem; line-height: 1.2em; } 
    75128   
    76129  #Pages div.page.howto { padding: 0; } 
     
    82135  #Pages.homepage div.page.map { width: calc( 100% + 28px ); height: 343px; margin: 0 0 54px -14px; } 
    83136  #Pages.homepage div.page.twitter { width: calc( 100% + 28px ); height: 336px; margin: 0 0 54px -14px; } 
     137   
     138  #Object h2.peernav { border: 0; } 
     139  #Calendar, #CalendarArchiveHead, #CalendarArchive, p.archives-control { display: none; } 
     140  #Events { padding-top: 0px; } 
     141  #Events div.event { padding: 15px 0 30px 0; } 
     142  #Events p.info { font-size: 20px; line-height: 1.3em; } 
     143  #Events p.up { display: none; } 
     144   
     145  #Object table.archives { display: block; } 
     146  #Object table.archives tbody { display: block; } 
     147  #Object table.archives tr { display: block; } 
     148  #Object table.archives td { display: inline-block; box-sizing: border-box; width: 33%; padding: 3px 0 32px 0; } 
     149  #Object table.archives tr td:nth-of-type( 1 ) { width: 33%; padding-right: 2%; } 
     150  #Object table.archives tr td:nth-of-type( 2 ) { width: 33%; padding-right: 2%; } 
     151  #Object table.archives tr td:nth-of-type( 3 ) { width: 33%; padding-right: 2%; } 
     152  #Object table.archives tr td:nth-of-type( 4 ) { width: 33%; padding-right: 2%; } 
     153  #Object table.archives tr td:nth-of-type( 5 ) { width: 33%; padding-right: 2%; } 
     154  #Object table.archives tr td:nth-of-type( 6 ) { width: 33%; padding-right: 2%; } 
     155  #Object table.archives tr td.placeholder { display: none; } 
    84156   
    85157  #HomeBanner div.banner { height: 57.5vw; max-height: 299px; } 
     
    105177  #Happening #Posts { width: 100%; margin: 0 auto; padding: 20px 0 0 0; } 
    106178   
     179  #Filter div.col { width: 100%;  } 
     180  #Filter div.col:nth-of-type( 3n+2 ) { width: 100%; margin: 10px 0; } 
     181  #Filter span.searchgroup { width: 100%; margin: 0; } 
     182  #Filter div.col button { margin: 10px 0; width: 100%; } 
     183   
     184  #Form div.col { width: 100%; padding: 16px 16px 16px 0; } 
     185   
    107186  #Newsletter { padding: 0; background-image: none; } 
    108187  #NewsletterInner { max-width: 100%; padding: 3px 14px; } 
     
    111190  #Newsletter button { width: 100%; margin-top: 9px; } 
    112191   
    113   #Footer { max-width: 100%; margin: 0 auto; padding: 50px 14px 42px 14px; } 
     192  #Footer { max-width: 100%; margin: 0 auto; padding: 50px 14px 50px 14px; } 
    114193  #FooterLogo { float: none; width: 100%; } 
    115194  #FooterLogo img.logo { width: 204px; } 
    116195  #FooterLogo p { margin: 0 0 21px 0; font-weight: 300; font-size: 18px; line-height: 1.32em; } 
     196  #FooterLogo p.follow img { width: 201px; } 
    117197   
    118198  #Sitemap { display: none; } 
     
    120200  #Copyright { padding: 16px 16px 32px; font-size: 15px; line-height: 1.4em; letter-spacing: 0.03em; } 
    121201} 
    122  
    123  
     202/* No Edits under 752px */ 
    124203@media screen and (max-width: 47rem) { 
    125   #Editor, p.editor, span.editor { display: none; } 
     204  #Editor, div.editor, p.editor, span.editor { display: none; } 
    126205  #HowtosEditor { display: none; } 
    127206  #User { display: none; } 
  • cb5m/www/cb5m.css

    r2004 r2006  
    318318#Filter div.buttons button:hover { color: #000000; cursor: pointer; } 
    319319 
    320 #FormNav { font-family: Montserrat, Arial, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.2em; text-transform: uppercase; font-weight: 700; } 
     320#FormNav { display: none; font-family: Montserrat, Arial, sans-serif; font-size: 12px; font-size: 0.75rem; line-height: 1.2em; text-transform: uppercase; font-weight: 700; } 
    321321#FormNav a { margin-right: 1em; } 
    322322#Form div.col { display: inline-block; width: 49.8%; vertical-align: top; padding: 16px 16px 16px 0; } 
  • cb5m/www/cb5m.js

    r2004 r2006  
    1010 
    1111// cb5m layout 
    12 var cb5m = { "version": "1", "viewport": { "w": 0, "h": 0 }, "navclick": false, "mobile": false, "menuclick": false, "pages": [], "agendas": [], "calendarArchive": [], "howtos": "" }; 
     12var cb5m = { "version": "1", "mobilew": 688, "viewport": { "w": 0, "h": 0 }, "navclick": false, "mobile": false, "menuclick": false, "pages": [], "agendas": [], "calendarArchive": [], "howtos": "" }; 
    1313// screen size update function 
    1414cb5m.update = function() { 
     
    1717    return; 
    1818  } 
    19   if ( dim.w < 1008 ) { 
     19  if ( dim.w < cb5m.mobilew ) { 
    2020    cb5m.mobile = true; 
    2121    cb5m.menuclick = connect( $("MenuButton"), "onclick", cb5m, "menuButtonClick" ); 
     
    163163} 
    164164cb5m.agendasInit = function() { 
    165   iterateElementsByTagAndClassName( "a", "agendaprint", $("Events"), function(eles,i) {  
    166     eles[i].parentNode.style.display = "block"; 
    167     connect( eles[i], "onclick", cb5m, "agendaPrintClick" ); 
    168     var thisagenda = $( eles[i].id.slice(0,-5) ); 
    169     if ( thisagenda ) { 
    170       cb5m.agendas.push( thisagenda ); 
    171     } 
    172   }); 
    173   log("cb5m agendas init with", cb5m.agendas.length, "agendas" ); 
     165  if ( !cb5m.mobile ) { 
     166    iterateElementsByTagAndClassName( "a", "agendaprint", $("Events"), function(eles,i) {  
     167      eles[i].parentNode.style.display = "block"; 
     168      connect( eles[i], "onclick", cb5m, "agendaPrintClick" ); 
     169      var thisagenda = $( eles[i].id.slice(0,-5) ); 
     170      if ( thisagenda ) { 
     171        cb5m.agendas.push( thisagenda ); 
     172      } 
     173    }); 
     174    log("cb5m agendas init with", cb5m.agendas.length, "agendas" ); 
     175  } 
    174176} 
    175177// show/hide additional rows of calendar archive 
     
    296298  log("cb5m howtos init"); 
    297299} 
     300cb5m.bannerInit = function() { 
     301  if ( cb5m.mobile ) { 
     302    if ( hasElementClass( $("Banner"), "portrait" ) ) { 
     303      var ban = removeElement( $("Banner") ); 
     304      appendChildNodes( $("Object"), ban ); 
     305    } 
     306    log("cb5m mobile banner init"); 
     307  } 
     308} 
    298309// init everything 
    299310cb5m.init = function() { 
     
    328339  if ( $("HowtosSearch") ) { 
    329340    cb5m.howtosInit(); 
     341  } 
     342  if ( $("Banner") ) { 
     343    cb5m.bannerInit(); 
    330344  } 
    331345  log("cb5m init"); 
Note: See TracChangeset for help on using the changeset viewer.