fixed nav grid resizing differenly at low res (links with longer link text shrunk more slowly); added gallery to character pages
chimchooree
2 years ago
parent
219d251539
commit
35b8d6e233
@ -0,0 +1,7 @@
|
||||
Aristen | means <i>the best</i> | mystic | martial artist, soldier of fortune | 24 years old | 5'6<br>
|
||||
<br>
|
||||
My Black Desert Online main! The community and gear system kinda ruin what is one of the best tycoon and life skilling MMOs, so I didn't play it for very long. I still adore Aristen, though. Very possibly the most goeous <br>
|
||||
<br>
|
||||
She's an honest and direct person who won't betray her core values of loyalty, submission towards authority, and denial of the flesh. Her Spartan lifestyle borders on asceticism. She lives off the land. Though her body is shaped by extreme discipline, she isn't necessarily the wisest person. She's always falling into the "work harder, not smarter" fallacy, leading to some pretty comical blunt-force solutions for her jobs. <br>
|
||||
<br>
|
||||
Her quiet femininity contrasts with her titanic arms and powerful thighs. (I maxxed out the arm muscularity and arm thickness sliders.) Perplexingly, she's retained an hourglass figure, which she attributes to a life of wearing belts. She always presents herself with excellence, wearing a meticulously perfected coral monochromatic face of makeup to set off her pale eyes, deep auburn hair, and glassy skin. Through experience, it wears gracefully even through sweat and heat. Her wardrobe is purely functional, consisting entirely of training and ceremonial uniforms, especially those that pair well with belts and scarves. Her favorite colors to wear are orange and jade. <br>
|
||||
@ -0,0 +1,151 @@
|
||||
* {
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-family: verdana, trebuchet ms, arial, calibri, gill sans, helvetica neue, candara, geneva, sans-serif;
|
||||
background-color: black;
|
||||
}
|
||||
html, body {padding:0; margin:0; height:100%;}
|
||||
footer{
|
||||
position: absolute; bottom: 0; right: 0;
|
||||
color: #df85a5;
|
||||
background-color: transparent;
|
||||
padding-top: 2em;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a, a:link, a:visited, a:hover, a:active, b {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
a:link, a:visited {
|
||||
color: #305285;
|
||||
}
|
||||
a:hover, a:active {
|
||||
color: #9092ca;
|
||||
}
|
||||
p {
|
||||
text-indent: 2em;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 60%;
|
||||
padding: 2em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: 1fr 60% 1fr;
|
||||
grid-template-rows: 2em 9.515625em auto 12.6875em;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.nav-grid {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0%,10%) repeat(5, minmax(7ch,96px)) minmax(0%,10%);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
.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;
|
||||
color: #E6E8EF;
|
||||
}
|
||||
.navlink a:link {
|
||||
color: #E6E8EF;
|
||||
}
|
||||
.navlink a:visited {
|
||||
color: #E6E8EF;
|
||||
}
|
||||
.navlink a:hover {
|
||||
color: #f463ad;
|
||||
}
|
||||
.navlink a:active {
|
||||
color: #f463ad;
|
||||
}
|
||||
.nav-grid img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.content-grid {
|
||||
min-height: 60vh;
|
||||
min-width: 50vw;
|
||||
}
|
||||
@ -1,65 +1,45 @@
|
||||
.content-grid {
|
||||
grid-area: 3 / 1 / 4 / 4;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
grid-template-rows: 1fr 5em;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 1fr 9.5em;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
.content-left {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
background-image: url(../img/prom/BlessFREY_logo.png);
|
||||
background-size: 70%;
|
||||
background-size: 20em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
background-position: center;
|
||||
}
|
||||
.content-right {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
grid-area: 1 / 2 / 3 / 3;
|
||||
background-image: url(../img/prom/runebless.png);
|
||||
background-size: contain;/*80% auto;*/
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.latest, .latest-grid {
|
||||
background-color: #C0AAC0;
|
||||
border: 2px solid #df85a5;
|
||||
background-position: left;
|
||||
}
|
||||
.latest-grid a, ul, li, b {
|
||||
background-color: #C0AAC0;
|
||||
border: 2px solid #df85a5;
|
||||
}
|
||||
|
||||
.latest {
|
||||
border: 2px solid #df85a5;
|
||||
color: black;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.latest-grid {
|
||||
border: 2px solid #df85a5;
|
||||
width: 50%;
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
}
|
||||
.latest-grid a:link {
|
||||
color: #305285;
|
||||
background-color: #C0AAC0;
|
||||
}
|
||||
.latest-grid a:visited {
|
||||
color: #305285;
|
||||
.latest-title {
|
||||
position: absolute;
|
||||
width: 20em;
|
||||
background-color: #C0AAC0;
|
||||
text-align: center;
|
||||
}
|
||||
.latest-grid a:hover {
|
||||
color: #9092ca;
|
||||
.latest-centered {
|
||||
text-align: center;
|
||||
background-color: #C0AAC0;
|
||||
}
|
||||
.latest-grid a:active {
|
||||
color: #9092ca;
|
||||
.latest-grid {
|
||||
word-break: break-word;
|
||||
width: 20em;
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
overflow-y: scroll;
|
||||
color: black;
|
||||
background-color: #C0AAC0;
|
||||
}
|
||||
.latest-grid ul {
|
||||
border: 2px solid #df85a5;
|
||||
list-style-type: none;
|
||||
}
|
||||
.latest-grid li {
|
||||
border: 2px solid #df85a5;
|
||||
padding-left: 5%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 805 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 836 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
@ -1,5 +1,16 @@
|
||||
% rebase('frame.tpl')
|
||||
% import random
|
||||
<div class="content-grid"><div class="center">
|
||||
<div class="content-grid">
|
||||
<div class="gallery">
|
||||
% for g in gallery[1]:
|
||||
% i = g[0].index('.')
|
||||
% thumb = g[0][:i] + 'thumb' + g[0][i:]
|
||||
<a target="_blank" href="/static/img/char/{{gallery[0]}}/{{g[0]}}">
|
||||
<img src="/static/img/char/{{gallery[0]}}/{{thumb}}" alt="Image: {{g[1]}}">
|
||||
</a>
|
||||
% end
|
||||
</div>
|
||||
<div class="center">
|
||||
{{!profile}}
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<title>{{title or 'blessfrey.me'}}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/all.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css"/>
|
||||
|
||||
Loading…
Reference in New Issue