User:Vaileasys/sandbox: Difference between revisions

Revision as of 08:40, 29 March 2024

Wiki maintenance!

The wiki will be undergoing some maintenance while we modify the default theme.
Notice any oddities or want to provide feedback? Let us know on the discussion page or the pzwiki discord channel.

/* Mediawiki:Sitenotice */
.sitenotice-card {
    background-color: #f8f9fa;
    text-align: center;
    justify-content: space-between;
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eaecf0;
    display: flex;
    width: auto;
    align-items: center
}

.sitenotice-card > div {
    display: flex;
    flex-direction: column
}

.sitenotice-card .image-container-left {
    margin-right: 1rem
}

.sitenotice-card .image-container-right {
    margin-left: 1rem
}
/* hide images if screen size is less than 720px */
@media screen and (max-width: 719px) {
    .sitenotice-card .image-container-left,
    .sitenotice-card .image-container-right {
        display:none
    }
}

TODO:

create an anonnotice for users that aren't logged in
- wording will be adjusted directing them to create an account to change the theme
Once style implemented, modify to advise how to change the theme

@@ Line 1: / Line 1: @@
-<div id="sitenotice"">
+<div class="sitenotice-card">
-<div class="sitenotice">
+<div class="image-container-left">
-<div>
 [[File:Spiffo rummage.png|64px]]
 </div>
@@ Line 10: / Line 9: @@
 Notice any oddities or want to provide feedback? Let us know on the [[PZwiki_talk:Community_portal/Wiki_theme|discussion page]] or the [https://discord.com/channels/136501320340209664/473467044050894858 pzwiki discord channel].
 </div>
-<div>
+<div class="image-container-right">
 [[File:Be crafty.png|64px]]
-</div>
 </div>
 </div>
@@ Line 18: / Line 16: @@
 <syntaxhighlight lang="css">
 /* Mediawiki:Sitenotice */
-#sitenotice {
+.sitenotice-card {
      background-color: #f8f9fa;
      text-align: center;
-}
-.sitenotice {
      justify-content: space-between;
      margin: 0.75rem 0;
@@ Line 29: / Line 25: @@
      display: flex;
      width: auto;
-     align-items: center;
+     align-items: center
 }
-.sitenotice > div {
+.sitenotice-card > div {
      display: flex;
-     flex-direction: column;
+     flex-direction: column
 }
-.sitenotice > div:first-child {
-     margin-right: 1rem;
+.sitenotice-card .image-container-left {
+     margin-right: 1rem
 }
-.sitenotice > div:last-child {
-     margin-left: 1rem;
+.sitenotice-card .image-container-right {
+     margin-left: 1rem
 }
 /* hide images if screen size is less than 720px */
 @media screen and (max-width: 719px) {
-     .sitenotice > div:first-child,
+     .sitenotice-card .image-container-left,
-     .sitenotice > div:last-child {
+     .sitenotice-card .image-container-right {
-         display: none;
+         display:none
      }
 }