mirrors/thebadspace
1
0
Fork 0
mirror of https://koodu.h-i.works/projects/thebadspace synced 2025-06-25 16:04:37 -05:00
Code Packages Releases Activity

Added mobile first menu and started responsive

Browse Source 
Swithced the main nav to a mobile layout to cut down on complex
responsive styling to make the heaader work.

Also began touching up site wide responsive styles so the site works on
multiple devices.
This commit is contained in:
Ro
2023-08-28 14:51:42 -07:00
parent 32c8434443
commit 8b3735a310
9 changed files with 188 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/assets/css/front/index.css
View File

@ -19,7 +19,7 @@ form.index-search-form {
}
form.index-search-form > input[type="text"] {
width: 91%;
width: 88%;
height: 50px;
font: 44px var(--base-type);
}
@ -29,6 +29,7 @@ form.index-search-form > button {
width: 60px;
position: relative;
top: 9px;
right: 0;
}
::placeholder {
@ -39,3 +40,11 @@ form.index-search-form > button {
section.index-meta article {
margin-top: 20px;
}
@media only screen and (max-width: 800px) {
form.index-search-form > input[type="text"] {
width: 85%;
height: 50px;
font: 34px var(--base-type);
}
}

92
public/assets/css/global/frame.css
View File

@ -19,10 +19,10 @@ html body {
a {
color: var(--highlight);
text-decoration: none;
transition: all 0.2s linear;
/*
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
*/
}
@ -34,7 +34,7 @@ header {
header > div:nth-child(1) {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-template-columns: 200px 1fr 40px;
padding: 10px;
gap: 10px;
height: 200px;
@ -66,9 +66,12 @@ header > div i {
}
header > div nav {
position: absolute;
bottom: 20px;
right: 0;
background: var(--black);
position: relative;
}
.header-right {
text-align: right;
}
div.system-notice-error {
@ -90,15 +93,47 @@ main > section > article {
min-height: 400px;
}
/* GLOBALS */
/* NAV */
a.nav-links {
padding: 7px;
border-bottom: none;
#main-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--black);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
label[for="element-toggle"] {
cursor: pointer;
}
#element-toggle {
display: none;
}
#element-toggle:not(:checked) ~ #main-nav {
display: none;
}
a.nav-links {
border-bottom: none;
font-size: 40px;
color: var(--highlight);
text-decoration: none;
}
/* GLOBALS */
a:hover {
/*
border-bottom: 1px solid var(--secondary);
*/
color: var(--white);
}
pre {
@ -126,6 +161,14 @@ sup {
padding-top: 3px;
}
.menu-icon {
width: 40px;
}
.location-title {
display: none;
}
.location-image {
height: 200px;
width: 200px;
@ -133,8 +176,6 @@ sup {
border-radius: 3px;
}
/* GLOBALS */
footer {
width: 100%;
color: var(--primary);
@ -153,3 +194,30 @@ footer > div:nth-child(1) {
max-width: 1000px;
position: relative;
}
/*
responsive
*/
@media only screen and (max-width: 960px) {
header > div:nth-child(1) {
}
header > div nav {
bottom: 17px;
}
}
@media only screen and (max-width: 960px) {
header > div:nth-child(1) {
grid-template-columns: 150px 65% 1fr;
height: 150px;
}
header > div nav {
bottom: 17px;
}
}
@media only screen and (max-width: 800px) {
}

9
public/assets/css/global/typography.css
View File

@ -41,7 +41,7 @@
}
h1 {
font-size: 3em;
font-size: 2.5em;
font-weight: 600;
font-kerning: normal;
letter-spacing: -5px;
@ -50,11 +50,12 @@ h1 {
margin: 0;
position: absolute;
bottom: 20px;
width: 66%;
width: 70%;
overflow-wrap: break-word;
}
h2 {
font-size: 2em;
font-size: 1.5em;
font-weight: 500;
line-height: 0.8em;
color: var(--white);
@ -62,6 +63,6 @@ h2 {
}
h3 {
font-size: 2em;
font-size: 1.5em;
font-weight: 300;
}