You are here: Raulwiki>Main Web>WebCSS (21 Sep 2017, BrunoTuy)EditAttach

Estilo do Site

Este é o CSS que define a aparência do site do Raul Hacker Club.
%STARTINCLUDE%
html {
  background: url(%ATTACHURL%/papel-math-2.jpg);
  margin: 0px;
  padding: 0px;
}

body {
  min-height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,20,0.1) 0%, rgba(40,50,70,0) 20%,  rgba(40,50,70,0) 75%, rgba(0,0,20,0.15) 100%);
  background-attachment: fixed;
  font-family: "Liberation Sans", Arial, sans-serif;
  font-size: 16px;
  margin: 0px;
  padding: 10px 0px 0px 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 180px;
  position: relative;
  z-index: 10;
}

header h1 {
  margin: 0;
  position: absolute;
  z-index: 20;
  top: 0px;
  left: -250px;
  width: 200px;
  height: 200px;
  background: #000;
  border: 4px solid #FFF;
  border-radius: 50%;
  box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.6);
  font-size: 1px;
}
.loaded header h1 { /* Desloca o logo */
  left: 5%;
  transition: 2s;
}
.scrolled header h1 {
  position: fixed;
  top: 10px;
  left: 40px;
  width: 140px;
  height: 140px;
}

header h1 a {
  color: transparent;
  display: block;
  width: 100%;
  height: 100%;
  background: url(%ATTACHURL%/logo-raulhc.png?v=2) 50% 50%;
  border-radius: 50%;
  background-size: 100%;
  transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
}
.loaded header h1 a { /* Gira o logo */
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: 2s;
}

header img {
  position: absolute;
  top: -15px;
  right: 3%;
  border: 8px solid #F8F8F8;
  background-color: #FFF;
  box-shadow: 2px 2px 9px rgba(0,0,0,0.7);
  transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
}
#top-pics img:first-child {
  top: -5px;
  right: 5%;
  -webkit-transition-delay: 1s;
  transition: 1s 1s;
}
.loaded #top-pics img:first-child {
  top: -15px;
  right: 31%;
  -webkit-transition-delay: 1s;
  transition: 1s 1s;
}

#transistor {
  position: absolute;
  top: -130px;
  right: 50%;
  width: 60px;
  height: 120px;
  background: url(%ATTACHURL%/transistor.png);
}
.loaded #transistor {
  top: 30px;
  right: 62%;
  transition: linear 0.5s 0.0s;
}

#led {
  position: absolute;
  top: -160px;
  right: 65%;
  width: 60px;
  height: 150px;
  background: url(%ATTACHURL%/led.png);
}
.loaded #led {
  top: 30px;
  right: 66%;
  transition: linear 0.5s 0.3s;
}

#resistor {
  position: absolute;
  top: -200px;
  right: 75%;
  width: 50px;
  height: 165px;
  background: url(%ATTACHURL%/resistor.png);
}
.loaded #resistor {
  top: 20px;
  right: 70%;
  transition: linear 0.5s 0.4s;
}

#edit-bt-top {
  position: absolute;
  right: 5%;
  bottom: -80px;
  display: block;
  width: 122px;
  height: 110px;
  background: url(%ATTACHURL%/bt-edit.png);
}
.userWikiGuest #edit-bt-top {
  display: none;
}

#edit-bt-top span {
  display: none;
}

#main {
  position: relative;
  padding: 0% 5% 0% 2%;
}

nav {
  width: 200px;
  position: fixed;
  top: 240px;
  transition: 0.6s;
}
.scrolled nav {
  top: 160px;
  transition: 0.6s;
}

#menu ul {
  margin: 0px;
  padding: 0px;
}
#menu li {
  list-style: none;
  margin: 0px;
  padding: 5px 10px;
  text-align: right;
  font-weight: bold;
}

#menu a {
  display: block;
  padding: 4px 15px;
  text-decoration: none;
  position: relative;
  color: rgba(0,0,0,0.5);
  transition: 0.3s;
}
#menu a:hover {
  color: #FFF;
  transition: 0.3s;
}

#menu a::before {
  content: " ";
  display: block;
  width: 0%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  transition: 0.3s;
}
#menu a:hover::before {
  width: 100%;
  transition: 0.3s;
}

#serv-bts {
  text-align: right;
  padding: 10px 20px;
}

#serv-bts a {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 0px;
  margin: 0px 1px;
  color: transparent;
  font-size: 1px;
  opacity: 0.4;
}
#serv-bts a:hover {
  opacity: 0.8;
}

#bt-irc {
  background: url("data:image/svg+xml,<svg height='40' width='40' xmlns='http://www.w3.org/2000/svg'><path d='m 5,5 15,0 c 2.77,0 5,2.23 5,5 l -5,0 c -2.77,0 -6,2 -6,6 l 0,9 -9,0 C 2.23,25 0,22.77 0,20 L 0,10 C 0,7.23 2.23,5 5,5 z' /><rect ry='5' y='11' x='15' height='20' width='25' /><path d='m 6,24 0,6 6,-6 z' /><path d='m 34,30 0,6 -6,-6 z' /></svg>");
}
#bt-fb {
  background: url("data:image/svg+xml,<svg height='40' width='40' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M 9.6,4 C 6.4,4 4,6.4 4,9.6 L 4,30.4 C 4,33.6 6.4,36 9.6,36 l 11.2,0 0,-12.8 -3.2,0 0,-4.8 3.2,0 0,-4 c 0,-3.2 1.6,-5.6 6.4,-5.6 1.6,0 3.2,0 3.2,0 l 0,4.8 c 0,0 -1.6,0 -3.2,0 -1.6,0 -1.6,0.8 -1.6,1.6 l 0,3.2 4.8,0 0,4.8 -4.8,0 0,12.8 4.8,0 C 33.6,36 36,33.6 36,30.4 L 36,9.6 C 36,6.4 33.6,4 30.4,4 z'/></svg>");
}
#bt-twitter {
  background: url("https://image.flaticon.com/icons/svg/8/8800.svg");
}
#bt-instagram {
  background: url("https://image.flaticon.com/icons/svg/61/61164.svg");
}
#bt-mail {
  background: url("data:image/svg+xml,<svg height='40' width='40' xmlns='http://www.w3.org/2000/svg'><path d='M 3,10 18,20 22,20 37,10 37,9 3,9 z' /><path d='M 14,19 4,31 5,31 14,19 z m 12,0 9,12 1,0 L 26,19 z M 3,11 18,21 22,21 37,11 37,32 3,32 z'/></svg>");
}

#content {
  float: right;
  width: -webkit-calc(100% - 200px);
  width: -moz-calc(100% - 200px);
  width: calc(100% - 200px);
  padding-bottom: 50px;
}

article {
  background: rgba(255,255,255,0.5);
  background-attachment: fixed;
  padding: 40px;
  position: relative;
}

article a img {
  vertical-align: middle;
}

article img {
  max-width: 100%;
}

article hr {
  border: none;
  border-top: 1px dashed rgba(0,80,140,0.4);
}

#titulo {
  margin: 0px 0px 20px -10px;
  font-size: 160%
}
#titulo span {
  position: relative;
  top: 10px;
  left: -10px;
  display: inline-block;
  padding: 2px 10px;
  background: #FFF;
  background: linear-gradient(to bottom, #EEE 0%, #FFF 50%, #FFF 100%);
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3);
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
}

.loaded #titulo span {
  top: 0px;
  left: 0px;
  transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);
  transition: 0.5s 2s;
}

article h2, article h3, article h4, article h5, article h6 { margin-left: -10px; font-size: 140% }
article h4 { font-size: 126% }
article h5 { font-size: 113% }
article h6 { font-size: 100% }
article h2 > span, article h3 > span, article h4 > span, article h5 > span {
  background: rgba(0,0,0,0.9);
  padding: 3px 10px 3px 10px;
  border-radius: 3px;
  color: #fff;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
#content article h2 a, #content article h3 a, #content article h4 a, #content article h5 a, #content article h6 a {
  color: white;
  text-decoration: underline;
}
article h3 > span, article h4 > span, article h5 > span {
  background: rgba(0,0,0,0.8);
  padding: 1px 10px 1px 10px;
}
article h4 > span, article h5 > span, article h6 > span {
  background: rgba(0,0,0,0.7);
}
article h2 > span > a, article h3 > span > a, article h4 > span > a,
article h5 > span > a, article h6 > span > a {
  text-decoration: none;
}
.info-out {
  margin: 1em;
}
.info-out a{
  color: #025;
}
.info {
  display: inline-block;
  padding: 3px;
  border: 3px solid rgba(0,0,0,0.4);
}
.info-content {
  background: rgba(0,0,0,0.4);
  padding: 5px 10px;
}

.info ul, info ol {
  margin: 0.5em 0;
  padding: 0 0 0 1em;
}
.info li {
  margin: 0px;
  padding: 0px;
}
.info p {
  margin: 0.5em;
}

body .foswikiTable { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,60,150,0.4); border-collapse: collapse }
body .foswikiTable td { border: 1px solid rgba(0,60,150,0.2); vertical-align: middle; padding: 3px 8px }
body .foswikiTable th { border: 1px solid rgba(0,60,150,0.2); vertical-align: middle; background-color: rgba(0,30,90,0.1); padding: 3px 8px }
body .foswikiTable th a:link { color: #000; text-decoration: none }
body .foswikiTable th a:visited { color: #000 }
body .foswikiTable th a:hover { color: #000; background-color: transparent }
body .foswikiTable th.foswikiSortedCol { background-color: rgba(200,180,0,0.3) }
body .foswikiTable tr.foswikiTableRowdataBg0 td { background-color: transparent }
body .foswikiTable tr.foswikiTableRowdataBg0 td.foswikiSortedCol { background-color: rgba(255,210,0,0.2) }
body .foswikiTable tr.foswikiTableRowdataBg1 td {background-color: transparent }
body .foswikiTable tr.foswikiTableRowdataBg1 td.foswikiSortedCol { background-color: rgba(255,210,0,0.2) }

.foswikiToc {
  clear: right;
  float: right;
  font-size: 90%;
  width: 20%;
  margin-left: 15px;
  border-left: 1px dashed rgba(0,50,200,0.3);
}

#ctrl {
  float: right;
  font-size: 80%;
  text-align: right;
  padding-bottom: 20px;
  color: rgba(0,0,0,0.5);
}

.userWikiGuest #pre-ctrl {
  display: none;
}

#ctrl a {
  text-decoration: none;
}

#ctrl a.action {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(0,50,230,0.1);
}
#ctrl a.action:hover {
  background: rgba(0,50,230,0.5);
  color: #FFF;
}

#ctrl img {
  vertical-align: middle;
}

#path {
  float: left;
  font-size: 80%;
  white-space: nowrap;
}

.path-sep {
  font-size: 130%
  font-weight: bold;
  color: rgba(0,0,0,0.4);
}

#rev {
  clear: left;
  float: left;
  padding-top: 3px;
  opacity: 0.5;
}
#rev:hover {
  opacity: 1;
}

#rev a {
  text-decoration: none;
}

#contributors {
  font-size: 80%;
  opacity: 0;
}
#rev:hover #contributors {
  opacity: 1;
}

#contributors img {
  vertical-align: middle;
}

a.foswikiNewLink {
  color: red;
}
a.foswikiNewLink:before {
    content: "\270E";
}

/* * * Eventos * * * * * * * * * * * * * * * * * * * * * * */

#eventos ul {
  margin: 0px;
  padding: 0px;
}

#eventos li {
  margin: 10px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  width: 200px;
  text-align: center;
  position: relative;
}

#eventos li a {
  text-decoration: none;
  color: #333;
}

#eventos li .dateBox {
  display: inline-block;
  position: relative;
  width: 164px;
  height: 164px;
}

#eventos li i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #DDD;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: 0 0 12px rgba(0,0,0,0.38); 
  border-radius: 50%;
  font-style: normal;
  transition: 0.33s;
}

