adjust responsiveness
This commit is contained in:
parent
a890981e25
commit
560eaad372
3 changed files with 41 additions and 18 deletions
|
@ -3,7 +3,7 @@
|
|||
--text-color: gainsboro;
|
||||
--link-color: chartreuse;
|
||||
--link-visited-color: lightskyblue;
|
||||
--box-color: #424242ee;
|
||||
--box-color: #161525e5;
|
||||
--border-radius: 10px;
|
||||
}
|
||||
|
||||
|
@ -16,10 +16,11 @@ body {
|
|||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: [leftcol] 1fr [maincol] auto [rightcol] 1fr;
|
||||
grid-template-rows: [headerrow] 1fr [mainrow] auto [plugrow] 0.6fr [extrasrow] 0.6fr;
|
||||
grid-template-rows: [headerrow] 1fr [mainrow] auto [rule] 125px [plugrow] 0.6fr [extrasrow] 0.6fr;
|
||||
grid-template-areas:
|
||||
"inlinks logo outlinks"
|
||||
"main main main"
|
||||
"rule rule rule"
|
||||
"plugs plugs plugs"
|
||||
"extras extras extras";
|
||||
justify-content: stretch;
|
||||
|
@ -88,15 +89,16 @@ header a:visited {
|
|||
article {
|
||||
text-align: left;
|
||||
padding: 0 20px 5px;
|
||||
margin: 0 auto 0;
|
||||
margin: 5em auto 0;
|
||||
overflow: auto;
|
||||
grid-area: main;
|
||||
max-width: 80em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
article hr {
|
||||
article + hr {
|
||||
margin-top: 100px;
|
||||
grid-area: rule;
|
||||
}
|
||||
|
||||
article a:hover, .extras a:hover{
|
||||
|
@ -119,7 +121,7 @@ article li {
|
|||
text-indent: -2ex;
|
||||
}
|
||||
|
||||
article p, article ul, .tags, .info {
|
||||
article > *, .tags, .info {
|
||||
background-color: var(--box-color);
|
||||
}
|
||||
|
||||
|
@ -127,12 +129,12 @@ article p, article ul, .tags, .info {
|
|||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
article p:first-of-type, article ul:first-of-type {
|
||||
article > *:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
article p:last-of-type, article ul:last-of-type {
|
||||
article > *:last-child {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
@ -270,7 +272,6 @@ article p:last-of-type, article ul:last-of-type {
|
|||
|
||||
.plug-container, .extras-container {
|
||||
display: inline-block;
|
||||
height: 85px;
|
||||
padding: 20px;
|
||||
width: 25%;
|
||||
background-color: var(--box-color);
|
||||
|
@ -310,16 +311,16 @@ code {
|
|||
|
||||
h1 {
|
||||
font-size: 42pt;
|
||||
font-family: 'Tippa';
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20pt;
|
||||
font-family: 'Tippa';
|
||||
}
|
||||
|
||||
h3, h4, h5 {
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Tippa';
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
@ -412,6 +413,11 @@ p {
|
|||
|
||||
.logo {
|
||||
width: 100%;
|
||||
background: rgb(32,48,55);
|
||||
}
|
||||
|
||||
.inlinks {
|
||||
background: rgb(32,48,55);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
|
@ -424,7 +430,6 @@ p {
|
|||
}
|
||||
|
||||
.inlinks, .outlinks{
|
||||
border-radius: var(--border-radius);
|
||||
columns: auto;
|
||||
}
|
||||
|
||||
|
@ -438,6 +443,20 @@ p {
|
|||
|
||||
.plugs, .extras {
|
||||
padding: 2em 0 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plugs > li, .extras > li {
|
||||
padding: 2em;
|
||||
box-shadow: inset 0 0 50vw #203037ff;
|
||||
box-sizing: border-box;
|
||||
display: list-item;
|
||||
margin: 10px 0 10px;
|
||||
}
|
||||
|
||||
.plug-container, .extras-container {
|
||||
display: list-item;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
nav ul{
|
||||
|
@ -451,11 +470,15 @@ p {
|
|||
|
||||
article {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
article img {
|
||||
float: right;
|
||||
padding-left: 100%;
|
||||
width: 230px;
|
||||
}
|
||||
|
|
|
@ -28,8 +28,8 @@
|
|||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.59985128"
|
||||
inkscape:cx="836.04057"
|
||||
inkscape:cy="630.1562"
|
||||
inkscape:cx="751.85303"
|
||||
inkscape:cy="631.82327"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1027"
|
||||
inkscape:window-x="0"
|
||||
|
@ -57,7 +57,7 @@
|
|||
d="M 56.638672,-68.548828 -46.216797,-9.1660156 a 1.6061156,1.6061156 0 0 0 -0.802734,1.390625 V 110.99023 a 1.6061156,1.6061156 0 0 0 0.802734,1.39063 l 102.855469,59.38281 a 1.6061156,1.6061156 0 0 0 1.605469,0 L 161.09766,112.38086 a 1.6061156,1.6061156 0 0 0 0.80273,-1.39063 V -7.7753906 a 1.6061156,1.6061156 0 0 0 -0.80273,-1.390625 L 58.244141,-68.548828 a 1.6061156,1.6061156 0 0 0 -1.605469,0 z m 0.802734,3.244141 101.248044,58.4550776 V 110.0625 L 57.441406,168.51758 -43.806641,110.0625 V -6.8496094 Z"
|
||||
id="path2410" /></g><path
|
||||
sodipodi:type="star"
|
||||
style="display:inline;fill:#545454;fill-opacity:1;stroke:#545454;stroke-width:3.21191;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
style="display:inline;fill:#243842;fill-opacity:1;stroke:#545454;stroke-width:3.21191;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path1073"
|
||||
inkscape:flatsided="true"
|
||||
sodipodi:sides="6"
|
||||
|
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
@ -54,8 +54,8 @@
|
|||
<h1 itemprop="headline">$title$</h1>
|
||||
$endif$
|
||||
$body$
|
||||
<hr>
|
||||
</article>
|
||||
<hr>
|
||||
<ul class="plugs">
|
||||
<li class="plug-container">
|
||||
Tip Jar:
|
||||
|
|
Loading…
Reference in a new issue