inspired by the new amazon show Fallout I reactivated my old MM to change the style to more look like a …well MagicPip Mirror XD

It took me more than 4 days to set up the system, to “learn” and understand custom.css and to tinker around for the looks.

Have to put it back behind a mirror obviously but did not find the time yet (need a second person to remove the mirror).

modules: [
                {
                        module: "alert",
                },
                {
                        module: "updatenotification",
                        position: "bottom_bar"
                },
                {
                        module: "helloworld",
                        position: "top_bar",
                        config: {
                                text: "MagicPip 2000"
                                }

                },
                {
                        module: "clock",
                        position: "top_bar",
                        config: {
                                displaySeconds:false,
                                }
                },

		{
                        module: "calendar",
                        header: "Anstehende VAULT-TEC Events",
                        position: "top_right",
                        config: {
                                fetchInterval: 6000,
                                fade: false,
                                maximumEntries: 10,
                                maximumNumberOfDays: 3,
                                flipDateHeaderTitle: true,
                                hideDuplicates: true,
                                coloredText: false,
                                coloredBackground: false,
                                coloredSymbol: true,
                                customEvents: [{keyword: 'Leistungsturnen', symbol: 'medal', color: '#32cd32'},{keyword: 'Kosmetik', symbol: 'hand-holding-drop>
                                calendars: [
                                      {
                                                url: "xxx
                                                symbol: "calendar-plus",
                                                color: "#41FF00",

                                           },
                                           {
                                                url: "xxx
                                                color: "#0a880c",
                                                symbol: "calendar-check",

                                           },
                                ],
                        }
                },

                {
                        module: "weather",
                        position: "top_left",
                        config: {
                                weatherProvider: "openweathermap",
                                type: "current",
                                location: "xxx",
                                locationID: "xxx; unzip the gz file and find your city
                                apiKey: "xxx",
                                showUVIndex: true,

                        }
                },
		{
                        module: "weather",
                        position: "bottom_left",
                        header: "Vorhersage",
                        config: {
                                weatherProvider: "openweathermap",
                                type: "forecast",
                                location: "xxx",
                                locationID: "xxx; unzip the gz file and find your city
                                apiKey: "3xxx",
                                maxNumberOfDays: 3,
                                colored: false,
                                fade: false,
                        }
                },
                {
                        module: "MMM-RAIN-MAP",
                        position: "bottom_center",
                        config: {
                                animationSpeedMs: 4000,
                                colorScheme: 8,
                                colorizeTime: true,
                                defaultZoomLevel: 15,
                                displayTime: true,
                                displayTimeline: true,
                                displayClockSymbol: false,
                                displayHoursBeforeRain: 0,
                                extraDelayLastFrameMs: 4000,
                                extraDelayCurrentFrameMs: 4000,
                                markers: [
                                        { xxxx},
                                ],
                                mapPositions: [
                                        { xxxx },
                                ],
                                                mapUrl: "https://a.tile.openstreetmap.de/{z}/{x}/{y}.png",
                                mapHeight: "200px", // must be a pixel value (no percent)
                                mapWidth: "200px", // must be a pixel value (no percent)
                                maxHistoryFrames: 6,
                                maxForecastFrames: -1,
                                substitudeModules: [],
                                updateIntervalInSeconds: 1800,
                                }
                },
		{
},
		{
                module: "MMM-ImagesPhotos",
                position: "middle_center",
                config: {
                        opacity: 0.9,
                        animationSpeed: 5000,
                        updateInterval: 50000,
                        maxHeight: "500px",
                        maxWidth:"1000px",
                        sequential: true  // process the image list randomly
                        }
                },
                {
                        module: "newsfeed",
                        position: "lower_third",
                        config: {
                                feeds:  [
                                        {
                                                title: "PositiveNews",
                                                url: "https://www.positive.news/feed/",
                                        },

                                        ],
                                updateInterval: 15000,
                                showDescription: true,
                                showSourceTitle: true,
                                showPublishDate: true,
                                broadcastNewsFeeds: true,
                                broadcastNewsUpdates: true,
				ignoreOldItems: true,
                                ignoreOlderThan: 604800000,
                                },
                },
                 {
                        module: "newsfeed",
                        position: "lower_third",
                        config: {
                                feeds:  [
                                        {
                                                title: "GoodNewsMagazin",
                                                url: "https://goodnews-magazin.de/feed/",
                                        },
                                        ],
                                updateInterval: 20000,
                                showDescription: true,
                                showSourceTitle: true,
                                showPublishDate: true,
                                broadcastNewsFeeds: true,
                                broadcastNewsUpdates: true,
				ignoreOldItems: true,
                                ignoreOlderThan: 604800000,
                                },
                },
		 {
                        module: 'MMM-Luftdaten',
                        position: 'bottom_right',
                        header: 'Aktuelle Sensordaten',
                        config: {
                                sensors: [xxx],
                                fetchInterval: 5,
                                timeOnly: true,
                                displayTendency: true,
                                withBorder: false,
                                }
                },
                {
                        module: 'MMM-AirQuality',
                        position: 'top_left', // you may choose any location
                        config: {
                                token: 'xxx',
                                location: 'xxx/' // the location to check the index for
                                }
                },
		 {
                        module: "MMM-NINA",
                        position: "bottom_bar",
                        config: {
                                ags: ["xxx"], // Liste der Gemeinden, die abgefragt werden sollen
                                downgradeLhpSeverity: false,
                                downgradeCancelSeverity: true,
                                hideCancelledWarnings: true,
                                excludeProviders: [], // Mögliche Werte ["MOWAS", "DWD", "BIWAPP", "LHP"]
                                maxAgeInHours: 6,
                                mergeAlertsById: true,
                                mergeAlertsByTitle: true,
                                orderBySeverity: true,
                                showIcon: true,
                                showDate: true,
                                showCity: true,
                                showNoWarning: false,
                                theme: "top", // Erlaubte Werte: top, top-floating, side
                                updateIntervalInSeconds: 300,
                                }
                },
        ]
};

and ofc the custom.css code

@font-face {
  font-family: "BS";
  font-style: normal;
  src:
    local("BS"),
    url("BSfont.otf") format("opentype");
}

@font-face {
  font-family: "FS";
  font-style: normal;
  src:
    local("FS"),
    url("FSfont.ttf") format("truetype");
}


:root {
        --color-text: #0c8e0c;
        --color-text-dimmed: #087009;
        --color-text-bright: #41FF00;
        --font-primary: "FS";
        --font-secondary: BS";
        }

.calendar {
        font-family: BS;
        }


.weather {
        font-family: BS;
        }

.region.lower.third  {
        border: 1px dashed #087009;
        padding: 15px;
        border-bottom: hidden;
        border-top: hidden;
        }


.region.top.right  {
        border: 3px #087009;
        border-radius: 5px;
        padding: 15px;
        border-left: hidden;
        border-bottom: hidden;
        border-top: solid;
        border-right: dashed;

        }

.region.bottom.right  {
        border: 1px dashed #087009;
        border-radius: 5px;
        padding: 15px;
        border-left: hidden;
        border-bottom: hidden;
        border-top: hidden;
        }

.region.bottom.left  {
        border: 1px dashed #087009;
        padding: 15px;
        border-radius: 5px;
        border-bottom: hidden;
        border-right: hidden;
        border-top: hidden;
        }

.region.top.bar  {
        border: 2px dashed #087009;
        padding: 5px;
        border-left: hidden;
        border-right: hidden;
        border-bottom: hidden;
        }

.clock {
        font-family: BS;
        }

.weather .light {
        font-family: BS;
        }

.clock .light {
        font-family: BS;
        }

.newsfeed {
        text-transform: uppercase;
        }

.helloworld {
        font-family: BS;
        text-shadow: 2px 2px 5px #087009;
        font-size: 65px;
        border: 2px solid #41FF00;
        padding: 5px;
        border-left: hidden;
        border-right: hidden;
        border-top: hidden;
        }

.region.bottom.bar  {
        border: 2px solid #41FF00;
        border-top: hidden;
        border-left: hidden;
        border-right:hidden;
        }

header {
        text-align: center;
        }


.MMM-Luftdaten {
        font-family: BS;
        }

.MMM-Luftdaten .header {
                        color: #41FF00;
                        border-bottom: #087009;
                        }

.MMM-RAIN-MAP {
                border: 2px solid #087009;
                  }

.MMM-AirQuality  {
        font-family: BS;
        }

“BS” and “FS” are the two fonts I’m using, both fonts are the “original” fonts used in the Fallout games for terminals and the so called PipBoy.

Feel free to share your thoughts I’m sure there are some ways to improve parts of the coding