WordPress.org
Get WordPress

Plugin Directory

Changeset 2673324


Ignore:
Timestamp:
02/05/2022 07:46:47 AM (4 years ago)
Author:
pressmate
Message:

Listing page css fixes for responsive and also tested with new major version

Location:
makestories-helper/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • makestories-helper/trunk/assets/css/ms-style.css

    r2659092 r2673324  
    111111    font: 500 12px sans-serif;
    112112}
    113 /*
     113
     114/*
    114115body .slick-prev:before,
    115116body .slick-next:before {
    … …  
    141142    }
    142143}
    143  
     144
    144145/* Category section */
    145146.category-wrap {
    … …  
    171172
    172173.grid .container p {
    173     color:#757575;
    174 }
    175 
    176 .container .default-stories{
     174    color: #757575;
     175}
     176
     177.container .default-stories {
    177178    width: 100%;
    178179}
     180
    179181.default-stories h3 {
    180182    margin-bottom: 10px;
    … …  
    189191    overflow: hidden;
    190192}
    191 .default-stories p{
     193
     194.default-stories p {
    192195    margin-bottom: 0;
    193196    margin-top: 0;
    … …  
    203206    max-width: 250px;
    204207    border-radius: 6px;
    205     box-shadow: 0 0 8px 0 rgba(53,53,53,0.18);
     208    box-shadow: 0 0 8px 0 rgba(53, 53, 53, 0.18);
    206209    padding: 12px;
    207210}
    208211
    209 .story-thumb a{
     212.story-thumb a {
    210213    text-decoration: none;
    211214}
    … …  
    257260        max-width: 225px;
    258261    }
    259     .default-stories{
     262
     263    .default-stories {
    260264        width: 90%;
    261265    }
    … …  
    267271        max-width: 40vw;
    268272    }
    269     .default-stories{
     273
     274    .default-stories {
    270275        width: 94%;
    271276    }
    … …  
    304309    overflow: hidden;
    305310} */
    306 .grid{
    307     padding-top:1.5rem;
     311.grid {
     312    padding-top: 1.5rem;
    308313}
    309314
    … …  
    316321    border: 1px solid #dedede;
    317322    border-radius: 5px;
    318     margin-bottom:1.5rem;
     323    margin-bottom: 1.5rem;
    319324    height: 100%;
    320     width:100%
     325    width: 100%
    321326}
    322327
    … …  
    342347}
    343348
    344 .story-img{
     349.story-img {
    345350    display: block;
    346351    width: 100%;
    … …  
    353358}
    354359
    355 .cardin{
    356     display:block;
    357     width:100%;
    358     height:100%;
    359     cursor:pointer;
    360 }
    361 .replaceStory  {
     360.cardin {
     361    display: block;
     362    width: 100%;
     363    height: 100%;
     364    cursor: pointer;
     365}
     366
     367.replaceStory {
    362368    width: 340px;
    363369    min-height: 605px;
    … …  
    370376}
    371377
    372 @media (min-width: 1024px){
    373 .grid {
    374     display: grid;
    375     grid-gap: 1.5rem;
    376     grid-template-columns: repeat(3,1fr);
    377 }
    378 .card{
    379     margin-bottom:0;
    380 }
    381 
    382 }
    383 
    384 @media ( max-width:1023.98px ) {
    385 
    386 .largestory .container p, .replaceStory .container p{
    387     font-size:0.875rem;
    388     margin-bottom:1rem;
    389 }
    390 
    391 .largestory .container h2,.replaceStory .container h2{
    392     font-size:1.25rem;
    393     font-family:Circular Std Bold;
    394     line-height:1.5625rem;
    395 }
    396 
    397 .replaceStory{
    398     width:unset;
    399     min-height:unset;
    400     height:auto;
    401     grid-row: span 1;
    402 }
    403 
    404 .bigmiddleStory {
    405     grid-column: span 1;
    406 }
    407 
    408 .smallStory .cardin,.mobilesmallStory .cardin,.bigmiddleStory .cardin {
    409     display: flex;
    410     height: auto;
    411 }
    412 
    413 .smallStory .cardimage,.mobilesmallStory .cardimage,.bigmiddleStory .cardimage {
    414     height: auto;
    415     width: 95px;
    416     border-radius: 5px;
    417     margin: 1rem;
    418 }
    419 
    420 .smallStory .cardimage .story-img,.mobilesmallStory .cardimage .story-img,.bigmiddleStory .cardimage .story-img{
    421     border-radius: 5px;
    422 }
    423 
    424 .smallStory .container,.mobilesmallStory .container,.bigmiddleStory .container {
    425     padding: 1.5rem 0.5rem;
    426 }
    427 
    428 .smallStory .container p,.mobilesmallStory .container p,.bigmiddleStory .container p {
    429     font-size: 0.875rem;
    430     margin-bottom: 1rem;
    431 }
    432 
    433 .smallStory .container h2,.mobilesmallStory .container h2, .bigmiddleStory .container h2 {
    434     font-size: 1rem;
    435     font-family: Circular Std Bold;
    436     line-height: 22px;
    437 }
    438 
    439 }
    440 
    441 @media (min-width: 768px) and (max-width: 1023.98px){
    442 .grid {
    443     display: grid;
    444     grid-gap: 1.5rem;
    445     grid-template-columns: repeat(2,2fr);
    446 }
    447 
    448 .card{
    449     margin-bottom:0;
    450 }
    451 
    452 }
    453 
    454 @media (min-width: 1024px){
    455 
    456 .grid {
    457     display: grid;
    458     grid-gap: 1.5rem;
    459     grid-template-columns: repeat(3,1fr);
    460 }
    461 
    462 .largestory  {
    463     min-height: 365px;
    464     height: 100%;
    465     grid-column: span 3;
    466 }
    467 
    468 .largestory .cardin {
    469     display: flex;
    470     flex-direction: row-reverse;
    471 }
    472 
    473 .largestory .container {
    474     display: flex;
    475     flex-direction: column;
    476     justify-content: center;
    477     padding: 0 2rem;
    478     width: 33.33333%;
    479 }
    480 
    481 .largestory .cardimage {
    482     height: 100%;
    483     width: 66.66667%;
    484     border-radius: 0 1rem 1rem 0;
    485 }
    486 
    487 .largestory .cardimage .story-img{
    488     height: auto;
    489     display: flex;
    490     flex: 1 1 0;
    491 }
    492 
    493 .replaceStory .cardimage{
    494     height:565px;
    495 }
    496 
    497 .largestory .cardimage .story-img{ border-radius:0 5px 5px 0}
    498 
    499 .largestory .container p{
    500     font-size:0.875rem;
    501     margin-bottom:1rem;
    502 }
    503 
    504 .largestory .container h2{
    505     font-size:1.25rem;
    506     font-family:Circular Std Bold;
    507     line-height:1.5625rem;
    508 }
    509 
    510 .replaceStory .container p{
    511     font-size:0.875rem;
    512     margin-bottom:1rem;
    513 }
    514 
    515 .replaceStory .container h2{
    516     font-size:1.25rem;
    517     font-family:Circular Std Bold;
    518     line-height:1.5625rem;
    519 }
    520 
    521 .smallStory .container p,.mobilesmallStory .container p{
    522     font-size:0.875rem;
    523     margin-bottom:1rem;
    524 }
    525 
    526 .smallStory .container h2,.mobilesmallStory .container h2{
    527     font-size:1.25rem;
    528     font-family:Circular Std Bold;
    529     line-height:1.5625rem;
    530 }
    531 
    532 .bigmiddleStory .container p{
    533     font-size:0.875rem;
    534     margin-bottom:1rem;
    535 }
    536 
    537 .bigmiddleStory .container h2{
    538     font-size:1.25rem;
    539     font-family:Circular Std Bold;
    540     line-height:1.5625rem;
    541 }
     378@media (min-width: 1024px) {
     379    .grid {
     380        display: grid;
     381        grid-gap: 1.5rem;
     382        grid-template-columns: repeat(3, 1fr);
     383    }
     384
     385    .card {
     386        margin-bottom: 0;
     387    }
     388
     389}
     390
     391@media ( max-width: 1023.98px ) {
     392
     393    .largestory .container p, .replaceStory .container p {
     394        font-size: 0.875rem;
     395        margin-bottom: 1rem;
     396    }
     397
     398    .largestory .container h2, .replaceStory .container h2 {
     399        font-size: 1.25rem;
     400        font-family: Circular Std Bold;
     401        line-height: 1.5625rem;
     402    }
     403
     404    .replaceStory {
     405        width: unset;
     406        min-height: unset;
     407        height: auto;
     408        grid-row: span 1;
     409    }
     410
     411    .bigmiddleStory {
     412        grid-column: span 1;
     413    }
     414
     415    .smallStory .cardin, .mobilesmallStory .cardin, .bigmiddleStory .cardin {
     416        display: flex;
     417        height: auto;
     418    }
     419
     420    .smallStory .cardimage, .mobilesmallStory .cardimage, .bigmiddleStory .cardimage {
     421        height: auto;
     422        width: 95px;
     423        border-radius: 5px;
     424        margin: 1rem;
     425    }
     426
     427    .smallStory .cardimage .story-img, .mobilesmallStory .cardimage .story-img, .bigmiddleStory .cardimage .story-img {
     428        border-radius: 5px;
     429    }
     430
     431    .smallStory .container, .mobilesmallStory .container, .bigmiddleStory .container {
     432        padding: 1.5rem 0.5rem;
     433    }
     434
     435    .smallStory .container p, .mobilesmallStory .container p, .bigmiddleStory .container p {
     436        font-size: 0.875rem;
     437        margin-bottom: 1rem;
     438    }
     439
     440    .smallStory .container h2, .mobilesmallStory .container h2, .bigmiddleStory .container h2 {
     441        font-size: 1rem;
     442        font-family: Circular Std Bold;
     443        line-height: 22px;
     444    }
     445
     446}
     447
     448@media (min-width: 768px) and (max-width: 1023.98px) {
     449    .grid {
     450        display: grid;
     451        grid-gap: 1.5rem;
     452        grid-template-columns: repeat(2, 2fr);
     453    }
     454
     455    .card {
     456        margin-bottom: 0;
     457    }
     458
     459}
     460
     461@media (min-width: 1024px) {
     462
     463    .grid {
     464        display: grid;
     465        grid-gap: 1.5rem;
     466        grid-template-columns: repeat(3, 1fr);
     467    }
     468
     469    .largestory {
     470        min-height: 365px;
     471        height: 100%;
     472        grid-column: span 3;
     473    }
     474
     475    .largestory .cardin {
     476        display: flex;
     477        flex-direction: row-reverse;
     478    }
     479
     480    .largestory .container {
     481        display: flex;
     482        flex-direction: column;
     483        justify-content: center;
     484        padding: 0 2rem;
     485        width: 33.33333%;
     486    }
     487
     488    .largestory .cardimage {
     489        height: 100%;
     490        width: 66.66667%;
     491        border-radius: 0 1rem 1rem 0;
     492    }
     493
     494    .largestory .cardimage .story-img {
     495        height: auto;
     496        display: flex;
     497        flex: 1 1 0;
     498    }
     499
     500    .replaceStory .cardimage {
     501        height: 565px;
     502    }
     503
     504    .largestory .cardimage .story-img {
     505        border-radius: 0 5px 5px 0
     506    }
     507
     508    .largestory .container p {
     509        font-size: 0.875rem;
     510        margin-bottom: 1rem;
     511    }
     512
     513    .largestory .container h2 {
     514        font-size: 1.25rem;
     515        font-family: Circular Std Bold;
     516        line-height: 1.5625rem;
     517    }
     518
     519    .replaceStory .container p {
     520        font-size: 0.875rem;
     521        margin-bottom: 1rem;
     522    }
     523
     524    .replaceStory .container h2 {
     525        font-size: 1.25rem;
     526        font-family: Circular Std Bold;
     527        line-height: 1.5625rem;
     528    }
     529
     530    .smallStory .container p, .mobilesmallStory .container p {
     531        font-size: 0.875rem;
     532        margin-bottom: 1rem;
     533    }
     534
     535    .smallStory .container h2, .mobilesmallStory .container h2 {
     536        font-size: 1.25rem;
     537        font-family: Circular Std Bold;
     538        line-height: 1.5625rem;
     539    }
     540
     541    .bigmiddleStory .container p {
     542        font-size: 0.875rem;
     543        margin-bottom: 1rem;
     544    }
     545
     546    .bigmiddleStory .container h2 {
     547        font-size: 1.25rem;
     548        font-family: Circular Std Bold;
     549        line-height: 1.5625rem;
     550    }
    542551
    543552}
    544553
    545554@media (min-width: 1200px) {
    546 .grid{
    547     display: grid;
    548     grid-gap: 1.5rem;
    549     grid-template-columns: repeat(4,1fr);
    550     padding:1.5rem 0 0 0;
    551 }
    552 
    553 .card{
    554     margin-bottom:0;
    555 }
    556 
    557 .largestory {
    558     min-height: 365px;
    559     height: 100%;
    560     grid-column: span 3;
    561     font-family: 'Circular Std Book';
    562 }
    563 
    564 .largestory .cardin{
    565     display: flex;
    566     flex-direction: row-reverse;
    567 }
    568 
    569 .largestory .cardimage{
    570     height: 100%;
    571     width: 66.66667%;
    572     border-radius: 0 1rem 1rem 0;
    573     display: flex;
    574     flex-direction: column;
    575 }
    576 
    577 .largestory .story-img{
    578     border-radius:0 5px 5px 0;
    579 }
    580 
    581 .largestory .container{
    582     display: flex;
    583     flex-direction: column;
    584     justify-content: center;
    585     padding: 0 2rem;
    586     width: 33.33333%;
    587     box-sizing: border-box;
    588 }
    589 
    590 .largestory .container p{
    591     font-size:0.875rem;
    592     margin-bottom:1rem;
    593 }
    594 
    595 .largestory .container h2{
    596     font-size:1.25rem;
    597     font-family:Circular Std Bold;
    598     line-height:1.5625rem;
    599 }
    600 
    601 .replaceStory .cardimage{
    602     height:420px;
    603 }
    604 
    605 .replaceStory .container p{
    606     font-size:0.875rem;
    607     margin-bottom:1rem;
    608 }
    609 
    610 .replaceStory .container h2{
    611     font-size:1.25rem;
    612     font-family:Circular Std Bold;
    613     line-height:1.5625rem;
    614 }
    615 
    616 .smallStory .story-img{
    617     min-height: 115px;
    618     height: auto;
    619     display: flex;
    620     flex: 1 1 0;
    621 }
    622 
    623 .smallStory .cardin{
    624     display:flex;
    625 }
    626 
    627 .smallStory .cardimage{
    628     /* min-height: 115px;
    629     height: auto;
    630     display: flex;
    631     flex: 1 1 0;*/
    632     height: auto;
    633     width: 80px;
    634     border-radius: 1rem;
    635     margin: 1rem;
    636     display: flex;
    637     flex-direction: column;
    638 }
    639 
    640 .smallStory .cardimage .story-img{
    641     border-radius:5px;
    642 }
    643 
    644 .smallStory .container{
    645     padding:1rem 1rem 1rem 0;
    646 }
    647 
    648 .smallStory .container p{
    649     font-size:0.875rem;
    650     margin-bottom:1rem;
    651 }
    652 
    653 .smallStory .container h2{
    654     font-size:0.875rem;
    655     font-family:Circular Std Bold;
    656     line-height:22px;
    657 }
    658 
    659 .mobilesmallStory .container p{
    660     font-size:0.875rem;
    661     margin-bottom:1rem;
    662 }
    663 
    664 .mobilesmallStory .container h2{
    665     font-size:1.25rem;
    666     font-family:Circular Std Bold;
    667     line-height:1.5625rem;
    668 }
    669 
    670 .bigmiddleStory .container p{
    671     font-size:0.875rem;
    672     margin-bottom:1rem;
    673 }
    674 
    675 .bigmiddleStory .container h2{
    676     font-size:1.25rem;
    677     font-family:Circular Std Bold;
    678     line-height:1.5625rem;
    679 }
    680 }
    681 @media (max-width: 995px){
    682 body .show-list .bookend-list-item{
    683     flex-basis: 45%;
    684 }
    685 .story-player-wrap .bookend-story-list{
    686     padding: 100px 50px;
    687 }
    688 }
    689 
    690 @media (max-width: 550px){
    691 body .show-list .bookend-list-item{
    692     flex-basis: 100%;
    693 }
    694 }
     555    .grid {
     556        display: grid;
     557        grid-gap: 1.5rem;
     558        grid-template-columns: repeat(4, 1fr);
     559        padding: 1.5rem 0 0 0;
     560    }
     561
     562    .card {
     563        margin-bottom: 0;
     564    }
     565
     566    .largestory {
     567        min-height: 365px;
     568        height: 100%;
     569        grid-column: span 3;
     570        font-family: 'Circular Std Book';
     571    }
     572
     573    .largestory .cardin {
     574        display: flex;
     575        flex-direction: row-reverse;
     576    }
     577
     578    .largestory .cardimage {
     579        height: 100%;
     580        width: 66.66667%;
     581        border-radius: 0 1rem 1rem 0;
     582        display: flex;
     583        flex-direction: column;
     584    }
     585
     586    .largestory .story-img {
     587        border-radius: 0 5px 5px 0;
     588    }
     589
     590    .largestory .container {
     591        display: flex;
     592        flex-direction: column;
     593        justify-content: center;
     594        padding: 0 2rem;
     595        width: 33.33333%;
     596        box-sizing: border-box;
     597    }
     598
     599    .largestory .container p {
     600        font-size: 0.875rem;
     601        margin-bottom: 1rem;
     602    }
     603
     604    .largestory .container h2 {
     605        font-size: 1.25rem;
     606        font-family: Circular Std Bold;
     607        line-height: 1.5625rem;
     608    }
     609
     610    .replaceStory .cardimage {
     611        height: 420px;
     612    }
     613
     614    .replaceStory .container p {
     615        font-size: 0.875rem;
     616        margin-bottom: 1rem;
     617    }
     618
     619    .replaceStory .container h2 {
     620        font-size: 1.25rem;
     621        font-family: Circular Std Bold;
     622        line-height: 1.5625rem;
     623    }
     624
     625    .smallStory .story-img {
     626        min-height: 115px;
     627        height: auto;
     628        display: flex;
     629        flex: 1 1 0;
     630    }
     631
     632    .smallStory .cardin {
     633        display: flex;
     634    }
     635
     636    .smallStory .cardimage {
     637        /* min-height: 115px;
     638        height: auto;
     639        display: flex;
     640        flex: 1 1 0;*/
     641        height: auto;
     642        width: 80px;
     643        border-radius: 1rem;
     644        margin: 1rem;
     645        display: flex;
     646        flex-direction: column;
     647    }
     648
     649    .smallStory .cardimage .story-img {
     650        border-radius: 5px;
     651    }
     652
     653    .smallStory .container {
     654        padding: 1rem 1rem 1rem 0;
     655    }
     656
     657    .smallStory .container p {
     658        font-size: 0.875rem;
     659        margin-bottom: 1rem;
     660    }
     661
     662    .smallStory .container h2 {
     663        font-size: 0.875rem;
     664        font-family: Circular Std Bold;
     665        line-height: 22px;
     666    }
     667
     668    .mobilesmallStory .container p {
     669        font-size: 0.875rem;
     670        margin-bottom: 1rem;
     671    }
     672
     673    .mobilesmallStory .container h2 {
     674        font-size: 1.25rem;
     675        font-family: Circular Std Bold;
     676        line-height: 1.5625rem;
     677    }
     678
     679    .bigmiddleStory .container p {
     680        font-size: 0.875rem;
     681        margin-bottom: 1rem;
     682    }
     683
     684    .bigmiddleStory .container h2 {
     685        font-size: 1.25rem;
     686        font-family: Circular Std Bold;
     687        line-height: 1.5625rem;
     688    }
     689}
     690
     691@media (max-width: 995px) {
     692    body .show-list .bookend-list-item {
     693        flex-basis: 45%;
     694    }
     695
     696    .story-player-wrap .bookend-story-list {
     697        padding: 100px 50px;
     698    }
     699
     700    .card {
     701        height: auto;
     702    }
     703}
     704
     705@media (max-width: 550px) {
     706    body .show-list .bookend-list-item {
     707        flex-basis: 100%;
     708    }
     709}

  • makestories-helper/trunk/makestories.php

    r2659092 r2673324  
    44Plugin URI:     https://makestories.io/official-wordpress-webstories-plugin/
    55Description:    The leading Google Web Stories Editor is now available to create Stories in WordPress. It is easy to use, allows for extensive customization, and is adaptive for future changes.
    6 Version:        2.6.0
     6Version:        2.6.1
    77Author:         MakeStories Team
    88Author URI:     https://makestories.io

  • makestories-helper/trunk/readme.txt

    r2659092 r2673324  
    33Tags: amp-story, makestories, web-stories, web stories, amp, stories, amp, storytelling
    44Requires at least: 4.0
    5 Tested up to: 5.8.3
     5Tested up to: 5.9
    66Requires PHP: 5.6
    77
Note: See TracChangeset for help on using the changeset viewer.