peruna/static/css/foundation.css

215 lines
2.5 KiB
CSS
Raw Normal View History

2018-04-03 09:51:11 +00:00
/* base.css */
* {
box-sizing: border-box
}
html {
font-size: 62.5%
}
body {
color: var(--color-text);
font-size: 1.0rem;
font-family: var(--SanFrancisco);
line-height: 1.57
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
font-family: var(--OpenSans)
}
h1 {
font-size: 3.2rem
}
h2 {
font-size: 2.8rem
}
h3 {
font-size: 2.4rem
}
h4 {
font-size: 2.0rem
}
h5 {
font-size: 1.8rem
}
h6 {
font-size: 1.6rem
}
p {
font-size: 1.6rem
}
a {
color: var(--link-color);
text-decoration: none;
&:hover {
color: var(--link-hover)
}
}
ul {
& li {
list-style: disc
}
}
ol {
& li {
list-style: decimal
}
}
li {
font-size: 1.6rem
}
dt {
margin-top: 16px;
font-size: 1.6rem
}
dd {
margin: 8px 0 0 20px;
font-size: 1.6rem
}
pre {
display: block;
padding: 12px;
border-radius: 3px;
background-color: #f8f8f8;
font-size: 1.2rem;
word-wrap: break-word;
overflow: auto
}
code {
line-height: 1.8;
font-size: 1.4rem
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 1.6rem
}
th,
td {
padding: 8px;
border: 1px solid #eee
}
th {
background-color: #fafafa;
font-weight: normal
}
del {
color: #999
}
blockquote {
margin: 0;
padding: 8px 12px;
border-left: 3px solid #ccc;
& * {
margin: 0
}
}
img {
max-width: 100%;
height: auto
}
/* SLICK CSS */
.slick-slider {
position: relative
}
.slick-slide {
margin: 0 8px
}
.slick-arrow {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: #555;
&:hover {
cursor: pointer
}
&::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 5px;
height: 5px;
border: solid #fafafa
}
@media(--md) {
display: none!important
}
}
.slick-prev {
left: -32px;
&::after {
left: 1px;
border-width: 2px 0 0 2px;
transform: rotate(-45deg)
}
}
.slick-next {
right: -32px;
&::after {
right: 1px;
border-width: 2px 2px 0 0;
transform: rotate(45deg)
}
}
/* VARIABLE */
@custom-media --lg(min-width:1024px);
@custom-media --lmd(min-width:768px);
@custom-media --md(max-width:767px);
@custom-media --sm(min-width:640px);
:root {
--SanFrancisco: -apple-system, BlinkMacSystemFont, YakuHanJP, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--OpenSans: 'Open Sans', sans-serif
}
:root {
--bg-color: #fff;
--color-text: #555;
--link-color: #337ab7;
--link-hover: #175081
}