Compare commits

...

3 Commits

Author SHA1 Message Date
ayham c15b26d939
update 2021-12-30 06:18:07 +03:00
ayham d784723e24
revert 2021-12-30 06:13:34 +03:00
ayham 2af74e1c73
sperate header stylings 2021-12-30 06:11:38 +03:00
4 changed files with 269 additions and 8 deletions

130
data/styles/header.css Normal file
View File

@ -0,0 +1,130 @@
#partial_header {
float:right;
display:block;
}
nav {
text-align: center ;
font-variant: small-caps ;
clear: both ;
background: var(--altbg) ;
border-radius: 5px ;
border: dashed 1px var(--bordercolor) ;
max-width: var(--genwidth);
}
nav {
margin-left: 5px;
}
nav,header {
max-width: var(--genwidth) ;
}
nav li {
transition:all 1s ease-in-out;
display: block ;
list-style: none ;
background: var(--bg) ;
border-radius: 10px ;
padding: .5em ;
}
nav {
width: 4em;
}
.hidden {
display: none;
}
nav ul li:hover .hidden {
display: inline-block;
}
nav ul li:hover {
margin-right: -5em;
}
nav ul {
align-items: flex-start;
display: flex-container;
}
nav ul, #taglist {
padding: 0;
margin: .5em;
}
a {
color: #36f433;
text-decoration: none;
}
a:hover {
font-style: italic;
}
#partial_header a:hover {
font-style: normal;
}
#partial_header a li:hover {
font-style: italic;
}
dt img {
max-height: 1em;
max-width: 1em;
vertical-align: middle;
}
nav li img {
max-height: 1em;
max-width: 1em;
vertical-align: middle;
}
nav a:hover li, #tagcloud a:hover li {
background: steelblue ;
color: black ;
box-shadow: 2px 2px cyan ;
}
/* This should be genwidth + (navwidth*2) + padding */
@media (min-width: 1200px) {
nav {
float: left ;
vertical-align: middle ;
position: fixed ;
text-align: left ;
font-size: large ;
}
nav li {
display: block ;
text-align: center ;
margin: .5em auto ;
}
}
@media (min-width: 40em) {
.resright, .disappear {
display: block ;
float: right;
padding: 20px ;
clear: both ;
max-height: 300px ;
max-width: 300px ;
}
.resmid {
max-height: 300px ;
max-width: 300px ;
}
main {
max-width: var(--genwidth) ;
}
tr, td {
display: table-cell;
}
td {
float: none;
}
ul.images {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
width: 25em;
overflow-x: auto;
list-style-type: none;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
}

View File

@ -28,7 +28,14 @@
<main>
<div id=partial_header></div>
<div class=content>
<img class=resright alt="pfp" title="pfp" src="pix/pfp/pfp.webp">
<!--<img class=resright alt="pfp" title="pfp" src="pix/pfp/pfp.webp">-->
<center class=resright>
<h3>🐑Follow me on RSS</h3>
<pre style=max-width:300px;maring:auto><code>https://blog.ayham.xyz/atom.xml
https://blog.ayham.xyz/rss.xml</code></pre>
</center>
<h2>Hello! Welcome!</h2>
<p>Click around, you could find something interesting.</p>
@ -54,12 +61,6 @@
<dd>My gpg keys and contact info</dd>
</dl>
<br/>
<center>
<h3>🐑Follow me on RSS</h3>
<pre style=max-width:300px;maring:auto><code>https://blog.ayham.xyz/atom.xml
https://blog.ayham.xyz/rss.xml</code></pre>
</center>
<center id="webpins" width="70%">
Unique Users:
<a href="https://www.digits.net" target="_blank"

View File

@ -2,7 +2,7 @@
<html>
<head>
<title>~ayham | Store</title>
<link rel="preload" href="font.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="courier.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>

130
styles/header.css Normal file
View File

@ -0,0 +1,130 @@
#partial_header {
float:right;
display:block;
}
nav {
text-align: center ;
font-variant: small-caps ;
clear: both ;
background: var(--altbg) ;
border-radius: 5px ;
border: dashed 1px var(--bordercolor) ;
max-width: var(--genwidth);
}
nav {
margin-left: 5px;
}
nav,header {
max-width: var(--genwidth) ;
}
nav li {
transition:all 1s ease-in-out;
display: block ;
list-style: none ;
background: var(--bg) ;
border-radius: 10px ;
padding: .5em ;
}
nav {
width: 4em;
}
.hidden {
display: none;
}
nav ul li:hover .hidden {
display: inline-block;
}
nav ul li:hover {
margin-right: -5em;
}
nav ul {
align-items: flex-start;
display: flex-container;
}
nav ul, #taglist {
padding: 0;
margin: .5em;
}
a {
color: #36f433;
text-decoration: none;
}
a:hover {
font-style: italic;
}
#partial_header a:hover {
font-style: normal;
}
#partial_header a li:hover {
font-style: italic;
}
dt img {
max-height: 1em;
max-width: 1em;
vertical-align: middle;
}
nav li img {
max-height: 1em;
max-width: 1em;
vertical-align: middle;
}
nav a:hover li, #tagcloud a:hover li {
background: steelblue ;
color: black ;
box-shadow: 2px 2px cyan ;
}
/* This should be genwidth + (navwidth*2) + padding */
@media (min-width: 1200px) {
nav {
float: left ;
vertical-align: middle ;
position: fixed ;
text-align: left ;
font-size: large ;
}
nav li {
display: block ;
text-align: center ;
margin: .5em auto ;
}
}
@media (min-width: 40em) {
.resright, .disappear {
display: block ;
float: right;
padding: 20px ;
clear: both ;
max-height: 300px ;
max-width: 300px ;
}
.resmid {
max-height: 300px ;
max-width: 300px ;
}
main {
max-width: var(--genwidth) ;
}
tr, td {
display: table-cell;
}
td {
float: none;
}
ul.images {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
width: 25em;
overflow-x: auto;
list-style-type: none;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
}