MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. earlman
    3. Best
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    E
    Offline
    • Profile
    • Following 0
    • Followers 1
    • Topics 2
    • Posts 17
    • Groups 0

    Posts

    Recent Best Controversial
    • Magic Mirror Redesign WIP :D

      This is how it currently looks

      0_1558561855468_v0.1.0.PNG

      This is what I’m planning for the eventual v1.0.0 release:

      0_1558561881000_v1.0.0-preview.png

      If you’re interested in how I did this, let me know. I dove pretty deep into the development. Here’s some not-so-apparent features I’ve added:

      • Refactored the Layout in main.css to use CSS Grid
        • This allows for a more flexible layout that’s easier to work with
      • Modified MMM-Wallpaper to load images from Pexels
      • Using two instances of MMM-Todoist to load my “Daily Highlight” for the day
      • After 6:00pm, changes the Daily Highlight to tomorrow’s highlight
      posted in Showcase
      E
      earlman
    • Thread on Documentation

      @MichMich
      I think it would be a good idea to put a little more visibility on documentation in the forums so that we could get an idea what would be the most helpful for the community. I have some energy to work on this (sent a couple PRs earlier).

      Would it be possible to get “Documentation” as category or subcategory? It could probably work as a thread but it seems like I don’t have any posting permissions in the categories where it’s relevant

      posted in General Discussion
      E
      earlman
    • RE: Magic Mirror Redesign WIP :D

      @bravooscar
      try this:

      :root {
        /**** COLOR ****/
        --color-text: #fff;
        --color-background: black;
      
        /**** TYPOGRAPHY ****/
        --font-primary: "Roboto Condensed";
        --font-secondary: "Roboto";
        --base: 20px;
        --text-scale: 1.5;
        --text-xs: calc(var(--base) / var(--text-scale));
        --text-sm: var(--base);
        --text-md: calc(var(--text-sm) * var(--text-scale));
        --text-lg: calc(var(--text-md) * var(--text-scale));
        --text-xl: calc(var(--text-lg) * var(--text-scale));
        --text-2xl: calc(var(--text-xl) * var(--text-scale));
        --text-3xl: calc(var(--text-2xl) * var(--text-scale));
      
        /**** SPACING ****/
        --grid-gap: 1rem;
        --outside-margin: 4rem;
      }
      
      html {
        cursor: none;
        overflow: hidden;
        background: var(--color-background);
        user-select: none;
        font-size: var(--base);
      }
      
      ::-webkit-scrollbar {
        display: none;
      }
      
      body {
        background: var(--color-background);
        color: var(--color-text);
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
        -webkit-font-smoothing: antialiased;
      }
      
      /**
       * Default styles.
       */
      
      .dimmed {
        color: var(--color-text);
        opacity: 0.4;
      }
      
      .normal {
        color: var(--color-text);
        opacity: 0.7;
      }
      
      .bright {
        color: var(--color-text);
        opacity: 1;
      }
      
      .xsmall {
        font-size: var(--text-xs);
        line-height: 1.4;
      }
      
      .small {
        font-size: var(--text-sm);
        line-height: 1.4;
      }
      
      .medium {
        font-size: calc(var(--text-md));
        line-height: 1.4;
      }
      
      .large {
        font-size: calc(var(--text-lg));
        line-height: 1;
      }
      
      .xlarge {
        font-size: calc(var(--text-xl));
        line-height: 1;
        letter-spacing: -3px;
      }
      
      .thin {
        font-family: var(--font-secondary), sans-serif;
        font-weight: 100;
      }
      
      .light {
        font-family: var(--font-primary), sans-serif;
        font-weight: 300;
      }
      
      .regular {
        font-family: var(--font-primary), sans-serif;
        font-weight: 400;
      }
      
      .bold {
        font-family: var(--font-primary), sans-serif;
        font-weight: 700;
      }
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      header {
        text-transform: uppercase;
        font-size: 1rem;
        font-family: var(--font-primary), Arial, Helvetica, sans-serif;
        font-weight: 400;
        border-bottom: 1px solid #666;
        line-height: 15px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #999;
      }
      
      sup {
        font-size: 50%;
        line-height: 50%;
      }
      
      /**
       * Module styles.
       */
      
      .module {
        margin-bottom: 30px;
      }
      
      .region.bottom .module {
        margin-top: 30px;
        margin-bottom: 0;
      }
      
      .no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .pre-line {
        white-space: pre-line;
      }
      
      /**
       *
       * LAYOUT STUFF
       *
       */
      .region {
        width: 100%;
      }
      
      .region.fullscreen {
        position: absolute;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        pointer-events: none;
      }
      .region.fullscreen * {
        pointer-events: auto;
      }
      
      .region table {
        width: 100%;
        border-spacing: 0;
        border-collapse: separate;
      }
      
      body {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-rows: repeat(5, minmax(0, max-content));
        padding: var(--outside-margin);
        place-items: stretch;
        height: 100vh;
      }
      
      .top.bar {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(3, 1fr);
      }
      
      .top.bar > .container {
        grid-column: 1 / -1;
      }
      
      .bottom.bar {
        display: grid;
        grid-gap: var(--grid-gap);
        grid-template-columns: repeat(3, 1fr);
      }
      
      .bottom.bar > .container {
        grid-column: 1 / -1;
        grid-row: 2;
      }
      
      .bottom.bar > .bottom {
          grid-row: 1;
      }
      
      .left {
        grid-column: 1 / 2;
      }
      
      .right {
        grid-column: -1 / -2;
      }
      
      /* for testing */
      
      .region {
        /* border: 1px solid white; */
      }
      
      posted in Showcase
      E
      earlman
    • 1 / 1