c3d2/c3d2-web
c3d2
/
c3d2-web
37
3
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

now for variable screen widths

This commit is contained in:
nek0 2016-04-15 04:01:52 +02:00
parent 0959f8e1a5
commit f711958c61
1 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
content/static/datenspuren/2016/style/style.css
View File

@ -15,17 +15,14 @@ body {
}
nav {
position: fixed;
top: 0;
/*left: 1100px;*/
right: 0;
position: relative;
text-align: center;
z-index: 5; /* on top of <article> */
padding-top: 10ex;
padding-top: 4ex;
}
nav ul {
width: 60ex;
height: 35ex;
/*width: auto;
height: auto;*/
list-style-type: none;
margin: 0 auto;
padding: 0;
@ -33,34 +30,16 @@ nav ul {
/*font-size: 80%;*/
}
/** Circular menu **/
nav ul > *:nth-of-type(1) {
transform: rotate(-0deg) translate(-30ex) rotate(0deg);
}
nav ul > *:nth-of-type(2) {
transform: rotate(-20deg) translate(-30ex) rotate(20deg);
}
nav ul > *:nth-of-type(3) {
transform: rotate(-40deg) translate(-30ex) rotate(40deg);
}
nav ul > *:nth-of-type(4) {
transform: rotate(-60deg) translate(-30ex) rotate(60deg);
}
nav li {
width: 7.5ex;
height: 7.5ex;
display: inline-block;
border: 0.5px solid #ffffff;
border-radius: 50%;
/*background-color: #ffffff;*/
position: absolute;
position: relative;
}
nav li a {
width: 7.5ex;
height: 7.5ex;
border: 0.5px solid #ffffff;
border-radius: 50%;
display: inline-block;
color: #ffffff;
font-weight: bold;
@ -137,8 +116,9 @@ article {
margin-bottom: 0;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 90px;
max-width: 960px;
padding-left: 5%;
/*max-width: 960px;*/
max-width: 90%;
/*background: url('../images/style/tsd4.png') center top no-repeat;*/
}
article > * {
@ -321,3 +301,46 @@ article .center a img {
article dl dd a {
word-wrap: break-word;
}
/** Circular menu **/
@media (min-width: 1000px) {
nav {
position: fixed;
top: 0;
right: 0;
padding-top: 10ex;
}
nav ul {
width: 40ex;
height: 35ex;
}
nav li {
position: absolute;
right: 0;
}
nav ul > *:nth-of-type(1) {
transform: rotate(-0deg) translate(-30ex) rotate(0deg);
}
nav ul > *:nth-of-type(2) {
transform: rotate(-20deg) translate(-30ex) rotate(20deg);
}
nav ul > *:nth-of-type(3) {
transform: rotate(-40deg) translate(-30ex) rotate(40deg);
}
nav ul > *:nth-of-type(4) {
transform: rotate(-60deg) translate(-30ex) rotate(60deg);
}
article {
padding-left: 90px;
/*max-width: 960px;*/
max-width: 66%;
}
}