/* FONTS */ @font-face { font-display: block; /* Tells the webpage to not show any text at all until this font here loads */ font-family: 'DraWarNES'; src: url('/fonts/Dragon\ Warrior\ Title\ NES.ttf') format('truetype'); } @font-face { font-display: swap; /* Tells the webpage to show a temporary font until it loads */ font-family: 'SpeciGothi'; src: url('/fonts/SpecialGothic-VariableFont_wdth,wght.ttf') format('truetype-variations'); } /* BASE STUFF */ html { font-size: 16px; } body { font-size: 1rem; /* 1 rem = whatever the font-size listed above is. Using rem for everything helps the page look better at different zoom levels */ font-family: "SpeciGothi", sans-serif; margin: 0; /* Removes weird spacing on edges */ color: #ffffff; /*Some defaults */ background: #b56d21; } a { text-decoration: none; /* Make links NOT be blue/purple and underlined */ color: #ffffff; } /* ENTRANCE */ #entrance { font-family: 'DraWarNES'; /* We only use this font on our front entrance page */ font-size: 1.5rem; min-height: 100vh; /* This allows vertical centering to work, where 1vh = 1% the height of the current window */ display: flex; align-items: center; /* We will now center everything by default with these flexbox settings */ justify-content: center; flex-direction: column; /* We specify this flexbox setting here to make sure our items stack vertically */ width: 75rem; margin: 0 auto; } #entrance-top { display: flex; /* Use flexbox again so we can have the menu items appear NEXT to the image */ flex-direction: row; /* This setting makes things arrange horizontally ONLY for our image and menu items */ align-items: center; } #entrance-top img { width: 44rem; /* Specify size of image */ image-rendering: pixelated; /* This ensures the image never gets blurry when we resize it */ } #entrance-top-navmenu, #entrance-mobile-navmenu { margin: 0 2rem; /* First number is top-b href="/"ottom inner spacing, second is left-right inner spacing */ white-space: nowrap; /* Keeps all multi-word items on a single line of text */ display: flex; flex-direction: column; } #entrance-top-navmenu a, #entrance-mobile-navmenu a { padding: 2rem 0; /* We need to do this to vertically increase the hitboxes for each clickable link */ } #entrance-top-navmenu a span, #entrance-mobile-navmenu a span { color: #000000; /* Hide arrows by default... */ } #entrance-top-navmenu a:hover span, #entrance-mobile-navmenu a:hover span { color: #ffffff; /* ...unless we hover over them */ } #entrance-dialogue { margin-top: 3rem; /* Some spacing between the dialogue and picture */ } #entrance-mobile-navmenu { display: none; /* Shhhhh we dont use this yet */ } /* MAIN PAGES */ #main { background-image: repeating-conic-gradient(#b56d2144 0% 25%, #deb66b44 25% 50%); /* This is your code */ background-size: 3rem 3rem; animation: checkerboard-move 3.33s linear infinite; } @keyframes checkerboard-move { /* This is also your code */ 0% { background-position: 0 0; } 100% { background-position: -3rem -3rem; } } #main * { /* Everything we put on a page with is now centered by default */ margin: 0 auto; } #main-header { /* Top header with logo and buttons */ width: 60rem; padding-top: 2rem; } #main-header img { /* Top header logo */ display: block; margin: 0 auto; width: 30rem; } #main-header-buttons { /* Top header buttons layout */ display: flex; justify-content: space-evenly; margin-top: 1rem; border: 0.15rem #f7d86e solid; } .main-h-btn { /* Top header buttons themselves */ display: block; font-size: 1.75rem; padding: 0.5rem 0; background-color: #8e3636; color: #f7d86e; text-align: center; flex-grow: 1; /* Magic ingredient that lets button take up all available space */ } .btn-altcol { background-color: #6c2a2a; } .main-h-btn:hover { background-color: #8e3636aa; } .btn-altcol:hover { background-color: #8e3636aa; } .btn-current, .btn-current:hover { background-color: #ba3434; color: #ffffff; font-weight: bold; } #main-content { width: 60rem; /* Made the same width as the header */ background-color: #b56d21; border: 0.15rem #f7d86e solid; border-top: none; /* This prevents a weird double-border between the content and the buttons */ box-sizing: border-box; /* This aligns the border with the buttons */ min-height: 30rem; padding: 1.5rem; } .side-to-side { /* Example code that handles things being next to each other */ display: flex; gap: 2rem; } /* ENTRANCE - MOBILE */ @media only screen and (max-width: 78rem) { /* The following changes will happen if we're (roughly) smaller than the width of #entrance, like 75rem + 3 */ body { font-size: 12px; /* Shrink this to shrink everything using rem */ } #entrance { width: 100%; /* Set a new width for our mobile entrance */ margin: 0; } #entrance-top { flex-direction: column; /* Stack the picture on top of the navmenu */ } #entrance-top-navmenu { display: none; /* And then we hide that navmenu so the photo is now centered */ } #entrance-dialogue, #entrance-top img { width: 70vw; /* We make the image size a unit better for phones AND keep the dialogue within those new boundaries */ margin: 3rem auto 0 auto; /* Horizontally center things without removing the spacing between the text and image */ } #entrance-mobile-navmenu { display: flex; /* Now we re-enable the other nav menu below the dialogue! on mobile */ width: 70vw; /* Same width as above */ white-space: wrap; /* We can let "Nintendo Classics" be two lines now too */ text-indent: -1.7rem; /* and we make sure the N and C are lined up too */ margin: 3rem auto; /* And make sure it's horizontally centered with some distance to the stuff above AND spacing below*/ } } @media only screen and ((max-width: 78rem) and (min-width: 50rem)) { /* Tablets look kinda weird so we added these to fix that */ #entrance-dialogue, #entrance-top img { width: 55vw; /* Makes the image and dialogue a little less gigantic in those weird in-between sizes */ } } /* MAIN PAGES - MOBILE */ @media only screen and (max-width: 60rem) { /* If the window is roughly narrower than the main page width */ #main-header, #main-content, #main-header img { width: 90%; } #main-header-buttons { flex-direction: column; } .main-h-btn { width: 100%; } .side-to-side { flex-direction: column-reverse; /* YOU CAN CONTROL WHETHER THE IMAGE OR THE TEXT GOES ON TOP BY INCLUDING OR REMOVING -reverse HERE */ } }