mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 07:16:17 +08:00
impr(typing test): allow test words to breakout from the container
this completely reworks the way main content is structured closes #5335
This commit is contained in:
Miodec
parent
68b3053f0c
commit
20d6c39cff
|
|
@ -11,60 +11,56 @@
|
|||
document.title = "404 Not Found | Monkeytype";
|
||||
</script>
|
||||
<load src="html/warnings.html" />
|
||||
<div id="app" class="focus">
|
||||
<div></div>
|
||||
<div id="contentWrapper">
|
||||
<header class="focus">
|
||||
<a id="logo" href="/" router-link="">
|
||||
<div class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
style="isolation: isolate"
|
||||
viewBox="-680 -1030 300 180"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
|
||||
></path>
|
||||
<path
|
||||
d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
|
||||
></path>
|
||||
<path
|
||||
d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
|
||||
></path>
|
||||
<path
|
||||
d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
|
||||
></path>
|
||||
<path
|
||||
d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
|
||||
></path>
|
||||
<path
|
||||
d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
|
||||
></path>
|
||||
<path
|
||||
d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
|
||||
></path>
|
||||
<path
|
||||
d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
|
||||
></path>
|
||||
<path
|
||||
d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text">
|
||||
<div class="top">monkey see</div>
|
||||
monkeytype
|
||||
</h1>
|
||||
</a>
|
||||
</header>
|
||||
<main style="height: 100%">
|
||||
<load src="html/pages/404.html" />
|
||||
</main>
|
||||
</div>
|
||||
<div></div>
|
||||
<div id="app" class="content-grid focus">
|
||||
<header class="focus">
|
||||
<a id="logo" href="/" router-link="">
|
||||
<div class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
style="isolation: isolate"
|
||||
viewBox="-680 -1030 300 180"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
|
||||
></path>
|
||||
<path
|
||||
d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
|
||||
></path>
|
||||
<path
|
||||
d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
|
||||
></path>
|
||||
<path
|
||||
d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
|
||||
></path>
|
||||
<path
|
||||
d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
|
||||
></path>
|
||||
<path
|
||||
d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
|
||||
></path>
|
||||
<path
|
||||
d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
|
||||
></path>
|
||||
<path
|
||||
d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
|
||||
></path>
|
||||
<path
|
||||
d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text">
|
||||
<div class="top">monkey see</div>
|
||||
monkeytype
|
||||
</h1>
|
||||
</a>
|
||||
</header>
|
||||
<main style="height: 100%">
|
||||
<load src="html/pages/404.html" />
|
||||
</main>
|
||||
</div>
|
||||
<link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -67,13 +67,14 @@
|
|||
.preloader {
|
||||
text-align: center;
|
||||
display: grid;
|
||||
width: 300px;
|
||||
/* gap: 1rem; */
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
width: 350px;
|
||||
gap: 1rem;
|
||||
}
|
||||
.preloader .icon {
|
||||
font-size: 2rem;
|
||||
color: var(--main-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.preloader .subText {
|
||||
font-size: 1rem;
|
||||
|
|
@ -85,6 +86,8 @@
|
|||
display: grid;
|
||||
width: 300px;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
@ -94,7 +97,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="contentWrapper">
|
||||
<div id="app" class="content-grid">
|
||||
<header>
|
||||
<div id="logo">
|
||||
<div class="icon">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page pageAbout hidden" id="pageAbout">
|
||||
<div class="page pageAbout hidden full-width content-grid" id="pageAbout">
|
||||
<div class="scrollToTopButton invisible">
|
||||
<i class="fas fa-angle-double-up"></i>
|
||||
</div>
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
mapped onto a scale from 0 to 100.
|
||||
</p>
|
||||
</div>
|
||||
<div id="ad-about-1-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-about-1-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-about-1"></div>
|
||||
</div>
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
adding themes and more
|
||||
</p>
|
||||
</div>
|
||||
<div id="ad-about-2-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-about-2-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-about-2"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page pageAccount hidden" id="pageAccount">
|
||||
<div class="page pageAccount hidden full-width content-grid" id="pageAccount">
|
||||
<div class="scrollToTopButton">
|
||||
<i class="fas fa-angle-double-up"></i>
|
||||
</div>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="text"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content full-width content-grid">
|
||||
<div class="miniResultChartWrapper">
|
||||
<canvas id="miniResultChart"></canvas>
|
||||
</div>
|
||||
|
|
@ -300,11 +300,11 @@
|
|||
|
||||
<!-- <div class="group createdDate">Account created on -</div> -->
|
||||
|
||||
<div id="ad-account-1-wrapper" class="ad ad-h">
|
||||
<div id="ad-account-1-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-1"></div>
|
||||
</div>
|
||||
<div id="ad-account-1-small-wrapper" class="ad ad-h-s">
|
||||
<div id="ad-account-1-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-1-small"></div>
|
||||
</div>
|
||||
|
|
@ -608,7 +608,7 @@
|
|||
Export CSV
|
||||
</div>
|
||||
</div>
|
||||
<div id="ad-account-2-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-account-2-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-2"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page pageSettings hidden" id="pageSettings">
|
||||
<div class="page pageSettings hidden full-width content-grid" id="pageSettings">
|
||||
<div class="scrollToTopButton">
|
||||
<i class="fas fa-angle-double-up"></i>
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ad-settings-1-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-settings-1-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-1"></div>
|
||||
</div>
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
<div class="sectionSpacer"></div>
|
||||
</div>
|
||||
|
||||
<div id="ad-settings-2-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-settings-2-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-2"></div>
|
||||
</div>
|
||||
|
|
@ -989,7 +989,7 @@
|
|||
<div class="sectionSpacer"></div>
|
||||
</div>
|
||||
|
||||
<div id="ad-settings-3-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-settings-3-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-3"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page pageTest hidden">
|
||||
<div class="page pageTest hidden full-width content-grid">
|
||||
<div id="testConfig">
|
||||
<div class="row">
|
||||
<div class="puncAndNum">
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
Test settings
|
||||
</button>
|
||||
</div>
|
||||
<div id="typingTest">
|
||||
<div id="typingTest" class="content-grid full-width">
|
||||
<div id="capsWarning" class="hidden">
|
||||
<i class="fas fa-lock"></i>
|
||||
Caps Lock
|
||||
|
|
@ -110,10 +110,6 @@
|
|||
<div class="acc hidden">100%</div>
|
||||
<div class="burst hidden">1</div>
|
||||
</div>
|
||||
<div class="outOfFocusWarning hidden">
|
||||
<i class="fas fa-fw fa-mouse-pointer"></i>
|
||||
Click here or press any key to focus
|
||||
</div>
|
||||
<input
|
||||
id="wordsInput"
|
||||
class=""
|
||||
|
|
@ -128,10 +124,18 @@
|
|||
list="autocompleteOff"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<div id="wordsWrapper" translate="no">
|
||||
<div id="paceCaret" class="default hidden"></div>
|
||||
<div id="caret" class="default"></div>
|
||||
<div id="words"></div>
|
||||
<div
|
||||
id="wordsWrapper"
|
||||
class="content-grid full-width-padding"
|
||||
translate="no"
|
||||
>
|
||||
<div class="outOfFocusWarning hidden">
|
||||
<i class="fas fa-fw fa-mouse-pointer"></i>
|
||||
Click here or press any key to focus
|
||||
</div>
|
||||
<div id="paceCaret" class="full-width default hidden"></div>
|
||||
<div id="caret" class="full-width default"></div>
|
||||
<div id="words" class="full-width"></div>
|
||||
</div>
|
||||
|
||||
<div id="koInputVisualContainer" style="display: none">
|
||||
|
|
@ -438,7 +442,7 @@
|
|||
to save your result
|
||||
</div>
|
||||
<div style="grid-column: span 2">
|
||||
<div id="ad-result-wrapper" class="ad advertisement ad-h">
|
||||
<div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="iconAndText">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div class="text textRight"></div>
|
||||
|
|
|
|||
|
|
@ -23,42 +23,37 @@
|
|||
<load src="html/popups.html" />
|
||||
</div>
|
||||
<!-- <div id="div-gpt-ad-mkt-0" style="height: 100vh"></div> -->
|
||||
<div id="app" class="focus">
|
||||
<div>
|
||||
<div id="app" class="content-grid focus hidden">
|
||||
<load src="html/header.html" />
|
||||
<main class="full-width content-grid" style="height: 100%">
|
||||
<div id="ad-vertical-left-wrapper" class="ad advertisement ad-v focus">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-vertical-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contentWrapper" class="hidden">
|
||||
<load src="html/header.html" />
|
||||
<main style="height: 100%">
|
||||
<load src="html/pages/loading.html" />
|
||||
<load src="html/pages/about.html" />
|
||||
<load src="html/pages/settings.html" />
|
||||
<load src="html/pages/login.html" />
|
||||
<load src="html/pages/account.html" />
|
||||
<load src="html/pages/profile.html" />
|
||||
<load src="html/pages/test.html" />
|
||||
<load src="html/pages/404.html" />
|
||||
</main>
|
||||
|
||||
<load src="html/footer.html" />
|
||||
|
||||
<div id="ad-footer-wrapper" class="ad advertisement ad-h focus">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-footer"></div>
|
||||
</div>
|
||||
<div id="ad-footer-small-wrapper" class="ad advertisement ad-h-s focus">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-footer-small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="ad-vertical-right-wrapper" class="ad advertisement ad-v focus">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-vertical-right"></div>
|
||||
</div>
|
||||
<load src="html/pages/loading.html" />
|
||||
<load src="html/pages/about.html" />
|
||||
<load src="html/pages/settings.html" />
|
||||
<load src="html/pages/login.html" />
|
||||
<load src="html/pages/account.html" />
|
||||
<load src="html/pages/profile.html" />
|
||||
<load src="html/pages/test.html" />
|
||||
<load src="html/pages/404.html" />
|
||||
</main>
|
||||
<load src="html/footer.html" />
|
||||
<div
|
||||
id="ad-footer-wrapper"
|
||||
class="full-width ad advertisement ad-h focus"
|
||||
>
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-footer"></div>
|
||||
</div>
|
||||
<div id="ad-footer-small-wrapper" class="ad advertisement ad-h-s focus">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-footer-small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="contentWrapper">
|
||||
<div id="app" class="content-grid">
|
||||
<header>
|
||||
<div id="logo">
|
||||
<div class="icon">
|
||||
|
|
|
|||
|
|
@ -43,10 +43,6 @@
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#contentWrapper {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: unset !important;
|
||||
color: var(--main-color) !important;
|
||||
|
|
@ -58,11 +54,15 @@
|
|||
justify-content: center !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
main {
|
||||
height: max-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="contentWrapper">
|
||||
<div id="app" class="content-grid">
|
||||
<header>
|
||||
<div id="logo">
|
||||
<div class="icon">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
#ad-vertical-left-wrapper,
|
||||
#ad-vertical-right-wrapper {
|
||||
margin-top: 2rem;
|
||||
transition: margin-top 0.125s opacity 0.125s;
|
||||
}
|
||||
|
||||
#ad-footer-wrapper,
|
||||
#ad-footer-small-wrapper {
|
||||
justify-self: center;
|
||||
|
|
|
|||
|
|
@ -42,9 +42,83 @@
|
|||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
grid-template-rows: [top-start] auto [content-start] 1fr [content-end] auto [top-end];
|
||||
overflow: hidden;
|
||||
row-gap: 2rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// from an amazing guide by Kevin Powell https://www.youtube.com/watch?v=c13gpBrnGEw
|
||||
.content-grid {
|
||||
--padding-inline: 2rem;
|
||||
--content-max-width: 1536px;
|
||||
|
||||
// --breakout-max-width: 1200px;
|
||||
|
||||
// --breakout-size: calc(
|
||||
// (var(--breakout-max-width) - var(--content-max-width)) / 2
|
||||
// );
|
||||
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1536px auto;
|
||||
justify-items: center;
|
||||
grid-template-columns:
|
||||
[full-width-start] minmax(0, var(--padding-inline))
|
||||
[full-width-padding-start] minmax(0, 1fr)
|
||||
// [breakout-start] minmax(0, var(--breakout-size))
|
||||
[content-start] min(
|
||||
100% - (var(--padding-inline) * 2),
|
||||
var(--content-max-width)
|
||||
)
|
||||
[content-end]
|
||||
// minmax(0, var(--breakout-size)) [breakout-end]
|
||||
minmax(0, 1fr) [full-width-padding-end]
|
||||
minmax(0, var(--padding-inline)) [full-width-end];
|
||||
}
|
||||
|
||||
.content-grid > :not(.breakout, .full-width, .full-width-padding),
|
||||
.full-width > :not(.breakout, .full-width, .full-width-padding),
|
||||
.full-width-padding > :not(.breakout, .full-width, .full-width-padding) {
|
||||
grid-column: content;
|
||||
}
|
||||
|
||||
// #app > .breakout {
|
||||
// grid-column: breakout;
|
||||
// }
|
||||
|
||||
.content-grid > .full-width {
|
||||
grid-column: full-width;
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.content-grid > .full-width-padding {
|
||||
grid-column: full-width-padding;
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
#ad-vertical-left-wrapper,
|
||||
#ad-vertical-right-wrapper {
|
||||
grid-row: content;
|
||||
margin-right: 2rem;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#ad-vertical-left-wrapper {
|
||||
grid-column: full-width-start/content-start;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#ad-vertical-right-wrapper {
|
||||
grid-column: content-end/full-width-end;
|
||||
right: -2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid; //stupid fix for stupid safari
|
||||
}
|
||||
|
||||
#nocss {
|
||||
|
|
@ -116,41 +190,6 @@ body {
|
|||
z-index: 9999;
|
||||
}
|
||||
|
||||
#contentWrapper {
|
||||
max-width: 1536px;
|
||||
// min-width: 500px;
|
||||
// margin: 0 auto;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
min-height: 100vh;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
width: 100%;
|
||||
transition: padding-top 0.125s;
|
||||
&.wide125 {
|
||||
max-width: 1250px;
|
||||
}
|
||||
&.wide150 {
|
||||
max-width: 1500px;
|
||||
}
|
||||
&.wide200 {
|
||||
max-width: 2000px;
|
||||
}
|
||||
&.widemax {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid; //stupid fix for stupid safari
|
||||
}
|
||||
|
||||
key {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--sub-color);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
@media only screen and (max-width: 778px) {
|
||||
@media only screen and (max-width: calc(768px + 5rem)) {
|
||||
#mediaQueryDebug {
|
||||
background: #29b6f6;
|
||||
&::before {
|
||||
content: "blue";
|
||||
}
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto 640px auto;
|
||||
}
|
||||
#contentWrapper {
|
||||
max-width: 640px;
|
||||
.content-grid {
|
||||
--content-max-width: 640px;
|
||||
}
|
||||
#testConfig {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,17 @@
|
|||
@media only screen and (max-width: 1034px) {
|
||||
@media only screen and (max-width: calc(1024px + 5rem)) {
|
||||
#mediaQueryDebug {
|
||||
background: #9ccc65;
|
||||
&::before {
|
||||
content: "green";
|
||||
}
|
||||
}
|
||||
#contentWrapper {
|
||||
max-width: 768px;
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto 768px auto;
|
||||
.content-grid {
|
||||
--content-max-width: 768px;
|
||||
}
|
||||
#testConfig {
|
||||
font-size: 0.7rem;
|
||||
--horizontalPadding: 0.6em;
|
||||
}
|
||||
.ad.ad-h {
|
||||
display: none;
|
||||
}
|
||||
.ad.ad-h-s {
|
||||
display: grid;
|
||||
}
|
||||
header {
|
||||
#logo {
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
@media only screen and (max-width: 1546px) {
|
||||
@media only screen and (max-width: calc(1536px + 5rem)) {
|
||||
#mediaQueryDebug {
|
||||
background: #ffa726;
|
||||
&::before {
|
||||
content: "orange";
|
||||
}
|
||||
}
|
||||
#contentWrapper {
|
||||
max-width: 1280px;
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto 1280px auto;
|
||||
.content-grid {
|
||||
--content-max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
@media only screen and (max-width: 650px) {
|
||||
@media only screen and (max-width: calc(640px + 5rem)) {
|
||||
#mediaQueryDebug {
|
||||
background: #7e57c2;
|
||||
&::before {
|
||||
content: "purple";
|
||||
}
|
||||
}
|
||||
#contentWrapper {
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
.content-grid {
|
||||
--content-max-width: 100%;
|
||||
--padding-inline: 1rem;
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
.ad.ad-h {
|
||||
display: none;
|
||||
}
|
||||
.ad.ad-h-s {
|
||||
display: grid;
|
||||
}
|
||||
header {
|
||||
nav {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
@media only screen and (max-width: 1290px) {
|
||||
@media only screen and (max-width: calc(1280px + 5rem)) {
|
||||
#mediaQueryDebug {
|
||||
background: #ffee58;
|
||||
&::before {
|
||||
content: "yellow";
|
||||
}
|
||||
}
|
||||
#contentWrapper {
|
||||
max-width: 1024px;
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto 1024px auto;
|
||||
.content-grid {
|
||||
--content-max-width: 1024px;
|
||||
}
|
||||
.pageSettings {
|
||||
.section {
|
||||
|
|
|
|||
|
|
@ -21,11 +21,13 @@
|
|||
// #mediaQueryDebug {
|
||||
// display: block;
|
||||
// }
|
||||
// #contentWrapper,
|
||||
// header,
|
||||
// main,
|
||||
// footer {
|
||||
// border: 0.1rem solid var(--sub-color);
|
||||
|
||||
// .content-grid > * {
|
||||
// border: 0.1rem dashed var(--sub-color);
|
||||
// }
|
||||
|
||||
// .content-grid {
|
||||
// border: 0.1rem dashed var(--main-color);
|
||||
// }
|
||||
|
||||
//media queries based on tailwind breakpoints https://tailwindcss.com/docs/container
|
||||
|
|
@ -40,9 +42,6 @@
|
|||
.ad.ad-v {
|
||||
display: none;
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 355px) {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="contentWrapper">
|
||||
<div id="app" class="content-grid">
|
||||
<header>
|
||||
<div id="logo">
|
||||
<div class="icon">
|
||||
|
|
|
|||
|
|
@ -89,10 +89,10 @@ function removeResult(): void {
|
|||
}
|
||||
|
||||
function updateVerticalMargin(): void {
|
||||
const height = $("#bannerCenter").height() as number;
|
||||
const margin = height + Numbers.convertRemToPixels(2) + "px";
|
||||
$("#ad-vertical-left-wrapper").css("margin-top", margin);
|
||||
$("#ad-vertical-right-wrapper").css("margin-top", margin);
|
||||
// const height = $("#bannerCenter").height() as number;
|
||||
// const margin = height + Numbers.convertRemToPixels(2) + "px";
|
||||
// $("#ad-vertical-left-wrapper").css("margin-top", margin);
|
||||
// $("#ad-vertical-right-wrapper").css("margin-top", margin);
|
||||
}
|
||||
|
||||
function updateBreakpoint(noReinstate = false): void {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,7 @@ import * as NotificationEvent from "../observables/notification-event";
|
|||
|
||||
function updateMargin(): void {
|
||||
const height = $("#bannerCenter").height() as number;
|
||||
$("#contentWrapper").css(
|
||||
"padding-top",
|
||||
height + Numbers.convertRemToPixels(2) + "px"
|
||||
);
|
||||
$("#app").css("padding-top", height + Numbers.convertRemToPixels(2) + "px");
|
||||
$("#notificationCenter").css("margin-top", height + "px");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ $(document).ready(() => {
|
|||
);
|
||||
}, 500); //this approach will probably bite me in the ass at some point
|
||||
|
||||
$("#contentWrapper")
|
||||
$("#app")
|
||||
.css("opacity", "0")
|
||||
.removeClass("hidden")
|
||||
.stop(true, true)
|
||||
|
|
|
|||
|
|
@ -28,8 +28,13 @@
|
|||
animation: woah 7s infinite cubic-bezier(0.5, 0, 0.5, 1);
|
||||
}
|
||||
|
||||
#contentWrapper {
|
||||
transform: rotate(5deg);
|
||||
header {
|
||||
transform: rotate(2deg);
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
footer {
|
||||
transform: rotate(-2deg);
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue