new index page and about me page; no left or right buffer - use full space for content grid.
chimchooree
2 years ago
parent
bab9e80372
commit
67565e9445
@ -0,0 +1,244 @@
|
|||||||
|
* {
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#poltics {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-grid img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
height: 95vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 60% 1fr;
|
||||||
|
grid-template-rows: 5% 15% 60% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row {
|
||||||
|
grid-area: 1 / 1 / 2 / 4;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.nav-row {
|
||||||
|
grid-area: 2 / 1 / 3 / 4;
|
||||||
|
}
|
||||||
|
.content-row {
|
||||||
|
grid-area: 3 / 1 / 4 / 4;
|
||||||
|
}
|
||||||
|
.latest-row {
|
||||||
|
grid-area: 4 / 1 / 5 / 4;
|
||||||
|
}
|
||||||
|
.nav-grid {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0%,10%) repeat(5, 1fr) minmax(0%,10%);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
justify-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.nav-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
grid-area: 1 / 7 / 2 / 8;
|
||||||
|
}
|
||||||
|
.nav-home {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-blessfrey {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-lemonland { grid-area: 1 / 4 / 2 / 5;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-diary { grid-area: 1 / 5 / 2 / 6;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-about { grid-area: 1 / 6 / 2/ 7;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.navlink {
|
||||||
|
font-size: 110%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.navlink a:link {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:visited {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:hover {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
.navlink a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
grid-area: 3 / 2 / 4 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 75%;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.content-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.contentlogo {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-image: url(../img/prom/BlessFREY_logo.png);
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
background-image: url(../img/prom/runebless.png);
|
||||||
|
background-size: 80% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
/*display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.weaponmaster {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
background-color: red;
|
||||||
|
background-image: url(../img/prom/w_thumb.png);
|
||||||
|
}
|
||||||
|
.tamer {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
background-color: yellow;
|
||||||
|
background-image: url(../img/prom/t_thumb.png);
|
||||||
|
}
|
||||||
|
.disciple {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
background-color: orange;
|
||||||
|
background-image: url(../img/prom/d_thumb.png);
|
||||||
|
}
|
||||||
|
.streetfighter {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-color: green;
|
||||||
|
background-image: url(../img/prom/s_thumb.png);
|
||||||
|
}
|
||||||
|
.hacker {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
background-color: blue;
|
||||||
|
background-image: url(../img/prom/h_thumb.png);
|
||||||
|
}
|
||||||
|
.chemist {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
background-color: purple;
|
||||||
|
background-image: url(../img/prom/c_thumb.png);
|
||||||
|
} */
|
||||||
|
.latest {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.latest-grid {
|
||||||
|
width: 50%;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
grid-area: 4 / 2 / 5 / 3;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
padding-top: 4%;
|
||||||
|
padding-right: 1%;
|
||||||
|
padding-bottom: 1%;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.latest-grid a:link {
|
||||||
|
color: black;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:visited {
|
||||||
|
color: black;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:hover {
|
||||||
|
color: #F9B3D7;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid ul {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.latest-grid li {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
.latest-grid b {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.footer-content {
|
||||||
|
color: white;
|
||||||
|
padding-top: 5px;
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 100vh 0 100vh black;
|
||||||
|
}
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
* {
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#poltics {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-grid img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
height: 95vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 60% 1fr;
|
||||||
|
grid-template-rows: 5% 15% 60% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row {
|
||||||
|
grid-area: 1 / 1 / 2 / 4;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.nav-row {
|
||||||
|
grid-area: 2 / 1 / 3 / 4;
|
||||||
|
}
|
||||||
|
.content-row {
|
||||||
|
grid-area: 3 / 1 / 4 / 4;
|
||||||
|
}
|
||||||
|
.latest-row {
|
||||||
|
grid-area: 4 / 1 / 5 / 4;
|
||||||
|
}
|
||||||
|
.nav-grid {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0%,10%) repeat(5, 1fr) minmax(0%,10%);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
justify-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.nav-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
grid-area: 1 / 7 / 2 / 8;
|
||||||
|
}
|
||||||
|
.nav-home {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-blessfrey {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-lemonland { grid-area: 1 / 4 / 2 / 5;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-diary { grid-area: 1 / 5 / 2 / 6;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-about { grid-area: 1 / 6 / 2/ 7;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.navlink {
|
||||||
|
font-size: 110%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.navlink a:link {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:visited {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:hover {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
.navlink a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
grid-area: 3 / 2 / 4 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 75%;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.content-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.contentlogo {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-image: url(../img/prom/BlessFREY_logo.png);
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
background-image: url(../img/prom/runebless.png);
|
||||||
|
background-size: 80% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
/*display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.weaponmaster {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
background-color: red;
|
||||||
|
background-image: url(../img/prom/w_thumb.png);
|
||||||
|
}
|
||||||
|
.tamer {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
background-color: yellow;
|
||||||
|
background-image: url(../img/prom/t_thumb.png);
|
||||||
|
}
|
||||||
|
.disciple {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
background-color: orange;
|
||||||
|
background-image: url(../img/prom/d_thumb.png);
|
||||||
|
}
|
||||||
|
.streetfighter {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-color: green;
|
||||||
|
background-image: url(../img/prom/s_thumb.png);
|
||||||
|
}
|
||||||
|
.hacker {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
background-color: blue;
|
||||||
|
background-image: url(../img/prom/h_thumb.png);
|
||||||
|
}
|
||||||
|
.chemist {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
background-color: purple;
|
||||||
|
background-image: url(../img/prom/c_thumb.png);
|
||||||
|
} */
|
||||||
|
.latest {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.latest-grid {
|
||||||
|
width: 50%;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
grid-area: 4 / 2 / 5 / 3;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
padding-top: 4%;
|
||||||
|
padding-right: 1%;
|
||||||
|
padding-bottom: 1%;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.latest-grid a:link {
|
||||||
|
color: black;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:visited {
|
||||||
|
color: black;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:hover {
|
||||||
|
color: #F9B3D7;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid ul {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.latest-grid li {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
.latest-grid b {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.footer-content {
|
||||||
|
color: white;
|
||||||
|
padding-top: 5px;
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 100vh 0 100vh black;
|
||||||
|
}
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
* {
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#poltics {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-grid img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
height: 95vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 60% 1fr;
|
||||||
|
grid-template-rows: 5% 15% 60% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row {
|
||||||
|
grid-area: 1 / 1 / 2 / 4;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.nav-row {
|
||||||
|
grid-area: 2 / 1 / 3 / 4;
|
||||||
|
}
|
||||||
|
.content-row {
|
||||||
|
grid-area: 3 / 1 / 4 / 4;
|
||||||
|
}
|
||||||
|
.latest-row {
|
||||||
|
grid-area: 4 / 1 / 5 / 4;
|
||||||
|
}
|
||||||
|
.nav-grid {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0%,10%) repeat(5, 1fr) minmax(0%,10%);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
justify-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.nav-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
grid-area: 1 / 7 / 2 / 8;
|
||||||
|
}
|
||||||
|
.nav-home {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-blessfrey {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-lemonland { grid-area: 1 / 4 / 2 / 5;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-diary { grid-area: 1 / 5 / 2 / 6;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-about { grid-area: 1 / 6 / 2/ 7;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.navlink {
|
||||||
|
font-size: 110%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.navlink a:link {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:visited {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:hover {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
.navlink a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
grid-area: 3 / 2 / 4 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 75%;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.content-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.contentlogo {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-image: url(../img/prom/BlessFREY_logo.png);
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
background-image: url(../img/prom/runebless.png);
|
||||||
|
background-size: 80% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
/*display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.weaponmaster {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
background-color: red;
|
||||||
|
background-image: url(../img/prom/w_thumb.png);
|
||||||
|
}
|
||||||
|
.tamer {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
background-color: yellow;
|
||||||
|
background-image: url(../img/prom/t_thumb.png);
|
||||||
|
}
|
||||||
|
.disciple {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
background-color: orange;
|
||||||
|
background-image: url(../img/prom/d_thumb.png);
|
||||||
|
}
|
||||||
|
.streetfighter {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-color: green;
|
||||||
|
background-image: url(../img/prom/s_thumb.png);
|
||||||
|
}
|
||||||
|
.hacker {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
background-color: blue;
|
||||||
|
background-image: url(../img/prom/h_thumb.png);
|
||||||
|
}
|
||||||
|
.chemist {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
background-color: purple;
|
||||||
|
background-image: url(../img/prom/c_thumb.png);
|
||||||
|
} */
|
||||||
|
.latest {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.latest-grid {
|
||||||
|
width: 50%;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
grid-area: 4 / 2 / 5 / 3;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
padding-top: 4%;
|
||||||
|
padding-right: 1%;
|
||||||
|
padding-bottom: 1%;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.latest-grid a:link {
|
||||||
|
color: black;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:visited {
|
||||||
|
color: black;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:hover {
|
||||||
|
color: #F9B3D7;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.latest-grid ul {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.latest-grid li {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
.latest-grid b {
|
||||||
|
background-color: #bd97a4;
|
||||||
|
}
|
||||||
|
.footer-content {
|
||||||
|
color: white;
|
||||||
|
padding-top: 5px;
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 100vh 0 100vh black;
|
||||||
|
}
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
* {
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.centered {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#poltics {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-grid img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
height: 95vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 60% 1fr;
|
||||||
|
grid-template-rows: 5% 15% 60% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row {
|
||||||
|
grid-area: 1 / 1 / 2 / 4;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.nav-row {
|
||||||
|
grid-area: 2 / 1 / 3 / 4;
|
||||||
|
}
|
||||||
|
.content-row {
|
||||||
|
grid-area: 3 / 1 / 4 / 4;
|
||||||
|
}
|
||||||
|
.latest-row {
|
||||||
|
grid-area: 4 / 1 / 5 / 4;
|
||||||
|
}
|
||||||
|
.nav-grid {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0%,10%) repeat(5, 1fr) minmax(0%,10%);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
justify-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.nav-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
grid-area: 1 / 7 / 2 / 8;
|
||||||
|
}
|
||||||
|
.nav-home {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-blessfrey {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-lemonland { grid-area: 1 / 4 / 2 / 5;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-diary { grid-area: 1 / 5 / 2 / 6;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-about { grid-area: 1 / 6 / 2/ 7;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 80% 20%;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.navlink {
|
||||||
|
font-size: 110%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.navlink a:link {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:visited {
|
||||||
|
color: #E6E8EF;
|
||||||
|
}
|
||||||
|
.navlink a:hover {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
.navlink a:active {
|
||||||
|
color: #f463ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
grid-area: 3 / 2 / 4 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.content-left {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
background-image: url(../img/prom/guildwarsgirl.png);
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right;
|
||||||
|
max-height: 625px;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: 1fr 2fr repeat(2, 1fr);
|
||||||
|
grid-column-gap: 0px;
|
||||||
|
grid-row-gap: 0px;
|
||||||
|
}
|
||||||
|
.intro { grid-area: 1 / 1 / 2 / 3;
|
||||||
|
background-color: red; }
|
||||||
|
.rpg { grid-area: 2 / 1 / 3 / 2;
|
||||||
|
background-color: yellow; }
|
||||||
|
.petsite { grid-area: 2 / 2 / 3 / 3;
|
||||||
|
background-color: green; }
|
||||||
|
.projects { grid-area: 3 / 1 / 4 / 3;
|
||||||
|
background-color: blue; }
|
||||||
|
.ocs { grid-area: 4 / 1 / 5 / 3;
|
||||||
|
background-color: purple; }
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
color: white;
|
||||||
|
padding-top: 5px;
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 100vh 0 100vh black;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 323 B After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -1,5 +1,5 @@
|
|||||||
<div class="top-row"> </div>
|
<div class="top-row"> </div>
|
||||||
|
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<center><b>blessfrey</b></center><br>
|
<center><b></b></center><br>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -0,0 +1,50 @@
|
|||||||
|
% rebase('frame.tpl')
|
||||||
|
<div class="content-grid">
|
||||||
|
<div class="content-left">
|
||||||
|
</div>
|
||||||
|
<div class="content-right">
|
||||||
|
|
||||||
|
<div class="intro">
|
||||||
|
<h1>my page</h1>
|
||||||
|
<i>weeping may tarry for the night,
|
||||||
|
but joy comes with the morning.</i><br>
|
||||||
|
<br>
|
||||||
|
<b>hello</b>, you can call me chimchooree. <br>
|
||||||
|
<br>
|
||||||
|
I'm a developer from the USA and like to show off my projects here. I dabble in Python, Java, Angular, Godot Engine, and HTML5+CSS, but I sew clothes, make pixelart, and write, too. <br>
|
||||||
|
<br>
|
||||||
|
I don't have contact info atm...unless you have a <a href="https://flightrising.com/main.php?p=lair&tab=userpage&id=525948">FlightRising (Aristene#525948)</a> or <a href="https://www.wolvden.com/profile/64287">Wolvden (Urban#64287)</a> account. lol I read every message send through there. Also, if you have <a href="https://artfight.net/~abbey">ArtFight (abbey)</a>, attack me!! <br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rpg">
|
||||||
|
<h2>blessfrey is...</h2>
|
||||||
|
a Godot Engine action rpg inspired by Guild Wars 1's class and skill systems, which were in turn inspired by Magic: The Gathering. You will amass a large library of skills through exploration and practice, but you may only take 8 with you during combat mission. You will also befriend AI companions and manage their skillbars. Find synergies and team strategies to overcome each challenge. Enemies will be using personalized skillbars of their own, so the same skillbar won't work everywhere! No decision is permanent, so experiment to your heart's content. <br>
|
||||||
|
<br>
|
||||||
|
Okay, I lied. Blessfrey also has a dual job system. The job you pick at character creation is permanent, but you can take a second as a side gig. Change your side gig frequently to find the best combinations! <br>
|
||||||
|
<br>
|
||||||
|
Blessfrey is a dungeoncrawler, so you will find some shops and quests in the hub town, but the local dungeon is deep and full of mysteries to uncover. <br>
|
||||||
|
<br>
|
||||||
|
I'll put an HTML5 demo up here soon-ish. Keep checking! Learn more on the <a href="/demo">Blessfrey page</a>. <br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="petsite">
|
||||||
|
<h2>lemonland is...</h2>
|
||||||
|
an Angular action petsite inspired by the more laid-back mid-2000s Neopets-derivative games. Lemonland has rich biodiversity and is home to species found nowhere else on earth. Learn about them and try to tame them, SMT demon negotiation-style. <br>
|
||||||
|
When you join Lemonland, you'll take some immigration quizzes and utilize government housing assistance for decorating, showing off your pets, and storing your collections. Around the island, there's some islanders to chat up, shops to barter with, games to play, and scenarios to encounter, so click around! <br>
|
||||||
|
<br>
|
||||||
|
Lemonland is a utopian Pacific archipelago where everything is provided for free by the wealthy plutocratic Duke Poppyseed and his wife Lemongrass. What isn't advertised overseas is the curse that afflicts every migrant differently. It can affect small things like your ability to haggle or worse things like make you more prone to monster encounters in the wilds. It also grants strange transmutational powers, allowing you to distill items into essence and craft new items like in Doodle God or My Little Inferno. Recipes seem to turn out differently depending on what kind of person you are, though, so trade around to see what all is out there! <br>
|
||||||
|
<br>
|
||||||
|
I'm making this game to learn more about Javascript, but I'm still in the very very very early stages. Read about my progress in my <a href="/diary">diary</a>! <br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="projects">
|
||||||
|
<h2>other projects</h2>
|
||||||
|
The most obvious is <b>blessfrey.me</b>, this website. My portfolio is coded in <a href="https://bottlepy.org/docs/dev/">Bottle: Python</a>, <a href="https://bottlepy.org/docs/dev/stpl.html">SimpleTemplate</a>, and HTML+CSS because my needs are simple - embed images, videos, and games; display styled text; and execute some simple dynamic scripts. In addition to bulk, frameworks can't avoid having security flaws. Also, the more Python I can write, the better - it's just fun to write. <br>
|
||||||
|
<br>
|
||||||
|
Cat Store - Java, text-based cat breeding and cat show game<br>
|
||||||
|
<a href="https://gitlab.com/chimchooree">Gitlab (chimchooree)</a> - Code snippets, coding class assignments, and other random stuff on here. If it looks inactive, most of my projects are private...I'm shy! <br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ocs"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue