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

Started CSS and Layout upgrades

Browse Source 
Functionality is coming along at a good pace, so it was time to start
adjusting the templates and styles to the new layout.

Responsive will come after all of the pages have been updated.
This commit is contained in:
Ro
2023-08-17 15:14:01 -07:00
parent 43b2148b1b
commit 9f04b07c4b
12 changed files with 156 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,58 +1,43 @@
section[role="start"] {
background-image: url("../../images/global/special-trash.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
justify-content: center;
}
section[role="start"] div[role="index-wrapper"] {
margin: 0 auto;
section.index-search {
width: 100%;
background: var(--white);
}
section[role="start"] div[role="index-search"] {
width: 100%;
border-bottom: 1px solid var(--secondary);
}
section[role="start"] div[role="index-results"] {
width: 100%;
padding: 10px;
background: rgb(var(--primary-rgb) / 60%);
border-bottom: 1px solid var(--white);
}
section[role="start"] div input[type="text"] {
background: none;
font-weight: bold;
font-size: 3.5em;
width: 91%;
color: var(--white);
text-shadow: 1px 1px 1px var(--primary);
outline: none;
}
section[role="start"] div button {
vertical-align: text-bottom;
width: 57px;
height: 57px;
}
section[role="start"] div button i {
font-size: 1.5em;
}
section[role="start"] h1 {
color: var(--white);
}
section[role="start"] a.search-link {
section.start a.search-link {
color: var(--highlight);
font-size: 2.5em;
font-weight: bold;
border: 0;
display: block;
}
form.index-search-form {
width: 80%;
max-width: 1000px;
margin: 0 auto;
padding: 30px 0;
}
input[type="text"]:focus {
outline: solid var(--highlight);
background-color: var(--highlight);
}
form.index-search-form > input[type="text"] {
width: 91%;
height: 50px;
font: 44px var(--base-type);
transition: all 0.2s linear;
}
form.index-search-form > button {
height: 60px;
width: 60px;
position: relative;
top: 9px;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--highlight);
}

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

@ -16,31 +16,62 @@ html body {
overflow-x: hidden;
}
a {
color: var(--highlight);
text-decoration: none;
/*
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
*/
}
header {
width: 100%;
color: var(--primary);
background: var(--secondary);
}
header > nav {
header > div:nth-child(1) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 200px 50% 1fr;
padding: 10px;
gap: 10px;
height: 200px;
width: 80%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
header > nav a {
header > div span {
font-size: 3em;
font-weight: bold;
position: absolute;
bottom: 25px;
width: 50%;
line-height: 0.8em;
}
header > div img {
width: 100%;
}
header > div a {
color: var(--primary);
}
header > nav i {
header > div i {
font-size: 1.3em;
}
header > nav > div[role="nav-right"] {
text-align: right;
header > div nav {
position: absolute;
bottom: 20px;
right: 0;
}
div[role="system-notice"] {
div.system-notice {
background: var(--highlight);
color: var(--primary);
padding: 10px;
@ -50,16 +81,15 @@ main {
height: 100%;
}
/* GLOBALS */
a {
color: var(--highlight);
text-decoration: none;
border-bottom: 1px solid var(--white);
transition: all 0.2s linear;
main > section > article {
width: 80%;
max-width: 1000px;
margin: 0 auto;
}
a[role="nav-links"] {
/* GLOBALS */
a.nav-links {
padding: 7px;
border-bottom: none;
}
@ -87,3 +117,8 @@ sup {
vertical-align: baseline;
font-family: var(--mono-type);
}
.button-icon {
height: 90%;
padding-top: 3px;
}