#eventos li:hover i {
  top: -20px;
  left: -20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5); 
  transition: 0.33s;
}

#eventos li i .date {
  display: block;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  padding: 24px 22px 20px 22px;
  background: rgba(220,220,220,0.3);
  font-size: 100px;
  line-height: 80px;
  transition: 0.33s;
}

#eventos li:hover i .date {
  background: transparent;
  opacity: 0.8;
  width: 160px;
  height: 160px;
  font-size: 135px;
  line-height: 100px;
  transition: 0.33s; 
}

#eventos li:hover i.has-img .date {
  opacity: 0.5;
}

#eventos li i .date * {
  display: block;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 2px 2px 1px #FFF, -2px 2px 1px #FFF, -2px -2px 1px #FFF, 2px -2px 1px #FFF,
               2px 2px 1px #FFF, -2px 2px 1px #FFF, -2px -2px 1px #FFF, 2px -2px 1px #FFF; /* duplicada para reforçar */
}

#eventos li i .mes {
  font-size: 18%;
  line-height: 100%;
}

#eventos li i .dia {
  letter-spacing: -1px;
}

#eventos li i .ano {
  font-size: 20%;
  line-height: 100%;
}

#eventos li strong {
  display: block;
}

#eventos li .sep {
  display: none;
}

#eventos li p { /* location */
  position: absolute;
  display: none;
  z-index: 10;
  color: #FFF;
  border-radius: 15px;
  margin: 0px;
  width: 150px;
  top: -10px;
  left: 175px;
  padding: 10px;
  font-size: 12px;
  background: #999;
}

#eventos li:hover p {
  display: block;
}

#eventos li p:before {
  content: "\25e2";
  color: #FFF;
  position: absolute;
  bottom: 15px;
  left: -15px;
  font-size: 20px;
  color: #999;
}

/* * * Últimas Atualizações * * * * * * * * * * * * * * * * * * * * * * * * * * */

%INCLUDE{"Main.UltimasAtualizacoes" section="CSS"}%

/* * * SOBRE * * * * * * * * * * * * * * * * * * * * * * * * * * */

.sobre-persona {
  min-height: 100px;
}

.sobre-persona .pic {
  float: left;
  margin-right: 15px;
}

.sobre-persona h6 {
  margin: 20px;
  font-weight: normal;
}
.sobre-persona h6 > span {
  padding: 0;
  background: transparent;
}

.sobre-persona h6 a {
  font-weight: bold;
  font-size: 125%;
}
/* mais destaque para campos obrigatórios que não foram preenchidos */

.error{
color:red  !important ;
font weight:bold  !important ;
}
%STOPINCLUDE%
Topic attachments
I Attachment Action Size Date Who Comment
arduino-4784333051_541902e9b7-ed.jpgjpg arduino-4784333051_541902e9b7-ed.jpg manage 46.7 K 05 May 2014 - 03:19 AurelioAHeckert  
bt-edit.pngpng bt-edit.png manage 16.8 K 25 May 2014 - 00:03 AurelioAHeckert  
hacker-8442476626_0dd3ece317-ed.jpgjpg hacker-8442476626_0dd3ece317-ed.jpg manage 24.4 K 05 May 2014 - 03:19 AurelioAHeckert  
led.pngpng led.png manage 6.7 K 05 May 2014 - 03:16 AurelioAHeckert  
logo-raulhc.pngpng logo-raulhc.png manage 38.1 K 26 Mar 2017 - 18:15 ViniciusMelo  
papel-math-2.jpgjpg papel-math-2.jpg manage 28.4 K 05 May 2014 - 03:14 AurelioAHeckert  
raul.icoico raul.ico manage 1.1 K 05 May 2014 - 03:44 AurelioAHeckert  
resistor.pngpng resistor.png manage 9.2 K 05 May 2014 - 03:16 AurelioAHeckert  
transistor.pngpng transistor.png manage 8.5 K 05 May 2014 - 03:17 AurelioAHeckert  
Topic revision: r31 - 21 Sep 2017, BrunoTuy
 

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Raulwiki? Send feedback